Plugins

DiviMenus

DiviMenus - $36.75

A powerful menu builder that brings the coolest designs and popups to Divi!

Floating DiviMenus

Floating - $6.75

Choose the Pages and the Location to float your DiviMenus!

Sharing DiviMenus

Sharing - $6.75

A DiviMenus add-on that brings the coolest Social Sharing buttons to Divi!

DiviMenus On Media

On Media - $6.75

Display DiviMenus on Images & Videos to add stunning Media options!

DiviSignatures

DiviSignatures - $14.25

Design Email Signatures with Divi and paste them into your Mail Settings!

DiviPasswords

DiviPasswords - $6.75

Password Protect sections, rows, columns and modules with Divi!

DonDivi

Layouts

Check these awesome layouts out. Already a DonDivi user? Download them from your account area!

Extra Tools

DonDivi plugins also include Exclusive Extra Tools to help you. Save money and forget additional plugins!

DonDivi

About us

We create premium tools for improving your creativity and simplifying the way to design stunning websites.

Special Bundle!

DiviMenus & Family

DiviMenus & Family - $69 ⚡

This stunning Bundle includes the DiviMenus plugin and its 3 new Add-ons:
Floating + Sharing + On Media.

Members

Log in

Access your downloads, layouts and support. If you have purchased at Elegant Themes > Register.

Documentation

Access all the detailed information about our plugins and get the most out of them!

FAQ & Support

Already a DonDivi user? Send us a ticket from your user area and we will reply as soon as possible.

Contact us

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