How to choose the right background image: dimensions, format, and proportions
Setting up your title, subtitle, and other text
How to make a narrow cover page that does not take the full height of the first screen
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
Setting up a video that will play in the background or when you click the Play button
How to make a cover page look good on mobile devices
Setting up a data collection form on the home screen page
Add countdown timers to a specific time and date
How to convert and edit a cover page in Zero Block
Cover 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.
Here are a few tips that will help you work with covers, backgrounds, and videos more efficiently.
Here are a few tips that will help you work with covers, backgrounds, and videos more efficiently.
Viewable Area
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.
Background image
Upload a cover background image in the Content panel of the block→ Background image.
To make the image look great, follow these tips on the best settings for the background image.
Best Size:
These are the best parameters for uploaded images:
Format: JPG
Width: 1680px
Resolution: 72 dpi
Color model: RGB
Compression: 10
These are the best parameters for uploaded images:
Format: JPG
Width: 1680px
Resolution: 72 dpi
Color model: RGB
Compression: 10
If you are unhappy with the quality of the image, edit it in advance in a graphics editor using the reference article below
Before choosing an image, read our article “How to Create a Cover For a Website” on Tilda Education. It contains tips for creating your own cover page and links to quality stock photography websites.
Text formatting
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.
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.
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.
Editing text when clicking on a block
Editing text in a block’s Content section
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.
Formatting text using the top control panel
Formatting changes in the Settings panel of the block
To create a cool cover, check out the article How to Create a Cover for a Website with practical examples of text and background image combinations and the guide Creating a Unique Selling Proposition (USP) For a Website to make your cover page engaging to visitors in less than ten seconds.
Cover Height
A thin cover 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.
To create such a cover, go to the "Height" 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.
To create such a cover, go to the "Height" 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.
Cover color: Filter settings
How to change the tone of the background image
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.
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.
Filter settings in the Content panel of the block
Tilda Help Center cover: the filter gradually turns into solid orange color
How to blend the color into the next block's color
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.
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.
Making the cover twice as high while applying these two settings at once will help you achieve the effect shown below:
Gradient and Color Fill
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.
If you select different colors, one will blend into another smoothly.
Video Cover
You can use a video instead of an image. There are two ways to do it.
How to Add a YouTube Video
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.
Our Company
Experts in the art
Art Basel stages art shows for high quality modern and contemporary art and is sited annually in Basel, Miami Beach, and Hong Kong
How to Add WebM and MPEG-4 Videos
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, gfycat.com allows both converting and hosting.
Open the Settings panel of the cover block and add the video links to the corresponding fields.
Open the Settings panel of the cover block and add the video links to the corresponding fields.
Why use both formats?
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.
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.
Important point: 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.
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.
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.
Cover page for mobile view
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.
Why cover videos do not play on mobile
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.
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.
Form on a cover page
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)
You can preview what the form will look like by visiting the Block Library → Cover and choosing your favorite option.
You can preview what the form will look like by visiting the Block Library → Cover and choosing your favorite option.
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 How to Set Up Data Capture Forms.
Adding a countdown timer
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.
In the Content panel of these blocks, you can set the date, time and time zone of the event start time.
In the Content panel of these blocks, you can set the date, time and time zone of the event start time.
If the date is set correctly, a timer will appear on the cover page.
Converting a Cover Page to Zero Block
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.
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.
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.
Example: How to crop a cover
Vertical image
Square Image
Narrow horizontal image
Horizontal image, 16:9 aspect ratio
