CINXE.COM
How to Set Up a Hero Section / Website Cover Page │ Tilda Help Center
<!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" /> <!--metatextblock--> <title>How to Set Up a Hero Section / Website Cover Page │ Tilda Help Center</title> <meta name="description" content="Create impressive covers for your Tilda websites using our Help Center guide with design tips and advanced settings" /> <meta property="og:url" content="https://help.tilda.cc/cover" /> <meta property="og:title" content="How to Set Up a Hero Section / Website Cover Page │ Tilda Help Center" /> <meta property="og:description" content="Create impressive covers for your Tilda websites using our Help Center guide with design tips and advanced settings" /> <meta property="og:type" content="website" /> <meta property="og:image" content="https://static.tildacdn.com/tild6261-3063-4939-a539-616264653935/Tilda_Help_Center_Ba.png" /> <link rel="canonical" href="https://help.tilda.cc/cover"> <!--/metatextblock--> <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" /> <!-- Assets --> <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-page94449.min.css?t=1730815114" type="text/css" media="all" onerror="this.loaderr='y';" /> <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/tilda-slds-1.4.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-slds-1.4.min.css" type="text/css" media="all" /></noscript> <link rel="stylesheet" href="https://static.tildacdn.com/css/tilda-cover-1.0.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-page94449.min.js?t=1730815114" 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-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-slds-1.4.min.js" charset="utf-8" async onerror="this.loaderr='y';"></script> <script src="https://static.tildacdn.com/js/tilda-cover-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-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-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> <!-- nominify begin --><!-- Hotjar Tracking Code for help.tilda.cc --> <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> <!-- Languages widget for Tilda Help --> <script src="//static.tildacdn.com/js/tilda-cc-help-langs-dropdown.min.js"></script> <!-- End of widget --> <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><!-- nominify end --><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;"> <!--allrecords--> <div id="allrecords" class="t-records" data-hook="blocks-collection-content-node" data-tilda-project-id="6518" data-tilda-page-id="94449" data-tilda-page-alias="cover" data-tilda-formskey="0bbdd5272d658d3de5798b262a4fe80b" data-tilda-cookie="no" data-tilda-lazy="yes" data-tilda-root-zone="com" data-tilda-project-headcode="yes"> <!--header--> <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="com" data-tilda-project-headcode="yes"> <div id="rec310544707" class="r t-rec" style=" " data-animationappear="off" data-record-type="131"> <!-- T123 --> <div class="t123"> <div class="t-container_100 "> <div class="t-width t-width_100 "> <!-- nominify begin --> <script>window.tilda_help_language='EN';</script> <script src='https://static.tildacdn.com/js/tilda-search-help-1.2.min.js'></script> <!-- nominify end --> </div> </div> </div> </div> <div id="rec49203293" class="r t-rec" style=" " data-animationappear="off" data-record-type="830"> <!-- t830 --> <!-- @classes t-name t-name_xs t-descr t-descr_xs t-title t-text --> <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="Навигационное меню" 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="Навигационное меню" 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="Закрыть меню"> <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> <!--/header--> <div id="rec3775846" class="r t-rec t-rec_pt_120 t-rec_pb_120" style="padding-top:120px;padding-bottom:120px;background-color:#f5f5f5; " data-record-type="60" data-bg-color="#f5f5f5"> <!-- T050 --> <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"><span style="font-weight: 400;">How To Set Up a Hero Section</span></h1> <div class="t050__descr t-descr t-descr_xxl" field="descr">Creating and editing a website cover page</div> </div> </div> </div> <style> #rec3775846 .t050__uptitle{text-transform:uppercase;}</style> </div> <div id="rec384252059" class="r t-rec t-rec_pt_45 t-rec_pb_135" style="padding-top:45px;padding-bottom:135px;background-color:#f5f5f5; " data-animationappear="off" data-record-type="650" data-bg-color="#f5f5f5"> <!-- T650 --> <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__1591292031618"> <a href="#background" class="t-card__link" id="cardtitle1_384252059" aria-labelledby="cardtitle1_384252059 cardbtn1_384252059"> <span style="font-weight: 500;">Background image</span> </a> </div> <div class="t-card__descr t-text t-text_sm" field="li_descr__1591292031618"> How to choose the right background image: dimensions, format, and proportions </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_384252059" data-field="li_buttontitle__1591292031618" style="color:#ff8562;font-weight:400;" aria-hidden="true" data-buttonfieldset="li_button" data-lid="1591292031618"> Read more </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__1591560517367"> <a href="#text" class="t-card__link" id="cardtitle2_384252059" aria-labelledby="cardtitle2_384252059 cardbtn2_384252059"> <span style="font-weight: 500;">Formatting text on a cover page</span> </a> </div> <div class="t-card__descr t-text t-text_sm" field="li_descr__1591560517367"> Setting up your title, subtitle, and other text </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_384252059" data-field="li_buttontitle__1591560517367" style="color:#ff8562;font-weight:400;" aria-hidden="true" data-buttonfieldset="li_button" data-lid="1591560517367"> Read more </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__1591292052666"> <a href="#height" class="t-card__link" id="cardtitle3_384252059" aria-labelledby="cardtitle3_384252059 cardbtn3_384252059"> <span style="font-weight: 500;">Height of a cover page</span> </a> </div> <div class="t-card__descr t-text t-text_sm" field="li_descr__1591292052666"> How to make a narrow cover page that does not take the full height of the first screen </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_384252059" data-field="li_buttontitle__1591292052666" style="color:#ff8562;font-weight:400;" aria-hidden="true" data-buttonfieldset="li_button" data-lid="1591292052666"> Read more </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__1591292060819"> <a href="#filter" class="t-card__link" id="cardtitle4_384252059" aria-labelledby="cardtitle4_384252059 cardbtn4_384252059"> <span style="font-weight: 500;">Cover page filter</span> </a> </div> <div class="t-card__descr t-text t-text_sm" field="li_descr__1591292060819"> How to increase readability by creating a color filter for a background image, fill a cover page with a solid color, and make the transition to the next block </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_384252059" data-field="li_buttontitle__1591292060819" style="color:#ff8562;font-weight:400;" aria-hidden="true" data-buttonfieldset="li_button" data-lid="1591292060819"> Read more </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__1591292139212"> <a href="#video" class="t-card__link" id="cardtitle5_384252059" aria-labelledby="cardtitle5_384252059 cardbtn5_384252059"> <span style="font-weight: 500;">Video on a cover page</span> </a> </div> <div class="t-card__descr t-text t-text_sm" field="li_descr__1591292139212"> Setting up a video that will play in the background or when you click the Play button </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_384252059" data-field="li_buttontitle__1591292139212" style="color:#ff8562;font-weight:400;" aria-hidden="true" data-buttonfieldset="li_button" data-lid="1591292139212"> Read more </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__1591292146154"> <a href="#mobileversion" class="t-card__link" id="cardtitle6_384252059" aria-labelledby="cardtitle6_384252059 cardbtn6_384252059"> <span style="font-weight: 500;">Cover page for mobile view</span> </a> </div> <div class="t-card__descr t-text t-text_sm" field="li_descr__1591292146154"> How to make a cover page look good on mobile devices </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_384252059" data-field="li_buttontitle__1591292146154" style="color:#ff8562;font-weight:400;" aria-hidden="true" data-buttonfieldset="li_button" data-lid="1591292146154"> Read more </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__1591292180562"> <a href="#form" class="t-card__link" id="cardtitle7_384252059" aria-labelledby="cardtitle7_384252059 cardbtn7_384252059"> <span style="font-weight: 500;">Form on a cover page</span> </a> </div> <div class="t-card__descr t-text t-text_sm" field="li_descr__1591292180562"> Setting up a data collection form on the home screen page </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_384252059" data-field="li_buttontitle__1591292180562" style="color:#ff8562;font-weight:400;" aria-hidden="true" data-buttonfieldset="li_button" data-lid="1591292180562"> Read more </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__1591292667995"> <a href="#timer" class="t-card__link" id="cardtitle8_384252059" aria-labelledby="cardtitle8_384252059 cardbtn8_384252059"> <span style="font-weight: 500;">Timer on a cover page</span> </a> </div> <div class="t-card__descr t-text t-text_sm" field="li_descr__1591292667995"> Add countdown timers to a specific time and date </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_384252059" data-field="li_buttontitle__1591292667995" style="color:#ff8562;font-weight:400;" aria-hidden="true" data-buttonfieldset="li_button" data-lid="1591292667995"> Read more </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__1591382926722"> <a href="#zero" class="t-card__link" id="cardtitle9_384252059" aria-labelledby="cardtitle9_384252059 cardbtn9_384252059"> <span style="font-weight: 500;">Convert to Zero Block</span> </a> </div> <div class="t-card__descr t-text t-text_sm" field="li_descr__1591382926722"> How to convert and edit a cover page in Zero Block </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="cardbtn9_384252059" data-field="li_buttontitle__1591382926722" style="color:#ff8562;font-weight:400;" aria-hidden="true" data-buttonfieldset="li_button" data-lid="1591382926722"> Read more </div> </div> </div> </div> </div> <div class="t650__separator" style=""></div> </div> </div> <script type="text/javascript">t_onReady(function() {t_onFuncLoad('t650_init',function() {t650_init('384252059');});t_onFuncLoad('t650_unifyHeights',function() {t650_unifyHeights('384252059');});if(typeof jQuery!=='undefined') {$('.t650').on('displayChanged',function() {t650_unifyHeights('384252059');});} else {var rec=document.querySelector('#rec384252059');if(!rec) return;var wrapper=rec.querySelector('.t650');if(wrapper) {wrapper.addEventListener('displayChanged',function() {t_onFuncLoad('t650_unifyHeights',function() {t650_unifyHeights('384252059');});});}}});window.addEventListener('resize',t_throttle(function() {t_onFuncLoad('t650_unifyHeights',function() {t650_unifyHeights('384252059');});}));window.addEventListener('load',function() {t_onFuncLoad('t650_unifyHeights',function() {t650_unifyHeights('384252059');});});</script> <style>#rec384252059 .t650__inner-col {box-shadow:0px 0px 10px rgba(0,0,0,0.1);}</style> <style>#rec384252059 .t650 .t650__inner-col:hover,#rec384252059 .t650 .t-focusable .t650__inner-col,#rec384252059 .t650 .t-card__col_btnfocusable .t650__inner-col {box-shadow:0px 10px 10px rgba(0,0,0,0.1) !important;}</style> <style> #rec384252059 .t650__inner-col{border-radius:5px;}</style> </div> <div id="rec3775847" class="r t-rec" style=" " data-record-type="270"> <div class="t270"></div> <script>t_onReady(function() {var hash=window.location.hash;t_onFuncLoad('t270_scroll',function() {t270_scroll(hash,-3);});setTimeout(function() {var curPath=window.location.pathname;var curFullPath=window.location.origin + curPath;var recs=document.querySelectorAll('.r');Array.prototype.forEach.call(recs,function(rec) {var selects='a[href^="#"]:not([href="#"]):not(.carousel-control):not(.t-carousel__control):not([href^="#price"]):not([href^="#submenu"]):not([href^="#popup"]):not([href*="#zeropopup"]):not([href*="#closepopup"]):not([href*="#closeallpopup"]):not([href^="#prodpopup"]):not([href^="#order"]):not([href^="#!"]):not([target="_blank"]),' + 'a[href^="' + curPath + '#"]:not([href*="#!/tfeeds/"]):not([href*="#!/tproduct/"]):not([href*="#!/tab/"]):not([href*="#popup"]):not([href*="#zeropopup"]):not([href*="#closepopup"]):not([href*="#closeallpopup"]):not([target="_blank"]),' + 'a[href^="' + curFullPath + '#"]:not([href*="#!/tfeeds/"]):not([href*="#!/tproduct/"]):not([href*="#!/tab/"]):not([href*="#popup"]):not([href*="#zeropopup"]):not([href*="#closepopup"]):not([href*="#closeallpopup"]):not([target="_blank"])';var elements=rec.querySelectorAll(selects);Array.prototype.forEach.call(elements,function(element) {element.addEventListener('click',function(event) {event.preventDefault();var hash=this.hash.trim();t_onFuncLoad('t270_scroll',function() {t270_scroll(hash,-3);});});});});if(document.querySelectorAll('.js-store').length>0||document.querySelectorAll('.js-feed').length>0) {t_onFuncLoad('t270_scroll',function() {t270_scroll(hash,-3,1);});}},500);setTimeout(function() {var hash=window.location.hash;if(hash&&document.querySelectorAll('a[name="' + hash.slice(1) + '"], div[id="' + hash.slice(1) + '"]').length>0) {if(window.isMobile) {t_onFuncLoad('t270_scroll',function() {t270_scroll(hash,0);});} else {t_onFuncLoad('t270_scroll',function() {t270_scroll(hash,0);});}}},1000);window.addEventListener('popstate',function() {var hash=window.location.hash;if(hash&&document.querySelectorAll('a[name="' + hash.slice(1) + '"], div[id="' + hash.slice(1) + '"]').length>0) {if(window.isMobile) {t_onFuncLoad('t270_scroll',function() {t270_scroll(hash,0);});} else {t_onFuncLoad('t270_scroll',function() {t270_scroll(hash,0);});}}});});</script> </div> <div id="rec3775848" class="r t-rec" style=" " data-animationappear="off" data-record-type="217"> <!-- t190 --> <div class="t190" style="position:fixed; z-index:100000; bottom:30px; right:30px; min-height:30px"> <button type="button" class="t190__button t190__button_circle" aria-label="Вернуться к началу страницы"> <svg role="presentation" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="50px" height="50px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve"> <path style="fill:#000000;" d="M47.875,24c0,13.186-10.689,23.875-23.875,23.875S0.125,37.186,0.125,24S10.814,0.125,24,0.125 S47.875,10.814,47.875,24z M25.503,16.881l6.994,7.049c0.583,0.588,1.532,0.592,2.121,0.008c0.588-0.583,0.592-1.533,0.008-2.122 l-9.562-9.637c-0.281-0.283-0.664-0.443-1.063-0.443c0,0,0,0-0.001,0c-0.399,0-0.782,0.159-1.063,0.442l-9.591,9.637 c-0.584,0.587-0.583,1.537,0.005,2.121c0.292,0.292,0.675,0.437,1.058,0.437c0.385,0,0.77-0.147,1.063-0.442L22.5,16.87v19.163 c0,0.828,0.671,1.5,1.5,1.5s1.5-0.672,1.5-1.5L25.503,16.881z"/> </svg> </button> </div> <script>t_onReady(function() {var rec=document.querySelector('#rec3775848');if(!rec) return;var wrapperBlock=rec.querySelector('.t190');if(!wrapperBlock) return;wrapperBlock.style.display='none';window.addEventListener('scroll',t_throttle(function() {if(window.pageYOffset>window.innerHeight) {if(wrapperBlock.style.display==='none') wrapperBlock.style.display='block';} else {if(wrapperBlock.style.display==='block') wrapperBlock.style.display='none';}}));t_onFuncLoad('t190_init',function() {t190_init(3775848);});});</script> </div> <div id="rec3775849" class="r t-rec t-rec_pt_105 t-rec_pb_15" style="padding-top:105px;padding-bottom:15px; " data-record-type="106"> <!-- T004 --> <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 "><strong>Cover</strong> is the first thing people see on your page. It introduces the content and prompts them to go for it or sums up what makes your project unique. A cover usually contains a background image: a stylish photo, compelling video, color, gradient, or texture. <br /><br /> Here are a few tips that will help you work with covers, backgrounds, and videos more efficiently.<br /></div> </div> </div> </div> </div> <div id="rec384266023" class="r t-rec t-rec_pt_150 t-rec_pb_0" style="padding-top:150px;padding-bottom:0px; " data-record-type="30"> <!-- T015 --> <div class="t015"> <div class="t-container t-align_center"> <div class="t-col t-col_10 t-prefix_1"> <div class="t015__title t-title t-title_lg" field="title"><p style="text-align: center;"><span style="font-size: 40px;">Viewable Area</span></p></div> </div> </div> </div> <style> #rec384266023 .t015__uptitle{text-transform:uppercase;}</style> </div> <div id="rec3775852" class="r t-rec t-rec_pt_15 t-rec_pb_15" style="padding-top:15px;padding-bottom:15px; " data-record-type="3"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/8d216973-9533-458e-8e44-303795b68854/ResponsiveShowcaseMockupPack.jpg"> <img class="t-img t-width t107__width t-width_8" src="https://static.tildacdn.com/8d216973-9533-458e-8e44-303795b68854/-/empty/ResponsiveShowcaseMockupPack.jpg" data-original="https://static.tildacdn.com/8d216973-9533-458e-8e44-303795b68854/ResponsiveShowcaseMockupPack.jpg" imgfield="img" alt=""> </div> </div> </div> <div id="rec3775854" class="r t-rec t-rec_pt_45 t-rec_pb_75" style="padding-top:45px;padding-bottom:75px; " data-record-type="106"> <!-- T004 --> <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 ">Unlike magazine pages, website pages have no fixed viewable area. Every device has a different screen size and aspect ratio. Moreover, viewable areas vary from browser to browser. For instance, browsers with a fixed bookmarks bar provide a smaller viewable area. The cover image gets cropped to appear borderless on the screen.</div> </div> </div> </div> </div> <div id="rec384256809" class="r t-rec" style=" " data-record-type="215"> <a name="background" style="font-size:0;"></a> </div> <div id="rec384256810" class="r t-rec t-rec_pt_90 t-rec_pb_0" style="padding-top:90px;padding-bottom:0px; " data-record-type="30"> <!-- T015 --> <div class="t015"> <div class="t-container t-align_center"> <div class="t-col t-col_10 t-prefix_1"> <div class="t015__title t-title t-title_lg" field="title"><p style="text-align: center;"><span style="font-size: 40px;">Background image</span></p></div> </div> </div> </div> <style> #rec384256810 .t015__uptitle{text-transform:uppercase;}</style> </div> <div id="rec384256811" class="r t-rec t-rec_pt_60 t-rec_pb_60" style="padding-top:60px;padding-bottom:60px; " data-record-type="106"> <!-- T004 --> <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 ">Upload a cover background image in the Content panel of the block→ Background image. </div> </div> </div> </div> </div> <div id="rec384256812" class="r t-rec t-rec_pt_15 t-rec_pb_75" style="padding-top:15px;padding-bottom:75px; " data-record-type="3"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3764-3434-4061-a433-643662313464/Screenshot_2020-06-0.png"> <img class="t-img t-width t107__width t-width_10" src="https://thb.tildacdn.com/tild3764-3434-4061-a433-643662313464/-/empty/Screenshot_2020-06-0.png" data-original="https://static.tildacdn.com/tild3764-3434-4061-a433-643662313464/Screenshot_2020-06-0.png" imgfield="img" alt=""> </div> </div> </div> <div id="rec384256813" class="r t-rec t-rec_pt_60 t-rec_pb_60" style="padding-top:60px;padding-bottom:60px; " data-record-type="106"> <!-- T004 --> <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 make the image look great, follow these tips on the best settings for the background image.</div> </div> </div> </div> </div> <div id="rec384258190" class="r t-rec t-rec_pt_15 t-rec_pb_75" style="padding-top:15px;padding-bottom:75px; " data-record-type="276"> <!-- t252 --> <div class="t252"> <div class="t-container"> <div class="t-row"> <div class="t-col t-col_10 t-prefix_1"> <div class="t252__wrapper"> <div class="t252__quote-body"> <div class="t252__text t-text-impact t-text-impact_xs" field="text"><strong>Best Size:</strong><br /> These are the best parameters for uploaded images:<br /> Format: JPG<br /> Width: 1680px<br /> Resolution: 72 dpi<br /> Color model: RGB<br />Compression: 10</div> <div class="t252__author t-text t-text_xs" field="authorname"></div> </div> </div> </div> </div> </div> </div> </div> <div id="rec384257366" class="r t-rec t-rec_pt_60 t-rec_pb_15" style="padding-top:60px;padding-bottom:15px; " data-record-type="106"> <!-- T004 --> <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 are unhappy with the quality of the image, edit it in advance in a graphics editor using the reference article below</div> </div> </div> </div> </div> <div id="rec384257367" class="r t-rec t-rec_pt_45 t-rec_pb_45" style="padding-top:45px;padding-bottom:45px; " data-record-type="374"> <!-- T374 --> <div class="t374"> <div class="t-container"> <div class="t-col t-col_8 t-prefix_2"> <a class="t374__link" href="/photo-for-publishing" 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">How to optimize images for the web</div> </div> </div> </a> </div> </div> </div> </div> <div id="rec384257368" class="r t-rec t-rec_pt_60 t-rec_pb_60" style="padding-top:60px;padding-bottom:60px; " data-record-type="106"> <!-- T004 --> <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 ">Before choosing an image, read our article “<a href="https://tilda.education/en/articles-cover-for-website" rel="noreferrer noopener" target="_blank">How to Create a Cover For a Website</a>” on Tilda Education. It contains tips for creating your own cover page and links to quality stock photography websites.</div> </div> </div> </div> </div> <div id="rec384257369" class="r t-rec t-rec_pb_0" style="padding-bottom:0px; " data-record-type="215"> <a name="text" style="font-size:0;"></a> </div> <div id="rec384258646" class="r t-rec t-rec_pt_90 t-rec_pb_0" style="padding-top:90px;padding-bottom:0px; " data-record-type="30"> <!-- T015 --> <div class="t015"> <div class="t-container t-align_center"> <div class="t-col t-col_10 t-prefix_1"> <div class="t015__title t-title t-title_lg" field="title"><div style="font-size: 40px;" data-customstyle="yes"><p style="text-align: center;"><span style="font-size: 40px;">Text formatting</span></p></div></div> </div> </div> </div> <style> #rec384258646 .t015__uptitle{text-transform:uppercase;}</style> </div> <div id="rec384258647" class="r t-rec t-rec_pt_60 t-rec_pb_60" style="padding-top:60px;padding-bottom:60px; " data-record-type="106"> <!-- T004 --> <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 ">Text is the most important part of any cover page, as it is the first message a website visitor sees. Cover pages feature a heading, subheading, description, and upper note to convey the message and highlight what is important.<br /><br />You can fill the covers with text in two ways: using the Content panel of the block or by clicking on the text while editing the page. </div> </div> </div> </div> </div> <div id="rec384270536" class="r t-rec t-rec_pt_60 t-rec_pb_75" style="padding-top:60px;padding-bottom:75px; " data-record-type="3"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3164-6532-4534-b835-616534653735/Screen_Recording_202.gif"> <img class="t-img t-width t107__width t-width_9" src="https://thb.tildacdn.com/tild3164-6532-4534-b835-616534653735/-/empty/Screen_Recording_202.gif" data-original="https://static.tildacdn.com/tild3164-6532-4534-b835-616534653735/Screen_Recording_202.gif" imgfield="img" alt=""> <div class="t-container_8"> <div class="t-col t-col_8 t107__title t-text" field="title" itemprop="name"><div style="font-size: 20px;" data-customstyle="yes">Editing text when clicking on a block</div></div> </div> </div> </div> </div> <div id="rec384258649" class="r t-rec t-rec_pt_60 t-rec_pb_75" style="padding-top:60px;padding-bottom:75px; " data-record-type="3"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3038-3362-4462-b464-393032383435/Untitled.gif"> <img class="t-img t-width t107__width t-width_9" src="https://thb.tildacdn.com/tild3038-3362-4462-b464-393032383435/-/empty/Untitled.gif" data-original="https://static.tildacdn.com/tild3038-3362-4462-b464-393032383435/Untitled.gif" imgfield="img" alt=""> <div class="t-container_8"> <div class="t-col t-col_8 t107__title t-text" field="title" itemprop="name"><div style="font-size: 20px;" data-customstyle="yes">Editing text in a block’s Content section</div></div> </div> </div> </div> </div> <div id="rec384258650" class="r t-rec t-rec_pt_60 t-rec_pb_60" style="padding-top:60px;padding-bottom:60px; " data-record-type="106"> <!-- T004 --> <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 format text using both the control panel at the top or by changing the size, color or other parameters of the text in the Settings panel of the block → Typography.</div> </div> </div> </div> </div> <div id="rec384258651" class="r t-rec t-rec_pt_0 t-rec_pb_75" style="padding-top:0px;padding-bottom:75px; " data-record-type="3"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3964-3136-4962-a664-616531316336/Untitled2.gif"> <img class="t-img t-width t107__width t-width_9" src="https://thb.tildacdn.com/tild3964-3136-4962-a664-616531316336/-/empty/Untitled2.gif" data-original="https://static.tildacdn.com/tild3964-3136-4962-a664-616531316336/Untitled2.gif" imgfield="img" alt=""> <div class="t-container_8"> <div class="t-col t-col_8 t107__title t-text" field="title" itemprop="name"><div style="font-size: 20px;" data-customstyle="yes">Formatting text using the top control panel</div></div> </div> </div> </div> </div> <div id="rec384258652" class="r t-rec t-rec_pt_0 t-rec_pb_75" style="padding-top:0px;padding-bottom:75px; " data-record-type="3"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3862-3133-4437-b365-616532636431/image.png"> <img class="t-img t-width t107__width t-width_10" src="https://thb.tildacdn.com/tild3862-3133-4437-b365-616532636431/-/empty/image.png" data-original="https://static.tildacdn.com/tild3862-3133-4437-b365-616532636431/image.png" imgfield="img" alt=""> <div class="t-container_8"> <div class="t-col t-col_8 t107__title t-text" field="title" itemprop="name"><div style="font-size: 20px;" data-customstyle="yes">Formatting changes in the Settings panel of the block</div></div> </div> </div> </div> </div> <div id="rec384259271" class="r t-rec t-rec_pt_60 t-rec_pb_60" style="padding-top:60px;padding-bottom:60px; " data-record-type="106"> <!-- T004 --> <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 create a cool cover, check out the article <a href="https://tilda.education/en/articles-cover-for-website" rel="noreferrer noopener" target="_blank">How to Create a Cover for a Website</a> with practical examples of text and background image combinations and the guide <a href="https://tilda.education/en/articles-offer" rel="noreferrer noopener" target="_blank">Creating a Unique Selling Proposition (USP) For a Website</a> to make your cover page engaging to visitors in less than ten seconds.</div> </div> </div> </div> </div> <div id="rec384258654" class="r t-rec" style=" " data-record-type="215"> <a name="height" style="font-size:0;"></a> </div> <div id="rec384260701" class="r t-rec t-rec_pt_90 t-rec_pb_0" style="padding-top:90px;padding-bottom:0px; " data-record-type="30"> <!-- T015 --> <div class="t015"> <div class="t-container t-align_center"> <div class="t-col t-col_10 t-prefix_1"> <div class="t015__title t-title t-title_lg" field="title"><div style="font-size: 40px;" data-customstyle="yes"><p style="text-align: center;"><span style="font-size: 40px;">Cover Height</span></p></div></div> </div> </div> </div> <style> #rec384260701 .t015__uptitle{text-transform:uppercase;}</style> </div> <div id="rec3775886" class="r t-rec t-rec_pt_45 t-rec_pb_60" style="padding-top:45px;padding-bottom:60px; " data-record-type="106"> <!-- T004 --> <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 "><strong>A thin cover</strong> has a height of 60% or 70%, not 100%. It serves a more formal function as the user's attention shifts to the information that follows the cover.<br /><br />To create such a cover, go to the <strong style="font-weight: 400;">"Height"</strong> field in the block settings. You can set height in pixels (e.g. 400px) or viewport height units of measurement, percent (1vh is 1% of the viewable area). We recommend to set height in vh.</div> </div> </div> </div> </div> <div id="rec3775888" class="r t-rec t-rec_pt_30 t-rec_pb_0" style="padding-top:30px;padding-bottom:0px; " data-record-type="170"> <!-- t156 --> <!-- @classes: t-descr t-descr_xxs --><div class="t156"> <div class="t-container"> <div class="t-col t-col_12"> <div class="t156__wrapper"> <div class="t156__item" itemscope itemtype="http://schema.org/ImageObject"> <img class="t-img" imgfield="gi_img__0" src="https://thb.tildacdn.com/tild3630-3039-4334-a261-663461623130/-/empty/Screenshot_2021-11-2.png" data-original="https://static.tildacdn.com/tild3630-3039-4334-a261-663461623130/Screenshot_2021-11-2.png" data-zoom-target="0" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild3630-3039-4334-a261-663461623130/Screenshot_2021-11-2.png" data-img-zoom-descr="" style="width:100%;" alt=""> <meta itemprop="image" content="https://static.tildacdn.com/tild3630-3039-4334-a261-663461623130/Screenshot_2021-11-2.png"> </div> <div style="width:20px;min-width:20px;"></div> <div class="t156__item" itemscope itemtype="http://schema.org/ImageObject"> <img class="t-img" imgfield="gi_img__1" src="https://thb.tildacdn.com/tild3763-3834-4137-b664-343266623639/-/empty/Screenshot_2021-11-2.png" data-original="https://static.tildacdn.com/tild3763-3834-4137-b664-343266623639/Screenshot_2021-11-2.png" data-zoom-target="1" data-zoomable="yes" data-img-zoom-url="https://static.tildacdn.com/tild3763-3834-4137-b664-343266623639/Screenshot_2021-11-2.png" data-img-zoom-descr="" style="width:100%;" alt=""> <meta itemprop="image" content="https://static.tildacdn.com/tild3763-3834-4137-b664-343266623639/Screenshot_2021-11-2.png"> </div> </div> </div> </div> </div> </div> <div id="rec3775889" class="r t-rec t-rec_pt_0 t-rec_pb_60" style="padding-top:0px;padding-bottom:60px; " data-record-type="3"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3531-3935-4836-b364-306233316336/Screenshot_2021-11-2.png"> <img class="t-img t-width t107__width t-width_12" src="https://thb.tildacdn.com/tild3531-3935-4836-b364-306233316336/-/empty/Screenshot_2021-11-2.png" data-original="https://static.tildacdn.com/tild3531-3935-4836-b364-306233316336/Screenshot_2021-11-2.png" imgfield="img" alt=""> </div> </div> </div> <div id="rec384260923" class="r t-rec" style=" " data-record-type="215"> <a name="filler" style="font-size:0;"></a> </div> <div id="rec384281703" class="r t-rec" style=" " data-record-type="215"> <a name="filter" style="font-size:0;"></a> </div> <div id="rec384260853" class="r t-rec t-rec_pt_90 t-rec_pb_0" style="padding-top:90px;padding-bottom:0px; " data-record-type="30"> <!-- T015 --> <div class="t015"> <div class="t-container t-align_center"> <div class="t-col t-col_10 t-prefix_1"> <div class="t015__title t-title t-title_lg" field="title"><div style="font-size: 40px;" data-customstyle="yes"><p style="text-align: center;">Cover color: Filter settings</p></div></div> </div> </div> </div> <style> #rec384260853 .t015__uptitle{text-transform:uppercase;}</style> </div> <div id="rec3775892" class="r t-rec t-rec_pt_15 t-rec_pb_60" style="padding-top:15px;padding-bottom:60px; " data-record-type="106"> <!-- T004 --> <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 "><strong>How to change the tone of the background image </strong><br />We change the tone of the image when we want to make the cover text easily readable. To do this, open the Settings panel of the cover block and adjust the filter color. Here you can see a cover image to which one filter color has been applied. Sometimes, it is the brand color or a website's primary color that is used for toning.</div> </div> </div> </div> </div> <div id="rec3775893" class="r t-rec t-rec_pt_30" style="padding-top:30px; " data-record-type="170"> <!-- t156 --> <div class="t156"> <div class="t-container"> <div class="t-col t-col_12"> <div class="t156__wrapper"> <div class="t156__item" itemscope itemtype="http://schema.org/ImageObject"> <img class="t-img" imgfield="gi_img__0" src="https://thb.tildacdn.com/tild6463-3665-4439-b134-626337396632/-/empty/Screenshot_2021-11-2.png" data-original="https://static.tildacdn.com/tild6463-3665-4439-b134-626337396632/Screenshot_2021-11-2.png" data-zoom-target="0" style="width:100%;" alt=""> <meta itemprop="image" content="https://static.tildacdn.com/tild6463-3665-4439-b134-626337396632/Screenshot_2021-11-2.png"> </div> <div style="width:20px;min-width:20px;"></div> <div class="t156__item" itemscope itemtype="http://schema.org/ImageObject"> <img class="t-img" imgfield="gi_img__1" src="https://thb.tildacdn.com/tild3930-3764-4463-b861-336138373738/-/empty/Screenshot_2021-11-2.png" data-original="https://static.tildacdn.com/tild3930-3764-4463-b861-336138373738/Screenshot_2021-11-2.png" data-zoom-target="1" style="width:100%;" alt=""> <meta itemprop="image" content="https://static.tildacdn.com/tild3930-3764-4463-b861-336138373738/Screenshot_2021-11-2.png"> </div> </div> </div> </div> </div> </div> <div id="rec384261288" class="r t-rec t-rec_pt_0 t-rec_pb_60" style="padding-top:0px;padding-bottom:60px; " data-record-type="56"> <!-- T046 --> <div class="t046"> <div class="t-container"> <div class="t-col t-col_6 t-prefix_3"> <div class="t046__text t-text t-text_xs" field="text">Filter settings in the Content panel of the block </div> </div> </div> </div> </div> <div id="rec384273075" class="r t-rec t-rec_pt_0 t-rec_pb_75" style="padding-top:0px;padding-bottom:75px; " data-record-type="3"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild6264-3434-4665-a333-313235366334/Screenshot_2021-11-2.png"> <img class="t-img t-width t107__width t-width_12" src="https://thb.tildacdn.com/tild6264-3434-4665-a333-313235366334/-/empty/Screenshot_2021-11-2.png" data-original="https://static.tildacdn.com/tild6264-3434-4665-a333-313235366334/Screenshot_2021-11-2.png" imgfield="img" alt=""> <div class="t-container_8"> <div class="t-col t-col_8 t107__title t-text" field="title" itemprop="name">Tilda Help Center cover: the filter gradually turns into solid orange color</div> </div> </div> </div> </div> <div id="rec3775895" class="r t-rec t-rec_pt_60 t-rec_pb_45" style="padding-top:60px;padding-bottom:45px; " data-record-type="106"> <!-- T004 --> <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 "><strong>How to blend the color into the next block's color</strong><br />Sometimes the cover should gently blend into the next block. To achieve this effect, the color of the end filter should be set at 100% opacity. The color of the filter should be the same as the color of the next block.</div> </div> </div> </div> </div> <div id="rec3775896" class="r t-rec t-rec_pt_30" style="padding-top:30px; " data-record-type="170"> <!-- t156 --> <div class="t156"> <div class="t-container"> <div class="t-col t-col_12"> <div class="t156__wrapper"> <div class="t156__item" itemscope itemtype="http://schema.org/ImageObject"> <img class="t-img" imgfield="gi_img__0" src="https://static.tildacdn.com/a7f8233a-a801-4b4a-9fef-ea51158feb58/-/empty/20151202115015LatinDance.png" data-original="https://static.tildacdn.com/a7f8233a-a801-4b4a-9fef-ea51158feb58/20151202115015LatinDance.png" data-zoom-target="0" style="width:100%;" alt=""> <meta itemprop="image" content="https://static.tildacdn.com/a7f8233a-a801-4b4a-9fef-ea51158feb58/20151202115015LatinDance.png"> </div> <div style="width:20px;min-width:20px;"></div> <div class="t156__item" itemscope itemtype="http://schema.org/ImageObject"> <img class="t-img" imgfield="gi_img__1" src="https://static.tildacdn.com/9a9dd94a-bdaa-4a00-8fc7-3e91a00ecd3d/-/empty/20151202115034LatinDance.png" data-original="https://static.tildacdn.com/9a9dd94a-bdaa-4a00-8fc7-3e91a00ecd3d/20151202115034LatinDance.png" data-zoom-target="1" style="width:100%;" alt=""> <meta itemprop="image" content="https://static.tildacdn.com/9a9dd94a-bdaa-4a00-8fc7-3e91a00ecd3d/20151202115034LatinDance.png"> </div> </div> </div> </div> </div> </div> <div id="rec3775897" class="r t-rec t-rec_pt_60 t-rec_pb_60" style="padding-top:60px;padding-bottom:60px; " data-record-type="106"> <!-- T004 --> <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 ">Making the cover twice as high while applying these two settings at once will help you achieve the effect shown below:</div> </div> </div> </div> </div> <div id="rec384282749" class="r t-rec t-rec_pt_0 t-rec_pb_0" style="padding-top:0px;padding-bottom:0px; " data-record-type="131"> <!-- T123 --> <div class="t123"> <div class="t-container t123__centeredContainer"> <div class="t-col t-col_10 t-prefix_1"> <!-- nominify begin --> <div style='position:relative; padding-bottom:calc(62.50% + 44px)'><iframe src='https://gfycat.com/ifr/LikelyDearChipmunk' frameborder='0' scrolling='no' width='100%' height='100%' style='position:absolute;top:0;left:0;' allowfullscreen></iframe></div> <!-- nominify end --> </div> </div> </div> </div> <div id="rec384266316" class="r t-rec t-rec_pt_60 t-rec_pb_0" style="padding-top:60px;padding-bottom:0px; " data-record-type="30"> <!-- T015 --> <div class="t015"> <div class="t-container t-align_center"> <div class="t-col t-col_10 t-prefix_1"> <div class="t015__title t-title t-title_lg" field="title"><p style="text-align: center;"><span style="font-size: 40px;">Gradient and Color Fill</span></p></div> </div> </div> </div> <style> #rec384266316 .t015__uptitle{text-transform:uppercase;}</style> </div> <div id="rec384273750" class="r t-rec t-rec_pt_30 t-rec_pb_0" style="padding-top:30px;padding-bottom:0px; " data-record-type="170"> <!-- t156 --> <div class="t156"> <div class="t-container"> <div class="t-col t-col_12"> <div class="t156__wrapper"> <div class="t156__item" itemscope itemtype="http://schema.org/ImageObject"> <img class="t-img" imgfield="gi_img__0" src="https://thb.tildacdn.com/tild6466-6336-4030-a634-323162376437/-/empty/Screenshot_2020-06-0.png" data-original="https://static.tildacdn.com/tild6466-6336-4030-a634-323162376437/Screenshot_2020-06-0.png" data-zoom-target="0" style="width:100%;" alt=""> <meta itemprop="image" content="https://static.tildacdn.com/tild6466-6336-4030-a634-323162376437/Screenshot_2020-06-0.png"> </div> <div style="width:20px;min-width:20px;"></div> <div class="t156__item" itemscope itemtype="http://schema.org/ImageObject"> <img class="t-img" imgfield="gi_img__1" src="https://thb.tildacdn.com/tild6137-6233-4162-a530-323833353036/-/empty/Screenshot_2020-06-0.png" data-original="https://static.tildacdn.com/tild6137-6233-4162-a530-323833353036/Screenshot_2020-06-0.png" data-zoom-target="1" style="width:100%;" alt=""> <meta itemprop="image" content="https://static.tildacdn.com/tild6137-6233-4162-a530-323833353036/Screenshot_2020-06-0.png"> </div> </div> </div> </div> </div> </div> <div id="rec3775901" class="r t-rec t-rec_pt_0 t-rec_pb_15" style="padding-top:0px;padding-bottom:15px; " data-record-type="218"> <!-- T005 --> <div class="t005"> <div class="t-container"> <div class="t-row"> <div class="t-col t-col_6 "><div class="t005__text t-text t-text_md" field="text">There are two toning parameters in the block settings: opacity and color. Set the opacity to 100% and select a color—this will be the color of the cover.</div></div> <div class="t-col t-col_6 "><div class="t005__text t-text t-text_md" field="text2">If you select different colors, one will blend into another smoothly.</div></div> </div> </div> </div> </div> <div id="rec384266667" class="r t-rec" style=" " data-record-type="215"> <a name="video" style="font-size:0;"></a> </div> <div id="rec3775904" class="r t-rec t-rec_pt_90 t-rec_pb_0" style="padding-top:90px;padding-bottom:0px; " data-record-type="30"> <!-- T015 --> <div class="t015"> <div class="t-container t-align_center"> <div class="t-col t-col_10 t-prefix_1"> <div class="t015__title t-title t-title_lg" field="title">Video Cover</div> <div class="t015__descr t-descr t-descr_xl" field="descr">You can use a video instead of an image. There are two ways to do it.</div> </div> </div> </div> <style> #rec3775904 .t015__uptitle{text-transform:uppercase;}@media screen and (min-width:900px){#rec3775904 .t015__title{font-size:40px;}}</style> </div> <div id="rec3775906" class="r t-rec t-rec_pt_105 t-rec_pb_0" style="padding-top:105px;padding-bottom:0px; " data-record-type="33"> <!-- T017 --> <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"><div style="text-align: center;" data-customstyle="yes">How to Add a YouTube Video</div></div> </div> </div> </div> </div> <div id="rec384273803" class="r t-rec t-rec_pt_30" style="padding-top:30px; " data-record-type="170"> <!-- t156 --> <div class="t156"> <div class="t-container"> <div class="t-col t-col_12"> <div class="t156__wrapper"> <div class="t156__item" itemscope itemtype="http://schema.org/ImageObject"> <img class="t-img" imgfield="gi_img__0" src="https://thb.tildacdn.com/tild3930-6335-4565-b734-623333316464/-/empty/image.png" data-original="https://static.tildacdn.com/tild3930-6335-4565-b734-623333316464/image.png" data-zoom-target="0" style="width:100%;" alt=""> <meta itemprop="image" content="https://static.tildacdn.com/tild3930-6335-4565-b734-623333316464/image.png"> </div> <div style="width:20px;min-width:20px;"></div> <div class="t156__item" itemscope itemtype="http://schema.org/ImageObject"> <img class="t-img" imgfield="gi_img__1" src="https://thb.tildacdn.com/tild3939-3232-4535-a235-363764643034/-/empty/image.png" data-original="https://static.tildacdn.com/tild3939-3232-4535-a235-363764643034/image.png" data-zoom-target="1" style="width:100%;" alt=""> <meta itemprop="image" content="https://static.tildacdn.com/tild3939-3232-4535-a235-363764643034/image.png"> </div> </div> </div> </div> </div> </div> <div id="rec3775908" class="r t-rec t-rec_pt_75 t-rec_pb_120" style="padding-top:75px;padding-bottom:120px; " data-record-type="106"> <!-- T004 --> <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 ">Upload a video to YouTube or find an existing one there. Then go to the Content panel of the cover block and paste the video link in the appropriate field. This way, you can create a video cover.</div> </div> </div> </div> </div> <div id="rec3775909" class="r t-rec t-rec_pb_0" style="padding-bottom:0px; " data-animationappear="off" data-record-type="18"> <!-- cover --> <div class="t-cover" id="recorddiv3775909"bgimgfield="img"style="height:100vh;background-image:url('https://thb.tildacdn.com/tild6235-3531-4236-b262-633437306430/-/resize/20x/spacex--p-KCm6xB9I-u.jpeg');"> <div class="t-cover__carrier" id="coverCarry3775909"data-content-cover-id="3775909"data-content-cover-bg="https://static.tildacdn.com/tild6235-3531-4236-b262-633437306430/spacex--p-KCm6xB9I-u.jpeg"data-display-changed="true"data-content-cover-height="100vh"data-content-cover-parallax="fixed"data-content-use-image-for-mobile-cover="on" data-content-video-url-youtube="zsJpUCWfyPE"style="height:100vh; "itemscope itemtype="http://schema.org/ImageObject"><meta itemprop="image" content="https://static.tildacdn.com/tild6235-3531-4236-b262-633437306430/spacex--p-KCm6xB9I-u.jpeg"></div> <div class="t-cover__filter" style="height:100vh;background-image: -moz-linear-gradient(top, rgba(0,0,0,0.20), rgba(0,0,0,0.30));background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.20), rgba(0,0,0,0.30));background-image: -o-linear-gradient(top, rgba(0,0,0,0.20), rgba(0,0,0,0.30));background-image: -ms-linear-gradient(top, rgba(0,0,0,0.20), rgba(0,0,0,0.30));background-image: linear-gradient(top, rgba(0,0,0,0.20), rgba(0,0,0,0.30));filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#cc000000', endColorstr='#b2000000');"></div> <div class="t-container"> <div class="t-col t-col_12 "> <div class="t-cover__wrapper t-valign_middle" style="height:100vh;"> <div class="t001 t-align_center"> <div class="t001__wrapper" data-hook-content="covercontent"> <div class="t001__uptitle t-uptitle t-uptitle_sm" field="subtitle">Our Company</div> <div class="t001__title t-title t-title_xl" field="title">Experts in the art</div> <div class="t001__descr t-descr t-descr_xl t001__descr_center" field="descr">Art Basel stages art shows for high quality modern and contemporary art and is sited annually in Basel, Miami Beach, and Hong Kong</div> <span class="space"></span> </div> </div> </div> </div> </div> </div> <style> #rec3775909 .t001__uptitle{text-transform:uppercase;}</style> </div> <div id="rec3775910" class="r t-rec t-rec_pt_105 t-rec_pb_0" style="padding-top:105px;padding-bottom:0px; " data-record-type="33"> <!-- T017 --> <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"><div style="text-align:center;font-size:40px;" data-customstyle="yes">How to Add WebM and MPEG-4 Videos</div></div> </div> </div> </div> </div> <div id="rec3775911" class="r t-rec t-rec_pt_45 t-rec_pb_60" style="padding-top:45px;padding-bottom:60px; " data-record-type="106"> <!-- T004 --> <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 use online converters to create WebM and MPEG-4 videos and host them at your server or the converting service's website. For instance, <a href="http://gfycat.com/" rel="noopener" target="_blank">gfycat.com</a> allows both converting and hosting.<br /><br />Open the Settings panel of the cover block and add the video links to the corresponding fields.</div> </div> </div> </div> </div> <div id="rec3775912" class="r t-rec t-rec_pt_0 t-rec_pb_0" style="padding-top:0px;padding-bottom:0px; " data-record-type="3"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3832-3030-4031-b334-396261376466/image.png"> <img class="t-img t-width t107__width t-width_10" src="https://thb.tildacdn.com/tild3832-3030-4031-b334-396261376466/-/empty/image.png" data-original="https://static.tildacdn.com/tild3832-3030-4031-b334-396261376466/image.png" imgfield="img" alt=""> </div> </div> </div> <div id="rec3775913" class="r t-rec t-rec_pt_60 t-rec_pb_0" style="padding-top:60px;padding-bottom:0px; " data-record-type="106"> <!-- T004 --> <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 "><strong>Why use both formats?</strong><br />Browsers use different formats, so there is no unified format. When a user comes to your website, they will see a video their browser can play. Otherwise, the cover will appear empty.</div> </div> </div> </div> </div> <div id="rec384262320" class="r t-rec t-rec_pt_75 t-rec_pb_0" style="padding-top:75px;padding-bottom:0px; " data-record-type="296"> <!-- t265 --> <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:#ff0000;" 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"><div style="font-size: 20px;" data-customstyle="yes"><span style="font-weight: 500;">Important point</span>: Currently, it’s not possible to upload your video file to Tilda, but you can use third-party services that provide a direct link to the video file. <br />Some of the popular cloud services also provide a direct link to a file. For example, to get a direct link to a video file on Dropbox, you need to replace the dropbox.com link with dl.dropboxusercontent.com. You can also upload the file to your hosting services such as Selectel, and others.<br /><br /></div></div> </div> </div> </div> </div> </div> <div id="rec384266794" class="r t-rec" style=" " data-record-type="215"> <a name="mobileversion" style="font-size:0;"></a> </div> <div id="rec384262795" class="r t-rec t-rec_pt_90 t-rec_pb_0" style="padding-top:90px;padding-bottom:0px; " data-record-type="30"> <!-- T015 --> <div class="t015"> <div class="t-container t-align_center"> <div class="t-col t-col_10 t-prefix_1"> <div class="t015__title t-title t-title_lg" field="title"><div style="font-size: 40px;" data-customstyle="yes">Cover page for mobile view</div></div> </div> </div> </div> <style> #rec384262795 .t015__uptitle{text-transform:uppercase;}</style> </div> <div id="rec3775916" class="r t-rec t-rec_pt_30 t-rec_pb_30" style="padding-top:30px;padding-bottom:30px; " data-record-type="106"> <!-- T004 --> <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 ">Screens have a wide range of aspect ratios, and the cover may appear differently on different devices. While common aspect ratios will not make dramatic changes to the cover image, mobile devices can alter it beyond recognition. Please, take time to learn how to create a mobile-friendly cover (or any other block) using this comprehensive guide.</div> </div> </div> </div> </div> <div id="rec384273915" class="r t-rec t-rec_pt_30 t-rec_pb_75" style="padding-top:30px;padding-bottom:75px; " data-record-type="117"> <!-- T106 --> <div class="t106"> <div class="t-container t-card__container"> <div class="t106__wrapper t-card__col t-card__col_withoutbtn"> <div class="t106__block"> <img src="https://thb.tildacdn.com/tild3335-6634-4530-a161-623930616534/-/empty/img_7_copy.jpg" data-original="https://static.tildacdn.com/tild3335-6634-4530-a161-623930616534/img_7_copy.jpg" class="t106__img t-img" imgfield="img" alt=""> </div> <div class="t106__block" style="background-color:#eeeeee;"> <div class="t106__title t-title t-title_xxs" field="title"> <a href="/mobile-version" class="t-card__link"> <a href="/mobile-version" rel="noopener noreferrer" style="font-weight: 500;">Going Mobile-Friendly</a> </a> </div> <div class="t106__text t-text" field="text"> </div> </div> </div> </div> </div> <script type="text/javascript">t_onReady(function() {t_onFuncLoad('t106_init',function() {t106_init('384273915');});});</script> </div> <div id="rec3775918" class="r t-rec t-rec_pt_0 t-rec_pb_0" style="padding-top:0px;padding-bottom:0px; " data-record-type="106"> <!-- T004 --> <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 "><strong>Why cover videos do not play on mobile <br /></strong><br />Due to the peculiarities of mobile OS, video covers will not play on mobile devices. Mobile OS disable autoplay. If you have made an autoplay video cover, do not forget to add an image in the Content panel of the cover block. The image will appear when the video cannot be played, i.e., when visitors access your website from smartphones or tablets.</div> </div> </div> </div> </div> <div id="rec384280805" class="r t-rec t-rec_pt_75 t-rec_pb_0" style="padding-top:75px;padding-bottom:0px; " data-record-type="3"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild6134-3964-4631-b266-613865623363/Screenshot_2021-11-2.png"> <img class="t-img t-width t107__width t-width_12" src="https://thb.tildacdn.com/tild6134-3964-4631-b266-613865623363/-/empty/Screenshot_2021-11-2.png" data-original="https://static.tildacdn.com/tild6134-3964-4631-b266-613865623363/Screenshot_2021-11-2.png" imgfield="img" alt=""> </div> </div> </div> <div id="rec384266894" class="r t-rec" style=" " data-record-type="215"> <a name="form" style="font-size:0;"></a> </div> <div id="rec384263214" class="r t-rec t-rec_pt_90 t-rec_pb_0" style="padding-top:90px;padding-bottom:0px; " data-record-type="30"> <!-- T015 --> <div class="t015"> <div class="t-container t-align_center"> <div class="t-col t-col_10 t-prefix_1"> <div class="t015__title t-title t-title_lg" field="title"><div style="font-size: 40px;" data-customstyle="yes">Form on a cover page</div></div> </div> </div> </div> <style> #rec384263214 .t015__uptitle{text-transform:uppercase;}</style> </div> <div id="rec384263821" class="r t-rec t-rec_pt_60 t-rec_pb_60" style="padding-top:60px;padding-bottom:60px; " data-record-type="106"> <!-- T004 --> <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 find a data entry form on the following cover pages: CR26 (Cover with an input field), CR26AN (Cover with multiple inputs), CR32 (Cover with a right-aligned form), CR34 (Cover with a countdown and subscription form), CR36 (Cover with an image or YouTube video and form in two columns)<br /><br />You can preview what the form will look like by visiting the Block Library → Cover and choosing your favorite option.</div> </div> </div> </div> </div> <div id="rec384263822" class="r t-rec t-rec_pt_45 t-rec_pb_75" style="padding-top:45px;padding-bottom:75px; " data-record-type="3"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild6533-3233-4163-b330-316330636539/image.png"> <img class="t-img t-width t107__width t-width_10" src="https://thb.tildacdn.com/tild6533-3233-4163-b330-316330636539/-/empty/image.png" data-original="https://static.tildacdn.com/tild6533-3233-4163-b330-316330636539/image.png" imgfield="img" alt=""> </div> </div> </div> <div id="rec384263823" class="r t-rec t-rec_pt_60 t-rec_pb_60" style="padding-top:60px;padding-bottom:60px; " data-record-type="106"> <!-- T004 --> <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 ">Forms on cover pages perform the same function and can be customized in the same way as regular forms. To customize your form, read the article <a href="/forms-settings" rel="noreferrer noopener" target="_blank">How to Set Up Data Capture Forms</a>.</div> </div> </div> </div> </div> <div id="rec384263824" class="r t-rec t-rec_pt_45 t-rec_pb_45" style="padding-top:45px;padding-bottom:45px; " data-record-type="374"> <!-- T374 --> <div class="t374"> <div class="t-container"> <div class="t-col t-col_8 t-prefix_2"> <a class="t374__link" href="/forms-settings" 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">Help article How to Set Up Data Capture Forms</div> </div> </div> </a> </div> </div> </div> </div> <div id="rec384263825" class="r t-rec" style=" " data-record-type="215"> <a name="timer" style="font-size:0;"></a> </div> <div id="rec384264822" class="r t-rec t-rec_pt_90 t-rec_pb_0" style="padding-top:90px;padding-bottom:0px; " data-record-type="30"> <!-- T015 --> <div class="t015"> <div class="t-container t-align_center"> <div class="t-col t-col_10 t-prefix_1"> <div class="t015__title t-title t-title_lg" field="title"><div style="font-size: 40px;" data-customstyle="yes"><span style="font-size: 40px;">Adding a countdown timer</span></div></div> </div> </div> </div> <style> #rec384264822 .t015__uptitle{text-transform:uppercase;}</style> </div> <div id="rec384264823" class="r t-rec t-rec_pt_60 t-rec_pb_60" style="padding-top:60px;padding-bottom:60px; " data-record-type="106"> <!-- T004 --> <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 ">The cover pages of blocks CR34 and CR35 feature a countdown timer until a specific time in the future. This feature is especially handy if you are creating a page for a promotion or an event. <br /><br />In the Content panel of these blocks, you can set the date, time and time zone of the event start time. </div> </div> </div> </div> </div> <div id="rec384264824" class="r t-rec t-rec_pt_75 t-rec_pb_75" style="padding-top:75px;padding-bottom:75px; " data-record-type="3"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3931-3537-4635-b661-653361613731/image.png"> <img class="t-img t-width t107__width t-width_10" src="https://thb.tildacdn.com/tild3931-3537-4635-b661-653361613731/-/empty/image.png" data-original="https://static.tildacdn.com/tild3931-3537-4635-b661-653361613731/image.png" imgfield="img" alt=""> </div> </div> </div> <div id="rec384264825" class="r t-rec t-rec_pt_60 t-rec_pb_60" style="padding-top:60px;padding-bottom:60px; " data-record-type="106"> <!-- T004 --> <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 the date is set correctly, a timer will appear on the cover page.</div> </div> </div> </div> </div> <div id="rec384264826" class="r t-rec t-rec_pt_30 t-rec_pb_30" style="padding-top:30px;padding-bottom:30px; " data-record-type="3"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3739-3838-4465-b939-373738323835/image.png"> <img class="t-img t-width t107__width t-width_10" src="https://thb.tildacdn.com/tild3739-3838-4465-b939-373738323835/-/empty/image.png" data-original="https://static.tildacdn.com/tild3739-3838-4465-b939-373738323835/image.png" imgfield="img" alt=""> </div> </div> </div> <div id="rec384264827" class="r t-rec" style=" " data-record-type="215"> <a name="zero" style="font-size:0;"></a> </div> <div id="rec384265061" class="r t-rec t-rec_pt_90 t-rec_pb_0" style="padding-top:90px;padding-bottom:0px; " data-record-type="30"> <!-- T015 --> <div class="t015"> <div class="t-container t-align_center"> <div class="t-col t-col_10 t-prefix_1"> <div class="t015__title t-title t-title_lg" field="title"><span style="font-size: 40px;">Converting a Cover Page to Zero Block</span></div> </div> </div> </div> <style> #rec384265061 .t015__uptitle{text-transform:uppercase;}</style> </div> <div id="rec384265062" class="r t-rec t-rec_pt_60 t-rec_pb_60" style="padding-top:60px;padding-bottom:60px; " data-record-type="106"> <!-- T004 --> <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 ">Blocks featuring covers are tried and tested examples of good design that automatically adapt to all devices. But sometimes you need to add an element or create a custom cover page. This can be done using Tilda’s Zero Block editor.</div> </div> </div> </div> </div> <div id="rec384265063" class="r t-rec t-rec_pt_45 t-rec_pb_45" style="padding-top:45px;padding-bottom:45px; " data-record-type="374"> <!-- T374 --> <div class="t374"> <div class="t-container"> <div class="t-col t-col_8 t-prefix_2"> <a class="t374__link" href="/zero" 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">Zero Block: How to Create a Custom Block </div> </div> </div> </a> </div> </div> </div> </div> <div id="rec384265064" class="r t-rec t-rec_pt_60 t-rec_pb_60" style="padding-top:60px;padding-bottom:60px; " data-record-type="106"> <!-- T004 --> <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 ">Many cover blocks can be converted to Zero Block for additional editing. To do this, go to the Block Settings, scroll down and click on the “Convert to Zero Block" button.</div> </div> </div> </div> </div> <div id="rec384265065" class="r t-rec t-rec_pt_30 t-rec_pb_75" style="padding-top:30px;padding-bottom:75px; " data-record-type="3"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3163-3261-4734-b861-383966396461/Screenshot_2020-06-0.png"> <img class="t-img t-width t107__width t-width_10" src="https://thb.tildacdn.com/tild3163-3261-4734-b861-383966396461/-/empty/Screenshot_2020-06-0.png" data-original="https://static.tildacdn.com/tild3163-3261-4734-b861-383966396461/Screenshot_2020-06-0.png" imgfield="img" alt=""> </div> </div> </div> <div id="rec384265066" class="r t-rec t-rec_pt_60 t-rec_pb_60" style="padding-top:60px;padding-bottom:60px; " data-record-type="106"> <!-- T004 --> <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 ">Following that, the cover is converted to Zero Block. The format will be adapted correctly. If you have already made your changes, they will not be saved, so be careful when converting the cover.</div> </div> </div> </div> </div> <div id="rec384265067" class="r t-rec t-rec_pt_30 t-rec_pb_75" style="padding-top:30px;padding-bottom:75px; " data-record-type="3"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/tild3465-3130-4962-a534-333362323664/image.png"> <img class="t-img t-width t107__width t-width_10" src="https://thb.tildacdn.com/tild3465-3130-4962-a534-333362323664/-/empty/image.png" data-original="https://static.tildacdn.com/tild3465-3130-4962-a534-333362323664/image.png" imgfield="img" alt=""> </div> </div> </div> <div id="rec384265381" class="r t-rec" style=" " data-record-type="376"> <div class="t376" data-section-bg-color="#ffffe0" style="display:none;"></div> <script type="text/javascript">t_onReady(function() {t_onFuncLoad('t376_setbg',function() {t376_setbg();var t376_timer=window.setInterval(function() {t376_setbg();},4000);});});</script> </div> <div id="rec384265382" class="r t-rec t-rec_pt_135 t-rec_pb_0" style="padding-top:135px;padding-bottom:0px; " data-record-type="30"> <!-- T015 --> <div class="t015"> <div class="t-container t-align_center"> <div class="t-col t-col_10 t-prefix_1"> <div class="t015__title t-title t-title_lg" field="title"><span style="font-size: 40px;">Example: How to crop a cover</span></div> </div> </div> </div> <style> #rec384265382 .t015__uptitle{text-transform:uppercase;}</style> </div> <div id="rec384265383" class="r t-rec t-rec_pt_105 t-rec_pb_0" style="padding-top:105px;padding-bottom:0px; " data-record-type="43"> <!-- T030 --> <div class="t030"> <div class="t-container t-align_center"> <div class="t-col t-col_10 t-prefix_1"> <div class="t030__title t-title t-title_xxs" field="title"><span style="font-weight: 500;">Vertical image </span></div> </div> </div> </div> </div> <div id="rec3775860" class="r t-rec t-rec_pt_45 t-rec_pb_75" style="padding-top:45px;padding-bottom:75px; " data-record-type="3"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/00348c25-4e91-43a3-8a97-8fb03403b336/squareScreenShot20151123at191044.jpg"> <img class="t-img t-width t107__width t-width_8" src="https://static.tildacdn.com/00348c25-4e91-43a3-8a97-8fb03403b336/-/empty/squareScreenShot20151123at191044.jpg" data-original="https://static.tildacdn.com/00348c25-4e91-43a3-8a97-8fb03403b336/squareScreenShot20151123at191044.jpg" imgfield="img" alt=""> </div> </div> </div> <div id="rec3775862" class="r t-rec t-rec_pt_0 t-rec_pb_0" style="padding-top:0px;padding-bottom:0px; " data-record-type="3"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/89a5cbaf-efd2-4dc0-80ee-f3ac460b9de1/1.jpg"> <img class="t-img t-width t107__width t-width_10" src="https://static.tildacdn.com/89a5cbaf-efd2-4dc0-80ee-f3ac460b9de1/-/empty/1.jpg" data-original="https://static.tildacdn.com/89a5cbaf-efd2-4dc0-80ee-f3ac460b9de1/1.jpg" imgfield="img" alt=""> </div> </div> </div> <div id="rec384265605" class="r t-rec t-rec_pt_105 t-rec_pb_0" style="padding-top:105px;padding-bottom:0px; " data-record-type="43"> <!-- T030 --> <div class="t030"> <div class="t-container t-align_center"> <div class="t-col t-col_10 t-prefix_1"> <div class="t030__title t-title t-title_xxs" field="title"><span style="font-weight: 500;">Square Image</span></div> </div> </div> </div> </div> <div id="rec3775868" class="r t-rec t-rec_pt_75 t-rec_pb_75" style="padding-top:75px;padding-bottom:75px; " data-record-type="3"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/4ac251a6-66a9-4b93-87cf-4fb699dd10a7/squarejpg.jpg"> <img class="t-img t-width t107__width t-width_8" src="https://static.tildacdn.com/4ac251a6-66a9-4b93-87cf-4fb699dd10a7/-/empty/squarejpg.jpg" data-original="https://static.tildacdn.com/4ac251a6-66a9-4b93-87cf-4fb699dd10a7/squarejpg.jpg" imgfield="img" alt=""> </div> </div> </div> <div id="rec3775869" class="r t-rec t-rec_pt_0 t-rec_pb_0" style="padding-top:0px;padding-bottom:0px; " data-record-type="3"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/391b325e-0f0d-4962-ae07-d58583202575/2.jpg"> <img class="t-img t-width t107__widthauto" src="https://static.tildacdn.com/391b325e-0f0d-4962-ae07-d58583202575/-/empty/2.jpg" data-original="https://static.tildacdn.com/391b325e-0f0d-4962-ae07-d58583202575/2.jpg" imgfield="img" alt=""> </div> </div> </div> <div id="rec384265664" class="r t-rec t-rec_pt_105 t-rec_pb_0" style="padding-top:105px;padding-bottom:0px; " data-record-type="43"> <!-- T030 --> <div class="t030"> <div class="t-container t-align_center"> <div class="t-col t-col_10 t-prefix_1"> <div class="t030__title t-title t-title_xxs" field="title"><span style="font-weight: 500;">Narrow horizontal image</span></div> </div> </div> </div> </div> <div id="rec3775875" class="r t-rec t-rec_pt_60 t-rec_pb_75" style="padding-top:60px;padding-bottom:75px; " data-record-type="3"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/4066dfb3-5924-449f-bdfd-ff0e5eec2e5f/thincover.jpg"> <img class="t-img t-width t107__width t-width_12" src="https://static.tildacdn.com/4066dfb3-5924-449f-bdfd-ff0e5eec2e5f/-/empty/thincover.jpg" data-original="https://static.tildacdn.com/4066dfb3-5924-449f-bdfd-ff0e5eec2e5f/thincover.jpg" imgfield="img" alt=""> </div> </div> </div> <div id="rec3775876" class="r t-rec t-rec_pt_0 t-rec_pb_90" style="padding-top:0px;padding-bottom:90px; " data-record-type="3"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/4a8aa1a5-0324-4469-b7c0-5ca7615f0dd8/3.jpg"> <img class="t-img t-width t107__widthauto" src="https://static.tildacdn.com/4a8aa1a5-0324-4469-b7c0-5ca7615f0dd8/-/empty/3.jpg" data-original="https://static.tildacdn.com/4a8aa1a5-0324-4469-b7c0-5ca7615f0dd8/3.jpg" imgfield="img" alt=""> </div> </div> </div> <div id="rec384265689" class="r t-rec t-rec_pt_105 t-rec_pb_0" style="padding-top:105px;padding-bottom:0px; " data-record-type="43"> <!-- T030 --> <div class="t030"> <div class="t-container t-align_center"> <div class="t-col t-col_10 t-prefix_1"> <div class="t030__title t-title t-title_xxs" field="title"><span style="font-weight: 500;">Horizontal image, 16:9 aspect ratio</span></div> </div> </div> </div> </div> <div id="rec3775879" class="r t-rec t-rec_pt_45 t-rec_pb_75" style="padding-top:45px;padding-bottom:75px; " data-record-type="3"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/0d6ab92a-0ee7-4d9d-8d70-d06c213289c5/169.jpg"> <img class="t-img t-width t107__width t-width_8" src="https://static.tildacdn.com/0d6ab92a-0ee7-4d9d-8d70-d06c213289c5/-/empty/169.jpg" data-original="https://static.tildacdn.com/0d6ab92a-0ee7-4d9d-8d70-d06c213289c5/169.jpg" imgfield="img" alt=""> </div> </div> </div> <div id="rec3775880" class="r t-rec t-rec_pt_0 t-rec_pb_150" style="padding-top:0px;padding-bottom:150px; " data-record-type="3"> <!-- T107 --> <div class="t107"> <div class="t-align_center" itemscope itemtype="http://schema.org/ImageObject"> <meta itemprop="image" content="https://static.tildacdn.com/a67040aa-b503-4bb7-8ce4-0bc09dac7b45/4.png"> <img class="t-img t-width t107__widthauto" src="https://static.tildacdn.com/a67040aa-b503-4bb7-8ce4-0bc09dac7b45/-/empty/4.png" data-original="https://static.tildacdn.com/a67040aa-b503-4bb7-8ce4-0bc09dac7b45/4.png" imgfield="img" alt=""> </div> </div> </div> <!--footer--> <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="com" 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"> <!-- T056 --> <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"> <!-- T344 --> <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"> <!-- T396 --> <style>#rec747662976 .t396__artboard {height:390px;background-color:#E8E8E8;}#rec747662976 .t396__filter {height:390px;}#rec747662976 .t396__carrier{height:390px;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:330px;}#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:535px;}#rec747662976 .t396__filter {}#rec747662976 .t396__carrier {background-attachment:scroll;}}#rec747662976 .tn-elem[data-elem-id="1619019713628"]{color:#000000;z-index:2;top:5px;left:calc(50% - 600px + 339px);width:70px;}#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);}}@media screen and (max-width:959px) {#rec747662976 .tn-elem[data-elem-id="1619019713628"] {top:5px;left:calc(50% - 320px + 135px);width:57px;}#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:49px;}#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);}}#rec747662976 .tn-elem[data-elem-id="1619019754582"]{color:#000000;z-index:3;top:5px;left:calc(50% - 600px + 456px);width:135px;}#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);}}@media screen and (max-width:959px) {#rec747662976 .tn-elem[data-elem-id="1619019754582"] {top:5px;left:calc(50% - 320px + 213px);width:109px;}#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:98px;}#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:101px;}}#rec747662976 .tn-elem[data-elem-id="1619019777299"]{color:#000000;z-index:4;top:5px;left:calc(50% - 600px + 639px);width:129px;}#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);}}@media screen and (max-width:959px) {#rec747662976 .tn-elem[data-elem-id="1619019777299"] {top:5px;left:calc(50% - 320px + 343px);width:107px;}#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:90px;}#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:89px;}}#rec747662976 .tn-elem[data-elem-id="1619019804011"]{color:#000000;z-index:5;top:5px;left:calc(50% - 600px + 816px);width:45px;}#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);}}@media screen and (max-width:959px) {#rec747662976 .tn-elem[data-elem-id="1619019804011"] {top:5px;left:calc(50% - 320px + 471px);width:34px;}#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:33px;}#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);}}#rec747662976 .tn-elem[data-elem-id="1691586016953"]{z-index:6;top:81px;left:calc(50% - 600px + 442px);width:40px;}#rec747662976 .tn-elem[data-elem-id="1691586016953"] .tn-atom{background-position:center center;border-color:transparent ;border-style:solid;}@media screen and (max-width:1199px) {#rec747662976 .tn-elem[data-elem-id="1691586016953"] {top:76px;left:calc(50% - 480px + 322px);}#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 + 511px);width:30px;}}@media screen and (max-width:639px) {#rec747662976 .tn-elem[data-elem-id="1691586016953"] {top:85px;left:calc(50% - 240px + 270px);}}@media screen and (max-width:479px) {#rec747662976 .tn-elem[data-elem-id="1691586016953"] {top:73px;left:calc(50% - 160px + 190px);}}#rec747662976 .tn-elem[data-elem-id="1619019903098"]{z-index:7;top:81px;left:calc(50% - 600px + 552px);width:40px;}#rec747662976 .tn-elem[data-elem-id="1619019903098"] .tn-atom{background-position:center center;border-color:transparent ;border-style:solid;}@media screen and (max-width:1199px) {#rec747662976 .tn-elem[data-elem-id="1619019903098"] {top:76px;left:calc(50% - 480px + 432px);}}@media screen and (max-width:959px) {#rec747662976 .tn-elem[data-elem-id="1619019903098"] {top:230px;left:calc(50% - 320px + 376px);width:30px;}}@media screen and (max-width:639px) {#rec747662976 .tn-elem[data-elem-id="1619019903098"] {top:85px;left:calc(50% - 240px + 135px);}}@media screen and (max-width:479px) {#rec747662976 .tn-elem[data-elem-id="1619019903098"] {top:73px;left:calc(50% - 160px + 55px);}}#rec747662976 .tn-elem[data-elem-id="1619019903111"]{z-index:8;top:81px;left:calc(50% - 600px + 497px);width:40px;}#rec747662976 .tn-elem[data-elem-id="1619019903111"] .tn-atom{background-position:center center;border-color:transparent ;border-style:solid;}@media screen and (max-width:1199px) {#rec747662976 .tn-elem[data-elem-id="1619019903111"] {top:76px;left:calc(50% - 480px + 377px);}}@media screen and (max-width:959px) {#rec747662976 .tn-elem[data-elem-id="1619019903111"] {top:230px;left:calc(50% - 320px + 331px);width:30px;}}@media screen and (max-width:639px) {#rec747662976 .tn-elem[data-elem-id="1619019903111"] {top:85px;left:calc(50% - 240px + 90px);}}@media screen and (max-width:479px) {#rec747662976 .tn-elem[data-elem-id="1619019903111"] {top:73px;left:calc(50% - 160px + 10px);}}#rec747662976 .tn-elem[data-elem-id="1619020045180"]{color:#000000;z-index:9;top:211px;left:calc(50% - 600px + 80px);width:300px;}#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;}#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;}#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;}}@media screen and (max-width:479px) {#rec747662976 .tn-elem[data-elem-id="1619020045180"] {top:161px;left:calc(50% - 160px + 10px);width:297px;}#rec747662976 .tn-elem[data-elem-id="1619020045180"] .tn-atom{line-height:1.2;}}#rec747662976 .tn-elem[data-elem-id="1619020045187"]{color:#6c6c6c;z-index:10;top:264px;left:calc(50% - 600px + 80px);width:310px;}#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;}#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;}#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:267px;}}@media screen and (max-width:479px) {#rec747662976 .tn-elem[data-elem-id="1619020045187"] {top:192px;left:calc(50% - 160px + 10px);width:269px;}}#rec747662976 .tn-elem[data-elem-id="1619020084939"]{color:#000000;z-index:11;top:211px;left:calc(50% - 600px + 434px);width:361px;}#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;}#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;}#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;}}@media screen and (max-width:479px) {#rec747662976 .tn-elem[data-elem-id="1619020084939"] {top:288px;left:calc(50% - 160px + 11px);width:300px;}#rec747662976 .tn-elem[data-elem-id="1619020084939"] .tn-atom{line-height:1.2;}}#rec747662976 .tn-elem[data-elem-id="1619020084961"]{color:#6c6c6c;z-index:12;top:264px;left:calc(50% - 600px + 435px);width:330px;}#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;}#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:299px;}#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:298px;}}@media screen and (max-width:479px) {#rec747662976 .tn-elem[data-elem-id="1619020084961"] {top:319px;left:calc(50% - 160px + 11px);width:296px;}}#rec747662976 .tn-elem[data-elem-id="1619020118297"]{color:#000000;z-index:13;top:211px;left:calc(50% - 600px + 821px);width:300px;}#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;}#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;}#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;}}@media screen and (max-width:479px) {#rec747662976 .tn-elem[data-elem-id="1619020118297"] {top:415px;left:calc(50% - 160px + 11px);width:299px;}#rec747662976 .tn-elem[data-elem-id="1619020118297"] .tn-atom{line-height:1.2;}}#rec747662976 .tn-elem[data-elem-id="1619020118304"]{color:#6c6c6c;z-index:14;top:264px;left:calc(50% - 600px + 821px);width:300px;}#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;}#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:300px;}#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:297px;}}@media screen and (max-width:479px) {#rec747662976 .tn-elem[data-elem-id="1619020118304"] {top:446px;left:calc(50% - 160px + 11px);width:297px;}}#rec747662976 .tn-elem[data-elem-id="1691585962458"]{z-index:15;top:81px;left:calc(50% - 600px + 607px);width:40px;}#rec747662976 .tn-elem[data-elem-id="1691585962458"] .tn-atom{background-position:center center;border-color:transparent ;border-style:solid;}@media screen and (max-width:1199px) {#rec747662976 .tn-elem[data-elem-id="1691585962458"] {top:76px;left:calc(50% - 480px + 487px);}}@media screen and (max-width:959px) {#rec747662976 .tn-elem[data-elem-id="1691585962458"] {top:230px;left:calc(50% - 320px + 421px);width:30px;}}@media screen and (max-width:639px) {#rec747662976 .tn-elem[data-elem-id="1691585962458"] {top:85px;left:calc(50% - 240px + 180px);}}@media screen and (max-width:479px) {#rec747662976 .tn-elem[data-elem-id="1691585962458"] {top:73px;left:calc(50% - 160px + 100px);}}#rec747662976 .tn-elem[data-elem-id="1676641922926"]{z-index:16;top:81px;left:calc(50% - 600px + 662px);width:40px;}#rec747662976 .tn-elem[data-elem-id="1676641922926"] .tn-atom{background-position:center center;border-color:transparent ;border-style:solid;}@media screen and (max-width:1199px) {#rec747662976 .tn-elem[data-elem-id="1676641922926"] {top:76px;left:calc(50% - 480px + 542px);}}@media screen and (max-width:959px) {#rec747662976 .tn-elem[data-elem-id="1676641922926"] {top:230px;left:calc(50% - 320px + 466px);width:30px;}}@media screen and (max-width:639px) {#rec747662976 .tn-elem[data-elem-id="1676641922926"] {top:85px;left:calc(50% - 240px + 225px);}}@media screen and (max-width:479px) {#rec747662976 .tn-elem[data-elem-id="1676641922926"] {top:73px;left:calc(50% - 160px + 145px);}}#rec747662976 .tn-elem[data-elem-id="1619019903084"]{z-index:17;top:81px;left:calc(50% - 600px + 717px);width:40px;}#rec747662976 .tn-elem[data-elem-id="1619019903084"] .tn-atom{background-position:center center;border-color:transparent ;border-style:solid;}@media screen and (max-width:1199px) {#rec747662976 .tn-elem[data-elem-id="1619019903084"] {top:76px;left:calc(50% - 480px + 597px);}#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 + 556px);width:30px;}}@media screen and (max-width:639px) {#rec747662976 .tn-elem[data-elem-id="1619019903084"] {top:85px;left:calc(50% - 240px + 315px);}}@media screen and (max-width:479px) {#rec747662976 .tn-elem[data-elem-id="1619019903084"] {top:73px;left:calc(50% - 160px + 235px);}}</style> <div class='t396'> <div class="t396__artboard" data-artboard-recid="747662976" data-artboard-screens="320,480,640,960,1200" data-artboard-height="390" data-artboard-valign="center" data-artboard-upscale="grid" data-artboard-height-res-320="535" data-artboard-height-res-480="535" data-artboard-height-res-640="330" data-artboard-height-res-960="330"> <div class="t396__carrier" data-artboard-recid="747662976"></div> <div class="t396__filter" data-artboard-recid="747662976"></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-width-value="70" 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="5" data-field-left-res-320-value="9" data-field-top-res-480-value="5" data-field-left-res-480-value="72" data-field-width-res-480-value="49" 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"> <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-width-value="135" 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="5" data-field-left-res-320-value="71" data-field-width-res-320-value="101" data-field-top-res-480-value="5" data-field-left-res-480-value="141" data-field-width-res-480-value="98" 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"> <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-width-value="129" 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="5" data-field-left-res-320-value="178" data-field-width-res-320-value="89" data-field-top-res-480-value="5" data-field-left-res-480-value="261" data-field-width-res-480-value="90" 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"> <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-width-value="45" 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="5" data-field-left-res-320-value="281" data-field-top-res-480-value="5" data-field-left-res-480-value="374" data-field-width-res-480-value="33" 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"> <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__7476629761691586016953' data-elem-id='1691586016953' data-elem-type='image' data-field-top-value="81" data-field-left-value="442" 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="" 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="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="322"> <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="552" 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="" 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="432"> <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="497" 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="" 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="377"> <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__7476629761619020045180' data-elem-id='1619020045180' data-elem-type='text' data-field-top-value="211" data-field-left-value="80" 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="" 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-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="" 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="269" data-field-top-res-480-value="199" data-field-left-res-480-value="90" data-field-width-res-480-value="267" 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-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="" 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-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="" 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="296" data-field-top-res-480-value="326" data-field-left-res-480-value="90" data-field-width-res-480-value="298" data-field-top-res-640-value="128" data-field-left-res-640-value="330" data-field-width-res-640-value="299" 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-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="" 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-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="" 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="297" data-field-top-res-480-value="454" data-field-left-res-480-value="90" data-field-width-res-480-value="297" data-field-top-res-640-value="253" 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="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 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="607" 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="" 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="487"> <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__7476629761676641922926' data-elem-id='1676641922926' data-elem-type='image' data-field-top-value="81" data-field-left-value="662" 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="" 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="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="542"> <a class='tn-atom' href="https://www.tiktok.com/@tilda.publishing" target="_blank"> <img class='tn-atom__img t-img' data-original='https://static.tildacdn.com/tild3365-3735-4431-b961-356331326337/Tilda_Icons_26sn_tik.svg' alt='' imgfield='tn_img_1676641922926' /> </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="717" 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="" 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="235" data-field-top-res-480-value="85" data-field-left-res-480-value="315" data-field-top-res-640-value="230" data-field-left-res-640-value="556" data-field-width-res-640-value="30" data-field-top-res-960-value="76" data-field-left-res-960-value="597"> <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> <script>t_onReady(function() {t_onFuncLoad('t396_init',function() {t396_init('747662976');});});</script> <!-- /T396 --> </div> <div id="rec747663345" class="r t-rec" style=" " data-animationappear="off" data-record-type="131"> <!-- T123 --> <div class="t123"> <div class="t-container_100 "> <div class="t-width t-width_100 "> <!-- nominify begin --> <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> <!-- nominify end --> </div> </div> </div> </div> </footer> <!--/footer--> </div> <!--/allrecords--> <!-- Tilda copyright. Don't remove this line --><div class="t-tildalabel " id="tildacopy" data-tilda-sign="6518#94449"><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> <!-- Stat --> <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>