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!