CINXE.COM

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="google-site-verification" content="oEIXStPkz10e-rS6gJ06ZIfLKa-Qwft7pQSD9u5gPOY" />  <title>Zero Block: Creating Unique Designs</title> <meta name="description" content="Part One: Getting started with Zero Block web design editor on Tilda" /> <meta property="og:url" content="https://help.tilda.cc/zero" /> <meta property="og:title" content="Zero Block: Creating Unique Designs" /> <meta property="og:description" content="Part One: Getting started with Zero Block web design editor on Tilda" /> <meta property="og:type" content="website" /> <meta property="og:image" content="https://static.tildacdn.com/tild3738-3631-4138-a465-346433616234/____Help.png" /> <link rel="canonical" href="https://help.tilda.cc/zero">  <meta name="format-detection" content="telephone=no" /> <meta http-equiv="x-dns-prefetch-control" content="on"> <link rel="dns-prefetch" href="https://ws.tildacdn.com"> <link rel="dns-prefetch" href="https://static.tildacdn.com"> <link rel="shortcut icon" href="https://static.tildacdn.com/img/tildafavicon.ico" type="image/x-icon" />  <script src="https://neo.tildacdn.com/js/tilda-fallback-1.0.min.js" async charset="utf-8"></script> <link rel="stylesheet" href="https://static.tildacdn.com/css/tilda-grid-3.0.min.css" type="text/css" media="all" onerror="this.loaderr='y';"/> <link rel="stylesheet" href="https://static.tildacdn.com/ws/project6518/tilda-blocks-page260966.min.css?t=1734965495" type="text/css" media="all" onerror="this.loaderr='y';" /> <link rel="stylesheet" href="https://static.tildacdn.com/css/tilda-popup-1.1.min.css" type="text/css" media="print" onload="this.media='all';" onerror="this.loaderr='y';" /> <noscript><link rel="stylesheet" href="https://static.tildacdn.com/css/tilda-popup-1.1.min.css" type="text/css" media="all" /></noscript> <link rel="stylesheet" href="https://static.tildacdn.com/css/tilda-cards-1.0.min.css" type="text/css" media="all" onerror="this.loaderr='y';" /> <link rel="stylesheet" href="https://static.tildacdn.com/css/tooltipster.min.css" type="text/css" media="all" onerror="this.loaderr='y';" /> <link rel="stylesheet" href="https://static.tildacdn.com/css/tilda-zoom-2.0.min.css" type="text/css" media="print" onload="this.media='all';" onerror="this.loaderr='y';" /> <noscript><link rel="stylesheet" href="https://static.tildacdn.com/css/tilda-zoom-2.0.min.css" type="text/css" media="all" /></noscript> <link rel="stylesheet" href="https://static.tildacdn.com/css/fonts-tildasans.css" type="text/css" media="all" onerror="this.loaderr='y';" /> <script nomodule src="https://static.tildacdn.com/js/tilda-polyfill-1.0.min.js" charset="utf-8"></script> <script type="text/javascript">function t_onReady(func) {if(document.readyState!='loading') {func();} else {document.addEventListener('DOMContentLoaded',func);}} function t_onFuncLoad(funcName,okFunc,time) {if(typeof window[funcName]==='function') {okFunc();} else {setTimeout(function() {t_onFuncLoad(funcName,okFunc,time);},(time||100));}}function t_throttle(fn,threshhold,scope) {return function() {fn.apply(scope||this,arguments);};}function t396_initialScale(t){t=document.getElementById("rec"+t);if(t){t=t.querySelector(".t396__artboard");if(t){var e,r=document.documentElement.clientWidth,a=[];if(i=t.getAttribute("data-artboard-screens"))for(var i=i.split(","),l=0;l<i.length;l++)a[l]=parseInt(i[l],10);else a=[320,480,640,960,1200];for(l=0;l<a.length;l++){var n=a[l];n<=r&&(e=n)}var o="edit"===window.allrecords.getAttribute("data-tilda-mode"),d="center"===t396_getFieldValue(t,"valign",e,a),c="grid"===t396_getFieldValue(t,"upscale",e,a),s=t396_getFieldValue(t,"height_vh",e,a),u=t396_getFieldValue(t,"height",e,a),g=!!window.opr&&!!window.opr.addons||!!window.opera||-1!==navigator.userAgent.indexOf(" OPR/");if(!o&&d&&!c&&!s&&u&&!g){for(var _=parseFloat((r/e).toFixed(3)),f=[t,t.querySelector(".t396__carrier"),t.querySelector(".t396__filter")],l=0;l<f.length;l++)f[l].style.height=Math.floor(parseInt(u,10)*_)+"px";t396_scaleInitial__getElementsToScale(t).forEach(function(t){t.style.zoom=_})}}}}function t396_scaleInitial__getElementsToScale(t){return t?Array.prototype.slice.call(t.children).filter(function(t){return t&&(t.classList.contains("t396__elem")||t.classList.contains("t396__group"))}):[]}function t396_getFieldValue(t,e,r,a){var i=a[a.length-1],l=r===i?t.getAttribute("data-artboard-"+e):t.getAttribute("data-artboard-"+e+"-res-"+r);if(!l)for(var n=0;n<a.length;n++){var o=a[n];if(!(o<=r)&&(l=o===i?t.getAttribute("data-artboard-"+e):t.getAttribute("data-artboard-"+e+"-res-"+o)))break}return l}window.onerror=function(m,f,l,c,e) {if(!window.t_jserrors)window.t_jserrors=[];window.t_jserrors.push({message:m,filename:f,lineno:l,colno:c,error:e});}</script> <script src="https://static.tildacdn.com/js/jquery-1.10.2.min.js" charset="utf-8" onerror="this.loaderr='y';"></script> <script src="https://static.tildacdn.com/js/tilda-scripts-3.0.min.js" charset="utf-8" async onerror="this.loaderr='y';"></script> <script src="https://static.tildacdn.com/ws/project6518/tilda-blocks-page260966.min.js?t=1734965495" charset="utf-8" async onerror="this.loaderr='y';"></script> <script src="https://static.tildacdn.com/js/tilda-lazyload-1.0.min.js" charset="utf-8" async onerror="this.loaderr='y';"></script> <script src="https://static.tildacdn.com/js/tilda-video-1.0.min.js" charset="utf-8" async onerror="this.loaderr='y';"></script> <script src="https://static.tildacdn.com/js/tilda-popup-1.0.min.js" charset="utf-8" async onerror="this.loaderr='y';"></script> <script src="https://static.tildacdn.com/js/tilda-cards-1.0.min.js" charset="utf-8" async onerror="this.loaderr='y';"></script> <script src="https://static.tildacdn.com/js/hammer.min.js" charset="utf-8" async onerror="this.loaderr='y';"></script> <script src="https://static.tildacdn.com/js/tilda-zero-1.1.min.js" charset="utf-8" async onerror="this.loaderr='y';"></script> <script src="https://static.tildacdn.com/js/tilda-video-processor-1.0.min.js" charset="utf-8" async onerror="this.loaderr='y';"></script> <script src="https://static.tildacdn.com/js/tilda-tooltip-1.0.min.js" charset="utf-8" async onerror="this.loaderr='y';"></script> <script src="https://static.tildacdn.com/js/tilda-menu-1.0.min.js" charset="utf-8" async onerror="this.loaderr='y';"></script> <script src="https://static.tildacdn.com/js/tilda-zoom-2.0.min.js" charset="utf-8" async onerror="this.loaderr='y';"></script> <script src="https://static.tildacdn.com/js/tilda-zero-scale-1.0.min.js" charset="utf-8" async onerror="this.loaderr='y';"></script> <script src="https://static.tildacdn.com/js/tilda-skiplink-1.0.min.js" charset="utf-8" async onerror="this.loaderr='y';"></script> <script src="https://static.tildacdn.com/js/tilda-events-1.0.min.js" charset="utf-8" async onerror="this.loaderr='y';"></script>  <script> (function(h,o,t,j,a,r){ h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)}; h._hjSettings={hjid:2424106,hjsv:6}; a=o.getElementsByTagName('head')[0]; r=o.createElement('script');r.async=1; r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv; a.appendChild(r); })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv='); </script>  <script src="//static.tildacdn.com/js/tilda-cc-help-langs-dropdown.min.js"></script>  <link rel="alternate" hreflang="en" href="https://help.tilda.cc"> <link rel="alternate" hreflang="pt-br" href="https://pt.help.tilda.cc"> <link rel="alternate" hreflang="fr" href="https://fr.help.tilda.cc"> <link rel="alternate" hreflang="de" href="https://de.help.tilda.cc"> <link rel="alternate" hreflang="it" href="https://it.help.tilda.cc"> <link rel="alternate" hreflang="ja" href="https://ja.help.tilda.cc"> <link rel="alternate" hreflang="pl" href="https://pl.help.tilda.cc"> <link rel="alternate" hreflang="es" href="https://es.help.tilda.cc"> <script type="text/javascript" src="https://cdn.weglot.com/weglot.min.js"></script> <script> Weglot.initialize({ api_key: 'wg_371e0d36f0d1c87c9439e1bdc93a6fc18' }); </script><script type="text/javascript">window.dataLayer=window.dataLayer||[];</script> <script type="text/javascript">(function() {if((/bot|google|yandex|baidu|bing|msn|duckduckbot|teoma|slurp|crawler|spider|robot|crawling|facebook/i.test(navigator.userAgent))===false&&typeof(sessionStorage)!='undefined'&&sessionStorage.getItem('visited')!=='y'&&document.visibilityState){var style=document.createElement('style');style.type='text/css';style.innerHTML='@media screen and (min-width: 980px) {.t-records {opacity: 0;}.t-records_animated {-webkit-transition: opacity ease-in-out .2s;-moz-transition: opacity ease-in-out .2s;-o-transition: opacity ease-in-out .2s;transition: opacity ease-in-out .2s;}.t-records.t-records_visible {opacity: 1;}}';document.getElementsByTagName('head')[0].appendChild(style);function t_setvisRecs(){var alr=document.querySelectorAll('.t-records');Array.prototype.forEach.call(alr,function(el) {el.classList.add("t-records_animated");});setTimeout(function() {Array.prototype.forEach.call(alr,function(el) {el.classList.add("t-records_visible");});sessionStorage.setItem("visited","y");},400);} document.addEventListener('DOMContentLoaded',t_setvisRecs);}})();</script></head> <body class="t-body" style="margin:0;">  <div id="allrecords" class="t-records" data-hook="blocks-collection-content-node" data-tilda-project-id="6518" data-tilda-page-id="260966" data-tilda-page-alias="zero" data-tilda-formskey="0bbdd5272d658d3de5798b262a4fe80b" data-tilda-cookie="no" data-tilda-lazy="yes" data-tilda-root-zone="one" data-tilda-project-headcode="yes">  <header id="t-header" class="t-records" data-hook="blocks-collection-content-node" data-tilda-project-id="6518" data-tilda-page-id="47492" data-tilda-formskey="0bbdd5272d658d3de5798b262a4fe80b" data-tilda-cookie="no" data-tilda-lazy="yes" data-tilda-root-zone="one" data-tilda-project-headcode="yes"> <div id="rec310544707" class="r t-rec" style=" " data-animationappear="off" data-record-type="131">  <div class="t123"> <div class="t-container_100 "> <div class="t-width t-width_100 ">  <script>window.tilda_help_language='EN';</script> <script src='https://static.tildacdn.com/js/tilda-search-help-1.2.min.js'></script>  </div> </div> </div> </div> <div id="rec49203293" class="r t-rec" style=" " data-animationappear="off" data-record-type="830">   <div id="nav49203293marker"></div> <div id="nav49203293" class="t830" data-menu="yes"> <div class="t830__panel t830__panel_bg t830__panel_hover t830__panel_close" style=""> <div class="t830__menu__content "> <button type="button" class="t830__burger t830__burger_mobile" aria-label="Navigation menu" aria-expanded="false"> <span style="background-color:#000000"></span> <span style="background-color:#000000"></span> <span style="background-color:#000000"></span> <span style="background-color:#000000"></span> </button> <div class="t830__side"> <button type="button" class="t830__burger" aria-label="Navigation menu" aria-expanded="false" style=""> <span style="background-color:#ffffff;"></span> <span style="background-color:#ffffff;"></span> <span style="background-color:#ffffff;"></span> <span style="background-color:#ffffff;"></span> </button> </div> </div> <div class="t830__panel-text t-descr t-descr_sm" style="">Help Center</div> </div> <div class="t830m__overlay"> <div class="t830m__overlay_bg" style=" "></div> </div> <div class="t830m t830m_bg t830m_close"> <div class="t830m__container"> <button type="button" class="t830m__close-button t830m__close t830m__close_bg t830m_opened" aria-label="Close menu"> <div class="t830m__close_icon t830m__close_icon_none"> <span style="background-color:#000000"></span> <span style="background-color:#000000"></span> <span style="background-color:#000000"></span> <span style="background-color:#000000"></span> </div> </button> <div class="t830m__top t830m__top_addwrap t830m__top_padd t830m__top_padd-text"> <div class="t830m__wrap"> <div class="t830__logo__container t830__textlogo__container"> <div class="t830__logo__content"> <a class="t830__logo" href="/"> <div field="descr" class="t830__logo__text t-name t-name_md">Help Center</div> </a> </div> </div> <div class="t830m__menu"> <div class="t830__wrapper t-site-search-input" data-sidemenu-search="yes"> <div class="t830__blockinput t830__blockinput_padding"> <input type="text" class="t830__input t-input" placeholder="Search" data-search-target="all" style=""> <svg role="presentation" class="t830__search-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 88 88"> <path fill="#b6b6b6" d="M85 31.1c-.5-8.7-4.4-16.6-10.9-22.3C67.6 3 59.3 0 50.6.6c-8.7.5-16.7 4.4-22.5 11-11.2 12.7-10.7 31.7.6 43.9l-5.3 6.1-2.5-2.2-17.8 20 9 8.1 17.8-20.2-2.1-1.8 5.3-6.1c5.8 4.2 12.6 6.3 19.3 6.3 9 0 18-3.7 24.4-10.9 5.9-6.6 8.8-15 8.2-23.7zM72.4 50.8c-9.7 10.9-26.5 11.9-37.6 2.3-10.9-9.8-11.9-26.6-2.3-37.6 4.7-5.4 11.3-8.5 18.4-8.9h1.6c6.5 0 12.7 2.4 17.6 6.8 5.3 4.7 8.5 11.1 8.9 18.2.5 7-1.9 13.8-6.6 19.2z"/> </svg> </div> </div> <div class="t830m__list"> <div class="t830m__list-item"> <div class="t830m__list-title t830m__list-title_toggle"> <div class="t830m__list-title-text t-descr t-menu__link-item t830m__list-title-text_opacity">Getting started</div> </div> <div class="t830m__submenu t830m__submenu_close"> <div class="t830m__submenu-item"> <a class="t-menusub__link-item t-descr" href="/getstarted" data-menu-item-number="1">How Tilda Works</a> </div> <div class="t830m__submenu-item"> <a class="t-menusub__link-item t-descr" href="/page-actions#createpage" data-menu-item-number="2">Create a New Page</a> </div> <div class="t830m__submenu-item"> <a class="t-menusub__link-item t-descr" href="/page-actions#copypage" data-menu-item-number="3">Copy a Page</a> </div> <div class="t830m__submenu-item"> <a class="t-menusub__link-item t-descr" href="/page-actions#transferpage" data-menu-item-number="4">Transfer a Page</a> </div> <div class="t830m__submenu-item"> <a class="t-menusub__link-item t-descr" href="/page-actions#pageorder" data-menu-item-number="5">Rearrange Pages</a> </div> </div> </div> <div class="t830m__list-item"> <div class="t830m__list-title t830m__list-title_toggle"> <div class="t830m__list-title-text t-descr t-menu__link-item t830m__list-title-text_opacity">Site settings</div> </div> <div class="t830m__submenu t830m__submenu_close"> <div class="t830m__submenu-item"> <a class="t-menusub__link-item t-descr" href="/domain" data-menu-item-number="1">Buy a Domain Name</a> </div> <div class="t830m__submenu-item"> <a class="t-menusub__link-item t-descr" href="/customdomain" data-menu-item-number="2">Connect a Domain Name</a> </div> <div class="t830m__submenu-item"> <a class="t-menusub__link-item t-descr" href="/dns" data-menu-item-number="3">Set up DNS</a> </div> <div class="t830m__submenu-item"> <a class="t-menusub__link-item t-descr" href="/customdomain/errors" data-menu-item-number="4">Troubleshooting Custom Domain Errors</a> </div> <div class="t830m__submenu-item"> <a class="t-menusub__link-item t-descr" href="/home-page" data-menu-item-number="5">Home Page</a> </div> <div class="t830m__submenu-item"> <a class="t-menusub__link-item t-descr" href="/header-footer" data-menu-item-number="6">Header and Footer</a> </div> <div class="t830m__submenu-item"> <a class="t-menusub__link-item t-descr" href="/fonts" data-menu-item-number="7">Set Website Fonts</a> </div> <div class="t830m__submenu-item"> <a class="t-menusub__link-item t-descr" href="/export" data-menu-item-number="8">Code Export</a> </div> <div class="t830m__submenu-item"> <a class="t-menusub__link-item t-descr" href="/transfer" data-menu-item-number="9">Project Transfer</a> </div> <div class="t830m__submenu-item"> <a class="t-menusub__link-item t-descr" href="/address" data-menu-item-number="10">Free tilda.ws Subdomain</a> </div> <div class="t830m__submenu-item"> <a class="t-menusub__link-item t-descr" href="/colors" data-menu-item-number="11">Set Color Preferences</a> </div> <div class="t830m__submenu-item"> <a class="t-menusub__link-item t-descr" href="/redirect" data-menu-item-number="12">Create URL Redirects</a> </div> <div class="t830m__submenu-item"> <a class="t-menusub__link-item t-descr" href="/https" data-menu-item-number="13">Set Up HTTPS</a> </div> <div class="t830m__submenu-item"> <a class="t-menusub__link-item t-descr" href="/folders" data-menu-item-number="14">Page Folders</a> </div> </div> </div> <div class="t830m__list-item"> <div class="t830m__list-title t830m__list-title_toggle"> <div class="t830m__list-title-text t-descr t-menu__link-item t830m__list-title-text_opacity">Page editing</div> </div> <div class="t830m__submenu t830m__submenu_close"> <div class="t830m__submenu-item"> <a class="t-menusub__link-item t-descr" href="/menu" data-menu-item-number="1">Add a Navigation Menu</a> </div> <div class="t830m__submenu-item"> <a class="t-menusub__link-item t-descr" href="/anchor" data-menu-item-number="2">Anchors and Internal Links</a> </div> <div class="t830m__submenu-item"> <a class="t-menusub__link-item t-descr" href="/mobile-version" data-menu-item-number="3">Viewing on Mobile Devices</a> </div> <div class="t830m__submenu-item"> <a class="t-menusub__link-item t-descr" href="/html" data-menu-item-number="4">Embed HTML Code</a> </div> <div class="t830m__submenu-item"> <a class="t-menusub__link-item t-descr" href="/google-maps" data-menu-item-number="5">Add Google Maps</a> </div> <div class="t830m__submenu-item"> <a class="t-menusub__link-item t-descr" href="/bilingual" data-menu-item-number="6">Create Multilingual Websites</a> </div> <div class="t830m__submenu-item"> <a class="t-menusub__link-item t-descr" href="/photo-for-publishing" data-menu-item-number="7">Prepare Images for Publishing Online</a> </div> <div class="t830m__submenu-item"> <a class="t-menusub__link-item t-descr" href="/cover" data-menu-item-number="8">Pitch a Cover</a> </div> <div class="t830m__submenu-item"> <a class="t-menusub__link-item t-descr" href="/unbroken-space" data-menu-item-number="9">Non-Breaking Space & Soft Hyphen</a> </div> <div class="t830m__submenu-item"> <a class="t-menusub__link-item t-descr" href="/published" data-menu-item-number="10">Page Publishing</a> </div> <div class="t830m__submenu-item"> <a class="t-menusub__link-item t-descr" href="/callback" data-menu-item-number="11">Add a Feedback Widget</a> </div> <div class="t830m__submenu-item"> <a class="t-menusub__link-item t-descr" href="/metadata" data-menu-item-number="12">Preview on Facebook</a> </div> <div class="t830m__submenu-item"> <a class="t-menusub__link-item t-descr" href="/comments" data-menu-item-number="13">Add a Comment Section</a> </div> <div class="t830m__submenu-item"> <a class="t-menusub__link-item t-descr" href="/instagram" data-menu-item-number="14">Embed Instagram Feed</a> </div> <div class="t830m__submenu-item"> <a class="t-menusub__link-item t-descr" href="/index" data-menu-item-number="15">List of Posts or Index Page</a> </div> </div> </div> <div class="t830m__list-item"> <div class="t830m__list-title t830m__list-title_toggle"> <div class="t830m__list-title-text t-descr t-menu__link-item t830m__list-title-text_opacity">Online store and payments</div> </div> <div class="t830m__submenu t830m__submenu_close"> <div class="t830m__submenu-item"> <a class="t-menusub__link-item t-descr" href="/online-store" data-menu-item-number="1">Online Store and Payments Processing</a> </div> <div class="t830m__submenu-item"> <a class="t-menusub__link-item t-descr" href="/online-store/catalog" data-menu-item-number="2">Add Products to an Online Store</a> </div> <div class="t830m__submenu-item"> <a class="t-menusub__link-item t-descr" href="/online-store/cart" data-menu-item-number="3">Set Up a Shopping Cart</a> </div> <div class="t830m__submenu-item"> <a class="t-menusub__link-item t-descr" href="/online-store/direct-sale" data-menu-item-number="4">Direct Sale of Products</a> </div> <div class="t830m__submenu-item"> <a class="t-menusub__link-item t-descr" href="/online-store/payment-systems" data-menu-item-number="5">Assign a Payment System</a> </div> <div class="t830m__submenu-item"> <a class="t-menusub__link-item t-descr" href="/online-store-payments/payment-system/stripe" data-menu-item-number="6">Set up Stripe</a> </div> <div class="t830m__submenu-item"> <a class="t-menusub__link-item t-descr" href="/online-store-payments/payment-system/paypal" data-menu-item-number="7">Set up PayPal</a> </div> <div class="t830m__submenu-item"> <a class="t-menusub__link-item t-descr" href="/payments/2checkout" data-menu-item-number="8">Set Up 2Checkout</a> </div> <div class="t830m__submenu-item"> <a class="t-menusub__link-item t-descr" href="/online-store/notifications" data-menu-item-number="9">Send Order Notifications</a> </div> <div class="t830m__submenu-item"> <a class="t-menusub__link-item t-descr" href="/online-store/without-payment" data-menu-item-number="10">Sell without an Online Payment System</a> </div> <div class="t830m__submenu-item"> <a class="t-menusub__link-item t-descr" href="/online-store/one-product" data-menu-item-number="11">Selling a Single Product</a> </div> <div class="t830m__submenu-item"> <a class="t-menusub__link-item t-descr" href="/online-store/parameters" data-menu-item-number="12">Add Product Variants</a> </div> <div class="t830m__submenu-item"> <a class="t-menusub__link-item t-descr" href="/online-store/shipping" data-menu-item-number="13">Delivery options</a> </div> <div class="t830m__submenu-item"> <a class="t-menusub__link-item t-descr" href="/online-store-payments/additional-goods" data-menu-item-number="14">Complementary Products</a> </div> <div class="t830m__submenu-item"> <a class="t-menusub__link-item t-descr" href="/online-store-payments/promo-codes" data-menu-item-number="15">Create a Promo Code (Discount)</a> </div> </div> </div> <div class="t830m__list-item"> <div class="t830m__list-title t830m__list-title_toggle"> <div class="t830m__list-title-text t-descr t-menu__link-item t830m__list-title-text_opacity">Forms</div> </div> <div class="t830m__submenu t830m__submenu_close"> <div class="t830m__submenu-item"> <a class="t-menusub__link-item t-descr" href="/forms/settings" data-menu-item-number="1">Set Up Data Capture Forms</a> </div> <div class="t830m__submenu-item"> <a class="t-menusub__link-item t-descr" href="/forms" data-menu-item-number="2">Data Capture Forms</a> </div> <div class="t830m__submenu-item"> <a class="t-menusub__link-item t-descr" href="/forms/email" data-menu-item-number="3">Email</a> </div> <div class="t830m__submenu-item"> <a class="t-menusub__link-item t-descr" href="/forms/google-sheets" data-menu-item-number="4">Google Sheets</a> </div> <div class="t830m__submenu-item"> <a class="t-menusub__link-item t-descr" href="/formsmailchimp" data-menu-item-number="5">MailChimp</a> </div> <div class="t830m__submenu-item"> <a class="t-menusub__link-item t-descr" href="/formsgoogle" data-menu-item-number="6">Google Form</a> </div> <div class="t830m__submenu-item"> <a class="t-menusub__link-item t-descr" href="/formssendgrid" data-menu-item-number="7">SendGrid</a> </div> <div class="t830m__submenu-item"> <a class="t-menusub__link-item t-descr" href="/formssendinblue" data-menu-item-number="8">SendinBlue</a> </div> <div class="t830m__submenu-item"> <a class="t-menusub__link-item t-descr" href="/forms/selzy" data-menu-item-number="9">Selzy</a> </div> <div class="t830m__submenu-item"> <a class="t-menusub__link-item t-descr" href="/formsamocrm" data-menu-item-number="10">Kommo</a> </div> <div class="t830m__submenu-item"> <a class="t-menusub__link-item t-descr" href="/formspipedrive" data-menu-item-number="11">Pipedrive</a> </div> <div class="t830m__submenu-item"> <a class="t-menusub__link-item t-descr" href="/formszohocrm" data-menu-item-number="12">Zoho CRM</a> </div> <div class="t830m__submenu-item"> <a class="t-menusub__link-item t-descr" href="/formstrello" data-menu-item-number="13">Trello</a> </div> <div class="t830m__submenu-item"> <a class="t-menusub__link-item t-descr" href="/formstelegram" data-menu-item-number="14">Telegram</a> </div> <div class="t830m__submenu-item"> <a class="t-menusub__link-item t-descr" href="/formsslack" data-menu-item-number="15">Slack</a> </div> <div class="t830m__submenu-item"> <a class="t-menusub__link-item t-descr" href="/formszapier" data-menu-item-number="16">Zapier</a> </div> <div class="t830m__submenu-item"> <a class="t-menusub__link-item t-descr" href="/formsmailerlite" data-menu-item-number="17">MailerLite</a> </div> <div class="t830m__submenu-item"> <a class="t-menusub__link-item t-descr" href="/forms/notion" data-menu-item-number="18">Notion</a> </div> <div class="t830m__submenu-item"> <a class="t-menusub__link-item t-descr" href="/forms/salesforce" data-menu-item-number="19">Salesforce</a> </div> <div class="t830m__submenu-item"> <a class="t-menusub__link-item t-descr" href="/formshubspot" data-menu-item-number="20">Hubspot</a> </div> <div class="t830m__submenu-item"> <a class="t-menusub__link-item t-descr" href="/formswebhook" data-menu-item-number="21">Webhook</a> </div> <div class="t830m__submenu-item"> <a class="t-menusub__link-item t-descr" href="/formsscript" data-menu-item-number="22">Custom Scripts</a> </div> <div class="t830m__submenu-item"> <a class="t-menusub__link-item t-descr" href="/forms-errors" data-menu-item-number="23">Avoid errors in the forms</a> </div> <div class="t830m__submenu-item"> <a class="t-menusub__link-item t-descr" href="/forms/monday" data-menu-item-number="24">Monday.com</a> </div> </div> </div> <div class="t830m__list-item"> <div class="t830m__list-title t830m__list-title_toggle"> <div class="t830m__list-title-text t-descr t-menu__link-item t830m__list-title-text_opacity">Analytics</div> </div> <div class="t830m__submenu t830m__submenu_close"> <div class="t830m__submenu-item"> <a class="t-menusub__link-item t-descr" href="/statistic" data-menu-item-number="1">Track Website Statistics</a> </div> <div class="t830m__submenu-item"> <a class="t-menusub__link-item t-descr" href="/statistic/google-analytics" data-menu-item-number="2">Google Analytics</a> </div> <div class="t830m__submenu-item"> <a class="t-menusub__link-item t-descr" href="/googletagmanager" data-menu-item-number="3">Google Tag Manager</a> </div> <div class="t830m__submenu-item"> <a class="t-menusub__link-item t-descr" href="/statistics-goal" data-menu-item-number="4">Submit Goal Completion Rates</a> </div> </div> </div> <div class="t830m__list-item"> <div class="t830m__list-title t830m__list-title_toggle"> <div class="t830m__list-title-text t-descr t-menu__link-item t830m__list-title-text_opacity">SEO</div> </div> <div class="t830m__submenu t830m__submenu_close"> <div class="t830m__submenu-item"> <a class="t-menusub__link-item t-descr" href="/search-engine" data-menu-item-number="1">Promote Your Website Online</a> </div> </div> </div> <div class="t830m__list-item"> <div class="t830m__list-title t830m__list-title_toggle"> <div class="t830m__list-title-text t-descr t-menu__link-item t830m__list-title-text_opacity">Zero Block</div> </div> <div class="t830m__submenu t830m__submenu_close"> <div class="t830m__submenu-item"> <a class="t-menusub__link-item t-descr" href="/zero" data-menu-item-number="1">Create a Custom Block</a> </div> <div class="t830m__submenu-item"> <a class="t-menusub__link-item t-descr" href="/zero/advanced" data-menu-item-number="2">Responsive Design</a> </div> <div class="t830m__submenu-item"> <a class="t-menusub__link-item t-descr" href="/zero/shortcuts" data-menu-item-number="3">Keyboard Shortcuts List</a> </div> <div class="t830m__submenu-item"> <a class="t-menusub__link-item t-descr" href="/zero/animation" data-menu-item-number="4">Animation</a> </div> <div class="t830m__submenu-item"> <a class="t-menusub__link-item t-descr" href="/zero/advanced-animation" data-menu-item-number="5">Step-by-Step Animation</a> </div> <div class="t830m__submenu-item"> <a class="t-menusub__link-item t-descr" href="/zero/figma-import" data-menu-item-number="6">Import from Figma</a> </div> </div> </div> <div class="t830m__list-item"> <div class="t830m__list-title t830m__list-title_toggle"> <div class="t830m__list-title-text t-descr t-menu__link-item t830m__list-title-text_opacity">Email campaign builder</div> </div> <div class="t830m__submenu t830m__submenu_close"> <div class="t830m__submenu-item"> <a class="t-menusub__link-item t-descr" href="/email-campaign-builder" data-menu-item-number="1">Create, Edit, and Send Emails</a> </div> </div> </div> <div class="t830m__list-item"> <div class="t830m__list-title t830m__list-title_toggle"> <div class="t830m__list-title-text t-descr t-menu__link-item t830m__list-title-text_opacity">Plans and billing</div> </div> <div class="t830m__submenu t830m__submenu_close"> <div class="t830m__submenu-item"> <a class="t-menusub__link-item t-descr" href="https://tilda.cc/pricing/" data-menu-item-number="1">Plans</a> </div> <div class="t830m__submenu-item"> <a class="t-menusub__link-item t-descr" href="/subscription" data-menu-item-number="2">Pricing and Payment</a> </div> <div class="t830m__submenu-item"> <a class="t-menusub__link-item t-descr" href="/subscription#renew" data-menu-item-number="3">Cancel Automatic Subscription Renewal</a> </div> <div class="t830m__submenu-item"> <a class="t-menusub__link-item t-descr" href="/subscription#confirm" data-menu-item-number="4">Payment Confirmation</a> </div> <div class="t830m__submenu-item"> <a class="t-menusub__link-item t-descr" href="/subscription#personaltobusiness" data-menu-item-number="5"> Upgrade to Tilda Business Plan</a> </div> <div class="t830m__submenu-item"> <a class="t-menusub__link-item t-descr" href="/subscription#special" data-menu-item-number="6">Special Plan</a> </div> </div> </div> <div class="t830m__list-item"> <div class="t830m__list-title t830m__list-title_toggle"> <div class="t830m__list-title-text t-descr t-menu__link-item t830m__list-title-text_opacity">For developers</div> </div> <div class="t830m__submenu t830m__submenu_close"> <div class="t830m__submenu-item"> <a class="t-menusub__link-item t-descr" href="/html" data-menu-item-number="1">Embed HTML Code</a> </div> <div class="t830m__submenu-item"> <a class="t-menusub__link-item t-descr" href="/export" data-menu-item-number="2">Code Export</a> </div> <div class="t830m__submenu-item"> <a class="t-menusub__link-item t-descr" href="/formswebhook" data-menu-item-number="3">Webhook</a> </div> <div class="t830m__submenu-item"> <a class="t-menusub__link-item t-descr" href="/api" data-menu-item-number="4">Tilda API</a> </div> <div class="t830m__submenu-item"> <a class="t-menusub__link-item t-descr" href="/wordpress" data-menu-item-number="5">WordPress Plugin</a> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <style>#rec49203293 .t830m{background-color:#ffffff;}#rec49203293 .t830m__close{background-color:#ffffff;}#rec49203293 .t830__panel{background-color:#ff8562;}@media screen and (max-width:1200px){#rec49203293 .t830m.t830m_bg{background-color:#ffffff;}#rec49203293 .t830m__close.t830m__close_bg{background-color:#ffffff;}#rec49203293 .t830__panel.t830__panel_bg{background-color:#ffffff;}}</style> <script>t_onReady(function() {var tildaSearchJS='https://static.tildacdn.com/js/tilda-search-';var s=document.createElement('script');s.src=tildaSearchJS + '1.2.min.js';s.async=true;s.onerror=function() {console.log('Error load Tilda Search in ME901');};if(document.querySelectorAll("script[src^='" + tildaSearchJS + "']").length===0&&document.querySelectorAll("script[src^='" + tildaSearchJS + "']").length===0) {document.head.appendChild(s);}});</script> <script>window.zero_window_width_hook='allrecords';t_onReady(function() {t_onFuncLoad('t830_init',function() {t830_init('49203293');});});</script> <style>#rec49203293 .t-menu__link-item{-webkit-transition:color 0.3s ease-in-out,opacity 0.3s ease-in-out;transition:color 0.3s ease-in-out,opacity 0.3s ease-in-out;}#rec49203293 .t-menu__link-item.t-active:not(.t978__menu-link){color:#ff8562 !important;}#rec49203293 .t-menu__link-item:not(.t-active):not(.tooltipstered):hover{opacity:0.6 !important;}#rec49203293 .t-menu__link-item:not(.t-active):not(.tooltipstered):focus-visible{opacity:0.6 !important;}@supports (overflow:-webkit-marquee) and (justify-content:inherit){#rec49203293 .t-menu__link-item,#rec49203293 .t-menu__link-item.t-active{opacity:1 !important;}}</style> <style>#rec49203293 .t-menusub__link-item{-webkit-transition:color 0.3s ease-in-out,opacity 0.3s ease-in-out;transition:color 0.3s ease-in-out,opacity 0.3s ease-in-out;}#rec49203293 .t-menusub__link-item.t-active{color:#ff8562 !important;font-weight:400 !important;}#rec49203293 .t-menusub__link-item:not(.t-active):not(.tooltipstered):hover{opacity:0.6 !important;}@supports (overflow:-webkit-marquee) and (justify-content:inherit){#rec49203293 .t-menusub__link-item,#rec49203293 .t-menusub__link-item.t-active{opacity:1 !important;}}</style> <style> #rec49203293 .t830__panel-text{color:#ffffff;font-weight:300;}#rec49203293 .t830__logo__text{color:#000000;font-weight:400;}#rec49203293 .t830m__list-title-text{color:#000000;font-weight:500;text-transform:uppercase;}#rec49203293 a.t830m__list-title-link{color:#000000;font-weight:500;text-transform:uppercase;}#rec49203293 a.t-menusub__link-item{font-size:15px;color:#000000;font-weight:400;}</style> <style> #rec49203293 .t830__logo{color:#000000;font-weight:400;}</style> </div> </header>  <div id="rec7538856" class="r t-rec t-rec_pt_120 t-rec_pb_0" style="padding-top:120px;padding-bottom:0px;background-color:#f5f5f5; " data-animationappear="off" data-record-type="60" data-bg-color="#f5f5f5">  <div class="t050"> <div class="t-container t-align_center"> <div class="t-col t-col_10 t-prefix_1"> <div class="t050__uptitle t-uptitle t-uptitle_sm" field="subtitle"><a href="/">tilda help center</a></div> <h1 class="t050__title t-title t-title_xxl" field="title">Zero Block: How to Create a Custom Block</h1> <div class="t050__descr t-descr t-descr_xxl" field="descr">Part one. Getting started.</div> </div> </div> </div> <style> #rec7538856 .t050__uptitle{text-transform:uppercase;}</style> </div> <div id="rec236181696" class="r t-rec" style=" " data-record-type="215"> <a name="video" style="font-size:0;"></a> </div> <div id="rec236180837" class="r t-rec t-rec_pt_150 t-rec_pb_0" style="padding-top:150px;padding-bottom:0px;background-color:#f5f5f5; " data-animationappear="off" data-record-type="347" data-bg-color="#f5f5f5">  <div class="t347"> <div class="t-container"> <div class="t-col t-col_10 t-prefix_1"> <div class="t347__table"> <div class="t347__cell t-valign_top"> <div class="t347__bg t-bgimg" bgimgfield="img" data-original="https://static.tildacdn.com/tild3035-3233-4365-b637-396561393631/en_zero_1.png" style="background-image:url('https://thb.tildacdn.com/tild3035-3233-4365-b637-396561393631/-/resizeb/20x/en_zero_1.png');" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3035-3233-4365-b637-396561393631/en_zero_1.png"> </div> <div class="t347__overlay" style="background-image: -moz-linear-gradient(top, rgba(0,0,0,0.0), rgba(0,0,0,0.0)); background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.0), rgba(0,0,0,0.0)); background-image: -o-linear-gradient(top, rgba(0,0,0,0.0), rgba(0,0,0,0.0)); background-image: -ms-linear-gradient(top, rgba(0,0,0,0.0), rgba(0,0,0,0.0));"></div> <div class="t347__play-link t347__play-icon_xl"> <button class="t347__play-icon" type="button" aria-label="Play video"> <svg role="presentation" width="50px" height="50px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"> <path fill="none" d="M49.5 25c0 13.5-10.9 24.5-24.5 24.5S.6 38.5.6 25 11.5.6 25 .6 49.5 11.5 49.5 25z"/> <path fill="#FFFFFF" d="M25 50c13.8 0 25-11.2 25-25S38.8 0 25 0 0 11.2 0 25s11.2 25 25 25zm-5-33.3l14.2 8.8L20 34.3V16.7z"/> </svg> </button> </div> <div class="t347__wrap-content"> <div class="t347__content t-align_left"> <div class="t347__title t-name t-name_xl" field="title">Zero Block. Design Editor for Professionals</div> </div> </div> </div> <div class="t347__wrap-video"> <div class="t-video-lazyload t-video-no-lazyload" data-videolazy-load="false" data-blocklazy-id="236180837" data-videolazy-type="youtube" data-videolazy-id="JpI-8wbKFzM" data-videolazy-play="true" data-videolazy-height="540px" style="height: 540px;"> </div> </div> </div> </div> </div> </div> <script type="text/javascript">t_onReady(function() {t_onFuncLoad('t347_init',function() {t347_init('236180837');});});</script> </div> <div id="rec236182422" class="r t-rec t-rec_pt_30 t-rec_pb_150" style="padding-top:30px;padding-bottom:150px;background-color:#f5f5f5; " data-record-type="106" data-bg-color="#f5f5f5">  <div class="t004"> <div class="t-container t-align_center"> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><div style="font-size:20px;" data-customstyle="yes"><span style="font-size: 20px;">Watch this tutorial on how to use Zero Block, or read the guide below.</span></div></div> </div> </div> </div> </div> <div id="rec7538859" class="r t-rec t-rec_pt_135 t-rec_pb_150" style="padding-top:135px;padding-bottom:150px; " data-record-type="127">  <div class="t119"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div class="t119__preface t-descr" field="text">Zero Block is a built-in professional editor that enables you to realize any idea by creating custom-designed blocks according to your own preferences. It is similar to popular graphic design editors but on Tilda.</div> </div> </div> </div> <style> #rec7538859 .t119__preface{opacity:0.7;}</style> </div> <div id="rec7538860" class="r t-rec" style=" " data-record-type="390"> <div class="t390"> <div class="t-popup" data-tooltip-hook="#popup:infoblock" role="dialog" aria-modal="true" tabindex="-1" aria-label="You are here!"> <div class="t-popup__close t-popup__block-close"> <button type="button" class="t-popup__close-wrapper t-popup__block-close-button" aria-label="Close dialog window"> <svg role="presentation" class="t-popup__close-icon" width="23px" height="23px" viewBox="0 0 23 23" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g stroke="none" stroke-width="1" fill="#fff" fill-rule="evenodd"> <rect transform="translate(11.313708, 11.313708) rotate(-45.000000) translate(-11.313708, -11.313708) " x="10.3137085" y="-3.6862915" width="2" height="30"></rect> <rect transform="translate(11.313708, 11.313708) rotate(-315.000000) translate(-11.313708, -11.313708) " x="10.3137085" y="-3.6862915" width="2" height="30"></rect> </g> </svg> </button> </div> <div class="t-popup__container t-width t-width_6" style="background-color:#fbfbf9;"> <img class="t390__img t-img" src="https://thb.tildacdn.com/tild6466-6163-4136-b238-613931373833/-/empty/here.gif" data-original="https://static.tildacdn.com/tild6466-6163-4136-b238-613931373833/here.gif" imgfield="img" alt=""> <div class="t390__wrapper t-align_center"> <div class="t390__title t-heading t-heading_lg" id="popuptitle_7538860">You are here!</div> <div class="t390__descr t-descr t-descr_xs">Scroll down to read</div> </div> </div> </div> </div> <script type="text/javascript">t_onReady(function(){var rec=document.querySelector('#rec7538860');if(!rec) return;rec.setAttribute('data-animationappear','off');rec.style.opacity=1;t_onFuncLoad('t390_initPopup',function() {t390_initPopup('7538860');});});</script> </div> <div id="rec347459786" class="r t-rec t-rec_pt_0 t-rec_pb_45" style="padding-top:0px;padding-bottom:45px;background-color:#ffffff; " data-animationappear="off" data-record-type="650" data-bg-color="#ffffff">  <div class="t650"> <div class="t650__container t-card__container t-container" data-columns-in-row="3"> <div class="t-card__col t-col t-col_4 t-align_left"> <div class="t650__inner-col" style="background-color:#ffffff;"> <div class="t650__text"> <div class="t-card__title t-name t-name_lg t650__bottommargin" field="li_title__1489140981614"> <a href="#popup:infoblock" class="t-card__link" id="cardtitle1_347459786" aria-labelledby="cardtitle1_347459786 cardbtn1_347459786"> Getting Started </a> </div> <div class="t-card__descr t-text t-text_sm" field="li_descr__1489140981614"> Overview article on the main features </div> </div> <div class="t650__btn-container"> <div class="t-card__btntext-wrapper"> <div class="t-card__btn-text t-btntext t-btntext_sm " id="cardbtn1_347459786" data-field="li_buttontitle__1489140981614" style="color:#ff8562;font-weight:400;" aria-hidden="true" data-buttonfieldset="li_button" data-lid="1489140981614"> Read </div> </div> </div> </div> </div> <div class="t-card__col t-col t-col_4 t-align_left"> <div class="t650__inner-col" style="background-color:#ffffff;"> <div class="t650__text"> <div class="t-card__title t-name t-name_lg t650__bottommargin" field="li_title__1489140989639"> <a href="/zero-block-advanced" class="t-card__link" id="cardtitle2_347459786" aria-labelledby="cardtitle2_347459786 cardbtn2_347459786"> Responsive Design </a> </div> <div class="t-card__descr t-text t-text_sm" field="li_descr__1489140989639"> Working with containers and creating responsive elements </div> </div> <div class="t650__btn-container"> <div class="t-card__btntext-wrapper"> <div class="t-card__btn-text t-btntext t-btntext_sm " id="cardbtn2_347459786" data-field="li_buttontitle__1489140989639" style="color:#ff8562;font-weight:400;" aria-hidden="true" data-buttonfieldset="li_button" data-lid="1489140989639"> Read </div> </div> </div> </div> </div> <div class="t-card__col t-col t-col_4 t-align_left"> <div class="t650__inner-col" style="background-color:#ffffff;"> <div class="t650__text"> <div class="t-card__title t-name t-name_lg t650__bottommargin" field="li_title__1489140994564"> <a href="/zero-block-shortcuts" class="t-card__link" id="cardtitle3_347459786" aria-labelledby="cardtitle3_347459786 cardbtn3_347459786"> Keyboard Shortcuts </a> </div> <div class="t-card__descr t-text t-text_sm" field="li_descr__1489140994564"> A list of all shortcuts for speeding up your workflow </div> </div> <div class="t650__btn-container"> <div class="t-card__btntext-wrapper"> <div class="t-card__btn-text t-btntext t-btntext_sm " id="cardbtn3_347459786" data-field="li_buttontitle__1489140994564" style="color:#ff8562;font-weight:400;" aria-hidden="true" data-buttonfieldset="li_button" data-lid="1489140994564"> Read </div> </div> </div> </div> </div> <div class="t650__separator" style=""></div> <div class="t-card__col t-col t-col_4 t-align_left"> <div class="t650__inner-col" style="background-color:#ffffff;"> <div class="t650__text"> <div class="t-card__title t-name t-name_lg t650__bottommargin" field="li_title__1528385973697"> <a href="/zero-block-animation" class="t-card__link" id="cardtitle4_347459786" aria-labelledby="cardtitle4_347459786 cardbtn4_347459786"> Zero Block: Basic animation </a> </div> <div class="t-card__descr t-text t-text_sm" field="li_descr__1528385973697"> Element fixing, parallax, and fade-in animation </div> </div> <div class="t650__btn-container"> <div class="t-card__btntext-wrapper"> <div class="t-card__btn-text t-btntext t-btntext_sm " id="cardbtn4_347459786" data-field="li_buttontitle__1528385973697" style="color:#ff8562;font-weight:400;" aria-hidden="true" data-buttonfieldset="li_button" data-lid="1528385973697"> Read </div> </div> </div> </div> </div> <div class="t-card__col t-col t-col_4 t-align_left"> <div class="t650__inner-col" style="background-color:#ffffff;"> <div class="t650__text"> <div class="t-card__title t-name t-name_lg t650__bottommargin" field="li_title__1528386302166"> <a href="/zero-advanced-animation" class="t-card__link" id="cardtitle5_347459786" aria-labelledby="cardtitle5_347459786 cardbtn5_347459786"> Zero Block: Step-by-Step Animation </a> </div> <div class="t-card__descr t-text t-text_sm" field="li_descr__1528386302166"> Complex multi-step animation: Basic principles, settings, and examples </div> </div> <div class="t650__btn-container"> <div class="t-card__btntext-wrapper"> <div class="t-card__btn-text t-btntext t-btntext_sm " id="cardbtn5_347459786" data-field="li_buttontitle__1528386302166" style="color:#ff8562;font-weight:400;" aria-hidden="true" data-buttonfieldset="li_button" data-lid="1528386302166"> Read </div> </div> </div> </div> </div> <div class="t-card__col t-col t-col_4 t-align_left"> <div class="t650__inner-col" style="background-color:#ffffff;"> <div class="t650__text"> <div class="t-card__title t-name t-name_lg t650__bottommargin" field="li_title__1590665158110"> <a href="/zero-trigger-animation" class="t-card__link" id="cardtitle6_347459786" aria-labelledby="cardtitle6_347459786 cardbtn6_347459786"> Zero Block: Trigger animation </a> </div> <div class="t-card__descr t-text t-text_sm" field="li_descr__1590665158110"> <p style="text-align: left;">How to set up an element animation that runs when you click or hover over another element</p> </div> </div> <div class="t650__btn-container"> <div class="t-card__btntext-wrapper"> <div class="t-card__btn-text t-btntext t-btntext_sm " id="cardbtn6_347459786" data-field="li_buttontitle__1590665158110" style="color:#ff8562;font-weight:400;" aria-hidden="true" data-buttonfieldset="li_button" data-lid="1590665158110"> Read </div> </div> </div> </div> </div> <div class="t650__separator" style=""></div> <div class="t-card__col t-col t-col_4 t-align_left"> <div class="t650__inner-col" style="background-color:#ffffff;"> <div class="t650__text"> <div class="t-card__title t-name t-name_lg t650__bottommargin" field="li_title__1626698102936"> <a href="/zero-figma-import" class="t-card__link" id="cardtitle7_347459786" aria-labelledby="cardtitle7_347459786 cardbtn7_347459786"> Import from Figma </a> </div> <div class="t-card__descr t-text t-text_sm" field="li_descr__1626698102936"> <p style="text-align: left;">How you can automatically import a layout from Figma into Zero Block</p> </div> </div> <div class="t650__btn-container"> <div class="t-card__btntext-wrapper"> <div class="t-card__btn-text t-btntext t-btntext_sm " id="cardbtn7_347459786" data-field="li_buttontitle__1626698102936" style="color:#ff8562;font-weight:400;" aria-hidden="true" data-buttonfieldset="li_button" data-lid="1626698102936"> Read </div> </div> </div> </div> </div> <div class="t-card__col t-col t-col_4 t-align_left"> <div class="t650__inner-col" style="background-color:#ffffff;"> <div class="t650__text"> <div class="t-card__title t-name t-name_lg t650__bottommargin" field="li_title__1731440030010"> <a href="/zero-auto-layout" class="t-card__link" id="cardtitle8_347459786" aria-labelledby="cardtitle8_347459786 cardbtn8_347459786"> Auto Layout In Zero Block </a> </div> <div class="t-card__descr t-text t-text_sm" field="li_descr__1731440030010"> <p style="text-align: left;">A Flexible Way To Arrange Elements Within a Group</p> </div> </div> <div class="t650__btn-container"> <div class="t-card__btntext-wrapper"> <div class="t-card__btn-text t-btntext t-btntext_sm " id="cardbtn8_347459786" data-field="li_buttontitle__1731440030010" style="color:#ff8562;font-weight:400;" aria-hidden="true" data-buttonfieldset="li_button" data-lid="1731440030010"> Read </div> </div> </div> </div> </div> </div> </div> <script type="text/javascript">t_onReady(function() {t_onFuncLoad('t650_init',function() {t650_init('347459786');});t_onFuncLoad('t650_unifyHeights',function() {t650_unifyHeights('347459786');});if(typeof jQuery!=='undefined') {$('.t650').on('displayChanged',function() {t650_unifyHeights('347459786');});} else {var rec=document.querySelector('#rec347459786');if(!rec) return;var wrapper=rec.querySelector('.t650');if(wrapper) {wrapper.addEventListener('displayChanged',function() {t_onFuncLoad('t650_unifyHeights',function() {t650_unifyHeights('347459786');});});}}});window.addEventListener('resize',t_throttle(function() {t_onFuncLoad('t650_unifyHeights',function() {t650_unifyHeights('347459786');});}));window.addEventListener('load',function() {t_onFuncLoad('t650_unifyHeights',function() {t650_unifyHeights('347459786');});});</script> <style>#rec347459786 .t650__inner-col {box-shadow:0px 0px 10px rgba(0,0,0,0.1);}</style> <style>#rec347459786 .t650 .t650__inner-col:hover,#rec347459786 .t650 .t-focusable .t650__inner-col,#rec347459786 .t650 .t-card__col_btnfocusable .t650__inner-col {box-shadow:0px 10px 10px rgba(0,0,0,0.1) !important;}</style> <style> #rec347459786 .t650__inner-col{border-radius:5px;}</style> </div> <div id="rec7538862" class="r t-rec t-rec_pt_180 t-rec_pb_60" style="padding-top:180px;padding-bottom:60px; " data-record-type="158">  <div class="t146"> <div class="t146__cir" field="title"> 1 </div> </div> </div> <div id="rec7538863" class="r t-rec t-rec_pt_0 t-rec_pb_90" style="padding-top:0px;padding-bottom:90px; " data-record-type="33">  <div class="t017"> <div class="t-container t-align_center"> <div class="t-col t-col_10 t-prefix_1"> <div class="t017__title t-title t-title_xxs" field="title">How to add a Zero Block</div> </div> </div> </div> </div> <div id="rec7538864" class="r t-rec t-rec_pt_0 t-rec_pb_60" style="padding-top:0px;padding-bottom:60px; " data-record-type="106">  <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md ">To add a Zero Block to the page, click on Zero at the very bottom of the page. You can also find it at the bottom of the Block Library, right below the "Other" category.</div> </div> </div> </div> </div> <div id="rec7538865" class="r t-rec t-rec_pt_0 t-rec_pb_0" style="padding-top:0px;padding-bottom:0px; " data-record-type="3">  <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3861-3835-4432-a366-633664646464/add-zb.png"> <img class="t-img t-width t107__width t-width_10" src="https://thb.tildacdn.com/tild3861-3835-4432-a366-633664646464/-/empty/add-zb.png" data-original="https://static.tildacdn.com/tild3861-3835-4432-a366-633664646464/add-zb.png" imgfield="img" alt=""> </div> </div> </div> <div id="rec7538866" class="r t-rec t-rec_pt_105 t-rec_pb_90" style="padding-top:105px;padding-bottom:90px; " data-record-type="106">  <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md ">A Zero Block keeps all regular block features—it can be copied, removed, deleted, and hidden. It has settings, but instead of a "Content" button, it has a "Block Editor" button. Click it if you want to edit the block, and the Block Editor will open.</div> </div> </div> </div> </div> <div id="rec7538867" class="r t-rec t-rec_pt_15 t-rec_pb_0" style="padding-top:15px;padding-bottom:0px; " data-record-type="3">  <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3664-3562-4539-a364-313439303137/Untitled1.jpg"> <img class="t-img t-width t107__width t-width_10" src="https://thb.tildacdn.com/tild3664-3562-4539-a364-313439303137/-/empty/Untitled1.jpg" data-original="https://static.tildacdn.com/tild3664-3562-4539-a364-313439303137/Untitled1.jpg" imgfield="img" alt=""> </div> </div> </div> <div id="rec7538868" class="r t-rec t-rec_pt_180 t-rec_pb_60" style="padding-top:180px;padding-bottom:60px; " data-record-type="158">  <div class="t146"> <div class="t146__cir" field="title"> 2 </div> </div> </div> <div id="rec7538869" class="r t-rec t-rec_pt_0 t-rec_pb_90" style="padding-top:0px;padding-bottom:90px; " data-record-type="33">  <div class="t017"> <div class="t-container t-align_center"> <div class="t-col t-col_10 t-prefix_1"> <div class="t017__title t-title t-title_xxs" field="title">Introduction to the interface</div> </div> </div> </div> </div> <div id="rec7538870" class="r t-rec t-rec_pt_30 t-rec_pb_105" style="padding-top:30px;padding-bottom:105px; " data-record-type="3">  <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3233-6133-4034-b030-653839383963/3.png"> <img class="t-img t-width t107__width t-width_12" src="https://thb.tildacdn.com/tild3233-6133-4034-b030-653839383963/-/empty/3.png" data-original="https://static.tildacdn.com/tild3233-6133-4034-b030-653839383963/3.png" imgfield="img" alt=""> </div> </div> </div> <div id="rec7538871" class="r t-rec t-rec_pt_0 t-rec_pb_60" style="padding-top:0px;padding-bottom:60px; " data-record-type="106">  <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md ">A Zero Block has two workspaces, or containers: the Grid Container and Window Container, which indicate a browser screen's boundaries.<br /><br />The Grid Container supports the same grid as Tilda—<span style="font-weight: 300;">12 columns (1200 px).</span> If you align objects to the grid and locate elements inside the Grid Container, they will always remain within the boundaries of 12 columns regardless of the screen size.</div> </div> </div> </div> </div> <div id="rec7538872" class="r t-rec t-rec_pt_0 t-rec_pb_90" style="padding-top:0px;padding-bottom:90px; " data-record-type="3">  <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild6635-3562-4136-b666-326530643063/40.png"> <img class="t-img t-width t107__width t-width_10" src="https://thb.tildacdn.com/tild6635-3562-4136-b666-326530643063/-/empty/40.png" data-original="https://static.tildacdn.com/tild6635-3562-4136-b666-326530643063/40.png" imgfield="img" alt=""> </div> </div> </div> <div id="rec7538873" class="r t-rec t-rec_pt_90 t-rec_pb_90" style="padding-top:90px;padding-bottom:90px; " data-record-type="296">  <div class="t265"> <div class="t-container"> <div class="t-col t-col_8 t-prefix_2"> <div class="t265__wrapper" style="background: #EBEBEB;"> <div class="t265__icon"> <svg role="img" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;"> <circle style="fill:#000000;" cx="12.125" cy="12.125" r="12"/> <g> <path style="fill: #fff;" d="M10.922,6.486c0-0.728,0.406-1.091,1.217-1.091s1.215,0.363,1.215,1.091c0,0.347-0.102,0.617-0.304,0.81 c-0.202,0.193-0.507,0.289-0.911,0.289C11.328,7.585,10.922,7.219,10.922,6.486z M13.252,17.792h-2.234V9.604h2.234V17.792z"/> </g> </svg> </div> <div class="t265__text t-descr t-descr_xs" field="text"><span style="font-weight: 400;">The Grid Container is the main workspace in the Block Editor.</span></div> </div> </div> </div> </div> </div> <div id="rec7538874" class="r t-rec t-rec_pt_45 t-rec_pb_45" style="padding-top:45px;padding-bottom:45px; " data-record-type="374">  <div class="t374"> <div class="t-container"> <div class="t-col t-col_8 t-prefix_2"> <a class="t374__link" href="https://help.tilda.ws/zero-block-advanced" target="_blank"> <div class="t374__wrapper"> <div class="t374__col t374__col-left"> <svg role="presentation" imgfield="img" width="30px" height="30px" viewBox="0 0 30 30"> <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g class="t374__svg" transform="translate(1.000000, 1.000000)"> <circle cx="14.2" cy="14.1" r="14.1"></circle> <path d="M12.1,19.9 L17.7,14.3 L12.1,8.7"></path> </g> </g> </svg> </div> <div class="t374__col"> <div class="t374__title t-text t-text_sm" field="title">Click here to find out more about the containers in the guide "Zero Block: Responsive Design."</div> </div> </div> </a> </div> </div> </div> </div> <div id="rec7538875" class="r t-rec t-rec_pt_180 t-rec_pb_60" style="padding-top:180px;padding-bottom:60px; " data-record-type="158">  <div class="t146"> <div class="t146__cir" field="title"> 3 </div> </div> </div> <div id="rec7538876" class="r t-rec t-rec_pt_0 t-rec_pb_60" style="padding-top:0px;padding-bottom:60px; " data-record-type="33">  <div class="t017"> <div class="t-container t-align_center"> <div class="t-col t-col_10 t-prefix_1"> <div class="t017__title t-title t-title_xxs" field="title">How to add and edit elements</div> </div> </div> </div> </div> <div id="rec7538877" class="r t-rec t-rec_pt_0 t-rec_pb_105" style="padding-top:0px;padding-bottom:105px; " data-record-type="106">  <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md ">Click the plus button in the top left corner of the Block Editor to add an element to the page. You can add a text, image, shape, button, video, tooltip, HTML, form, gallery, or vector.</div> </div> </div> </div> </div> <div id="rec7538878" class="r t-rec t-rec_pt_15 t-rec_pb_15" style="padding-top:15px;padding-bottom:15px; " data-record-type="3">  <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3233-3165-4231-a565-366636306166/add-element.png"> <img class="t-img t-width t107__width t-width_10" src="https://thb.tildacdn.com/tild3233-3165-4231-a565-366636306166/-/empty/add-element.png" data-original="https://static.tildacdn.com/tild3233-3165-4231-a565-366636306166/add-element.png" imgfield="img" alt=""> </div> </div> </div> <div id="rec7538879" class="r t-rec t-rec_pt_90 t-rec_pb_90" style="padding-top:90px;padding-bottom:90px; " data-record-type="296">  <div class="t265"> <div class="t-container"> <div class="t-col t-col_8 t-prefix_2"> <div class="t265__wrapper" style="background: #EBEBEB;"> <div class="t265__icon"> <svg role="img" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;"> <circle style="fill:#000000;" cx="12.125" cy="12.125" r="12"/> <g> <path style="fill: #fff;" d="M10.922,6.486c0-0.728,0.406-1.091,1.217-1.091s1.215,0.363,1.215,1.091c0,0.347-0.102,0.617-0.304,0.81 c-0.202,0.193-0.507,0.289-0.911,0.289C11.328,7.585,10.922,7.219,10.922,6.486z M13.252,17.792h-2.234V9.604h2.234V17.792z"/> </g> </svg> </div> <div class="t265__text t-descr t-descr_xs" field="text"><span style="font-weight: 400;">You can also add an image </span>by dragging it from a folder to the block space.</div> </div> </div> </div> </div> </div> <div id="rec7538880" class="r t-rec t-rec_pt_15 t-rec_pb_0" style="padding-top:15px;padding-bottom:0px; " data-record-type="3">  <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild6361-3566-4234-b437-316566333933/6.jpg"> <img class="t-img t-width t107__width t-width_10" src="https://thb.tildacdn.com/tild6361-3566-4234-b437-316566333933/-/empty/6.jpg" data-original="https://static.tildacdn.com/tild6361-3566-4234-b437-316566333933/6.jpg" imgfield="img" alt=""> </div> </div> </div> <div id="rec7538881" class="r t-rec t-rec_pt_135 t-rec_pb_30" style="padding-top:135px;padding-bottom:30px; " data-record-type="128">  <div class="t120"> <div class="t-container t-align_left"> <div class="t-col t-col_8 t-prefix_2"> <div class="t120__title t-heading t-heading_sm" field="title">How to edit elements using a mouse</div> </div> </div> </div> </div> <div id="rec7538882" class="r t-rec t-rec_pt_0 t-rec_pb_60" style="padding-top:0px;padding-bottom:60px; " data-record-type="106">  <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md ">A Zero Block supports all basic mouse manipulations: elements can be moved, resized, copied (by holding down the Alt key), and multiple elements can be selected.</div> </div> </div> </div> </div> <div id="rec7538883" class="r t-rec t-rec_pt_0 t-rec_pb_120" style="padding-top:0px;padding-bottom:120px; " data-record-type="3">  <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3235-6537-4237-b164-653039366562/3.gif"> <img class="t-img t-width t107__width t-width_8" src="https://thb.tildacdn.com/tild3235-6537-4237-b164-653039366562/-/empty/3.gif" data-original="https://static.tildacdn.com/tild3235-6537-4237-b164-653039366562/3.gif" imgfield="img" alt=""> </div> </div> </div> <div id="rec7538884" class="r t-rec t-rec_pt_0 t-rec_pb_105" style="padding-top:0px;padding-bottom:105px; " data-record-type="106">  <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md ">You can resize an image element without changing its <span style="font-weight: 400;">proportions.</span><br /><br />The height of the text elements <span style="font-weight: 400;">changes automatically </span>depending on the text volume.<br /><br />The sizes of buttons and shapes can be changed in all directions.</div> </div> </div> </div> </div> <div id="rec7538885" class="r t-rec t-rec_pt_0 t-rec_pb_0" style="padding-top:0px;padding-bottom:0px; " data-record-type="296">  <div class="t265"> <div class="t-container"> <div class="t-col t-col_8 t-prefix_2"> <div class="t265__wrapper" style="background: #EBEBEB;"> <div class="t265__icon"> <svg role="img" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;"> <circle style="fill:#000000;" cx="12.125" cy="12.125" r="12"/> <g> <path style="fill: #fff;" d="M10.922,6.486c0-0.728,0.406-1.091,1.217-1.091s1.215,0.363,1.215,1.091c0,0.347-0.102,0.617-0.304,0.81 c-0.202,0.193-0.507,0.289-0.911,0.289C11.328,7.585,10.922,7.219,10.922,6.486z M13.252,17.792h-2.234V9.604h2.234V17.792z"/> </g> </svg> </div> <div class="t265__text t-descr t-descr_xs" field="text">For operations with multiple elements, press Cmd+A to select all elements, or select multiple elements with the mouse while holding down the Shift key.</div> </div> </div> </div> </div> </div> <div id="rec7538886" class="r t-rec t-rec_pt_90 t-rec_pb_60" style="padding-top:90px;padding-bottom:60px; " data-record-type="106">  <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md ">When several elements are selected, they can be <span style="font-weight: 400;">aligned horizontally or vertically to each other or to the container.</span></div> </div> </div> </div> </div> <div id="rec7538887" class="r t-rec t-rec_pt_0 t-rec_pb_15" style="padding-top:0px;padding-bottom:15px; " data-record-type="3">  <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild6662-6161-4233-b532-356361303165/4.gif"> <img class="t-img t-width t107__width t-width_8" src="https://thb.tildacdn.com/tild6662-6161-4233-b532-356361303165/-/empty/4.gif" data-original="https://static.tildacdn.com/tild6662-6161-4233-b532-356361303165/4.gif" imgfield="img" alt=""> </div> </div> </div> <div id="rec7538888" class="r t-rec t-rec_pt_180 t-rec_pb_30" style="padding-top:180px;padding-bottom:30px; " data-record-type="128">  <div class="t120"> <div class="t-container t-align_left"> <div class="t-col t-col_8 t-prefix_2"> <div class="t120__title t-heading t-heading_sm" field="title">How to edit elements using a keyboard</div> </div> </div> </div> </div> <div id="rec7538889" class="r t-rec t-rec_pt_0 t-rec_pb_60" style="padding-top:0px;padding-bottom:60px; " data-record-type="106">  <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md ">Editing block elements using a keyboard considerably speeds up the work process, which is why we recommend using hotkeys.<br /></div> </div> </div> </div> </div> <div id="rec210589593" class="r t-rec t-rec_pt_0" style="padding-top:0px; " data-animationappear="off" data-record-type="396">  <style>#rec210589593 .t396__artboard {height:900px;background-color:#ffffff;}#rec210589593 .t396__filter {height:900px;}#rec210589593 .t396__carrier{height:900px;background-position:center center;background-attachment:scroll;background-size:cover;background-repeat:no-repeat;}@media screen and (max-width:1199px) {#rec210589593 .t396__artboard,#rec210589593 .t396__filter,#rec210589593 .t396__carrier {height:850px;}#rec210589593 .t396__filter {}#rec210589593 .t396__carrier {background-attachment:scroll;}}@media screen and (max-width:959px) {#rec210589593 .t396__artboard,#rec210589593 .t396__filter,#rec210589593 .t396__carrier {height:850px;}#rec210589593 .t396__filter {}#rec210589593 .t396__carrier {background-attachment:scroll;}}@media screen and (max-width:639px) {#rec210589593 .t396__artboard,#rec210589593 .t396__filter,#rec210589593 .t396__carrier {}#rec210589593 .t396__filter {}#rec210589593 .t396__carrier {background-attachment:scroll;}}@media screen and (max-width:479px) {#rec210589593 .t396__artboard,#rec210589593 .t396__filter,#rec210589593 .t396__carrier {height:570px;}#rec210589593 .t396__filter {}#rec210589593 .t396__carrier {background-attachment:scroll;}}#rec210589593 .tn-elem[data-elem-id="1470379860395"]{z-index:2;top:calc(450px - 396.5px + 3px);left:calc(50% - 380px + 2px);width:760px;height:793px;}#rec210589593 .tn-elem[data-elem-id="1470379860395"] .tn-atom{background-color:#f5f5f5;background-position:center center;border-color:transparent ;border-style:solid;}@media screen and (max-width:1199px) {#rec210589593 .tn-elem[data-elem-id="1470379860395"] {top:calc(450px - 396.5px + 0px);left:calc(50% - 380px + 1px);width:660px;height:734px;}}@media screen and (max-width:959px) {#rec210589593 .tn-elem[data-elem-id="1470379860395"] {top:calc(450px - 396.5px + 0px);left:calc(50% - 380px + 0px);width:500px;height:734px;}}@media screen and (max-width:639px) {#rec210589593 .tn-elem[data-elem-id="1470379860395"] {top:calc(450px - 396.5px + 0px);left:calc(50% - 380px + 0px);width:480px;height:771px;}}@media screen and (max-width:479px) {#rec210589593 .tn-elem[data-elem-id="1470379860395"] {top:calc(450px - 396.5px + -8px);left:calc(50% - 380px + 0px);width:320px;height:528px;}}#rec210589593 .tn-elem[data-elem-id="1470379967708"]{color:#000000;z-index:3;top:181px;left:calc(50% - 600px + 281px);width:210px;height:auto;}#rec210589593 .tn-elem[data-elem-id="1470379967708"] .tn-atom{color:#000000;font-size:20px;font-family:'TildaSans',Arial,sans-serif;line-height:1.55;font-weight:300;background-position:center center;border-color:transparent ;border-style:solid;}@media screen and (max-width:1199px) {#rec210589593 .tn-elem[data-elem-id="1470379967708"] {top:181px;left:calc(50% - 480px + 252px);height:auto;}}@media screen and (max-width:959px) {#rec210589593 .tn-elem[data-elem-id="1470379967708"] {top:181px;left:calc(50% - 320px + 92px);height:auto;}}@media screen and (max-width:639px) {#rec210589593 .tn-elem[data-elem-id="1470379967708"] {top:181px;left:calc(50% - 240px + 12px);height:auto;}}@media screen and (max-width:479px) {#rec210589593 .tn-elem[data-elem-id="1470379967708"] {top:140px;left:calc(50% - 160px + 12px);height:auto;}#rec210589593 .tn-elem[data-elem-id="1470379967708"] .tn-atom{font-size:13px;}}#rec210589593 .tn-elem[data-elem-id="1470380020170"]{color:#000000;z-index:4;top:181px;left:calc(50% - 600px + 802px);width:160px;height:auto;}#rec210589593 .tn-elem[data-elem-id="1470380020170"] .tn-atom{color:#000000;font-size:20px;font-family:'TildaSans',Arial,sans-serif;line-height:1.55;font-weight:400;background-position:center center;border-color:transparent ;border-style:solid;}@media screen and (max-width:1199px) {#rec210589593 .tn-elem[data-elem-id="1470380020170"] {top:181px;left:calc(50% - 480px + 652px);height:auto;}}@media screen and (max-width:959px) {#rec210589593 .tn-elem[data-elem-id="1470380020170"] {top:185px;left:calc(50% - 320px + 412px);height:auto;}}@media screen and (max-width:639px) {#rec210589593 .tn-elem[data-elem-id="1470380020170"] {top:185px;left:calc(50% - 240px + 332px);height:auto;}}@media screen and (max-width:479px) {#rec210589593 .tn-elem[data-elem-id="1470380020170"] {top:142px;left:calc(50% - 160px + 232px);height:auto;}#rec210589593 .tn-elem[data-elem-id="1470380020170"] .tn-atom{font-size:13px;}}#rec210589593 .tn-elem[data-elem-id="1470380191243"]{z-index:5;top:203px;left:calc(50% - 600px + 450px);width:330px;height:1px;}#rec210589593 .tn-elem[data-elem-id="1470380191243"] .tn-atom{opacity:0.4;background-color:#000000;background-position:center center;border-color:transparent ;border-style:solid;}@media screen and (max-width:1199px) {#rec210589593 .tn-elem[data-elem-id="1470380191243"] {top:203px;left:calc(50% - 480px + 408px);}#rec210589593 .tn-elem[data-elem-id="1470380191243"] .tn-atom{opacity:0;}}@media screen and (max-width:959px) {}@media screen and (max-width:639px) {}@media screen and (max-width:479px) {}#rec210589593 .tn-elem[data-elem-id="1470380352955"]{z-index:6;top:234px;left:calc(50% - 600px + 370px);width:410px;height:1px;}#rec210589593 .tn-elem[data-elem-id="1470380352955"] .tn-atom{opacity:0.4;background-color:#000000;background-position:center center;border-color:transparent ;border-style:solid;}@media screen and (max-width:1199px) {#rec210589593 .tn-elem[data-elem-id="1470380352955"] {top:234px;left:calc(50% - 480px + 359px);}#rec210589593 .tn-elem[data-elem-id="1470380352955"] .tn-atom{opacity:0;}}@media screen and (max-width:959px) {}@media screen and (max-width:639px) {}@media screen and (max-width:479px) {}#rec210589593 .tn-elem[data-elem-id="1470380482431"]{z-index:7;top:265px;left:calc(50% - 600px + 400px);width:380px;height:1px;}#rec210589593 .tn-elem[data-elem-id="1470380482431"] .tn-atom{opacity:0.4;background-color:#000000;background-position:center center;border-color:transparent ;border-style:solid;}@media screen and (max-width:1199px) {#rec210589593 .tn-elem[data-elem-id="1470380482431"] {top:265px;left:calc(50% - 480px + 404px);}#rec210589593 .tn-elem[data-elem-id="1470380482431"] .tn-atom{opacity:0;}}@media screen and (max-width:959px) {}@media screen and (max-width:639px) {}@media screen and (max-width:479px) {}#rec210589593 .tn-elem[data-elem-id="1470380684852"]{z-index:8;top:296px;left:calc(50% - 600px + 493px);width:287px;height:1px;}#rec210589593 .tn-elem[data-elem-id="1470380684852"] .tn-atom{opacity:0.4;background-color:#000000;background-position:center center;border-color:transparent ;border-style:solid;}@media screen and (max-width:1199px) {#rec210589593 .tn-elem[data-elem-id="1470380684852"] {top:296px;left:calc(50% - 480px + 504px);}#rec210589593 .tn-elem[data-elem-id="1470380684852"] .tn-atom{opacity:0;}}@media screen and (max-width:959px) {}@media screen and (max-width:639px) {}@media screen and (max-width:479px) {}#rec210589593 .tn-elem[data-elem-id="1470380705900"]{z-index:9;top:327px;left:calc(50% - 600px + 455px);width:325px;height:1px;}#rec210589593 .tn-elem[data-elem-id="1470380705900"] .tn-atom{opacity:0.4;background-color:#000000;background-position:center center;border-color:transparent ;border-style:solid;}@media screen and (max-width:1199px) {#rec210589593 .tn-elem[data-elem-id="1470380705900"] {top:327px;left:calc(50% - 480px + 477px);}#rec210589593 .tn-elem[data-elem-id="1470380705900"] .tn-atom{opacity:0;}}@media screen and (max-width:959px) {}@media screen and (max-width:639px) {}@media screen and (max-width:479px) {}#rec210589593 .tn-elem[data-elem-id="1470380732169"]{z-index:10;top:357px;left:calc(50% - 600px + 330px);width:450px;height:1px;}#rec210589593 .tn-elem[data-elem-id="1470380732169"] .tn-atom{opacity:0.4;background-color:#000000;background-position:center center;border-color:transparent ;border-style:solid;}@media screen and (max-width:1199px) {#rec210589593 .tn-elem[data-elem-id="1470380732169"] {top:357px;left:calc(50% - 480px + 328px);}#rec210589593 .tn-elem[data-elem-id="1470380732169"] .tn-atom{opacity:0;}}@media screen and (max-width:959px) {}@media screen and (max-width:639px) {}@media screen and (max-width:479px) {}#rec210589593 .tn-elem[data-elem-id="1470380758865"]{z-index:11;top:388px;left:calc(50% - 600px + 333px);width:447px;height:1px;}#rec210589593 .tn-elem[data-elem-id="1470380758865"] .tn-atom{opacity:0.4;background-color:#000000;background-position:center center;border-color:transparent ;border-style:solid;}@media screen and (max-width:1199px) {#rec210589593 .tn-elem[data-elem-id="1470380758865"] {top:388px;left:calc(50% - 480px + 406px);}#rec210589593 .tn-elem[data-elem-id="1470380758865"] .tn-atom{opacity:0;}}@media screen and (max-width:959px) {}@media screen and (max-width:639px) {}@media screen and (max-width:479px) {}#rec210589593 .tn-elem[data-elem-id="1470380785438"]{z-index:12;top:419px;left:calc(50% - 600px + 333px);width:447px;height:1px;}#rec210589593 .tn-elem[data-elem-id="1470380785438"] .tn-atom{opacity:0.4;background-color:#000000;background-position:center center;border-color:transparent ;border-style:solid;}@media screen and (max-width:1199px) {#rec210589593 .tn-elem[data-elem-id="1470380785438"] {top:419px;left:calc(50% - 480px + 382px);}#rec210589593 .tn-elem[data-elem-id="1470380785438"] .tn-atom{opacity:0;}}@media screen and (max-width:959px) {}@media screen and (max-width:639px) {}@media screen and (max-width:479px) {}#rec210589593 .tn-elem[data-elem-id="1470380822709"]{z-index:13;top:450px;left:calc(50% - 600px + 340px);width:440px;height:1px;}#rec210589593 .tn-elem[data-elem-id="1470380822709"] .tn-atom{opacity:0.4;background-color:#000000;background-position:center center;border-color:transparent ;border-style:solid;}@media screen and (max-width:1199px) {#rec210589593 .tn-elem[data-elem-id="1470380822709"] {top:450px;left:calc(50% - 480px + 415px);}#rec210589593 .tn-elem[data-elem-id="1470380822709"] .tn-atom{opacity:0;}}@media screen and (max-width:959px) {}@media screen and (max-width:639px) {}@media screen and (max-width:479px) {}#rec210589593 .tn-elem[data-elem-id="1470380876034"]{z-index:14;top:481px;left:calc(50% - 600px + 350px);width:430px;height:1px;}#rec210589593 .tn-elem[data-elem-id="1470380876034"] .tn-atom{opacity:0.4;background-color:#000000;background-position:center center;border-color:transparent ;border-style:solid;}@media screen and (max-width:1199px) {#rec210589593 .tn-elem[data-elem-id="1470380876034"] {top:481px;left:calc(50% - 480px + 373px);}#rec210589593 .tn-elem[data-elem-id="1470380876034"] .tn-atom{opacity:0;}}@media screen and (max-width:959px) {}@media screen and (max-width:639px) {}@media screen and (max-width:479px) {}#rec210589593 .tn-elem[data-elem-id="1470380913182"]{z-index:15;top:512px;left:calc(50% - 600px + 418px);width:362px;height:1px;}#rec210589593 .tn-elem[data-elem-id="1470380913182"] .tn-atom{opacity:0.4;background-color:#000000;background-position:center center;border-color:transparent ;border-style:solid;}@media screen and (max-width:1199px) {#rec210589593 .tn-elem[data-elem-id="1470380913182"] {top:512px;left:calc(50% - 480px + 432px);}#rec210589593 .tn-elem[data-elem-id="1470380913182"] .tn-atom{opacity:0;}}@media screen and (max-width:959px) {}@media screen and (max-width:639px) {}@media screen and (max-width:479px) {}#rec210589593 .tn-elem[data-elem-id="1470380937853"]{z-index:16;top:544px;left:calc(50% - 600px + 440px);width:340px;height:1px;}#rec210589593 .tn-elem[data-elem-id="1470380937853"] .tn-atom{opacity:0.4;background-color:#000000;background-position:center center;border-color:transparent ;border-style:solid;}@media screen and (max-width:1199px) {#rec210589593 .tn-elem[data-elem-id="1470380937853"] {top:544px;left:calc(50% - 480px + 433px);}#rec210589593 .tn-elem[data-elem-id="1470380937853"] .tn-atom{opacity:0;}}@media screen and (max-width:959px) {}@media screen and (max-width:639px) {}@media screen and (max-width:479px) {}#rec210589593 .tn-elem[data-elem-id="1470380953637"]{z-index:17;top:575px;left:calc(50% - 600px + 425px);width:355px;height:1px;}#rec210589593 .tn-elem[data-elem-id="1470380953637"] .tn-atom{opacity:0.4;background-color:#000000;background-position:center center;border-color:transparent ;border-style:solid;}@media screen and (max-width:1199px) {#rec210589593 .tn-elem[data-elem-id="1470380953637"] {top:575px;left:calc(50% - 480px + 449px);}#rec210589593 .tn-elem[data-elem-id="1470380953637"] .tn-atom{opacity:0;}}@media screen and (max-width:959px) {}@media screen and (max-width:639px) {}@media screen and (max-width:479px) {}#rec210589593 .tn-elem[data-elem-id="1470380962637"]{z-index:18;top:606px;left:calc(50% - 600px + 455px);width:325px;height:1px;}#rec210589593 .tn-elem[data-elem-id="1470380962637"] .tn-atom{opacity:0.4;background-color:#000000;background-position:center center;border-color:transparent ;border-style:solid;}@media screen and (max-width:1199px) {#rec210589593 .tn-elem[data-elem-id="1470380962637"] {top:606px;left:calc(50% - 480px + 526px);}#rec210589593 .tn-elem[data-elem-id="1470380962637"] .tn-atom{opacity:0;}}@media screen and (max-width:959px) {}@media screen and (max-width:639px) {}@media screen and (max-width:479px) {}#rec210589593 .tn-elem[data-elem-id="1470380972008"]{z-index:19;top:637px;left:calc(50% - 600px + 470px);width:310px;height:1px;}#rec210589593 .tn-elem[data-elem-id="1470380972008"] .tn-atom{opacity:0.4;background-color:#000000;background-position:center center;border-color:transparent ;border-style:solid;}@media screen and (max-width:1199px) {#rec210589593 .tn-elem[data-elem-id="1470380972008"] {top:637px;left:calc(50% - 480px + 526px);}#rec210589593 .tn-elem[data-elem-id="1470380972008"] .tn-atom{opacity:0;}}@media screen and (max-width:959px) {}@media screen and (max-width:639px) {}@media screen and (max-width:479px) {}#rec210589593 .tn-elem[data-elem-id="1470380988760"]{z-index:20;top:668px;left:calc(50% - 600px + 370px);width:410px;height:1px;}#rec210589593 .tn-elem[data-elem-id="1470380988760"] .tn-atom{opacity:0.4;background-color:#000000;background-position:center center;border-color:transparent ;border-style:solid;}@media screen and (max-width:1199px) {#rec210589593 .tn-elem[data-elem-id="1470380988760"] {top:668px;left:calc(50% - 480px + 346px);}#rec210589593 .tn-elem[data-elem-id="1470380988760"] .tn-atom{opacity:0;}}@media screen and (max-width:959px) {}@media screen and (max-width:639px) {}@media screen and (max-width:479px) {}#rec210589593 .tn-elem[data-elem-id="1470381802276"]{color:#000000;z-index:21;top:123px;left:calc(50% - 600px + 280px);width:260px;height:auto;}#rec210589593 .tn-elem[data-elem-id="1470381802276"] .tn-atom{color:#000000;font-size:14px;font-family:'TildaSans',Arial,sans-serif;line-height:1.55;font-weight:400;opacity:0.6;background-position:center center;border-color:transparent ;border-style:solid;}@media screen and (max-width:1199px) {#rec210589593 .tn-elem[data-elem-id="1470381802276"] {top:123px;left:calc(50% - 480px + 251px);width:270px;height:auto;}}@media screen and (max-width:959px) {#rec210589593 .tn-elem[data-elem-id="1470381802276"] {top:123px;left:calc(50% - 320px + 91px);height:auto;}}@media screen and (max-width:639px) {#rec210589593 .tn-elem[data-elem-id="1470381802276"] {top:123px;left:calc(50% - 240px + 11px);width:260px;height:auto;}}@media screen and (max-width:479px) {#rec210589593 .tn-elem[data-elem-id="1470381802276"] {top:82px;left:calc(50% - 160px + 11px);height:auto;}}#rec210589593 .tn-elem[data-elem-id="1594516577753"]{z-index:22;top:698px;left:calc(50% - 600px + 459px);width:320px;height:1px;}#rec210589593 .tn-elem[data-elem-id="1594516577753"] .tn-atom{opacity:0.4;background-color:#000000;background-position:center center;border-color:transparent ;border-style:solid;}@media screen and (max-width:1199px) {#rec210589593 .tn-elem[data-elem-id="1594516577753"] {top:678pxpx;left:calc(50% - 480px + 356pxpx);}#rec210589593 .tn-elem[data-elem-id="1594516577753"] .tn-atom{opacity:0;}}@media screen and (max-width:959px) {}@media screen and (max-width:639px) {}@media screen and (max-width:479px) {}#rec210589593 .tn-elem[data-elem-id="1594516630706"]{z-index:23;top:729px;left:calc(50% - 600px + 490px);width:290px;height:1px;}#rec210589593 .tn-elem[data-elem-id="1594516630706"] .tn-atom{opacity:0.4;background-color:#000000;background-position:center center;border-color:transparent ;border-style:solid;}@media screen and (max-width:1199px) {#rec210589593 .tn-elem[data-elem-id="1594516630706"] {top:688pxpx;left:calc(50% - 480px + 366pxpx);}#rec210589593 .tn-elem[data-elem-id="1594516630706"] .tn-atom{opacity:0;}}@media screen and (max-width:959px) {}@media screen and (max-width:639px) {}@media screen and (max-width:479px) {}#rec210589593 .tn-elem[data-elem-id="1594516654111"]{z-index:24;top:761px;left:calc(50% - 600px + 470px);width:310px;height:1px;}#rec210589593 .tn-elem[data-elem-id="1594516654111"] .tn-atom{opacity:0.4;background-color:#000000;background-position:center center;border-color:transparent ;border-style:solid;}@media screen and (max-width:1199px) {#rec210589593 .tn-elem[data-elem-id="1594516654111"] {top:688pxpx;left:calc(50% - 480px + 366pxpx);}#rec210589593 .tn-elem[data-elem-id="1594516654111"] .tn-atom{opacity:0;}}@media screen and (max-width:959px) {}@media screen and (max-width:639px) {}@media screen and (max-width:479px) {}</style> <div class='t396'> <div class="t396__artboard" data-artboard-recid="210589593" data-artboard-screens="320,480,640,960,1200" data-artboard-height="900" data-artboard-valign="center" data-artboard-upscale="grid" data-artboard-height-res-320="570" data-artboard-height-res-640="850" data-artboard-height-res-960="850"> <div class="t396__carrier" data-artboard-recid="210589593"></div> <div class="t396__filter" data-artboard-recid="210589593"></div> <div class='t396__elem tn-elem tn-elem__2105895931470379860395' data-elem-id='1470379860395' data-elem-type='shape' data-field-top-value="3" data-field-left-value="2" data-field-height-value="793" data-field-width-value="760" data-field-axisy-value="center" data-field-axisx-value="center" data-field-container-value="grid" data-field-topunits-value="px" data-field-leftunits-value="px" data-field-heightunits-value="px" data-field-widthunits-value="px" data-field-top-res-320-value="-8" data-field-left-res-320-value="0" data-field-height-res-320-value="528" data-field-width-res-320-value="320" data-field-top-res-480-value="0" data-field-left-res-480-value="0" data-field-height-res-480-value="771" data-field-width-res-480-value="480" data-field-top-res-640-value="0" data-field-left-res-640-value="0" data-field-height-res-640-value="734" data-field-width-res-640-value="500" data-field-top-res-960-value="0" data-field-left-res-960-value="1" data-field-height-res-960-value="734" data-field-width-res-960-value="660"> <div class='tn-atom'> </div> </div> <div class='t396__elem tn-elem tn-elem__2105895931470379967708' data-elem-id='1470379967708' data-elem-type='text' data-field-top-value="181" data-field-left-value="281" data-field-width-value="210" data-field-axisy-value="top" data-field-axisx-value="left" data-field-container-value="grid" data-field-topunits-value="px" data-field-leftunits-value="px" data-field-heightunits-value="" data-field-widthunits-value="px" data-field-top-res-320-value="140" data-field-left-res-320-value="12" data-field-top-res-480-value="181" data-field-left-res-480-value="12" data-field-top-res-640-value="181" data-field-left-res-640-value="92" data-field-top-res-960-value="181" data-field-left-res-960-value="252"> <div class='tn-atom'field='tn_text_1470379967708'>Change screen type <br />Hide grid <br />Hide settings <br />Hide control elements <br />Undo the last action <br />Save <br />Copy <br />Paste <br />Move <br />Delete <br />Change opacity <br />Lock the element <br />Change font size <br />Change line spacing <br />Change letter spacing <br />Select all<br />Layers: Hide/Show<br />Guides: Add Horizontal<br />Guides: Add Vertical</div> </div> <div class='t396__elem tn-elem tn-elem__2105895931470380020170' data-elem-id='1470380020170' data-elem-type='text' data-field-top-value="181" data-field-left-value="802" data-field-width-value="160" data-field-axisy-value="top" data-field-axisx-value="left" data-field-container-value="grid" data-field-topunits-value="px" data-field-leftunits-value="px" data-field-heightunits-value="" data-field-widthunits-value="px" data-field-top-res-320-value="142" data-field-left-res-320-value="232" data-field-top-res-480-value="185" data-field-left-res-480-value="332" data-field-top-res-640-value="185" data-field-left-res-640-value="412" data-field-top-res-960-value="181" data-field-left-res-960-value="652"> <div class='tn-atom'field='tn_text_1470380020170'>⌘+1...5<br> G<br> TAB<br> F<br> ⌘+Z<br> ⌘+S<br> ⌘+C<br> ⌘+V<br> (Shift+) ←↑→↓<br> Backspace<br> 0...9<br> L<br> + / –<br> ⌘+ ↑ / ↓<br> ⌘+ ← / →<br> ⌘+A<br>⌘+L<br>⌘+H<br>⌘+Shift+L</div> </div> <div class='t396__elem tn-elem tn-elem__2105895931470380191243' data-elem-id='1470380191243' data-elem-type='shape' data-field-top-value="203" data-field-left-value="450" data-field-height-value="1" data-field-width-value="330" data-field-axisy-value="top" data-field-axisx-value="left" data-field-container-value="grid" data-field-topunits-value="px" data-field-leftunits-value="px" data-field-heightunits-value="px" data-field-widthunits-value="px" data-field-top-res-960-value="203" data-field-left-res-960-value="408"> <div class='tn-atom'> </div> </div> <div class='t396__elem tn-elem tn-elem__2105895931470380352955' data-elem-id='1470380352955' data-elem-type='shape' data-field-top-value="234" data-field-left-value="370" data-field-height-value="1" data-field-width-value="410" data-field-axisy-value="top" data-field-axisx-value="left" data-field-container-value="grid" data-field-topunits-value="px" data-field-leftunits-value="px" data-field-heightunits-value="px" data-field-widthunits-value="px" data-field-top-res-960-value="234" data-field-left-res-960-value="359"> <div class='tn-atom'> </div> </div> <div class='t396__elem tn-elem tn-elem__2105895931470380482431' data-elem-id='1470380482431' data-elem-type='shape' data-field-top-value="265" data-field-left-value="400" data-field-height-value="1" data-field-width-value="380" data-field-axisy-value="top" data-field-axisx-value="left" data-field-container-value="grid" data-field-topunits-value="px" data-field-leftunits-value="px" data-field-heightunits-value="px" data-field-widthunits-value="px" data-field-top-res-960-value="265" data-field-left-res-960-value="404"> <div class='tn-atom'> </div> </div> <div class='t396__elem tn-elem tn-elem__2105895931470380684852' data-elem-id='1470380684852' data-elem-type='shape' data-field-top-value="296" data-field-left-value="493" data-field-height-value="1" data-field-width-value="287" data-field-axisy-value="top" data-field-axisx-value="left" data-field-container-value="grid" data-field-topunits-value="px" data-field-leftunits-value="px" data-field-heightunits-value="px" data-field-widthunits-value="px" data-field-top-res-960-value="296" data-field-left-res-960-value="504"> <div class='tn-atom'> </div> </div> <div class='t396__elem tn-elem tn-elem__2105895931470380705900' data-elem-id='1470380705900' data-elem-type='shape' data-field-top-value="327" data-field-left-value="455" data-field-height-value="1" data-field-width-value="325" data-field-axisy-value="top" data-field-axisx-value="left" data-field-container-value="grid" data-field-topunits-value="px" data-field-leftunits-value="px" data-field-heightunits-value="px" data-field-widthunits-value="px" data-field-top-res-960-value="327" data-field-left-res-960-value="477"> <div class='tn-atom'> </div> </div> <div class='t396__elem tn-elem tn-elem__2105895931470380732169' data-elem-id='1470380732169' data-elem-type='shape' data-field-top-value="357" data-field-left-value="330" data-field-height-value="1" data-field-width-value="450" data-field-axisy-value="top" data-field-axisx-value="left" data-field-container-value="grid" data-field-topunits-value="px" data-field-leftunits-value="px" data-field-heightunits-value="px" data-field-widthunits-value="px" data-field-top-res-960-value="357" data-field-left-res-960-value="328"> <div class='tn-atom'> </div> </div> <div class='t396__elem tn-elem tn-elem__2105895931470380758865' data-elem-id='1470380758865' data-elem-type='shape' data-field-top-value="388" data-field-left-value="333" data-field-height-value="1" data-field-width-value="447" data-field-axisy-value="top" data-field-axisx-value="left" data-field-container-value="grid" data-field-topunits-value="px" data-field-leftunits-value="px" data-field-heightunits-value="px" data-field-widthunits-value="px" data-field-top-res-960-value="388" data-field-left-res-960-value="406"> <div class='tn-atom'> </div> </div> <div class='t396__elem tn-elem tn-elem__2105895931470380785438' data-elem-id='1470380785438' data-elem-type='shape' data-field-top-value="419" data-field-left-value="333" data-field-height-value="1" data-field-width-value="447" data-field-axisy-value="top" data-field-axisx-value="left" data-field-container-value="grid" data-field-topunits-value="px" data-field-leftunits-value="px" data-field-heightunits-value="px" data-field-widthunits-value="px" data-field-top-res-960-value="419" data-field-left-res-960-value="382"> <div class='tn-atom'> </div> </div> <div class='t396__elem tn-elem tn-elem__2105895931470380822709' data-elem-id='1470380822709' data-elem-type='shape' data-field-top-value="450" data-field-left-value="340" data-field-height-value="1" data-field-width-value="440" data-field-axisy-value="top" data-field-axisx-value="left" data-field-container-value="grid" data-field-topunits-value="px" data-field-leftunits-value="px" data-field-heightunits-value="px" data-field-widthunits-value="px" data-field-top-res-960-value="450" data-field-left-res-960-value="415"> <div class='tn-atom'> </div> </div> <div class='t396__elem tn-elem tn-elem__2105895931470380876034' data-elem-id='1470380876034' data-elem-type='shape' data-field-top-value="481" data-field-left-value="350" data-field-height-value="1" data-field-width-value="430" data-field-axisy-value="top" data-field-axisx-value="left" data-field-container-value="grid" data-field-topunits-value="px" data-field-leftunits-value="px" data-field-heightunits-value="px" data-field-widthunits-value="px" data-field-top-res-960-value="481" data-field-left-res-960-value="373"> <div class='tn-atom'> </div> </div> <div class='t396__elem tn-elem tn-elem__2105895931470380913182' data-elem-id='1470380913182' data-elem-type='shape' data-field-top-value="512" data-field-left-value="418" data-field-height-value="1" data-field-width-value="362" data-field-axisy-value="top" data-field-axisx-value="left" data-field-container-value="grid" data-field-topunits-value="px" data-field-leftunits-value="px" data-field-heightunits-value="px" data-field-widthunits-value="px" data-field-top-res-960-value="512" data-field-left-res-960-value="432"> <div class='tn-atom'> </div> </div> <div class='t396__elem tn-elem tn-elem__2105895931470380937853' data-elem-id='1470380937853' data-elem-type='shape' data-field-top-value="544" data-field-left-value="440" data-field-height-value="1" data-field-width-value="340" data-field-axisy-value="top" data-field-axisx-value="left" data-field-container-value="grid" data-field-topunits-value="px" data-field-leftunits-value="px" data-field-heightunits-value="px" data-field-widthunits-value="px" data-field-top-res-960-value="544" data-field-left-res-960-value="433"> <div class='tn-atom'> </div> </div> <div class='t396__elem tn-elem tn-elem__2105895931470380953637' data-elem-id='1470380953637' data-elem-type='shape' data-field-top-value="575" data-field-left-value="425" data-field-height-value="1" data-field-width-value="355" data-field-axisy-value="top" data-field-axisx-value="left" data-field-container-value="grid" data-field-topunits-value="px" data-field-leftunits-value="px" data-field-heightunits-value="px" data-field-widthunits-value="px" data-field-top-res-960-value="575" data-field-left-res-960-value="449"> <div class='tn-atom'> </div> </div> <div class='t396__elem tn-elem tn-elem__2105895931470380962637' data-elem-id='1470380962637' data-elem-type='shape' data-field-top-value="606" data-field-left-value="455" data-field-height-value="1" data-field-width-value="325" data-field-axisy-value="top" data-field-axisx-value="left" data-field-container-value="grid" data-field-topunits-value="px" data-field-leftunits-value="px" data-field-heightunits-value="px" data-field-widthunits-value="px" data-field-top-res-960-value="606" data-field-left-res-960-value="526"> <div class='tn-atom'> </div> </div> <div class='t396__elem tn-elem tn-elem__2105895931470380972008' data-elem-id='1470380972008' data-elem-type='shape' data-field-top-value="637" data-field-left-value="470" data-field-height-value="1" data-field-width-value="310" data-field-axisy-value="top" data-field-axisx-value="left" data-field-container-value="grid" data-field-topunits-value="px" data-field-leftunits-value="px" data-field-heightunits-value="px" data-field-widthunits-value="px" data-field-top-res-960-value="637" data-field-left-res-960-value="526"> <div class='tn-atom'> </div> </div> <div class='t396__elem tn-elem tn-elem__2105895931470380988760' data-elem-id='1470380988760' data-elem-type='shape' data-field-top-value="668" data-field-left-value="370" data-field-height-value="1" data-field-width-value="410" data-field-axisy-value="top" data-field-axisx-value="left" data-field-container-value="grid" data-field-topunits-value="px" data-field-leftunits-value="px" data-field-heightunits-value="px" data-field-widthunits-value="px" data-field-top-res-960-value="668" data-field-left-res-960-value="346"> <div class='tn-atom'> </div> </div> <div class='t396__elem tn-elem tn-elem__2105895931470381802276' data-elem-id='1470381802276' data-elem-type='text' data-field-top-value="123" data-field-left-value="280" data-field-width-value="260" data-field-axisy-value="top" data-field-axisx-value="left" data-field-container-value="grid" data-field-topunits-value="px" data-field-leftunits-value="px" data-field-heightunits-value="" data-field-widthunits-value="px" data-field-top-res-320-value="82" data-field-left-res-320-value="11" data-field-top-res-480-value="123" data-field-left-res-480-value="11" data-field-width-res-480-value="260" data-field-top-res-640-value="123" data-field-left-res-640-value="91" data-field-top-res-960-value="123" data-field-left-res-960-value="251" data-field-width-res-960-value="270"> <div class='tn-atom'field='tn_text_1470381802276'>(Use Ctrl instead of ⌘ if you are a Windows user)</div> </div> <div class='t396__elem tn-elem tn-elem__2105895931594516577753' data-elem-id='1594516577753' data-elem-type='shape' data-field-top-value="698" data-field-left-value="459" data-field-height-value="1" data-field-width-value="320" data-field-axisy-value="top" data-field-axisx-value="left" data-field-container-value="grid" data-field-topunits-value="px" data-field-leftunits-value="px" data-field-heightunits-value="px" data-field-widthunits-value="px" data-field-top-res-960-value="678px" data-field-left-res-960-value="356px"> <div class='tn-atom'> </div> </div> <div class='t396__elem tn-elem tn-elem__2105895931594516630706' data-elem-id='1594516630706' data-elem-type='shape' data-field-top-value="729" data-field-left-value="490" data-field-height-value="1" data-field-width-value="290" data-field-axisy-value="top" data-field-axisx-value="left" data-field-container-value="grid" data-field-topunits-value="px" data-field-leftunits-value="px" data-field-heightunits-value="px" data-field-widthunits-value="px" data-field-top-res-960-value="688px" data-field-left-res-960-value="366px"> <div class='tn-atom'> </div> </div> <div class='t396__elem tn-elem tn-elem__2105895931594516654111' data-elem-id='1594516654111' data-elem-type='shape' data-field-top-value="761" data-field-left-value="470" data-field-height-value="1" data-field-width-value="310" data-field-axisy-value="top" data-field-axisx-value="left" data-field-container-value="grid" data-field-topunits-value="px" data-field-leftunits-value="px" data-field-heightunits-value="px" data-field-widthunits-value="px" data-field-top-res-960-value="688px" data-field-left-res-960-value="366px"> <div class='tn-atom'> </div> </div> </div> </div> <script>t_onReady(function() {t_onFuncLoad('t396_init',function() {t396_init('210589593');});});</script>  </div> <div id="rec7538891" class="r t-rec t-rec_pt_30 t-rec_pb_60" style="padding-top:30px;padding-bottom:60px; " data-record-type="106">  <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md ">You can also access the list of keyboard shortcuts from the context menu in the Block Editor.<br /></div> </div> </div> </div> </div> <div id="rec7538892" class="r t-rec t-rec_pt_165 t-rec_pb_75" style="padding-top:165px;padding-bottom:75px; " data-record-type="128">  <div class="t120"> <div class="t-container t-align_left"> <div class="t-col t-col_8 t-prefix_2"> <div class="t120__title t-heading t-heading_sm" field="title">How to edit elements using the Settings panel</div> <div class="t120__descr t-descr t-descr_xs" field="subtitle">(TAB key)</div> </div> </div> </div> </div> <div id="rec7538893" class="r t-rec t-rec_pt_15 t-rec_pb_15" style="padding-top:15px;padding-bottom:15px; " data-record-type="373">  <div class="t373"> <div class="t-container"> <div class="t-col t-col_8 t-prefix_2"> <div class="t373__wrapper"> <div class="t373__col"> <div class="t373__circle " style="border: 0px solid #000; "> <div class="t373__title t-title" field="number" style="">1</div> </div> </div> <div class="t373__col"> <div class="t373__text t-text t-text_md" field="text"><strong>Text</strong></div> </div> </div> </div> </div> </div> </div> <div id="rec7538894" class="r t-rec t-rec_pt_15 t-rec_pb_75" style="padding-top:15px;padding-bottom:75px; " data-record-type="106">  <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md ">You can access the full settings of any element by clicking on Settings in the bottom right corner of the screen.<br /></div> </div> </div> </div> </div> <div id="rec7538895" class="r t-rec t-rec_pt_0 t-rec_pb_165" style="padding-top:0px;padding-bottom:165px; " data-record-type="3">  <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3230-3365-4239-b164-656138336536/18.gif"> <img class="t-img t-width t107__width t-width_8" src="https://thb.tildacdn.com/tild3230-3365-4239-b164-656138336536/-/empty/18.gif" data-original="https://static.tildacdn.com/tild3230-3365-4239-b164-656138336536/18.gif" imgfield="img" alt=""> </div> </div> </div> <div id="rec7538896" class="r t-rec t-rec_pt_0 t-rec_pb_75" style="padding-top:0px;padding-bottom:75px; " data-record-type="296">  <div class="t265"> <div class="t-container"> <div class="t-col t-col_8 t-prefix_2"> <div class="t265__wrapper" style="background: #EBEBEB;"> <div class="t265__icon"> <svg role="img" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;"> <circle style="fill:#000000;" cx="12.125" cy="12.125" r="12"/> <g> <path style="fill: #fff;" d="M10.922,6.486c0-0.728,0.406-1.091,1.217-1.091s1.215,0.363,1.215,1.091c0,0.347-0.102,0.617-0.304,0.81 c-0.202,0.193-0.507,0.289-0.911,0.289C11.328,7.585,10.922,7.219,10.922,6.486z M13.252,17.792h-2.234V9.604h2.234V17.792z"/> </g> </svg> </div> <div class="t265__text t-descr t-descr_xs" field="text">You can open or close the Settings panel by pressing the <span style="font-weight: 400;">Tab key.</span></div> </div> </div> </div> </div> </div> <div id="rec7538897" class="r t-rec t-rec_pt_0 t-rec_pb_30" style="padding-top:0px;padding-bottom:30px; " data-record-type="106">  <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md ">By default, the Settings panel is hidden to keep the workspace clear.<br /></div> </div> </div> </div> </div> <div id="rec7538898" class="r t-rec t-rec_pt_0 t-rec_pb_60" style="padding-top:0px;padding-bottom:60px; " data-record-type="106">  <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md ">Use the upper button row to align an element vertically or horizontally to the container quickly.<br /><br /> You can see the element's coordinates below. They can be given in pixels or percent. Below we are reviewing this feature in detail.<br /><br /> The origin is indicated with a blue cross.<br /><br /> You can also view the element's parameters: width and height, measured in pixels.<br /></div> </div> </div> </div> </div> <div id="rec7538899" class="r t-rec t-rec_pt_30 t-rec_pb_45" style="padding-top:30px;padding-bottom:45px; " data-record-type="374">  <div class="t374"> <div class="t-container"> <div class="t-col t-col_8 t-prefix_2"> <a class="t374__link" href="https://help.tilda.ws/zero-block-advanced#rec7369787" target="_blank"> <div class="t374__wrapper"> <div class="t374__col t374__col-left"> <svg role="presentation" imgfield="img" width="30px" height="30px" viewBox="0 0 30 30"> <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g class="t374__svg" transform="translate(1.000000, 1.000000)"> <circle cx="14.2" cy="14.1" r="14.1"></circle> <path d="M12.1,19.9 L17.7,14.3 L12.1,8.7"></path> </g> </g> </svg> </div> <div class="t374__col"> <div class="t374__title t-text t-text_sm" field="title">Click here to find out how to change the container and the origin of element coodinates.</div> </div> </div> </a> </div> </div> </div> </div> <div id="rec7538900" class="r t-rec t-rec_pt_90 t-rec_pb_75" style="padding-top:90px;padding-bottom:75px; " data-record-type="3">  <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3065-6134-4339-b862-383134343532/zb-elements.png"> <img class="t-img t-width t107__width t-width_12" src="https://thb.tildacdn.com/tild3065-6134-4339-b862-383134343532/-/empty/zb-elements.png" data-original="https://static.tildacdn.com/tild3065-6134-4339-b862-383134343532/zb-elements.png" imgfield="img" alt=""> </div> </div> </div> <div id="rec7538901" class="r t-rec t-rec_pt_0 t-rec_pb_90" style="padding-top:0px;padding-bottom:90px; " data-record-type="3">  <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3535-3539-4564-b765-393433656637/zb-text.png"> <img class="t-img t-width t107__width t-width_12" src="https://thb.tildacdn.com/tild3535-3539-4564-b765-393433656637/-/empty/zb-text.png" data-original="https://static.tildacdn.com/tild3535-3539-4564-b765-393433656637/zb-text.png" imgfield="img" alt=""> </div> </div> </div> <div id="rec7538902" class="r t-rec t-rec_pt_45 t-rec_pb_45" style="padding-top:45px;padding-bottom:45px; " data-record-type="296">  <div class="t265"> <div class="t-container"> <div class="t-col t-col_8 t-prefix_2"> <div class="t265__wrapper" style="background: #EBEBEB;"> <div class="t265__icon"> <svg role="img" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;"> <circle style="fill:#000000;" cx="12.125" cy="12.125" r="12"/> <g> <path style="fill: #fff;" d="M10.922,6.486c0-0.728,0.406-1.091,1.217-1.091s1.215,0.363,1.215,1.091c0,0.347-0.102,0.617-0.304,0.81 c-0.202,0.193-0.507,0.289-0.911,0.289C11.328,7.585,10.922,7.219,10.922,6.486z M13.252,17.792h-2.234V9.604h2.234V17.792z"/> </g> </svg> </div> <div class="t265__text t-descr t-descr_xs" field="text">To change the font size, use the <span style="font-weight: 400;">–/+ keys.</span></div> </div> </div> </div> </div> </div> <div id="rec7538903" class="r t-rec t-rec_pt_0 t-rec_pb_45" style="padding-top:0px;padding-bottom:45px; " data-record-type="296">  <div class="t265"> <div class="t-container"> <div class="t-col t-col_8 t-prefix_2"> <div class="t265__wrapper" style="background: #EBEBEB;"> <div class="t265__icon"> <svg role="img" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;"> <circle style="fill:#000000;" cx="12.125" cy="12.125" r="12"/> <g> <path style="fill: #fff;" d="M10.922,6.486c0-0.728,0.406-1.091,1.217-1.091s1.215,0.363,1.215,1.091c0,0.347-0.102,0.617-0.304,0.81 c-0.202,0.193-0.507,0.289-0.911,0.289C11.328,7.585,10.922,7.219,10.922,6.486z M13.252,17.792h-2.234V9.604h2.234V17.792z"/> </g> </svg> </div> <div class="t265__text t-descr t-descr_xs" field="text"><span style="font-weight: 400;">You can change the line spacing by pressing Cmd+up/down arrow keys.<br />You can change the letter spacing by pressing </span><span style="font-weight: 400;">Cmd+left/right arrow keys.</span><br /></div> </div> </div> </div> </div> </div> <div id="rec7538904" class="r t-rec t-rec_pt_0 t-rec_pb_90" style="padding-top:0px;padding-bottom:90px; " data-record-type="296">  <div class="t265"> <div class="t-container"> <div class="t-col t-col_8 t-prefix_2"> <div class="t265__wrapper" style="background: #EBEBEB;"> <div class="t265__icon"> <svg role="img" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;"> <circle style="fill:#000000;" cx="12.125" cy="12.125" r="12"/> <g> <path style="fill: #fff;" d="M10.922,6.486c0-0.728,0.406-1.091,1.217-1.091s1.215,0.363,1.215,1.091c0,0.347-0.102,0.617-0.304,0.81 c-0.202,0.193-0.507,0.289-0.911,0.289C11.328,7.585,10.922,7.219,10.922,6.486z M13.252,17.792h-2.234V9.604h2.234V17.792z"/> </g> </svg> </div> <div class="t265__text t-descr t-descr_xs" field="text">To copy an element, drag it while holding the <span style="font-weight: 400;">Alt key.</span><br /></div> </div> </div> </div> </div> </div> <div id="rec7538905" class="r t-rec t-rec_pt_45 t-rec_pb_120" style="padding-top:45px;padding-bottom:120px; " data-record-type="3">  <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild6563-6162-4433-b433-316534636639/zb-element-settings.png"> <img class="t-img t-width t107__width t-width_12" src="https://thb.tildacdn.com/tild6563-6162-4433-b433-316534636639/-/empty/zb-element-settings.png" data-original="https://static.tildacdn.com/tild6563-6162-4433-b433-316534636639/zb-element-settings.png" imgfield="img" alt=""> </div> </div> </div> <div id="rec7538906" class="r t-rec t-rec_pt_0 t-rec_pb_150" style="padding-top:0px;padding-bottom:150px; " data-record-type="296">  <div class="t265"> <div class="t-container"> <div class="t-col t-col_8 t-prefix_2"> <div class="t265__wrapper" style="background: #EBEBEB;"> <div class="t265__icon"> <svg role="img" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;"> <circle style="fill:#000000;" cx="12.125" cy="12.125" r="12"/> <g> <path style="fill: #fff;" d="M10.922,6.486c0-0.728,0.406-1.091,1.217-1.091s1.215,0.363,1.215,1.091c0,0.347-0.102,0.617-0.304,0.81 c-0.202,0.193-0.507,0.289-0.911,0.289C11.328,7.585,10.922,7.219,10.922,6.486z M13.252,17.792h-2.234V9.604h2.234V17.792z"/> </g> </svg> </div> <div class="t265__text t-descr t-descr_xs" field="text">Opacity is easy to adjust using a keyboard:<br />1—10%<br />2—20%<br />...<br />0— 100%</div> </div> </div> </div> </div> </div> <div id="rec7538907" class="r t-rec t-rec_pt_30 t-rec_pb_0" style="padding-top:30px;padding-bottom:0px; " data-record-type="3">  <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild6236-3132-4330-b533-353131643234/zb-link.png"> <img class="t-img t-width t107__width t-width_12" src="https://thb.tildacdn.com/tild6236-3132-4330-b533-353131643234/-/empty/zb-link.png" data-original="https://static.tildacdn.com/tild6236-3132-4330-b533-353131643234/zb-link.png" imgfield="img" alt=""> </div> </div> </div> <div id="rec7538908" class="r t-rec t-rec_pt_150 t-rec_pb_15" style="padding-top:150px;padding-bottom:15px; " data-record-type="373">  <div class="t373"> <div class="t-container"> <div class="t-col t-col_8 t-prefix_2"> <div class="t373__wrapper"> <div class="t373__col"> <div class="t373__circle " style="border: 0px solid #000; "> <div class="t373__title t-title" field="number" style="">2</div> </div> </div> <div class="t373__col"> <div class="t373__text t-text t-text_md" field="text"><strong>Image</strong></div> </div> </div> </div> </div> </div> </div> <div id="rec7538909" class="r t-rec t-rec_pt_15 t-rec_pb_90" style="padding-top:15px;padding-bottom:90px; " data-record-type="106">  <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md ">When you upload an image, it takes the size of the frame in which it is uploaded. Click on Original size in the Settings panel of the element to reset the image to its original size.</div> </div> </div> </div> </div> <div id="rec7538910" class="r t-rec t-rec_pt_15 t-rec_pb_75" style="padding-top:15px;padding-bottom:75px; " data-record-type="3">  <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild6163-3062-4365-b231-393331346339/3.gif"> <img class="t-img t-width t107__width t-width_10" src="https://thb.tildacdn.com/tild6163-3062-4365-b231-393331346339/-/empty/3.gif" data-original="https://static.tildacdn.com/tild6163-3062-4365-b231-393331346339/3.gif" imgfield="img" alt=""> </div> </div> </div> <div id="rec7538911" class="r t-rec t-rec_pt_60 t-rec_pb_90" style="padding-top:60px;padding-bottom:90px; " data-record-type="106">  <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md ">If you want to crop the image in a circle shape, set the rounding radius.<br /><br />To make an even circle, the original image should be of a square shape, and the rounding radius should be equal to half of the side. For example, if the image's size is 100×100 px, set a radius equal to 50.</div> </div> </div> </div> </div> <div id="rec7538912" class="r t-rec t-rec_pt_0 t-rec_pb_0" style="padding-top:0px;padding-bottom:0px; " data-record-type="3">  <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3331-6436-4338-b462-663636653439/41.jpg"> <img class="t-img t-width t107__width t-width_10" src="https://thb.tildacdn.com/tild3331-6436-4338-b462-663636653439/-/empty/41.jpg" data-original="https://static.tildacdn.com/tild3331-6436-4338-b462-663636653439/41.jpg" imgfield="img" alt=""> </div> </div> </div> <div id="rec7538913" class="r t-rec t-rec_pt_90 t-rec_pb_90" style="padding-top:90px;padding-bottom:90px; " data-record-type="106">  <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md ">You can add a shadow to the image. To do this, select the shadow color, opacity, x and y offset, degree of blurring and spreading in the Settings panel of the element.</div> </div> </div> </div> </div> <div id="rec7538914" class="r t-rec t-rec_pt_15 t-rec_pb_75" style="padding-top:15px;padding-bottom:75px; " data-record-type="3">  <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3635-3930-4133-a463-343862633231/42.jpg"> <img class="t-img t-width t107__width t-width_10" src="https://thb.tildacdn.com/tild3635-3930-4133-a463-343862633231/-/empty/42.jpg" data-original="https://static.tildacdn.com/tild3635-3930-4133-a463-343862633231/42.jpg" imgfield="img" alt=""> </div> </div> </div> <div id="rec7538915" class="r t-rec t-rec_pt_60 t-rec_pb_90" style="padding-top:60px;padding-bottom:90px; " data-record-type="106">  <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md ">Each image can have an alternative text (alt tag). Search engines interpret the alternative text as keywords and use them to index the page, so make sure that the alternative text is relevant to your website's content in general and reflects the content of the image.<br /></div> </div> </div> </div> </div> <div id="rec7538916" class="r t-rec t-rec_pt_15 t-rec_pb_75" style="padding-top:15px;padding-bottom:75px; " data-record-type="3">  <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild6466-3762-4333-a630-646164613563/43.jpg"> <img class="t-img t-width t107__width t-width_10" src="https://thb.tildacdn.com/tild6466-3762-4333-a630-646164613563/-/empty/43.jpg" data-original="https://static.tildacdn.com/tild6466-3762-4333-a630-646164613563/43.jpg" imgfield="img" alt=""> </div> </div> </div> <div id="rec7538917" class="r t-rec t-rec_pt_75 t-rec_pb_60" style="padding-top:75px;padding-bottom:60px; " data-record-type="106">  <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md ">Any image can be turned into a link so that when the user clicks on it, they will be taken to another page. Go to the Settings panel of the element and specify the link and whether it should be opened in the same window or a new one.<br /></div> </div> </div> </div> </div> <div id="rec7538918" class="r t-rec t-rec_pt_150 t-rec_pb_15" style="padding-top:150px;padding-bottom:15px; " data-record-type="373">  <div class="t373"> <div class="t-container"> <div class="t-col t-col_8 t-prefix_2"> <div class="t373__wrapper"> <div class="t373__col"> <div class="t373__circle " style="border: 0px solid #000; "> <div class="t373__title t-title" field="number" style="">3</div> </div> </div> <div class="t373__col"> <div class="t373__text t-text t-text_md" field="text"><strong>Shape</strong></div> </div> </div> </div> </div> </div> </div> <div id="rec7538919" class="r t-rec t-rec_pt_15 t-rec_pb_60" style="padding-top:15px;padding-bottom:60px; " data-record-type="106">  <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md ">When you add a shape, a square appears on the page, which can be transformed into a rectangle, a circle, or a line.<br /><br /><span style="font-weight: 400;">Rectangle</span>: change side lengths by dragging the control points.</div> </div> </div> </div> </div> <div id="rec7538920" class="r t-rec t-rec_pt_30 t-rec_pb_75" style="padding-top:30px;padding-bottom:75px; " data-record-type="3">  <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3137-6565-4864-b062-623863663735/4.gif"> <img class="t-img t-width t107__width t-width_10" src="https://thb.tildacdn.com/tild3137-6565-4864-b062-623863663735/-/empty/4.gif" data-original="https://static.tildacdn.com/tild3137-6565-4864-b062-623863663735/4.gif" imgfield="img" alt=""> </div> </div> </div> <div id="rec7538921" class="r t-rec t-rec_pt_60 t-rec_pb_60" style="padding-top:60px;padding-bottom:60px; " data-record-type="106">  <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md ">Or specify the values in the element settings.</div> </div> </div> </div> </div> <div id="rec7538922" class="r t-rec t-rec_pt_0 t-rec_pb_135" style="padding-top:0px;padding-bottom:135px; " data-record-type="3">  <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3235-6561-4033-a531-306236666437/12.jpg"> <img class="t-img t-width t107__width t-width_10" src="https://thb.tildacdn.com/tild3235-6561-4033-a531-306236666437/-/empty/12.jpg" data-original="https://static.tildacdn.com/tild3235-6561-4033-a531-306236666437/12.jpg" imgfield="img" alt=""> </div> </div> </div> <div id="rec7538923" class="r t-rec t-rec_pt_0 t-rec_pb_60" style="padding-top:0px;padding-bottom:60px; " data-record-type="106">  <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><span style="font-weight: 400;">Circle.</span> <span style="font-weight: 300;">To make a circle, set a rounding radius equal to half of the square side length. </span></div> </div> </div> </div> </div> <div id="rec7538924" class="r t-rec t-rec_pt_0 t-rec_pb_75" style="padding-top:0px;padding-bottom:75px; " data-record-type="3">  <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild6333-3961-4363-a235-303464306539/circle.png"> <img class="t-img t-width t107__width t-width_10" src="https://thb.tildacdn.com/tild6333-3961-4363-a235-303464306539/-/empty/circle.png" data-original="https://static.tildacdn.com/tild6333-3961-4363-a235-303464306539/circle.png" imgfield="img" alt=""> </div> </div> </div> <div id="rec7538925" class="r t-rec t-rec_pt_60 t-rec_pb_60" style="padding-top:60px;padding-bottom:60px; " data-record-type="106">  <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md "><span style="font-weight: 400;">Line.</span> Set the rectangle's height to 1-5 px in the element settings; thus, you will make a line.</div> </div> </div> </div> </div> <div id="rec7538926" class="r t-rec t-rec_pt_0 t-rec_pb_75" style="padding-top:0px;padding-bottom:75px; " data-record-type="3">  <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3532-3139-4436-b831-346137323836/12b.jpg"> <img class="t-img t-width t107__width t-width_10" src="https://thb.tildacdn.com/tild3532-3139-4436-b831-346137323836/-/empty/12b.jpg" data-original="https://static.tildacdn.com/tild3532-3139-4436-b831-346137323836/12b.jpg" imgfield="img" alt=""> </div> </div> </div> <div id="rec7538927" class="r t-rec t-rec_pt_60 t-rec_pb_0" style="padding-top:60px;padding-bottom:0px; " data-record-type="106">  <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md ">Shapes can have a shadow, a border, and a link assigned to them.</div> </div> </div> </div> </div> <div id="rec7538928" class="r t-rec t-rec_pt_150 t-rec_pb_15" style="padding-top:150px;padding-bottom:15px; " data-record-type="373">  <div class="t373"> <div class="t-container"> <div class="t-col t-col_8 t-prefix_2"> <div class="t373__wrapper"> <div class="t373__col"> <div class="t373__circle " style="border: 0px solid #000; "> <div class="t373__title t-title" field="number" style="">4</div> </div> </div> <div class="t373__col"> <div class="t373__text t-text t-text_md" field="text"><strong>Button</strong></div> </div> </div> </div> </div> </div> </div> <div id="rec7538929" class="r t-rec t-rec_pt_0 t-rec_pb_60" style="padding-top:0px;padding-bottom:60px; " data-record-type="106">  <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md ">You can change the button's size, color, and rounding radius. You can also add a shadow and a border to it.<br /><br /> You can set the button's caption and link in the Settings panel of the element. There you can also set its size, type, opacity, and font color.<br /></div> </div> </div> </div> </div> <div id="rec7538930" class="r t-rec t-rec_pt_30 t-rec_pb_75" style="padding-top:30px;padding-bottom:75px; " data-record-type="3">  <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3433-6638-4536-b231-363534643263/zb-button.png"> <img class="t-img t-width t107__width t-width_10" src="https://thb.tildacdn.com/tild3433-6638-4536-b231-363534643263/-/empty/zb-button.png" data-original="https://static.tildacdn.com/tild3433-6638-4536-b231-363534643263/zb-button.png" imgfield="img" alt=""> </div> </div> </div> <div id="rec7538931" class="r t-rec t-rec_pt_75 t-rec_pb_60" style="padding-top:75px;padding-bottom:60px; " data-record-type="106">  <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md ">You can set the button's behavior. For example, the background color, text color, and border color will change when the button is hovered over.</div> </div> </div> </div> </div> <div id="rec7538932" class="r t-rec t-rec_pt_15 t-rec_pb_45" style="padding-top:15px;padding-bottom:45px; " data-record-type="3">  <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3532-6662-4665-a435-343134313739/45.gif"> <img class="t-img t-width t107__width t-width_8" src="https://thb.tildacdn.com/tild3532-6662-4665-a435-343134313739/-/empty/45.gif" data-original="https://static.tildacdn.com/tild3532-6662-4665-a435-343134313739/45.gif" imgfield="img" alt=""> </div> </div> </div> <div id="rec265772238" class="r t-rec t-rec_pt_150 t-rec_pb_15" style="padding-top:150px;padding-bottom:15px; " data-record-type="373">  <div class="t373"> <div class="t-container"> <div class="t-col t-col_8 t-prefix_2"> <div class="t373__wrapper"> <div class="t373__col"> <div class="t373__circle " style="border: 0px solid #000; "> <div class="t373__title t-title" field="number" style="">5</div> </div> </div> <div class="t373__col"> <div class="t373__text t-text t-text_md" field="text"><strong>Tooltip</strong></div> </div> </div> </div> </div> </div> </div> <div id="rec265772413" class="r t-rec t-rec_pt_0 t-rec_pb_60" style="padding-top:0px;padding-bottom:60px; " data-record-type="106">  <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md ">Tooltip is an interactive block element that displays a text hint and/or an image when you hover the pointer over it.<br /><br /> You can adjust the tooltip's color, shadow, size, set the icon displayed inside the circle, upload the image that will pop up when you hover the pointer over it, and create an animation.<br /><br /> Be sure to check the tooltip's location on all screen resolutions after arranging the elements in the block so that the tooltip is not cut off at the edges of the block. <br /></div> </div> </div> </div> </div> <div id="rec265778944" class="r t-rec t-rec_pt_15 t-rec_pb_45" style="padding-top:15px;padding-bottom:45px; " data-record-type="3">  <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3664-3564-4562-b462-383561633539/14.gif"> <img class="t-img t-width t107__width t-width_10" src="https://thb.tildacdn.com/tild3664-3564-4562-b462-383561633539/-/empty/14.gif" data-original="https://static.tildacdn.com/tild3664-3564-4562-b462-383561633539/14.gif" imgfield="img" alt=""> <div class="t-container_8"> <div class="t-col t-col_8 t107__title t-text" field="title" itemprop="name">Using a tooltip to show product features. Photo by <a href="https://www.flickr.com/photos/spera-designerschuhe/16768159649/in/album-72157650315001477/" target="_blank" style="color:rgb(253, 113, 36) !important;">SPERA.de</a>.</div> </div> </div> </div> </div> <div id="rec265781480" class="r t-rec t-rec_pt_150 t-rec_pb_15" style="padding-top:150px;padding-bottom:15px; " data-record-type="373">  <div class="t373"> <div class="t-container"> <div class="t-col t-col_8 t-prefix_2"> <div class="t373__wrapper"> <div class="t373__col"> <div class="t373__circle " style="border: 0px solid #000; "> <div class="t373__title t-title" field="number" style="">6</div> </div> </div> <div class="t373__col"> <div class="t373__text t-text t-text_md" field="text"><strong>Form</strong></div> </div> </div> </div> </div> </div> </div> <div id="rec265781677" class="r t-rec t-rec_pt_0 t-rec_pb_60" style="padding-top:0px;padding-bottom:60px; " data-record-type="106">  <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md ">You can add a horizontal or vertical form to a Zero Block. You will have access to all the basic form settings, like adding input fields, connecting data capture services, setting up success and error messages, changing its design, and creating an animation.</div> </div> </div> </div> </div> <div id="rec265783359" class="r t-rec t-rec_pt_15 t-rec_pb_45" style="padding-top:15px;padding-bottom:45px; " data-record-type="3">  <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild6462-3263-4631-b333-633663336338/blog-tilda.png"> <img class="t-img t-width t107__width t-width_10" src="https://thb.tildacdn.com/tild6462-3263-4631-b333-633663336338/-/empty/blog-tilda.png" data-original="https://static.tildacdn.com/tild6462-3263-4631-b333-633663336338/blog-tilda.png" imgfield="img" alt=""> </div> </div> </div> <div id="rec265787143" class="r t-rec t-rec_pt_0 t-rec_pb_60" style="padding-top:0px;padding-bottom:60px; " data-record-type="106">  <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md ">To edit the input fields, go to the Settings panel of the element and click on Input fields. Here you can customize the input fields like in a regular form block.</div> </div> </div> </div> </div> <div id="rec265788152" class="r t-rec t-rec_pt_15 t-rec_pb_45" style="padding-top:15px;padding-bottom:45px; " data-record-type="3">  <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3638-6231-4062-a361-626134393331/zero-form-fields.png"> <img class="t-img t-width t107__width t-width_10" src="https://thb.tildacdn.com/tild3638-6231-4062-a361-626134393331/-/empty/zero-form-fields.png" data-original="https://static.tildacdn.com/tild3638-6231-4062-a361-626134393331/zero-form-fields.png" imgfield="img" alt=""> </div> </div> </div> <div id="rec265790715" class="r t-rec t-rec_pt_0 t-rec_pb_60" style="padding-top:0px;padding-bottom:60px; " data-record-type="106">  <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md ">To connect data capture services to the form, go to the Settings panel of the element and click on Services. There you can connect the data capture services to the form.</div> </div> </div> </div> </div> <div id="rec265790885" class="r t-rec t-rec_pt_15 t-rec_pb_45" style="padding-top:15px;padding-bottom:45px; " data-record-type="3">  <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild6432-3435-4437-b162-316461653762/zero-form-services.png"> <img class="t-img t-width t107__width t-width_10" src="https://thb.tildacdn.com/tild6432-3435-4437-b162-316461653762/-/empty/zero-form-services.png" data-original="https://static.tildacdn.com/tild6432-3435-4437-b162-316461653762/zero-form-services.png" imgfield="img" alt=""> </div> </div> </div> <div id="rec785494430" class="r t-rec t-rec_pt_0 t-rec_pb_60" style="padding-top:0px;padding-bottom:60px; " data-record-type="106">  <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md ">In Zero Block, you can add an image gallery. You can change the gallery's width and height just like for the Shape element.</div> </div> </div> </div> </div> <div id="rec785494473" class="r t-rec t-rec_pt_0 t-rec_pb_60" style="padding-top:0px;padding-bottom:60px; " data-record-type="106">  <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md ">Let's check the gallery settings:<br /><br /><strong>Stretch:</strong> It has two parameters: Cover and Contain.<br /><br />For Cover, the images will fill the gallery area completely, so they may be cropped if their format is different from that of the gallery.<br /><br />For Contain, the images in the gallery will be in their original format, so they won't be cropped on galleries of any format.<br /><br /><strong>Position.</strong> It defines the image's position with respect to the gallery area. For example, if the Left Top parameter is selected, the image will be positioned with respect to the left top corner of the gallery.<br /><br /><strong>Loop.</strong> This setting loops the slides (images) in the gallery. It has two parameters: Loop and None.<br /><br />For Loop, slides in the gallery will be looped infinitely, that is the first slide will appear after the last slide.<br /><br />For the None option, there is no looping and the gallery will stop at the last slide.<br /><br /><strong>Slide Speed</strong> defines the animation type for changing slides. It has three parameters: None, Slow, and Fast.<br /><br />For the None option, no animation is used when you switch slides.<br /><br />For the Slow option, slides are switched slowly.<br /><br />For the Fast option, slides are switched fast.<br /><br /><strong>Autoplay</strong> defines the speed of automatic slide change in seconds.<br />If you haven't specified the value in seconds, there is no automatic slide change.<br /><br />The <strong>Zoomable</strong> option allows zooming in the gallery images on click. It has two parameters: Zoom on click and None.<br /><br />For Zoom on click, the images will be zoomed in on click.<br /><br />For the None option, the images won't be zoomed in on click.<br /><br />The <strong>Arrows</strong> tab includes settings that define what arrows (buttons) look like.<br /><br />The <strong>Dots</strong> tab includes settings that define what the dots below the gallery look like. The dots display the number of slides.<br /><br />Each slide (image) has its own settings:</div> </div> </div> </div> </div> <div id="rec785494709" class="r t-rec t-rec_pt_0 t-rec_pb_60" style="padding-top:0px;padding-bottom:60px; " data-record-type="106">  <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md ">Here you can add an image caption, Alt tag for SEO, include a YouTube or Vimeo video, as well as a link to jump to when you click on this slide.</div> </div> </div> </div> </div> <div id="rec7538933" class="r t-rec t-rec_pt_180 t-rec_pb_60" style="padding-top:180px;padding-bottom:60px; " data-record-type="158">  <div class="t146"> <div class="t146__cir" field="title"> 4 </div> </div> </div> <div id="rec7538934" class="r t-rec t-rec_pt_0 t-rec_pb_90" style="padding-top:0px;padding-bottom:90px; " data-record-type="33">  <div class="t017"> <div class="t-container t-align_center"> <div class="t-col t-col_10 t-prefix_1"> <div class="t017__title t-title t-title_xxs" field="title">How to Create a Responsive Design</div> </div> </div> </div> </div> <div id="rec7538935" class="r t-rec t-rec_pt_0 t-rec_pb_90" style="padding-top:0px;padding-bottom:90px; " data-record-type="106">  <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md ">Tilda supports responsive design for all the basic screen types:<br />1200—max (desktops)<br />980—1200 (horizontal tablet)<br />640—980 (vertical tablet)<br />480—640 (horizontal smartphone)<br />320—480 (vertical smartphone)<br /><br />This is enough for your design to display correctly on all devices.<br /><br />After you have customized a Zero Block on the main artboard, switch the screen types and make adjustments where necessary, such as text column width, image size, font size, artboard height, or element layout.</div> </div> </div> </div> </div> <div id="rec7538936" class="r t-rec t-rec_pt_45 t-rec_pb_15" style="padding-top:45px;padding-bottom:15px; " data-record-type="3">  <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3831-3963-4266-a465-636139373631/7.gif"> <img class="t-img t-width t107__width t-width_8" src="https://thb.tildacdn.com/tild3831-3963-4266-a465-636139373631/-/empty/7.gif" data-original="https://static.tildacdn.com/tild3831-3963-4266-a465-636139373631/7.gif" imgfield="img" alt=""> </div> </div> </div> <div id="rec7538937" class="r t-rec t-rec_pt_105 t-rec_pb_75" style="padding-top:105px;padding-bottom:75px; " data-record-type="106">  <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md ">Those settings that have been changed for a given screen type are highlighted. The settings that mirror those of another screen type are gray. This way, it is easy to see which settings have been changed.<br /><br /> In the example below, the text element has all its settings in gray. It means that they are the same for the current screen type as for the previous one.<br /></div> </div> </div> </div> </div> <div id="rec7538938" class="r t-rec t-rec_pt_0 t-rec_pb_75" style="padding-top:0px;padding-bottom:75px; " data-record-type="3">  <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild6463-6663-4633-b338-363334613736/blob.png"> <img class="t-img t-width t107__width t-width_10" src="https://thb.tildacdn.com/tild6463-6663-4633-b338-363334613736/-/empty/blob.png" data-original="https://static.tildacdn.com/tild6463-6663-4633-b338-363334613736/blob.png" imgfield="img" alt=""> </div> </div> </div> <div id="rec7538939" class="r t-rec t-rec_pt_15 t-rec_pb_60" style="padding-top:15px;padding-bottom:60px; " data-record-type="106">  <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md ">If we change the font size and element coordinates for a given screen type, the values will no longer be colored in gray. It will mean that the new settings are unique for this screen type.</div> </div> </div> </div> </div> <div id="rec7538940" class="r t-rec t-rec_pt_0 t-rec_pb_0" style="padding-top:0px;padding-bottom:0px; " data-record-type="3">  <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild6636-6563-4662-b236-333036666337/blob.png"> <img class="t-img t-width t107__width t-width_10" src="https://thb.tildacdn.com/tild6636-6563-4662-b236-333036666337/-/empty/blob.png" data-original="https://static.tildacdn.com/tild6636-6563-4662-b236-333036666337/blob.png" imgfield="img" alt=""> </div> </div> </div> <div id="rec7538941" class="r t-rec t-rec_pt_180 t-rec_pb_60" style="padding-top:180px;padding-bottom:60px; " data-record-type="158">  <div class="t146"> <div class="t146__cir" field="title"> 5 </div> </div> </div> <div id="rec7538942" class="r t-rec t-rec_pt_0 t-rec_pb_90" style="padding-top:0px;padding-bottom:90px; " data-record-type="33">  <div class="t017"> <div class="t-container t-align_center"> <div class="t-col t-col_10 t-prefix_1"> <div class="t017__title t-title t-title_xxs" field="title">Artboard Settings</div> </div> </div> </div> </div> <div id="rec7538943" class="r t-rec t-rec_pt_0 t-rec_pb_60" style="padding-top:0px;padding-bottom:60px; " data-record-type="106">  <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md ">If you click on an empty space, you will see the Artboard Settings.<br /><br />You can specify the Grid Container height in pixels using your keyboard. You can change the value by dragging the edge of the container. The Grid Container width is fixed at 1200px.</div> </div> </div> </div> </div> <div id="rec7538944" class="r t-rec t-rec_pt_30 t-rec_pb_120" style="padding-top:30px;padding-bottom:120px; " data-record-type="3">  <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3062-3335-4239-b762-323630343865/5.gif"> <img class="t-img t-width t107__width t-width_8" src="https://thb.tildacdn.com/tild3062-3335-4239-b762-323630343865/-/empty/5.gif" data-original="https://static.tildacdn.com/tild3062-3335-4239-b762-323630343865/5.gif" imgfield="img" alt=""> </div> </div> </div> <div id="rec7538945" class="r t-rec t-rec_pt_60 t-rec_pb_30" style="padding-top:60px;padding-bottom:30px; " data-record-type="106">  <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md ">You can customize the background color of the entire block in the Artboard Settings.</div> </div> </div> </div> </div> <div id="rec7538946" class="r t-rec t-rec_pt_15 t-rec_pb_75" style="padding-top:15px;padding-bottom:75px; " data-record-type="3">  <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild6364-3730-4366-b863-353030626264/blob.png"> <img class="t-img t-width t107__width t-width_10" src="https://thb.tildacdn.com/tild6364-3730-4366-b863-353030626264/-/empty/blob.png" data-original="https://static.tildacdn.com/tild6364-3730-4366-b863-353030626264/blob.png" imgfield="img" alt=""> </div> </div> </div> <div id="rec7538947" class="r t-rec t-rec_pt_60 t-rec_pb_60" style="padding-top:60px;padding-bottom:60px; " data-record-type="106">  <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md ">You can upload a background image for the entire block in the Artboard Settings.</div> </div> </div> </div> </div> <div id="rec7538948" class="r t-rec t-rec_pt_0 t-rec_pb_30" style="padding-top:0px;padding-bottom:30px; " data-record-type="3">  <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3531-6533-4239-a331-613466346239/blob.png"> <img class="t-img t-width t107__width t-width_10" src="https://thb.tildacdn.com/tild3531-6533-4239-a331-613466346239/-/empty/blob.png" data-original="https://static.tildacdn.com/tild3531-6533-4239-a331-613466346239/blob.png" imgfield="img" alt=""> </div> </div> </div> <div id="rec7538949" class="r t-rec t-rec_pt_75 t-rec_pb_75" style="padding-top:75px;padding-bottom:75px; " data-record-type="106">  <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md ">You can also customize background image rendering (Filter Start/Filter End) and content behavior regarding the background image: If you set a "Fixed" value, the content (text and shapes) will move during scrolling, while the image will stay in place.</div> </div> </div> </div> </div> <div id="rec7538950" class="r t-rec t-rec_pt_0 t-rec_pb_75" style="padding-top:0px;padding-bottom:75px; " data-record-type="3">  <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild6662-3132-4230-b230-376335646439/blob.png"> <img class="t-img t-width t107__width t-width_10" src="https://thb.tildacdn.com/tild6662-3132-4230-b230-376335646439/-/empty/blob.png" data-original="https://static.tildacdn.com/tild6662-3132-4230-b230-376335646439/blob.png" imgfield="img" alt=""> </div> </div> </div> <div id="rec634507065" class="r t-rec" style=" " data-record-type="215"> <a name="popup" style="font-size:0;"></a> </div> <div id="rec634507066" class="r t-rec t-rec_pt_135 t-rec_pt-res-480_105 t-rec_pb_0 t-rec_pb-res-480_60" style="padding-top:135px;padding-bottom:0px; " data-record-type="33">  <div class="t017"> <div class="t-container t-align_center"> <div class="t-col t-col_8 t-prefix_2"> <div class="t017__title t-title t-title_xxs" field="title">Using Zero Block as a pop-up window</div> </div> </div> </div> <style> #rec634507066 .t017__title{font-weight:600;}</style> </div> <div id="rec638601975" class="r t-rec t-rec_pt_45 t-rec_pb_30" style="padding-top:45px;padding-bottom:30px; " data-record-type="4">  <div class="t121"> <center> <div class="t-width t-width_10"> <div class="t121__wrap-video"> <div class="t-video-lazyload" data-videolazy-load="false" data-blocklazy-id="638601975" data-videolazy-type="youtube" data-videolazy-id="jN15I1S0-w8" data-videolazy-height="540px" style="height: 540px;"> </div> </div> </div> </center> </div> <script type="text/javascript">t_onReady(function() {t_onFuncLoad('t121_init',function() {t121_init('638601975');});});</script> </div> <div id="rec634507067" class="r t-rec t-rec_pt_30 t-rec_pb_0" style="padding-top:30px;padding-bottom:0px; " data-record-type="106">  <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md ">For a block to pop up by clicking on a button or link, add the T1093 modifier block from the "Other" category.</div> </div> </div> </div> </div> <div id="rec634507068" class="r t-rec t-rec_pt_30 t-rec_pb_30" style="padding-top:30px;padding-bottom:30px; " data-record-type="3">  <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3039-3566-4665-a366-316664366538/Screenshot_2023-08-3.png"> <img class="t-img t-width t107__width t-width_9" src="https://thb.tildacdn.com/tild3039-3566-4665-a366-316664366538/-/empty/Screenshot_2023-08-3.png" data-original="https://static.tildacdn.com/tild3039-3566-4665-a366-316664366538/Screenshot_2023-08-3.png" imgfield="img" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild3039-3566-4665-a366-316664366538/Screenshot_2023-08-3.png" alt=""> </div> </div> </div> <div id="rec634507069" class="r t-rec t-rec_pt_0 t-rec_pb_30" style="padding-top:0px;padding-bottom:30px; " data-record-type="106">  <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md ">In the Content tab of the block, specify the ID of the Zero Block you need (or choose it manually by clicking the "Choose Zero Block" link). By default, the link to pop-up is the #zeropopup link, you can change this for any name you like, but should keep the hash sign at the beginning. Then the block will work like a usual pop-up and will be <strong>hidden</strong> on the page.<br /><br />Read more on how pop-up blocks work in the <a href="https://help.tilda.cc/popups">"Pop-ups"</a> article.</div> </div> </div> </div> </div> <div id="rec634507070" class="r t-rec t-rec_pt_0 t-rec_pb_30" style="padding-top:0px;padding-bottom:30px; " data-record-type="3">  <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3663-3532-4764-a230-323638326566/Screenshot_2023-08-3.png"> <img class="t-img t-width t107__width t-width_9" src="https://thb.tildacdn.com/tild3663-3532-4764-a230-323638326566/-/empty/Screenshot_2023-08-3.png" data-original="https://static.tildacdn.com/tild3663-3532-4764-a230-323638326566/Screenshot_2023-08-3.png" imgfield="img" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild3663-3532-4764-a230-323638326566/Screenshot_2023-08-3.png" alt=""> </div> </div> </div> <div id="rec634507071" class="r t-rec t-rec_pt_0 t-rec_pb_75" style="padding-top:0px;padding-bottom:75px; " data-record-type="106">  <div class="t004"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div field="text" class="t-text t-text_md ">In the settings of the T1093 block, you can select the parameters for the background (color, opacity), the close icon color, animation speed, <br />your own <a href="#zindex">Z-index</a>, and other parameters.</div> </div> </div> </div> </div> <div id="rec634549220" class="r t-rec" style=" " data-animationappear="off" data-record-type="303"> <div class="t300" data-tooltip-hook="#zindex" data-tooltip-id="634549220" data-tooltip-position=""> <div class="t300__content"> <div class="t300__content-text">The z-index defines the order of overlapping blocks on the page. Use custom numeric values (e.g., a block with a z-index of 10 will overlap a block with a z-index of 5).</div> </div> </div> <style>.t300__tooltipster-noir_634549220{background-color:#111 !important;color:#fff !important;border-radius:0 !important;;}</style> </div> <div id="rec7538951" class="r t-rec t-rec_pt_120 t-rec_pb_150" style="padding-top:120px;padding-bottom:150px; " data-record-type="127">  <div class="t119"> <div class="t-container "> <div class="t-col t-col_8 t-prefix_2"> <div class="t119__preface t-descr" field="text">We've covered the basic settings and features of Zero Block. In the second part of the tutorial, we'll review the advanced settings regarding responsive design.</div> </div> </div> </div> <style> #rec7538951 .t119__preface{opacity:0.7;}</style> </div> <div id="rec7538952" class="r t-rec t-rec_pt_165 t-rec_pb_45" style="padding-top:165px;padding-bottom:45px;background-color:#000000; " data-animationappear="off" data-record-type="30" data-bg-color="#000000">  <div class="t015"> <div class="t-container t-align_center"> <div class="t-col t-col_10 t-prefix_1"> <div class="t015__uptitle t-uptitle t-uptitle_md" field="subtitle"><div style="color:#ffffff;" data-customstyle="yes">part two</div></div> <div class="t015__title t-title t-title_lg" field="title"><div style="color:#ffffff;" data-customstyle="yes">Responsive Design</div></div> <div class="t015__descr t-descr t-descr_xl" field="descr"><div style="color:#ffffff;" data-customstyle="yes"></div></div> </div> </div> </div> <style> #rec7538952 .t015__uptitle{text-transform:uppercase;}</style> </div> <div id="rec7538953" class="r t-rec t-rec_pt_0 t-rec_pb_165" style="padding-top:0px;padding-bottom:165px;background-color:#000000; " data-animationappear="off" data-record-type="191" data-bg-color="#000000">  <div class="t142"> <div class="t-container_100"> <div class="t142__wrapone"> <div class="t142__wraptwo"> <a class="t-btn t142__submit t142__submit_size_lg" href="https://help.tilda.ws/zero-block-advanced" target="" style="color:#ffffff;border:2px solid #ffffff;background-color:#000000;border-radius:30px; -moz-border-radius:30px; -webkit-border-radius:30px;" data-buttonfieldset="button"> <span class="t142__text">Go to</span> </a> </div> </div> </div> </div> <script>t_onReady(function() {t_onFuncLoad('t142_checkSize',function() {t142_checkSize('7538953');});});window.addEventListener('load',function() {t_onFuncLoad('t142_checkSize',function() {t142_checkSize('7538953');});});</script> </div>  <footer id="t-footer" class="t-records" data-hook="blocks-collection-content-node" data-tilda-project-id="6518" data-tilda-page-id="62096" data-tilda-formskey="0bbdd5272d658d3de5798b262a4fe80b" data-tilda-cookie="no" data-tilda-lazy="yes" data-tilda-root-zone="one" data-tilda-project-headcode="yes"> <div id="rec747695050" class="r t-rec t-rec_pt_120 t-rec_pb_60" style="padding-top:120px;padding-bottom:60px;background-color:#f5f5f5; " data-record-type="65" data-bg-color="#f5f5f5">  <div class="t056"> <div class="t-container t-align_left"> <div class="t-col t-col_12 "> <div class="t056__title t-name t-name_xl" field="title">Guides By Category:</div> </div> </div> </div> <style> #rec747695050 .t056__title{font-weight:500;}</style> </div> <div id="rec747687355" class="r t-rec t-rec_pt_0 t-rec_pb_120" style="padding-top:0px;padding-bottom:120px;background-color:#f5f5f5; " data-animationappear="off" data-record-type="344" data-bg-color="#f5f5f5">  <div class="t344"> <div class="t-container t-align_left"> <div class="t344__col t-col t-col_3"> <div class="t344__descr t-descr t-descr_xxs" field="descr"><ul><li><a href="https://help.tilda.cc/getstarted">How Tilda Works</a></li><li><a href="/settings">Site Settings</a></li><li><a href="https://help.tilda.cc/page">Page Editing</a></li><li><a href="https://help.tilda.cc/search-engine">Guide To SEO</a></li></ul></div> </div> <div class="t344__col t-col t-col_3"> <div class="t344__descr t-descr t-descr_xxs" field="descr2"><ul><li><a href="https://help.tilda.cc/domainandhttps">Domain And HTTPS</a></li><li><a href="https://help.tilda.cc/online-store-payments">Online Store & Payments</a></li><li><a href="https://help.tilda.cc/forms">Data Capture Forms</a></li><li><a href="https://help.tilda.cc/statistics">Website Statistics</a></li></ul></div> </div> <div class="t344__floatbeaker_lr3"></div> <div class="t344__col t-col t-col_3"> <div class="t344__descr t-descr t-descr_xxs" field="descr3"><ul><li><a href="https://help.tilda.cc/zero">Zero Block</a></li><li><a href="https://help.tilda.cc/email-campaign-builder">Email Campaign Builder</a></li><li><a href="https://help.tilda.cc/subscription">Pricing And Payment</a></li></ul></div> </div> <div class="t344__col t-col t-col_3"> <div class="t344__descr t-descr t-descr_xxs" field="descr4"><ul><li><a href="https://help.tilda.cc/feedsandnews">Feeds And News</a></li><li><a href="https://help.tilda.cc/membership">Memberships & User Accounts</a></li><li><a href="https://help.tilda.cc/fordevelopers">For Developers</a></li></ul></div> </div> </div> </div> <style>#rec747687355 .t344__title{color:#525252;}#rec747687355 .t344__descr{color:#ffffff;}</style> <style> #rec747687355 .t344__title{color:#000000;text-transform:uppercase;}#rec747687355 .t344__descr{font-size:18px;color:#000000;}</style> </div> <div id="rec747662976" class="r t-rec t-rec_pt_105 t-rec_pb_105" style="padding-top:105px;padding-bottom:105px;background-color:#e8e8e8; " data-animationappear="off" data-record-type="396" data-bg-color="#e8e8e8">  <style>#rec747662976 .t396__artboard {height:400px;background-color:#E8E8E8;}#rec747662976 .t396__filter {height:400px;}#rec747662976 .t396__carrier{height:400px;background-position:center center;background-attachment:scroll;background-size:cover;background-repeat:no-repeat;}@media screen and (max-width:1199px) {#rec747662976 .t396__artboard,#rec747662976 .t396__filter,#rec747662976 .t396__carrier {height:360px;}#rec747662976 .t396__filter {}#rec747662976 .t396__carrier {background-attachment:scroll;}}@media screen and (max-width:959px) {#rec747662976 .t396__artboard,#rec747662976 .t396__filter,#rec747662976 .t396__carrier {height:330px;}#rec747662976 .t396__filter {}#rec747662976 .t396__carrier {background-attachment:scroll;}}@media screen and (max-width:639px) {#rec747662976 .t396__artboard,#rec747662976 .t396__filter,#rec747662976 .t396__carrier {height:535px;}#rec747662976 .t396__filter {}#rec747662976 .t396__carrier {background-attachment:scroll;}}@media screen and (max-width:479px) {#rec747662976 .t396__artboard,#rec747662976 .t396__filter,#rec747662976 .t396__carrier {height:545px;}#rec747662976 .t396__filter {}#rec747662976 .t396__carrier {background-attachment:scroll;}}#rec747662976 .tn-elem[data-elem-id="1691586016953"]{z-index:4;top:81px;left:calc(50% - 600px + 470px);width:40px;height:auto;}#rec747662976 .tn-elem[data-elem-id="1691586016953"] .tn-atom {border-radius:0px 0px 0px 0px;background-position:center center;border-color:transparent ;border-style:solid;}#rec747662976 .tn-elem[data-elem-id="1691586016953"] .tn-atom__img {border-radius:0px 0px 0px 0px;}@media screen and (max-width:1199px) {#rec747662976 .tn-elem[data-elem-id="1691586016953"] {top:76px;left:calc(50% - 480px + 350px);height:auto;}#rec747662976 .tn-elem[data-elem-id="1691586016953"] .tn-atom {-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);transform:rotate(0deg);}}@media screen and (max-width:959px) {#rec747662976 .tn-elem[data-elem-id="1691586016953"] {top:230px;left:calc(50% - 320px + 466px);width:30px;height:auto;}}@media screen and (max-width:639px) {#rec747662976 .tn-elem[data-elem-id="1691586016953"] {top:85px;left:calc(50% - 240px + 225px);height:auto;}}@media screen and (max-width:479px) {#rec747662976 .tn-elem[data-elem-id="1691586016953"] {top:73px;left:calc(50% - 160px + 145px);height:auto;}}#rec747662976 .tn-elem[data-elem-id="1619019903098"]{z-index:5;top:81px;left:calc(50% - 600px + 580px);width:40px;height:auto;}#rec747662976 .tn-elem[data-elem-id="1619019903098"] .tn-atom {border-radius:0px 0px 0px 0px;background-position:center center;border-color:transparent ;border-style:solid;}#rec747662976 .tn-elem[data-elem-id="1619019903098"] .tn-atom__img {border-radius:0px 0px 0px 0px;}@media screen and (max-width:1199px) {#rec747662976 .tn-elem[data-elem-id="1619019903098"] {top:76px;left:calc(50% - 480px + 460px);height:auto;}}@media screen and (max-width:959px) {#rec747662976 .tn-elem[data-elem-id="1619019903098"] {top:230px;left:calc(50% - 320px + 376px);width:30px;height:auto;}}@media screen and (max-width:639px) {#rec747662976 .tn-elem[data-elem-id="1619019903098"] {top:85px;left:calc(50% - 240px + 135px);height:auto;}}@media screen and (max-width:479px) {#rec747662976 .tn-elem[data-elem-id="1619019903098"] {top:73px;left:calc(50% - 160px + 55px);height:auto;}}#rec747662976 .tn-elem[data-elem-id="1619019903111"]{z-index:6;top:81px;left:calc(50% - 600px + 525px);width:40px;height:auto;}#rec747662976 .tn-elem[data-elem-id="1619019903111"] .tn-atom {border-radius:0px 0px 0px 0px;background-position:center center;border-color:transparent ;border-style:solid;}#rec747662976 .tn-elem[data-elem-id="1619019903111"] .tn-atom__img {border-radius:0px 0px 0px 0px;}@media screen and (max-width:1199px) {#rec747662976 .tn-elem[data-elem-id="1619019903111"] {top:76px;left:calc(50% - 480px + 405px);height:auto;}}@media screen and (max-width:959px) {#rec747662976 .tn-elem[data-elem-id="1619019903111"] {top:230px;left:calc(50% - 320px + 331px);width:30px;height:auto;}}@media screen and (max-width:639px) {#rec747662976 .tn-elem[data-elem-id="1619019903111"] {top:85px;left:calc(50% - 240px + 90px);height:auto;}}@media screen and (max-width:479px) {#rec747662976 .tn-elem[data-elem-id="1619019903111"] {top:73px;left:calc(50% - 160px + 10px);height:auto;}}#rec747662976 .tn-elem[data-elem-id="1691585962458"]{z-index:7;top:81px;left:calc(50% - 600px + 635px);width:40px;height:auto;}#rec747662976 .tn-elem[data-elem-id="1691585962458"] .tn-atom {border-radius:0px 0px 0px 0px;background-position:center center;border-color:transparent ;border-style:solid;}#rec747662976 .tn-elem[data-elem-id="1691585962458"] .tn-atom__img {border-radius:0px 0px 0px 0px;}@media screen and (max-width:1199px) {#rec747662976 .tn-elem[data-elem-id="1691585962458"] {top:76px;left:calc(50% - 480px + 515px);height:auto;}}@media screen and (max-width:959px) {#rec747662976 .tn-elem[data-elem-id="1691585962458"] {top:230px;left:calc(50% - 320px + 421px);width:30px;height:auto;}}@media screen and (max-width:639px) {#rec747662976 .tn-elem[data-elem-id="1691585962458"] {top:85px;left:calc(50% - 240px + 180px);height:auto;}}@media screen and (max-width:479px) {#rec747662976 .tn-elem[data-elem-id="1691585962458"] {top:73px;left:calc(50% - 160px + 100px);height:auto;}}#rec747662976 .tn-elem[data-elem-id="1619019903084"]{z-index:8;top:81px;left:calc(50% - 600px + 690px);width:40px;height:auto;}#rec747662976 .tn-elem[data-elem-id="1619019903084"] .tn-atom {border-radius:0px 0px 0px 0px;background-position:center center;border-color:transparent ;border-style:solid;}#rec747662976 .tn-elem[data-elem-id="1619019903084"] .tn-atom__img {border-radius:0px 0px 0px 0px;}@media screen and (max-width:1199px) {#rec747662976 .tn-elem[data-elem-id="1619019903084"] {top:76px;left:calc(50% - 480px + 570px);height:auto;}#rec747662976 .tn-elem[data-elem-id="1619019903084"] .tn-atom {-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);transform:rotate(0deg);}}@media screen and (max-width:959px) {#rec747662976 .tn-elem[data-elem-id="1619019903084"] {top:230px;left:calc(50% - 320px + 511px);width:30px;height:auto;}}@media screen and (max-width:639px) {#rec747662976 .tn-elem[data-elem-id="1619019903084"] {top:85px;left:calc(50% - 240px + 270px);height:auto;}}@media screen and (max-width:479px) {#rec747662976 .tn-elem[data-elem-id="1619019903084"] {top:73px;left:calc(50% - 160px + 190px);height:auto;}}#rec747662976 .tn-elem[data-elem-id="1691586016953"]{z-index:4;top:81px;left:calc(50% - 600px + 470px);width:40px;height:auto;}#rec747662976 .tn-elem[data-elem-id="1691586016953"] .tn-atom {border-radius:0px 0px 0px 0px;background-position:center center;border-color:transparent ;border-style:solid;}#rec747662976 .tn-elem[data-elem-id="1691586016953"] .tn-atom__img {border-radius:0px 0px 0px 0px;}@media screen and (max-width:1199px) {#rec747662976 .tn-elem[data-elem-id="1691586016953"] {top:76px;left:calc(50% - 480px + 350px);height:auto;}#rec747662976 .tn-elem[data-elem-id="1691586016953"] .tn-atom {-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);transform:rotate(0deg);}}@media screen and (max-width:959px) {#rec747662976 .tn-elem[data-elem-id="1691586016953"] {top:230px;left:calc(50% - 320px + 466px);width:30px;height:auto;}}@media screen and (max-width:639px) {#rec747662976 .tn-elem[data-elem-id="1691586016953"] {top:85px;left:calc(50% - 240px + 225px);height:auto;}}@media screen and (max-width:479px) {#rec747662976 .tn-elem[data-elem-id="1691586016953"] {top:73px;left:calc(50% - 160px + 145px);height:auto;}}#rec747662976 .tn-elem[data-elem-id="1619019903098"]{z-index:5;top:81px;left:calc(50% - 600px + 580px);width:40px;height:auto;}#rec747662976 .tn-elem[data-elem-id="1619019903098"] .tn-atom {border-radius:0px 0px 0px 0px;background-position:center center;border-color:transparent ;border-style:solid;}#rec747662976 .tn-elem[data-elem-id="1619019903098"] .tn-atom__img {border-radius:0px 0px 0px 0px;}@media screen and (max-width:1199px) {#rec747662976 .tn-elem[data-elem-id="1619019903098"] {top:76px;left:calc(50% - 480px + 460px);height:auto;}}@media screen and (max-width:959px) {#rec747662976 .tn-elem[data-elem-id="1619019903098"] {top:230px;left:calc(50% - 320px + 376px);width:30px;height:auto;}}@media screen and (max-width:639px) {#rec747662976 .tn-elem[data-elem-id="1619019903098"] {top:85px;left:calc(50% - 240px + 135px);height:auto;}}@media screen and (max-width:479px) {#rec747662976 .tn-elem[data-elem-id="1619019903098"] {top:73px;left:calc(50% - 160px + 55px);height:auto;}}#rec747662976 .tn-elem[data-elem-id="1619019903111"]{z-index:6;top:81px;left:calc(50% - 600px + 525px);width:40px;height:auto;}#rec747662976 .tn-elem[data-elem-id="1619019903111"] .tn-atom {border-radius:0px 0px 0px 0px;background-position:center center;border-color:transparent ;border-style:solid;}#rec747662976 .tn-elem[data-elem-id="1619019903111"] .tn-atom__img {border-radius:0px 0px 0px 0px;}@media screen and (max-width:1199px) {#rec747662976 .tn-elem[data-elem-id="1619019903111"] {top:76px;left:calc(50% - 480px + 405px);height:auto;}}@media screen and (max-width:959px) {#rec747662976 .tn-elem[data-elem-id="1619019903111"] {top:230px;left:calc(50% - 320px + 331px);width:30px;height:auto;}}@media screen and (max-width:639px) {#rec747662976 .tn-elem[data-elem-id="1619019903111"] {top:85px;left:calc(50% - 240px + 90px);height:auto;}}@media screen and (max-width:479px) {#rec747662976 .tn-elem[data-elem-id="1619019903111"] {top:73px;left:calc(50% - 160px + 10px);height:auto;}}#rec747662976 .tn-elem[data-elem-id="1691585962458"]{z-index:7;top:81px;left:calc(50% - 600px + 635px);width:40px;height:auto;}#rec747662976 .tn-elem[data-elem-id="1691585962458"] .tn-atom {border-radius:0px 0px 0px 0px;background-position:center center;border-color:transparent ;border-style:solid;}#rec747662976 .tn-elem[data-elem-id="1691585962458"] .tn-atom__img {border-radius:0px 0px 0px 0px;}@media screen and (max-width:1199px) {#rec747662976 .tn-elem[data-elem-id="1691585962458"] {top:76px;left:calc(50% - 480px + 515px);height:auto;}}@media screen and (max-width:959px) {#rec747662976 .tn-elem[data-elem-id="1691585962458"] {top:230px;left:calc(50% - 320px + 421px);width:30px;height:auto;}}@media screen and (max-width:639px) {#rec747662976 .tn-elem[data-elem-id="1691585962458"] {top:85px;left:calc(50% - 240px + 180px);height:auto;}}@media screen and (max-width:479px) {#rec747662976 .tn-elem[data-elem-id="1691585962458"] {top:73px;left:calc(50% - 160px + 100px);height:auto;}}#rec747662976 .tn-elem[data-elem-id="1619019903084"]{z-index:8;top:81px;left:calc(50% - 600px + 690px);width:40px;height:auto;}#rec747662976 .tn-elem[data-elem-id="1619019903084"] .tn-atom {border-radius:0px 0px 0px 0px;background-position:center center;border-color:transparent ;border-style:solid;}#rec747662976 .tn-elem[data-elem-id="1619019903084"] .tn-atom__img {border-radius:0px 0px 0px 0px;}@media screen and (max-width:1199px) {#rec747662976 .tn-elem[data-elem-id="1619019903084"] {top:76px;left:calc(50% - 480px + 570px);height:auto;}#rec747662976 .tn-elem[data-elem-id="1619019903084"] .tn-atom {-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);transform:rotate(0deg);}}@media screen and (max-width:959px) {#rec747662976 .tn-elem[data-elem-id="1619019903084"] {top:230px;left:calc(50% - 320px + 511px);width:30px;height:auto;}}@media screen and (max-width:639px) {#rec747662976 .tn-elem[data-elem-id="1619019903084"] {top:85px;left:calc(50% - 240px + 270px);height:auto;}}@media screen and (max-width:479px) {#rec747662976 .tn-elem[data-elem-id="1619019903084"] {top:73px;left:calc(50% - 160px + 190px);height:auto;}}#rec747662976 .tn-elem[data-elem-id="1619019713628"]{color:#000000;z-index:9;top:5px;left:calc(50% - 600px + 339px);width:111px;height:auto;}#rec747662976 .tn-elem[data-elem-id="1619019713628"] .tn-atom{color:#000000;font-size:20px;font-family:'TildaSans',Arial,sans-serif;line-height:1.55;font-weight:400;background-position:center center;border-color:transparent ;border-style:solid;}@media screen and (max-width:1199px) {#rec747662976 .tn-elem[data-elem-id="1619019713628"] {top:5px;left:calc(50% - 480px + 253px);width:88px;height:auto;}}@media screen and (max-width:959px) {#rec747662976 .tn-elem[data-elem-id="1619019713628"] {top:5px;left:calc(50% - 320px + 135px);width:57px;height:auto;}#rec747662976 .tn-elem[data-elem-id="1619019713628"] .tn-atom{font-size:16px;}}@media screen and (max-width:639px) {#rec747662976 .tn-elem[data-elem-id="1619019713628"] {top:5px;left:calc(50% - 240px + 72px);width:69px;height:auto;}#rec747662976 .tn-elem[data-elem-id="1619019713628"] .tn-atom{font-size:14px;}}@media screen and (max-width:479px) {#rec747662976 .tn-elem[data-elem-id="1619019713628"] {top:5px;left:calc(50% - 160px + 9px);width:62px;height:auto;}}#rec747662976 .tn-elem[data-elem-id="1619019754582"]{color:#000000;z-index:10;top:5px;left:calc(50% - 600px + 456px);width:183px;height:auto;}#rec747662976 .tn-elem[data-elem-id="1619019754582"] .tn-atom{color:#000000;font-size:20px;font-family:'TildaSans',Arial,sans-serif;line-height:1.55;font-weight:400;background-position:center center;border-color:transparent ;border-style:solid;}@media screen and (max-width:1199px) {#rec747662976 .tn-elem[data-elem-id="1619019754582"] {top:5px;left:calc(50% - 480px + 348px);width:160px;height:auto;}}@media screen and (max-width:959px) {#rec747662976 .tn-elem[data-elem-id="1619019754582"] {top:5px;left:calc(50% - 320px + 213px);width:109px;height:auto;}#rec747662976 .tn-elem[data-elem-id="1619019754582"] .tn-atom{font-size:16px;}}@media screen and (max-width:639px) {#rec747662976 .tn-elem[data-elem-id="1619019754582"] {top:5px;left:calc(50% - 240px + 141px);width:120px;height:auto;}#rec747662976 .tn-elem[data-elem-id="1619019754582"] .tn-atom{font-size:14px;}}@media screen and (max-width:479px) {#rec747662976 .tn-elem[data-elem-id="1619019754582"] {top:5px;left:calc(50% - 160px + 71px);width:107px;height:auto;}}#rec747662976 .tn-elem[data-elem-id="1619019777299"]{color:#000000;z-index:11;top:5px;left:calc(50% - 600px + 639px);width:177px;height:auto;}#rec747662976 .tn-elem[data-elem-id="1619019777299"] .tn-atom{color:#000000;font-size:20px;font-family:'TildaSans',Arial,sans-serif;line-height:1.55;font-weight:400;background-position:center center;border-color:transparent ;border-style:solid;}@media screen and (max-width:1199px) {#rec747662976 .tn-elem[data-elem-id="1619019777299"] {top:5px;left:calc(50% - 480px + 508px);width:148px;height:auto;}}@media screen and (max-width:959px) {#rec747662976 .tn-elem[data-elem-id="1619019777299"] {top:5px;left:calc(50% - 320px + 343px);width:107px;height:auto;}#rec747662976 .tn-elem[data-elem-id="1619019777299"] .tn-atom{font-size:16px;}}@media screen and (max-width:639px) {#rec747662976 .tn-elem[data-elem-id="1619019777299"] {top:5px;left:calc(50% - 240px + 261px);width:113px;height:auto;}#rec747662976 .tn-elem[data-elem-id="1619019777299"] .tn-atom{font-size:14px;}}@media screen and (max-width:479px) {#rec747662976 .tn-elem[data-elem-id="1619019777299"] {top:5px;left:calc(50% - 160px + 178px);width:103px;height:auto;}}#rec747662976 .tn-elem[data-elem-id="1619019804011"]{color:#000000;z-index:12;top:5px;left:calc(50% - 600px + 816px);width:123px;height:auto;}#rec747662976 .tn-elem[data-elem-id="1619019804011"] .tn-atom{color:#000000;font-size:20px;font-family:'TildaSans',Arial,sans-serif;line-height:1.55;font-weight:400;background-position:center center;border-color:transparent ;border-style:solid;}@media screen and (max-width:1199px) {#rec747662976 .tn-elem[data-elem-id="1619019804011"] {top:5px;left:calc(50% - 480px + 662px);width:87px;height:auto;}}@media screen and (max-width:959px) {#rec747662976 .tn-elem[data-elem-id="1619019804011"] {top:5px;left:calc(50% - 320px + 471px);width:34px;height:auto;}#rec747662976 .tn-elem[data-elem-id="1619019804011"] .tn-atom{font-size:16px;}}@media screen and (max-width:639px) {#rec747662976 .tn-elem[data-elem-id="1619019804011"] {top:5px;left:calc(50% - 240px + 374px);width:62px;height:auto;}#rec747662976 .tn-elem[data-elem-id="1619019804011"] .tn-atom{font-size:14px;}}@media screen and (max-width:479px) {#rec747662976 .tn-elem[data-elem-id="1619019804011"] {top:5px;left:calc(50% - 160px + 281px);width:39px;height:auto;}}#rec747662976 .tn-elem[data-elem-id="1619020045180"]{color:#000000;z-index:13;top:211px;left:calc(50% - 600px + 80px);width:300px;height:auto;}#rec747662976 .tn-elem[data-elem-id="1619020045180"] .tn-atom{color:#000000;font-size:22px;font-family:'TildaSans',Arial,sans-serif;line-height:1.55;font-weight:400;background-position:center center;border-color:transparent ;border-style:solid;}@media screen and (max-width:1199px) {#rec747662976 .tn-elem[data-elem-id="1619020045180"] {top:200px;left:calc(50% - 480px + 30px);width:220px;height:auto;}#rec747662976 .tn-elem[data-elem-id="1619020045180"] .tn-atom{font-size:17px;}}@media screen and (max-width:959px) {#rec747662976 .tn-elem[data-elem-id="1619020045180"] {top:97px;left:calc(50% - 320px + 10px);width:310px;height:auto;}#rec747662976 .tn-elem[data-elem-id="1619020045180"] .tn-atom{font-size:17px;line-height:1.3;}}@media screen and (max-width:639px) {#rec747662976 .tn-elem[data-elem-id="1619020045180"] {top:163px;left:calc(50% - 240px + 90px);width:377px;height:auto;}}@media screen and (max-width:479px) {#rec747662976 .tn-elem[data-elem-id="1619020045180"] {top:161px;left:calc(50% - 160px + 10px);width:297px;height:auto;}#rec747662976 .tn-elem[data-elem-id="1619020045180"] .tn-atom{line-height:1.2;}}#rec747662976 .tn-elem[data-elem-id="1619020045187"]{color:#6c6c6c;z-index:14;top:264px;left:calc(50% - 600px + 80px);width:312px;height:auto;}#rec747662976 .tn-elem[data-elem-id="1619020045187"] .tn-atom{color:#6c6c6c;font-size:15px;font-family:'TildaSans',Arial,sans-serif;line-height:1.55;font-weight:400;background-position:center center;border-color:transparent ;border-style:solid;}@media screen and (max-width:1199px) {#rec747662976 .tn-elem[data-elem-id="1619020045187"] {top:235px;left:calc(50% - 480px + 30px);width:280px;height:auto;}#rec747662976 .tn-elem[data-elem-id="1619020045187"] .tn-atom{font-size:14px;}}@media screen and (max-width:959px) {#rec747662976 .tn-elem[data-elem-id="1619020045187"] {top:128px;left:calc(50% - 320px + 10px);width:300px;height:auto;}#rec747662976 .tn-elem[data-elem-id="1619020045187"] .tn-atom{font-size:14px;}}@media screen and (max-width:639px) {#rec747662976 .tn-elem[data-elem-id="1619020045187"] {top:199px;left:calc(50% - 240px + 90px);width:296px;height:auto;}}@media screen and (max-width:479px) {#rec747662976 .tn-elem[data-elem-id="1619020045187"] {top:192px;left:calc(50% - 160px + 10px);width:301px;height:auto;}}#rec747662976 .tn-elem[data-elem-id="1619020084939"]{color:#000000;z-index:15;top:211px;left:calc(50% - 600px + 434px);width:361px;height:auto;}#rec747662976 .tn-elem[data-elem-id="1619020084939"] .tn-atom{color:#000000;font-size:22px;font-family:'TildaSans',Arial,sans-serif;line-height:1.55;font-weight:400;background-position:center center;border-color:transparent ;border-style:solid;}@media screen and (max-width:1199px) {#rec747662976 .tn-elem[data-elem-id="1619020084939"] {top:200px;left:calc(50% - 480px + 330px);width:312px;height:auto;}#rec747662976 .tn-elem[data-elem-id="1619020084939"] .tn-atom{font-size:17px;}}@media screen and (max-width:959px) {#rec747662976 .tn-elem[data-elem-id="1619020084939"] {top:97px;left:calc(50% - 320px + 330px);width:310px;height:auto;}#rec747662976 .tn-elem[data-elem-id="1619020084939"] .tn-atom{font-size:17px;line-height:1.3;}}@media screen and (max-width:639px) {#rec747662976 .tn-elem[data-elem-id="1619020084939"] {top:290px;left:calc(50% - 240px + 90px);width:377px;height:auto;}}@media screen and (max-width:479px) {#rec747662976 .tn-elem[data-elem-id="1619020084939"] {top:288px;left:calc(50% - 160px + 11px);width:300px;height:auto;}#rec747662976 .tn-elem[data-elem-id="1619020084939"] .tn-atom{line-height:1.2;}}#rec747662976 .tn-elem[data-elem-id="1619020084961"]{color:#6c6c6c;z-index:16;top:264px;left:calc(50% - 600px + 435px);width:330px;height:auto;}#rec747662976 .tn-elem[data-elem-id="1619020084961"] .tn-atom{color:#6c6c6c;font-size:15px;font-family:'TildaSans',Arial,sans-serif;line-height:1.55;font-weight:400;background-position:center center;border-color:transparent ;border-style:solid;}@media screen and (max-width:1199px) {#rec747662976 .tn-elem[data-elem-id="1619020084961"] {top:235px;left:calc(50% - 480px + 330px);width:303px;height:auto;}#rec747662976 .tn-elem[data-elem-id="1619020084961"] .tn-atom{font-size:14px;}}@media screen and (max-width:959px) {#rec747662976 .tn-elem[data-elem-id="1619020084961"] {top:128px;left:calc(50% - 320px + 330px);width:300px;height:auto;}#rec747662976 .tn-elem[data-elem-id="1619020084961"] .tn-atom{font-size:14px;}}@media screen and (max-width:639px) {#rec747662976 .tn-elem[data-elem-id="1619020084961"] {top:326px;left:calc(50% - 240px + 90px);width:313px;height:auto;}}@media screen and (max-width:479px) {#rec747662976 .tn-elem[data-elem-id="1619020084961"] {top:319px;left:calc(50% - 160px + 11px);width:301px;height:auto;}}#rec747662976 .tn-elem[data-elem-id="1619020118297"]{color:#000000;z-index:17;top:211px;left:calc(50% - 600px + 821px);width:300px;height:auto;}#rec747662976 .tn-elem[data-elem-id="1619020118297"] .tn-atom{color:#000000;font-size:22px;font-family:'TildaSans',Arial,sans-serif;line-height:1.55;font-weight:400;background-position:center center;border-color:transparent ;border-style:solid;}@media screen and (max-width:1199px) {#rec747662976 .tn-elem[data-elem-id="1619020118297"] {top:200px;left:calc(50% - 480px + 660px);width:271px;height:auto;}#rec747662976 .tn-elem[data-elem-id="1619020118297"] .tn-atom{font-size:17px;}}@media screen and (max-width:959px) {#rec747662976 .tn-elem[data-elem-id="1619020118297"] {top:218px;left:calc(50% - 320px + 10px);width:310px;height:auto;}#rec747662976 .tn-elem[data-elem-id="1619020118297"] .tn-atom{font-size:17px;line-height:1.3;}}@media screen and (max-width:639px) {#rec747662976 .tn-elem[data-elem-id="1619020118297"] {top:417px;left:calc(50% - 240px + 90px);width:378px;height:auto;}}@media screen and (max-width:479px) {#rec747662976 .tn-elem[data-elem-id="1619020118297"] {top:415px;left:calc(50% - 160px + 11px);width:299px;height:auto;}#rec747662976 .tn-elem[data-elem-id="1619020118297"] .tn-atom{line-height:1.2;}}#rec747662976 .tn-elem[data-elem-id="1619020118304"]{color:#6c6c6c;z-index:18;top:264px;left:calc(50% - 600px + 821px);width:300px;height:auto;}#rec747662976 .tn-elem[data-elem-id="1619020118304"] .tn-atom{color:#6c6c6c;font-size:15px;font-family:'TildaSans',Arial,sans-serif;line-height:1.55;font-weight:400;background-position:center center;border-color:transparent ;border-style:solid;}@media screen and (max-width:1199px) {#rec747662976 .tn-elem[data-elem-id="1619020118304"] {top:235px;left:calc(50% - 480px + 660px);width:276px;height:auto;}#rec747662976 .tn-elem[data-elem-id="1619020118304"] .tn-atom{font-size:14px;}}@media screen and (max-width:959px) {#rec747662976 .tn-elem[data-elem-id="1619020118304"] {top:253px;left:calc(50% - 320px + 10px);width:305px;height:auto;}#rec747662976 .tn-elem[data-elem-id="1619020118304"] .tn-atom{font-size:14px;}}@media screen and (max-width:639px) {#rec747662976 .tn-elem[data-elem-id="1619020118304"] {top:454px;left:calc(50% - 240px + 90px);width:356px;height:auto;}}@media screen and (max-width:479px) {#rec747662976 .tn-elem[data-elem-id="1619020118304"] {top:446px;left:calc(50% - 160px + 11px);width:301px;height:auto;}}</style> <div class='t396'> <div class="t396__artboard" data-artboard-recid="747662976" data-artboard-screens="320,480,640,960,1200" data-artboard-height="400" data-artboard-valign="center" data-artboard-upscale="grid" data-artboard-height-res-320="545" data-artboard-height-res-480="535" data-artboard-height-res-640="330" data-artboard-height-res-960="360"> <div class="t396__carrier" data-artboard-recid="747662976"></div> <div class="t396__filter" data-artboard-recid="747662976"></div> <div class="t396__group tn-group tn-group__747662976173496455886214040" data-fields="top,left" data-group-id="173496455886214040" data-group-type-value="logical" data-group-top-value="73" data-group-left-value="10" data-group-height-value="30" data-group-width-value="210" data-group-topunits-value="px" data-group-leftunits-value="px"> <div class="tn-molecule" id="molecule-173496455886214040"> <div class='t396__elem tn-elem tn-elem__7476629761691586016953' data-elem-id='1691586016953' data-elem-type='image' data-field-top-value="81" data-field-left-value="470" data-field-height-value="40" data-field-width-value="40" data-field-axisy-value="top" data-field-axisx-value="left" data-field-container-value="grid" data-field-topunits-value="px" data-field-leftunits-value="px" data-field-heightunits-value="px" data-field-widthunits-value="px" data-field-filewidth-value="98" data-field-fileheight-value="98" data-field-top-res-320-value="73" data-field-left-res-320-value="145" data-field-top-res-480-value="85" data-field-left-res-480-value="225" data-field-top-res-640-value="230" data-field-left-res-640-value="466" data-field-width-res-640-value="30" data-field-top-res-960-value="76" data-field-left-res-960-value="350"> <a class='tn-atom' href="https://www.instagram.com/tilda.cc/" target="_blank"> <img class='tn-atom__img t-img' data-original='https://static.tildacdn.com/tild3532-3661-4937-a133-633564323066/Tilda_Icons_26sn_ins.svg' alt='' imgfield='tn_img_1691586016953' /> </a> </div> <div class='t396__elem tn-elem tn-elem__7476629761619019903098' data-elem-id='1619019903098' data-elem-type='image' data-field-top-value="81" data-field-left-value="580" data-field-height-value="40" data-field-width-value="40" data-field-axisy-value="top" data-field-axisx-value="left" data-field-container-value="grid" data-field-topunits-value="px" data-field-leftunits-value="px" data-field-heightunits-value="px" data-field-widthunits-value="px" data-field-filewidth-value="98" data-field-fileheight-value="98" data-field-top-res-320-value="73" data-field-left-res-320-value="55" data-field-top-res-480-value="85" data-field-left-res-480-value="135" data-field-top-res-640-value="230" data-field-left-res-640-value="376" data-field-width-res-640-value="30" data-field-top-res-960-value="76" data-field-left-res-960-value="460"> <a class='tn-atom' href="https://twitter.com/TildaPublishing" target="_blank"> <img class='tn-atom__img t-img' data-original='https://static.tildacdn.com/tild6333-3763-4639-b462-346161393037/Tilda_Icons_26sn_twi.svg' alt='' imgfield='tn_img_1619019903098' /> </a> </div> <div class='t396__elem tn-elem tn-elem__7476629761619019903111' data-elem-id='1619019903111' data-elem-type='image' data-field-top-value="81" data-field-left-value="525" data-field-height-value="40" data-field-width-value="40" data-field-axisy-value="top" data-field-axisx-value="left" data-field-container-value="grid" data-field-topunits-value="px" data-field-leftunits-value="px" data-field-heightunits-value="px" data-field-widthunits-value="px" data-field-filewidth-value="98" data-field-fileheight-value="98" data-field-top-res-320-value="73" data-field-left-res-320-value="10" data-field-top-res-480-value="85" data-field-left-res-480-value="90" data-field-top-res-640-value="230" data-field-left-res-640-value="331" data-field-width-res-640-value="30" data-field-top-res-960-value="76" data-field-left-res-960-value="405"> <a class='tn-atom' href="https://www.youtube.com/channel/UCbuvN3YQrc2dISGcestWLgw" target="_blank"> <img class='tn-atom__img t-img' data-original='https://static.tildacdn.com/tild3065-3838-4131-a362-356636653562/Tilda_Icons_26sn_you.svg' alt='' imgfield='tn_img_1619019903111' /> </a> </div> <div class='t396__elem tn-elem tn-elem__7476629761691585962458' data-elem-id='1691585962458' data-elem-type='image' data-field-top-value="81" data-field-left-value="635" data-field-height-value="40" data-field-width-value="40" data-field-axisy-value="top" data-field-axisx-value="left" data-field-container-value="grid" data-field-topunits-value="px" data-field-leftunits-value="px" data-field-heightunits-value="px" data-field-widthunits-value="px" data-field-filewidth-value="98" data-field-fileheight-value="98" data-field-top-res-320-value="73" data-field-left-res-320-value="100" data-field-top-res-480-value="85" data-field-left-res-480-value="180" data-field-top-res-640-value="230" data-field-left-res-640-value="421" data-field-width-res-640-value="30" data-field-top-res-960-value="76" data-field-left-res-960-value="515"> <a class='tn-atom' href="https://t.me/tilda_global" target="_blank"> <img class='tn-atom__img t-img' data-original='https://static.tildacdn.com/tild6662-6365-4563-a534-376633333630/Tilda_Icons_26sn_tel.svg' alt='' imgfield='tn_img_1691585962458' /> </a> </div> <div class='t396__elem tn-elem tn-elem__7476629761619019903084' data-elem-id='1619019903084' data-elem-type='image' data-field-top-value="81" data-field-left-value="690" data-field-height-value="40" data-field-width-value="40" data-field-axisy-value="top" data-field-axisx-value="left" data-field-container-value="grid" data-field-topunits-value="px" data-field-leftunits-value="px" data-field-heightunits-value="px" data-field-widthunits-value="px" data-field-filewidth-value="100" data-field-fileheight-value="100" data-field-top-res-320-value="73" data-field-left-res-320-value="190" data-field-top-res-480-value="85" data-field-left-res-480-value="270" data-field-top-res-640-value="230" data-field-left-res-640-value="511" data-field-width-res-640-value="30" data-field-top-res-960-value="76" data-field-left-res-960-value="570"> <a class='tn-atom' href="https://www.facebook.com/tildapublishing" target="_blank"> <img class='tn-atom__img t-img' data-original='https://static.tildacdn.com/tild6137-6639-4765-b435-343737636461/Tilda_Icons_26sn_fac.svg' alt='' imgfield='tn_img_1619019903084' /> </a> </div> </div> </div> <div class='t396__elem tn-elem tn-elem__7476629761619019713628' data-elem-id='1619019713628' data-elem-type='text' data-field-top-value="5" data-field-left-value="339" data-field-height-value="31" data-field-width-value="111" data-field-axisy-value="top" data-field-axisx-value="left" data-field-container-value="grid" data-field-topunits-value="px" data-field-leftunits-value="px" data-field-heightunits-value="px" data-field-widthunits-value="px" data-field-top-res-320-value="5" data-field-left-res-320-value="9" data-field-width-res-320-value="62" data-field-top-res-480-value="5" data-field-left-res-480-value="72" data-field-width-res-480-value="69" data-field-top-res-640-value="5" data-field-left-res-640-value="135" data-field-width-res-640-value="57" data-field-top-res-960-value="5" data-field-left-res-960-value="253" data-field-width-res-960-value="88"> <div class='tn-atom'><a href="https://tilda.cc/?lang=en"target="_blank"style="color: inherit">Tilda.cc</a></div> </div> <div class='t396__elem tn-elem tn-elem__7476629761619019754582' data-elem-id='1619019754582' data-elem-type='text' data-field-top-value="5" data-field-left-value="456" data-field-height-value="31" data-field-width-value="183" data-field-axisy-value="top" data-field-axisx-value="left" data-field-container-value="grid" data-field-topunits-value="px" data-field-leftunits-value="px" data-field-heightunits-value="px" data-field-widthunits-value="px" data-field-top-res-320-value="5" data-field-left-res-320-value="71" data-field-width-res-320-value="107" data-field-top-res-480-value="5" data-field-left-res-480-value="141" data-field-width-res-480-value="120" data-field-top-res-640-value="5" data-field-left-res-640-value="213" data-field-width-res-640-value="109" data-field-top-res-960-value="5" data-field-left-res-960-value="348" data-field-width-res-960-value="160"> <div class='tn-atom'><a href="https://tilda.education/en"target="_blank"style="color: inherit">Tilda Education</a></div> </div> <div class='t396__elem tn-elem tn-elem__7476629761619019777299' data-elem-id='1619019777299' data-elem-type='text' data-field-top-value="5" data-field-left-value="639" data-field-height-value="31" data-field-width-value="177" data-field-axisy-value="top" data-field-axisx-value="left" data-field-container-value="grid" data-field-topunits-value="px" data-field-leftunits-value="px" data-field-heightunits-value="px" data-field-widthunits-value="px" data-field-top-res-320-value="5" data-field-left-res-320-value="178" data-field-width-res-320-value="103" data-field-top-res-480-value="5" data-field-left-res-480-value="261" data-field-width-res-480-value="113" data-field-top-res-640-value="5" data-field-left-res-640-value="343" data-field-width-res-640-value="107" data-field-top-res-960-value="5" data-field-left-res-960-value="508" data-field-width-res-960-value="148"> <div class='tn-atom'><a href="https://www.youtube.com/channel/UCbuvN3YQrc2dISGcestWLgw"target="_blank"style="color: inherit">Video Tutorials</a></div> </div> <div class='t396__elem tn-elem tn-elem__7476629761619019804011' data-elem-id='1619019804011' data-elem-type='text' data-field-top-value="5" data-field-left-value="816" data-field-height-value="31" data-field-width-value="123" data-field-axisy-value="top" data-field-axisx-value="left" data-field-container-value="grid" data-field-topunits-value="px" data-field-leftunits-value="px" data-field-heightunits-value="px" data-field-widthunits-value="px" data-field-top-res-320-value="5" data-field-left-res-320-value="281" data-field-width-res-320-value="39" data-field-top-res-480-value="5" data-field-left-res-480-value="374" data-field-width-res-480-value="62" data-field-top-res-640-value="5" data-field-left-res-640-value="471" data-field-width-res-640-value="34" data-field-top-res-960-value="5" data-field-left-res-960-value="662" data-field-width-res-960-value="87"> <div class='tn-atom'><a href="http://blog-en.tilda.cc/"target="_blank"style="color: inherit">Blog</a></div> </div> <div class='t396__elem tn-elem tn-elem__7476629761619020045180' data-elem-id='1619020045180' data-elem-type='text' data-field-top-value="211" data-field-left-value="80" data-field-height-value="34" data-field-width-value="300" data-field-axisy-value="top" data-field-axisx-value="left" data-field-container-value="grid" data-field-topunits-value="px" data-field-leftunits-value="px" data-field-heightunits-value="px" data-field-widthunits-value="px" data-field-top-res-320-value="161" data-field-left-res-320-value="10" data-field-width-res-320-value="297" data-field-top-res-480-value="163" data-field-left-res-480-value="90" data-field-width-res-480-value="377" data-field-top-res-640-value="97" data-field-left-res-640-value="10" data-field-width-res-640-value="310" data-field-top-res-960-value="200" data-field-left-res-960-value="30" data-field-width-res-960-value="220"> <div class='tn-atom'field='tn_text_1619020045180'>Report abuse</div> </div> <div class='t396__elem tn-elem tn-elem__7476629761619020045187' data-elem-id='1619020045187' data-elem-type='text' data-field-top-value="264" data-field-left-value="80" data-field-height-value="69" data-field-width-value="312" data-field-axisy-value="top" data-field-axisx-value="left" data-field-container-value="grid" data-field-topunits-value="px" data-field-leftunits-value="px" data-field-heightunits-value="px" data-field-widthunits-value="px" data-field-top-res-320-value="192" data-field-left-res-320-value="10" data-field-width-res-320-value="301" data-field-top-res-480-value="199" data-field-left-res-480-value="90" data-field-width-res-480-value="296" data-field-top-res-640-value="128" data-field-left-res-640-value="10" data-field-width-res-640-value="300" data-field-top-res-960-value="235" data-field-left-res-960-value="30" data-field-width-res-960-value="280"> <div class='tn-atom'field='tn_text_1619020045187'>If you believe that any website made on Tilda is violating your rights, file a compliant by filling out this <a href="https://tilda.cc/abuse/" target="_blank" rel="noreferrer noopener" style="color: rgb(252, 103, 61); font-weight: 500;">form</a></div> </div> <div class='t396__elem tn-elem tn-elem__7476629761619020084939' data-elem-id='1619020084939' data-elem-type='text' data-field-top-value="211" data-field-left-value="434" data-field-height-value="34" data-field-width-value="361" data-field-axisy-value="top" data-field-axisx-value="left" data-field-container-value="grid" data-field-topunits-value="px" data-field-leftunits-value="px" data-field-heightunits-value="px" data-field-widthunits-value="px" data-field-top-res-320-value="288" data-field-left-res-320-value="11" data-field-width-res-320-value="300" data-field-top-res-480-value="290" data-field-left-res-480-value="90" data-field-width-res-480-value="377" data-field-top-res-640-value="97" data-field-left-res-640-value="330" data-field-width-res-640-value="310" data-field-top-res-960-value="200" data-field-left-res-960-value="330" data-field-width-res-960-value="312"> <div class='tn-atom'field='tn_text_1619020084939'>How to contact our support</div> </div> <div class='t396__elem tn-elem tn-elem__7476629761619020084961' data-elem-id='1619020084961' data-elem-type='text' data-field-top-value="264" data-field-left-value="435" data-field-height-value="69" data-field-width-value="330" data-field-axisy-value="top" data-field-axisx-value="left" data-field-container-value="grid" data-field-topunits-value="px" data-field-leftunits-value="px" data-field-heightunits-value="px" data-field-widthunits-value="px" data-field-top-res-320-value="319" data-field-left-res-320-value="11" data-field-width-res-320-value="301" data-field-top-res-480-value="326" data-field-left-res-480-value="90" data-field-width-res-480-value="313" data-field-top-res-640-value="128" data-field-left-res-640-value="330" data-field-width-res-640-value="300" data-field-top-res-960-value="235" data-field-left-res-960-value="330" data-field-width-res-960-value="303"> <div class='tn-atom'field='tn_text_1619020084961'>To find out more about the platform features, use the feedback form in your Tilda account, or contact us via email <a href="mailto:team@tilda.cc" target="_blank" rel="noreferrer noopener" style="font-weight: 500;">team@tilda.cc</a></div> </div> <div class='t396__elem tn-elem tn-elem__7476629761619020118297' data-elem-id='1619020118297' data-elem-type='text' data-field-top-value="211" data-field-left-value="821" data-field-height-value="34" data-field-width-value="300" data-field-axisy-value="top" data-field-axisx-value="left" data-field-container-value="grid" data-field-topunits-value="px" data-field-leftunits-value="px" data-field-heightunits-value="px" data-field-widthunits-value="px" data-field-top-res-320-value="415" data-field-left-res-320-value="11" data-field-width-res-320-value="299" data-field-top-res-480-value="417" data-field-left-res-480-value="90" data-field-width-res-480-value="378" data-field-top-res-640-value="218" data-field-left-res-640-value="10" data-field-width-res-640-value="310" data-field-top-res-960-value="200" data-field-left-res-960-value="660" data-field-width-res-960-value="271"> <div class='tn-atom'field='tn_text_1619020118297'>Accounting docs</div> </div> <div class='t396__elem tn-elem tn-elem__7476629761619020118304' data-elem-id='1619020118304' data-elem-type='text' data-field-top-value="264" data-field-left-value="821" data-field-height-value="69" data-field-width-value="300" data-field-axisy-value="top" data-field-axisx-value="left" data-field-container-value="grid" data-field-topunits-value="px" data-field-leftunits-value="px" data-field-heightunits-value="px" data-field-widthunits-value="px" data-field-top-res-320-value="446" data-field-left-res-320-value="11" data-field-width-res-320-value="301" data-field-top-res-480-value="454" data-field-left-res-480-value="90" data-field-width-res-480-value="356" data-field-top-res-640-value="253" data-field-left-res-640-value="10" data-field-width-res-640-value="305" data-field-top-res-960-value="235" data-field-left-res-960-value="660" data-field-width-res-960-value="276"> <div class='tn-atom'field='tn_text_1619020118304'>To get the supporting documentation and proof of payment, send your request to <a href="mailto:docs@tilda.cc" rel="noreferrer noopener" target="_blank" style="font-weight: 500;">docs@tilda.cc</a></div> </div> </div> </div> <script>t_onReady(function() {t_onFuncLoad('t396_init',function() {t396_init('747662976');});});</script>  </div> <div id="rec747663345" class="r t-rec" style=" " data-animationappear="off" data-record-type="131">  <div class="t123"> <div class="t-container_100 "> <div class="t-width t-width_100 ">  <script> t_onReady(function() { var xhr = new XMLHttpRequest(); xhr.open('GET', 'https://geo.tildacdn.com/geo/country/', true); xhr.onload = function() { if (xhr.status >= 200 && xhr.status < 400) { var data = xhr.responseText; if (data === 'RU') { // скрываются иконки Instagram, Facebook по геолокации var icons = document.querySelectorAll('#rec747662976 [data-elem-id="1691586016953"], #rec747662976 [data-elem-id="1619019903084"]'); icons.forEach(function (icon) { icon.style.display = 'none'; }); } } }; xhr.send(); }); </script>  </div> </div> </div> </div> </footer>  </div>  <div class="t-tildalabel " id="tildacopy" data-tilda-sign="6518#260966"><a href="https://tilda.cc/" class="t-tildalabel__link"><div class="t-tildalabel__wrapper"><div class="t-tildalabel__txtleft">Made on </div><div class="t-tildalabel__wrapimg"><img src="https://static.tildacdn.com/img/tildacopy.png" class="t-tildalabel__img" fetchpriority="low" alt=""></div><div class="t-tildalabel__txtright">Tilda</div></div></a></div>  <script type="text/javascript">if(!window.mainTracker) {window.mainTracker='tilda';} window.tildastatcookie='no';window.tildastatscroll='yes';setTimeout(function(){(function(d,w,k,o,g) {var n=d.getElementsByTagName(o)[0],s=d.createElement(o),f=function(){n.parentNode.insertBefore(s,n);};s.type="text/javascript";s.async=true;s.key=k;s.id="tildastatscript";s.src=g;if(w.opera=="[object Opera]") {d.addEventListener("DOMContentLoaded",f,false);} else {f();}})(document,window,'914414f8f763e0b0e2bd67efc7504302','script','https://static.tildacdn.com/js/tilda-stat-1.0.min.js');},2000);</script> </body> </html>