A Cover block places content over an image, video or colour background. Use it for a focused section where the background supports the message, and ensure the text remains readable across different crops and screen sizes.
IN THIS ARTICLE
01 Prepare the background and message
Choose an image with suitable empty space around the intended text area. Compress it for the web and avoid relying on tiny text embedded in the image. Keep the section's message concise. If the image conveys essential information, provide that information in accessible text rather than making it available only through the background.
02 Create the cover
- Insert a Cover block and choose the intended media or background colour.
- Add a heading, brief supporting text and, if appropriate, a button inside the block.
- Set the focal point so the important part of the image remains visible as the layout changes.
- Adjust the overlay colour and opacity to create consistent contrast. Check the brightest and busiest parts behind the text, not just one convenient area.
- Use a sensible minimum height and padding. Preview with the actual wording before saving.
How do I check that Cover text remains readable on mobile?
View the section at narrow and wide widths. A landscape photo may crop very differently on a phone, so check faces, product details and text placement. Avoid an excessive fixed height that leaves a small device showing mostly decoration.
Test increased browser text size and longer translated content if the site is multilingual. Buttons should remain reachable without overlapping the heading. If using video, consider motion, data use and a meaningful fallback image; the section's information should remain understandable when playback does not start.
03 Correct problems at the source
If text is difficult to read, strengthen the overlay, choose a calmer image or move the text into a separate section. A text shadow alone may not provide reliable contrast. If the image seems stretched, review the block's crop and focal point rather than uploading progressively larger copies of the same composition.
After publishing, inspect the public page with the cache refreshed. Confirm that the image loads over HTTPS and that the call to action leads to the intended destination.