Designing a Divi Mondrian Layout

Easily recreate a Mondrian painting in this Divi Layout!
In this tutorial we show you how to design a Mondrian-inspired Layout adding only 3 Rows into your Divi Visual Builder. Get a catchy effect with this easy CSS trick:
Add 6 and 3 column Rows to your liking

In this way the columns create an even grid

Set & Extend Row Sizing

Define Gutter Width: 1, and enable Equalize Column Height.

Repeat this step after adding new Rows to the page to override the spacing that Divi adds by default.

Paste this into Page Settings → Advanced → Custom CSS:
#main-content {
border: 5px solid black;
}

#main-content .et_pb_section, #main-content .et_pb_row, #main-content .et_pb_column {
outline: 5px solid black;
outline-offset: -5px;
margin: 0px!important;
padding: 0px;
width: 100%;
max-width: 100%;
}

#main-content .et_pb_module {
padding: 5vh;
}
#main-content .et_pb_column {
display: flex;
align-items: center;
justify-content: center;
min-height: 10vh!important;
}


div.et-fb-add-wrap.et-fb-children--column > button {
left: 0!important;
}

This code automatically adjusts the spacing of all containers within the page and adds a dark border to them.

Choose a background color for columns
Add Divi Modules to your liking!

Boost your creativity!

You could even add a “DiviMenus” module and take advantage of its versatile “Show” link type so that visitors, when they click on a “Menu Item”, reveal another new Mondrian-style Row!

🧡 More use cases of the “Show” link type:

🥳 That’s it!

👉 Subscribe to our YouTube channel

More Videos