The Divi Page Builder

Getting Started with the Divi Builder

The Divi Builder is a visual drag-and-drop page builder for WordPress created by Elegant Themes. It allows you to build complex layouts without coding by using sections, rows, columns, and modules.

1. Understand the Building Blocks

The Divi Builder organizes content using the following elements:

  1. Sections – The primary structural elements of a page. They appear in blue and divide content into major areas.
  2. Rows – Added inside sections and shown in green. Rows help organize content within a section.
  3. Columns – Placed within rows. Columns determine the layout structure and spacing of modules.
  4. Modules – Functional components such as text blocks, images, and buttons. Modules appear in grey.
Example page displaying different sections in the Divi Builder

To select a column layout, use the layout options provided in the row settings.

Divi Builder option to Choose Layout

Use the color-coded plus icons to add new sections, rows, and modules as needed.

Divi Menu

The menu controls, from left to right, include Move, Settings, Duplicate, Save to Library, Delete, and Other Options.

2. Enable the Divi Builder

  1. Navigate to the page you want to edit.
  2. Select the purple Enable Visual Builder button at the top of the page.
Enable Visual Builder button

After the builder loads:

  1. Select the purple circle with three dots (“...”) at the bottom of the screen to open the editing menu.
Divi Builder circle button

The gray sidebar on the left provides access to the wireframe view and device previews for desktop, tablet, and mobile. Use the teal Save button in the upper-right corner to save changes.

Divi Builder Menu

3. Work in Wireframe View

The wireframe view allows you to manage the structure of your page more efficiently.

  1. Open the wireframe view using the left-hand menu.
  2. Use this view to reorder, edit, or remove sections, rows, columns, and modules.
  3. Select the menu on any gray module to adjust its settings.
Wireframe menu

The primary editing tools include:

  1. Move – Reposition an element on the page.
  2. Settings – Edit configuration options for the selected element.
  3. Duplicate – Create a copy of the element.
  4. Save to Library – Store an element as a reusable template.
  5. Delete – Remove an element from the page.
  6. More Options – Access additional controls.
Editing menu

4. Saving and Exiting

  1. When you finish making updates, select the teal Save button.
  2. Exit the builder using the “Exit Visual Builder” option.

Your changes will now appear on the live page.