The Cover Block

Learn The Cover Block

The cover block is a handy block for adding images with a text overlay on top of them. If this is something you’ve tried to do on a website without the cover block, you will understand how helpful this block is. If you haven’t tried it yet, for now, trust us.

To get going with the cover block, click the + button that you have been using to add blocks, and cover should be within view. If you can’t find cover, you can always search for it. Once you have found it, click on it to add the block.

As mentioned, this block is for overlaying text on top of an image. The first step is going to be selecting the image, and then we will move on to overlaying the text and making sure it looks the way we want. Once you have added the block, you will be presented with two options regarding the image you want to use. You can upload one from your computer or select one from your media library. You can go with the option that makes the most sense to you.

This image shows where to go in order to upload your cover image. It is in the upper center of the screen under the title.

Once you’ve added your image, your editor will go from looking like the screenshot above to looking like the one below, and you can add some text! To add text, start typing and it will appear over the image. Next, we will show you some of the formatting options available for this block.

This image shows what your page will look like after the cover image has been uploaded. The example image here is of three cats napping together and is in the center of the screen under the title.

The first option is to modify the alignment of the text on top of the image. By default, the text will be center-aligned. You can also set it to be left or right-aligned. In the same options bar where you find the text alignment dropdown, you can make other standard modifications to the text such as bolding it, italicizing it, adding a link to it, etc.

We have circled the text alignment drop down in the screenshot below. To get these options to appear click on the text.

This image highlights the text alignment drop down and is left of center in the cover image tool bar in the center of the screen.

Once your text is formatted and aligned the way you want it, you can change the size of the font. These options are circled in red in the screenshot below! By default, the font is set to size large, but you can make it larger than “large” by typing in a larger number in the box labeled “Custom” to the right of the drop-down labeled “Preset size” large. You can make the font smaller the same way, or you can use the dropdown to select a smaller font size. You can also change the color of the text in the “color settings” section below the text settings, similar to how you would in a paragraph block. 

This image highlights how to edit the typography settings and is on the right-hand side of the screen within the block settings option menu.

Once the text is showing up the way you want it to, there are some additional options for formatting the background image. To pull up these options, click either above or below the text on the background image.

The first option worth considering is the width and alignment of the background image. You have the options to left, right, or center align it, along with a wide-width and full-width option. Wide-width will stretch the image to be the width of the content area of your page, and full-width will stretch the image to 100% of the screen width. These alignment options are contained in a dropdown which is circled in red in the screenshot below.

This image highlights where to go to change the formatting of the cover image, the button for this is left of center underneath the title and directly above the  image.

Once your image is aligned the way you’d like, there are a few other block settings available to you for adjusting the position of the background and modifying the colored overlay. The first of these settings we will discuss are those that relate to its positioning. These can be found in the media settings section, which is outlined in red below.

The first option within the media settings section of the cover block settings is a toggle switch to make the background fixed. By default, this is turned off which allows the background image to dynamically resize depending on the size of the screen, setting the background image to a fixed background image will force the same dimensions regardless of screen size.

If you leave the fixed background switch off, the next option is to pick the focal point for your image. This point will be the point where the image is centered when dynamically resizing. By default, this point is at the center, both horizontally and vertically, but you can click and drag that circle to change the focal point to whatever location you desire. As you drag the circle around, you will notice that the numbers in the boxes below (horizontal pos. and vertical pos.) will change based on the location of the circle.

This image highlights where to go to change the media settings for your cover photo. This is on the right-hand side of the screen within the block settings menu in the center of the page.

The next option you have within the block settings for the background of your cover block is to set a minimum height for your image. This is a good option if there is a part of your background image that you want to guarantee will be included on your page. To set a minimum height, type how tall you want your picture to be in pixels within the box outlined in red in the screenshot below. 

This image highlights where to change the dimension settings of your cover photo and is in the lower right-hand side of your screen below media settings.

The final set of options provided by the block settings for the background image of the cover block pertains to the overlay color. You may or may not have noticed that the image you inserted has a slight dark tint to it. This tint is called the overlay, and it helps make the text on top of the image more readable.

By default, the cover block overlays a black tint to make the white text show up clearly. The default opacity (how transparent the overlay is) is set to 50%. 100% opacity would completely blackout your background, hiding your image. 0% opacity would remove the overlay entirely and display the full color of your image. 50% is the default because it usually works pretty well, but feel free to modify as desired.

You also have the option to change the color of the overlay via the color picker above the background opacity slider. You can click one of the default colors within the circles or click “custom color” to use a custom color. If you change the color of the overlay, just make sure that the color of your text contrasts with your overlay color to ensure that it remains readable.

Finally, you also have the option to use a gradient of colors rather than one solid color. To do this, you can select the gradient option and pick two or more colors that will blend to make up your multi-colored gradient background. The gradient options are almost endless, so if you want to use a gradient, experiment to your heart’s content!

This image highlights where to change the color overlay of your cover photo and is in the lower right-hand side of your screen below the dimension settings.

That’s all for the cover block. For help with other blocks, check out the full list of blocks we have guides on here.

Previous Guide
Next Guide

Are You Ready to Uplevel Your Web Presence?

Use the form to the right to share a little bit of information about yourself, and we'll be in touch within one business day to learn about how we can help!