How to Overlap a Column in Divi Builder

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?

Overlapping 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.

The Bottom Line

Divi Builder, the default page builder of the Divi theme, comes with tons of styling options you can apply to your design. One of which is CSS transform, which you can use to apply overlapping column on your design. This simple hack and make your design look more appealing to visitors.

This page may contain affiliate links, which help support our project. Read our affiliate disclosure.
Picture of Editorial Staff

Editorial Staff

WordPress page builder tutorials, tips, and resources
Want to start a profitable blog with WordPress? OF COURSE!

Leave a Comment

Want to outrank big websites on Google?

Without backlinks, without high DR, without digital PR. Just content optimization.

Click to enlarge.

Save your Divi assets to the cloud and access them from anywhere.
Hey 👋🏻
Got WordPress knowledge?
Why not turning it into profit? Click the button below to learn how.

Your popup content goes here

50%

Where should we send the template?

After entering your email address, you will be added to our newsletter subscribers. You can unsubscribe anytime.