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.

2. Choose the Appearance tab.

3. Scroll down to Background settings and place the checkmark next to the Add overlay option.

Screen_Shot_2020-02-15_at_14.38.02.png

4. Choose how transparent you want the overlay to be by moving the round toggle:

Screen_Shot_2020-02-15_at_15.11.21.png

Screen_Shot_2020-02-15_at_15.12.46.png

5. Once you are happy with the way your background looks, click Submit and Publish to make changes live.

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