How to Pitch your Cover

Cover is the first thing people see on your page. It introduces the content and prompts to go for it or sums up why this project is unique. Covers usually contain some background image – a stylish photograph, compelling video, color, image, gradient or texture.

Here are several tips that will help you work better with covers, backgrounds and videos.
Viewable Area
There is no fixed viewable area in the web, unlike print. Every gadget has a different screen, while proportions vary. To complicate things further, viewable areas also vary from browser to browser. For instance, sometimes you can view tabs and bookmarks – and sometimes you can't. Images in covers get cropped so that users could view them on their screens without border areas.
Image Ratio
Let's look at various ratios of the image –before it is uploaded to the cover and after.
Vertical Image
Square Image
Thin Horizontal Image
Horizontal Image with 16:9 Ratio
Best Size:
These are the best parameters for uploaded images:
Format: jpg
Width: 1680 px
Resolution: 72 dpi
Color model: RGB
Compression: 10
Cover Height
A thin cover has a height of 60 or 70%, not 100%. In this case, it serves a more formal function as the user's attention shifts to the information that follows the cover.

To create such a cover, use the "Height" field in the Block Settings. You can adjust height using pixels (e.g. 400px) or the so-called view units, percent (1 vh is 1% of the viewable area). Adjusting height in vh is more preferable.
Color
Toning Background Image
Toning is required to make the text placed on the cover more readable. To do this, you can adjust the color filter in the Cover Settings. The example here shows a filter with the same color applied to all of the cover. Sometimes, the brand color or the website primary color is used for toning.
Blending into Next Block 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.
You can also make 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 options in the toning settings: opacity and color. Check the opacity at 100% and choose the color – this will be the color of your cover.
If you choose different colors, you will get a smooth blend.
Cover Video
You can use a video instead of an image. There are two ways to do it.
Link to YouTube video
Upload to or find a video at YouTube. Go to the "Content" tab and add the video link to the appropriate field – and you get a cover with a video.
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
webm and mpeg4 videos
You can use on-line converters to create a webm or mpeg4 videos and host them either at your own server or at the converting website. For instance, gfycat.com allows both converting and hosting.

Go to the Cover Settings and add links to videos in both formats to the corresponding fields.
Why use both formats?
Different 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 would appear empty.
Mobile
Various screens have a wide range of ratios so the cover may appear in different ways depending on the device. While the most popular ratios will not make dramatic changes to the cover, mobile devices can alter it beyond recognition. Please, take time to learn how to create a mobile-friendly cover (or any other block) – here's a comprehensive instruction.
Cover videos do not play on mobile

Due to the peculiarities of mobile OS, videos in the cover will not play on mobile devices. Autoplay is prohibited by such OS. If you have an autoplay video in your cover, don't forget to add an image (go to the "Content" tab to do this). The image will appear when the video cannot be played, i.e. when visitors use their cell phones or tablets to view your website.
Made on
Tilda