A color overlay helps make your background image more subtle, improving the visibility of text, buttons and other elements placed on top. It's especially useful when your background image is busy or has a lot of contrast, making it harder to read the content.
Step 1: Open the color overlay settings
Click "Add Empty Row" to create a new row.
Click the gear icon in the top-right corner of the row.
In the right-hand menu, click "Color overlay" to open the settings.
Step 2: Choose the color for your overlay
In the menu on the right, you’ll see the color settings.
Click on the color box to choose a color for your overlay.
You can use the color palette to pick the shade you want.
If you have a specific color in mind, you can paste the HEX code into the field.
Step 3: Adjust the transparency
Use the transparency slider to adjust how strong the overlay effect is.
Slide left to make it more transparent, or slide right for a stronger, more solid color.
You can also manually set the percentage of transparency next to the HEX code.
If you only want a solid background color without using an image, you can use Background color instead of Color overlay in the right-hand menu.
Your row now has a color overlay, making your background image more subtle and your text and buttons more visible.
Summary
A color overlay is a great tool to use when you have a background image and want to make sure your content is easy to see. By changing the color and transparency, you can create a better contrast between the background and the foreground, making your page more readable and visually appealing.
We hope this article has helped you understand how to add a color overlay to a row. If you have any further questions, please don't hesitate to reach out to our customer support team for assistance.