* This post includes affiliate links. If you click on the links and make a purchase through them, I get a small commission from your purchase. If you decide to use my affiliate links, thank you!
While creating some cool image/color/text overlays can be done easily with an image editor or photoshop, why bother if you can just do these things on your website built with Divi
This way, if you decide to change any of the layers, you can do it right on your page instead of having to open, edit (crop, add image edit colors or add overlay, add text), export, compress, then upload it again to your website just to test to see if it will look right. If it doesn’t look right, you would have to go through the process again.
Why not just upload your content to the site and see the changes live? This is especially valuable when you have elements that cannot be exact because of the way they adapt, resize and reposition depending on the size of the screen or browser window that you are using to view them.
UNDERSTANDING DIVI LAYERS
The first thing that is essential to learning a new tool is finding out what it can and can’t do. Here are some things that are important to understanding how to work with Divi
which will help when planning or when working with Divi
- Sections: The bottom-most which is typically marked by the blue outline & blue settings menu in the Divi Visual Builder. If the section is “Specialty” or “Fullwidth” section, they would be red or purple colored respectively.
- Rows: This is the second layer that will rest on top of the section and are green.
- Columns: More like layer 2b. The settings for these are hidden inside the Row section settings.
- The module: Which can have a background (layer 3a) layer you can use for another background overlay and a text or content layer (layer 3b).
So here, you can see in these diagrams how they all stack on top of one another. As you can see you have plenty of options if you can just get creative. You can add even more layers and complexity if you learn your way around the settings.
SOME NEAT EXAMPLES OF LAYER USE:
CALL-TO-ACTION SECTION WITH SMALL TEXT OVERLAY
Here is one call-to-action section in CACS’s website.
This is probably one of the simplest ways to take advantage of Divi
The background image is handled by the section. Hover over the section with the Visual Builder turned on and click on the blue gear icon.
In the Content tab, click on “Background” then the image tab.
Click on the + symbol to add an image
or the gear icon to change the image if you previously have one set.
Don’t forget to click on the green checkbox to save your changes for your session.
Also, open up the main Visual Builder menu
and click on the green save button on the right to save and publish your changes.
The black overlay is the Row. I set the size by applying margins to this row. Similar to the section, you can hover over the Row until the green border and settings menu pops up. Click on the gear icon.
Under Content > Background, you’ll find the paint can tab. Click the plus symbol to add a new color or click on the gear icon to edit an existing color.
Don’t forget to save your work!
The text and button are handled by modules. To get to the settings for these, just hover over them until you see the gray settings menu.
FULL-SCREEN SECTION WITH FULL-SCREEN OVERLAY
This example is pretty much the same as the CTA one except the row is the same size as the background.
So the background image is set in the section settings. The purple overlay is set through the row settings. The difference is that I’ve removed the default padding and margins in the section under the Section settings > Design > Spacing
In the Row Settings > Design > Sizing, the row is set to full width with a custom gutter width of 1
Under the Row Settings > Design > Spacing, I set margins to 0 and added padding to concentrate the content inside the row to the middle.
WORKING WITH COLUMNS:
Here is an example where I got a little creative with the columns. This is one section with two rows but both rows can each have their own sections. It doesn’t really matter.
The first row:
This row has a two-column structure. To change the structures in these columns, just hover to the row menu, click on the “Chance Column Structure” icon then pick the row with the two columns.
Column Backgrounds: Click on the row settings > Content > Background.
The first background settings are for the entire row but if you scroll further down, you’ll see Column 1 Background.
This one is set to have a gradient background. Scroll down some more and you’ll see the settings for “Column 2 Background.”
For this example, I have an image for column 2.
The second row:
This row has a four-column structure. To change the structures in these columns, just hover to the row menu, click on the “Chance Column Structure” icon then pick the row with the four columns.
The row background can be changed by going to the Row Settings > Content > Background.
The colorful column settings can be changed by going to Row Settings > Content > Background and scrolling all the way down to each column’s settings. Column 1 has no background.
Columns 2-4 each have colors set for their backgrounds. These colors are a little bit transparent so that the main background for the row can show through.
Don’t forget to save!
BONUS: DIVI SLIDER
If you’ve ever created a slider and got annoyed that the whole slider changed shape each time because your images are all different sizes, working with the slider backgrounds is a great option. The Divi slider module will automate the cropping for you when you do this.
Go to the slider module settings
Add a new slide by clicking the plus symbol. Edit the settings of the new or old slide by clicking on its gear icon.
Scroll down to Background and click to open it. Add a or edit your background just like when we did for the sections and rows.
Don’t forget to save again!