Getting Around the Divi Builder

The Divi Visual Builder lets you edit your website in real time — just click on the page and start making changes. Here’s an overview of the key parts of the builder so you know where everything is.

Step 1 – Enable the Visual Builder

From your WordPress dashboard (or via the WHMCS shortcut), go to the page you want to edit.
Click Enable Visual Builder in the top WordPress admin bar.

Step 2 – Understand the Structure: Sections, Rows & Modules

Divi pages are built with three main building blocks:

• Sections (blue) → the big page areas.

• Rows (green) → columns inside sections.

• Modules (grey) → content items (text, images, buttons, etc).

Step 3 – Editing Modules

Hover over any content and click the gear icon to edit it.
This opens the Module Settings Panel on the left, where you can change text, images, design, or advanced options.

Step 4 – Toolbar Controls

At the bottom of the screen you’ll see the Divi Toolbar, which gives you access to:

• Page Settings (cog icon)

• Wireframe View (section/row/module outlines)

• Save (purple circle with checkmark)

• Exit Visual Builder

Step 5 – Save Your Changes

When you’re done editing, click the Save button (bottom-right purple circle), then Exit Visual Builder to view the live page.

Additional Notes

• Use Wireframe View for complex layouts — it’s easier to see the structure.

• Hover outlines help you quickly see what part of the page you’re editing.

• If something goes wrong, you can always undo (Ctrl+Z / Cmd+Z).