How to manipulate overlapping content

Sometimes you can create a design and there are things that don’t quite land where you want them to. If you have ever wondered how to create overlapping content and have complete control the layers read on. This is a great video on how to control the overlap of columns. Z-index tutorial by System 22

Instead of applying the z-index to the module, you need to apply it to the column where the module is placed into.

This Quick Tip assumes you are acquainted with the differences between Divi Sections, Rows, Columns and Modules. If you’re not 100% sure, head to our training tutorial. They can be a bit confusing when you first start building in Divi so for more understanding of the differences check out our Sections, Rows and Columns tutorial.

This is a brilliant example of how to fix issues such as overlapping blurb content on enlarged hover states.

We used z-index to control overlapping content on the following sites:

Kellylin Couture

This will make the columns within a row equal

With the Equalise switch active in the Design settings the column rows need to be coloured NOT the module.
How to make columns equal so that the content stretches to the same height

 

Customise column widths in the Divi theme by Elegant Themes

Although Divi gives us a great range of options for column configurations, sometimes you want something else.
How to create customise column widths rather than the defaults in Divi 

Making a Portfolio grid 3 columns

To add a portfolio module to your page, add a row where you would like the portfolio to go. 
Editing the default 4 grid portfolio grid to create a 3 column grid

Get in touch

If we can help you with any customisations in your Divi website please get in touch with the Woodswork Web team.

Pin It on Pinterest

Share This