Adding block background overlays

You can easily add an opaque overlay over a block background instead of changing the block background. Using an image with a dark overlay is one of the quickest ways to make a beautiful Cover for a blog, landing page, or portfolio. An overlay on an image makes the text more readable. Plus, the call-to-action buttons become more prominent.

Here's how you can add an overlay with a few clicks:

1. Hover over the block where you want to enable an overlay and click on the Block settings icon in the menu that becomes activated.

Screenshot_2021-05-31_at_18.32.48.png

2. In Block settings, choose the Appearance tab.

3. Scroll down to Background settings and select Add overlay:

Screenshot_2021-05-31_at_18.34.25.png

4. Adjusting the transparency/opacity of the overlay by moving the round toggle:

Screenshot_2021-05-31_at_18.36.39.png

5. Once you are happy with the way your background looks, click Save.

6. Publish your website to make changes live.

Other helpful articles

Changing the block background

Adding an animated background

Changing background to plain color

 

Was this article helpful?
0 out of 0 found this helpful