First impressions count: that's why we recommending starting off with a full screen cover image. Here's an example:

Adding a cover is simple. First select the option from the "Add Block" menu.

Then upload the hero image you want to use. Click on "Choose file" or drag a file onto the button.

Tip: to reduce page load time make sure your image is optimised using a tool such as JPEG Mini or similar. You should aim for a file size of under 200kb if possible.

Now that your image is uploaded, you can add a title in the middle. You can choose the heading size (H1 or H2), color (white or black) and the text background (white, black, transparent). And, you can select the text alignment: center, right or left.

Clicking on any point inside the cover block opens the related settings menu:

  • Image size behaviour. By default, the cover size will match the available screen space, making for a full screen effect. If the proportion of the image is different than the available space, some of the image will be cropped. You can control which portions of the image you want to focus on by selecting its alignment inside the available frame.

  • Text padding. If the heading is longer than the available width, you can define the external margins width where the text will create a new line.

Did this answer your question?