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