New DIVI Builder: How to use the new updated builder

DIVI UPDATE

As of 2019, DIVI is making upgrades to their tools and layout options. THIS article explains the new features and look. If you are seeing the Classic builder - Read how to use it here!

IMPORTANT

You have the choice between the Classic Builder (see here) and the new builder.

To switch to the new builder:

1
Scroll to the bottom of the DIVI builder on any given page/post etc. that DIVI is used
2
There is a banner option to switch to the new builder - see image below.

Switching back to the Classic Builder:

NOTE: We recommend first saving any edits then making the switch.

1
Scroll to the bottom of the DIVI builder on any given page/post etc. that DIVI is used
2
There is a banner option to switch to the Classic builder - see image below.

The New Divi Builder

Looks and works much like the Visual Builder option ( read more here). Layout and icon options are different. Continue reading to learn more about the new builder and how to edit your site.

Layout Change

DIVI had updated their builder layout look. Instead of horizontally displaying sections, rows, and modules, it now is vertical and boxed.

.

Blue bar = Section settings

Green/Teal bar = Row sections

Gray bars = Modules

Icon Changes

DIVI had updated their icons. Some are the same as before, below is a list of what is what!

Adding new sections, rows, and modules:

Click the circle with plus signs to add accordingly. 

Blue Circle = New Section |  Green/Teal Circle = New Row  | Gray Circle = New Modules

.

Basics

Arrows = Move section, rows, modules - Drag and drop functionality. 

Gear = How to open settings for sections, rows, and modules.

Boxes = Duplicate (clone) any section, row, or module.

Columns = How to change the layout. Example: Change layout from 1/2 and 1/2 to 3 columns. 

Download = Save any section, row, or module to the DIVI library to use later.

Trash Can = Delete.

New Features 

(left to right)


Layout Icon = Shows you everything 

** Recommend you make edits on this view ONLY. The rest are for device-specific edits. Please reach out to support if you are planning on having elements show only on desktop/tablet/mobile.

Clicking any of the above icons will show you ONLY the sections, rows, and modules that are visible for that size of the device. 

Desktop icon = Shows you what will show on desktop.

Tablet Icon = Shows you what will show on a tablet.

Mobile Icon - Shows you what will show on mobile.

---

Search Icon = Allows you to search to make quick edits

Question Icon = Get help from DIVI directly with videos, how-tos etc.