Classic Divi Builder Basics

NOTICE:

Does your website builder look different than shown below? Click here!

In 2019, DIVI made upgrades to the builder structure and features. If you are seeing DIVI builder differently, read our updated article above, and reach out to support with any questions you may have!

If your site is using this version of DIVI - reach out to support and request updates.

Terms

Module(s) = Building tool used to create text, images, videos - you name it!

Learn More on how to edit individual module types - Here!

Header = Full-width banner. Headers are the section under the main menu on most sites.

Slider = Similar looking to a gallery - Can have text, buttons, and images all combined into one.

Basics

= How to open module settings - Three gray bars

= How to duplicate a module, row, and or section

= How to change the layout: See options below

Layout Options

Select Standard to create a blank section - Then you can add a row - Then adjust Layout or add in modules/elements.

Select Full-width to create a banner, slider or large image section. Gives multiple options.

Select Speciality section to create more custom and unique layouts - Look here if you do not see a layout you want in the "Standard Section" layouts.

Select Add from Library to load a saved layout.

Overview - What's what!

Blue bar = Section settings

Select the 3 gray bars to open settings - See above

Here you can change background for the WHOLE section and other design options.

Green/Teal bar = Row sections

Controls only that row.

In the second green bar above, this is where you can control the COLUMN backgrounds. Has the same settings as the blue bar.

The 3rd icon on the green bar ( 3 rectangles) is how you change the layout.

Layouts shown above are one long row, 3 columns, and ⅓ and ⅔. You can change this at any time. Just know that if you do so, you will need to update any specifics background colors or changes you made for those columns.

Example of this is when you duplicate a section that already is set up with styling. You will want to update the layout, drag the modules into the right columns/spaces and then update the settings in row and section to get it looking correct.

Tips & Tricks

Hide / Unhide:

Press the letter “d” while hovering over the blue bar (to hide all), Green bar to hide just that one row and over the modules to hide just that module.

Press the letter "d" while hovering AGAIN to un-hide

Right Side click Menu Options:

While hovering over a module, row or section - Right side click your mouse to see options: Rename, Disable (same command as above, letter "d" to hide), Lock/Unlock, Collapse, Copy, Paste, Preview.

Most used options are:

Rename - Quick and easy way to rename a module from "Text" to "Title of the section" etc.

Copy and Paste - Works throughout the entire site across all pages. Copy from one page and paste on another. Hover and right side click to see "Paste" (Puts it at the bottom of the page) or "Paste Below" places the copied element right below where you have hovered. Click and drag to move placement.