Do you want to overlap a column within a row in Divi Builder? If yes, it’s a great idea. Overlapping a column is a great idea to create a stunning, unique page. Divi Builder comes with built-in a setting option to make it easy for you to overlap a column. We will cover it shortly in this article.
Most page builder plugins allow you to create overlapping columns, with different methods. In Elementor, you can overlap a column by setting the margin of the column you want to overlap to a minus value. Divi Builder doesn’t allow you to set a minus value when setting both margin and padding. So, how to overlap a column in Divi Builder?
Divi Builder offers setting options to apply a CSS transform. You can make use of this setting option to overlap a column within a row. Take a look at the image below.
The section on the image above consists of two columns. As you can see, the right column overlaps the left column.
To create a section like the one above, first, add a new regular section and select the two-column structure (or any column structure of your choice).
- Left column
Set the background of the left column. To do so, click the gear icon on the row handle to open the row settings panel (read this article to learn more about how to work with a row in Divi Builder).
Under the Content tab on the settings panel, click the gear icon of the left column (the above one).
Open the Background block and set the background to your liking. You can either set a solid color background, gradient color background, image background, and video background.
Once done setting the background, add the content to the column. In this example, we add the text content using the Text module (we use two Text modules). Set the padding of the modules you added accordingly.
- Right column
Once done adding and setting the content on the left column, switch to the right column. You can repeat the steps we covered above to set the background of the right column. Next, add the content to the right column. In this example, we add the image content using the Image module. Once done adding and setting content on the right column, click the gear icon on the row handle to open the settings panel and click the gear icon of the right column (the bottom one).
Go to the Design tab and open the Transform block. On the Transform block, click the Transform Translate tab and use your mouse to transform the column as shown on the screencast below.
Before you apply the changes, make sure that the changes you made doesn’t ruin the appearance of the page (or at least the section) on the smartphone and tablet devices. You can switch to the tablet mode and smartphone mode by clicking the smartphone icon.