The Visual Builder, also known as the Divi Builder, is the highly flexible and customizable editor you use to edit the home page of your site. To enter the Visual Builder, navigate to your home page and click the Enable Visual Builder button in the toolbar. Alternatively, you can bring up the page editor the traditional way and click Edit with the Divi Builder.

The Visual Builder separates your page into three main building blocks:

• Sections
• Rows of Columns
• Modules

Sections

These are used to create large groups of content. There are three types of sections:

• Regular – these contain rows of columns.
• Specialty – these are like regular sections, but have an additional area to the side of your rows and columns for a sidebar.
• Full Width – these do not contain rows and columns, instead having their own set of special Full Width modules that take up the entire width of the browser window.

Rows of Columns

When you create a row, you can choose between many different column layouts. Each column contains your modules.

Modules

These are the piece of content, such as text, images, contact forms, audio players, etc, that you add to your page. Click here for a list of modules.

The Basics

As you hover the mouse over your page, elements will highlighted in different colours:

• Regular sections are blue
• Specialty sections are orange
• Full-width sections are purple
• Rows are green
• Modules are grey

You’ll also see a menu appear for each element:

From left to write, these buttons are:

• Move: Click and drag this to move the element around your page.
• Settings: This opens up a window where you can adjust the settings of the element.
• Duplicate: This creates a duplicate element.
• Save to Library: This will save the element to the Divi Library, allowing you to reuse it elsewhere.
• Delete: This will delete the element.
• Other: This brings up a list of other options.

Settings

Each elements’ settings are separated into three categories.

• Content: This allows you to adjust the contents of the element, inluding background images and links. You can also change the label for wireframe and layer views.
• Design: This allows you to change the design of the element, such as fonts, alignment, margins and animations.
• Advanced: This section provides additional functionality, such as IDs, CSS options and scroll effects.

Global Settings

At the bottom of your browser is a purple button that allows you to access the Builder and Page settings. When you click this, a large menu will open.

On the left are the Builder settings:

• Wireframe View: This changes the view to a wireframe where you can get a clear picture of the structure of your page.
• Zoom: This lets you zoom out to see your page from afar.
• Desktop View: View your page from the perspective of a desktop visitor.
• Tablet View: View your page from the perspective of a tablet visitor.
• Phone View: View your page from the perspective of a mobile visitor.

In the middle are your page options:

• Load from Library: This lets you load a page layout from the Divi Library.
• Save to Library: This saves your current page to the library. This may be useful if you have Premium and want to create a template for new pages.
• Clear Layout: Removes all the content of the page.
• Close Menu
• Page Settings: Allows you to change the page settings, such as Title and Featured Image.
• Editing History
• Import / Export: Allows you to export your page layout to share it or use it on another site.

On the right are some additional tools:

• Search: This opens up a kind of text command box
• Layers: This opens a floating window with an outline of your page structure, similar to the Wireframe View.
• Help: Opens up a window with help and video tutorials created by Elegant Themes, creators of the Divi Theme
• Save: Saves your changes

More Information

For more info, check out the extensive documentation Elegant Themes, creators of the Divi Theme, have put together. Otherwise, do not hesitate to contact MooTunes.