Home/Resources/Support/Wordpress Learning Center/Wordpress Resources/Guide/Editing with Divi Builder

Editing with Divi Builder

Get Started Editing an Existing Page with Divi

When viewing the list of pages on your site, hover the name of the page you wish to edit and click on “Edit with Divi”. Once you hover over elements on the page, you’ll see the controls appear for the various components that make up a page within Divi.

Divi Builder Components

wordpress divi components

1

Section

The section controls are blue in color and contain (from L to R) move, section settings, duplicate section, save section to library, delete and other section settings.

3

Module

The module controls are blue in color and contain (from L to R) move, module settings, duplicate module, save module to library, delete and other module settings.

2

Row

The row controls are teal in color and contain (from L to R) move, row settings, duplicate row, change column structure, save row to library, delete and other row settings.

4

Page

The purple circle with three dots provides the page settings menu when clicked. From that menu you can access the insert layout, save to library, clear layout, page settings, editing history and portability buttons. On the left is the menu to change the view in use. On the right is the save button. Clicking the purple X button will close the page settings menu.


Editing Existing Content

In Divi, for any text content, it will typically be accessed by clicking on the gear icon of the module settings. This should bring up an editor with the text content you see on the front end of the site. There are tools present to allow you to set paragraph alignment, set bold or italic text, create lists or hyperlink text plus a few other options. The various tabs of the module settings house a wide range of settings allowing you to customize the contents look and feel. Much of this occurs on the Design tab where you can access settings such as text, sizing, spacing, border, transform and animation. We recommend having fonts, font size set in the theme styles itself to keep the appearance consistent.  If you wish to style a module and re-use it, once you save your changes, choose the save to library option to be able to reuse content such as callouts or staff information for instance.

Adding New Section, Row or Module Elements

Whenever you wish to add new content to your page or post, you will first hover the element you wish to add. There will be a circle with a plus symbol present at the bottom of the element and you will click that to create a new element of your choice. For example, to add a new row to a section, you would hover the row and then click on the plus with the teal background. A popup with a list of options available for that element will appear and you can select what you need for your new content.

Creating a New Page

When building a new page with Divi Builder, you can start with an empty layout by creating a new page from the Pages portion in the admin of the site and clicking the “Add New Page” button. A pop up will render and allow you to use either the default editor or “Use Divi Builder”. Select the Divi Builder option. You will be presented with three options: Build From Scratch, Choose a Premade Layout and Build with AI. Select which route you’d like to go and then you can proceed with making your new page by adding sections, rows and modules as needed.