Easiest Way to Open the Divi Builder (From the Top of the Page)

1. Make sure you are logged in to WordPress.

2. Visit the page or post you want to edit on the front end.

3. Look at the black admin bar at the top of the screen.

4. Click Enable Visual Builder.

5. The page will reload and open in the Divi Visual Builder.

Alternate Way (from the post dashboard)

1. Log in to your WordPress Dashboard.

2. Go to Posts (or pages) and open the page you want to edit.

3. Click Enable Visual Builder at the top of the page.

4. The page will reload and the Divi Visual Builder will open.

5. You can now click directly on the page to edit sections, rows, and modules.

Alternate Way (From the Dashboard)

1. Go to Posts → All Posts.

2. Hover over the post you want to edit.

3. Click Edit with Divi.

4. Choose Build on the Front End if prompted.

Helpful Tips

• The Visual Builder lets you edit content directly on the post

• Changes are not live until you click Save at the bottom

• If you don’t see the builder tools:

  • Make sure you are logged in

  • Check that Divi is the active theme

DIVI OUTLINE

Divi pages are built using three main building blocks:

Sections, Rows, and Modules

Think of them like this:

• Sections = the big containers

• Rows = the layout inside the container

• Modules = the actual content people see

Each piece sits inside the one above it.

Section Part (Blue)

Sections are blue when you hover over them.

• This is the largest part of a Divi page

• Sections hold and organize rows

• They are often used to separate major parts of a page (hero area, content sections, footer areas)

In a section, you can adjust:

• Background colours or images

• Borders

• Spacing (padding & margin)

• Full-width vs regular layout

• Custom IDs or classes for styling

Row Part (Green)

Rows are green when you hover over them.

• Rows sit inside sections

• They control the layout and column structure

• This is where you decide how content is arranged across the page

With rows, you can:

• Choose one column or multiple columns

• Control column widths

• Adjust spacing between columns

• Align content vertically and horizontally

Rows hold your modules.

Module Part (Grey)

Modules are grey when you hover over them.

• This is the smallest but most powerful part of Divi

• Modules contain the actual content visitors interact with

• They always sit inside a row

Common modules include:

• Text

• Images

• Buttons

• Videos

• Forms

• Galleries

• Sliders

• And many more

In a module, you can control:

• Text styles and fonts

• Colours

• Alignment

• Spacing

• Animations

• Links and hover effects

Quick Tip

If something isn’t lining up or spacing feels “off,” it’s usually because:

• You’re editing the wrong level (section vs row vs module)

When in doubt:
Start big (Section) → then Row → then Module

1. Enable the Divi Visual Builder.

2. Hover over the text you want to change.

3. Click the grey gear icon (this opens the Text Module).

4. Update your text directly in the Text tab.

5. Use the Design tab to adjust:

   • Font

   • Size

   • Colour

   • Alignment

6. Click the green checkmark to save.

7. Don’t forget to click Save at the bottom of the page.

Tip: You can also click directly into the text on the page and start typing.

Moving Modules

1. Hover over the module you want to move.

2. Click and hold the grey move icon (four arrows).

3. Drag the module to a new location.

4. Release to drop it into place.

Moving Rows or Sections

• Rows move using the green handle

• Sections move using the blue handle

Changing Column Layout

1. Hover over a row.

2. Click the green gear icon.

3. Choose a different column layout (e.g., 2 columns, 3 columns).

4. Drag modules into the new columns as needed.

Quick Reminder

• Blue = Section (big areas)

• Green = Row (layout & columns)

• Grey = Module (content)

If something won’t move where you want it to go, you’re probably grabbing the wrong level.

Option 1: Using the Video Module (Recommended)

1. Turn on the Divi Visual Builder.

2. Navigate to the row where you want the video to appear.

3. Click the grey plus (+) to add a module.

4. Select Video from the module list.

5. Open YouTube and copy the video URL.

6. Paste the URL into the Video MP4/URL field.

7. (Optional) Add a thumbnail image if you want.

8. Click the green checkmark to save.

9. Click Save at the bottom of the page.

Option 2: Using a Text Module (Quick & Easy)

1. Copy the YouTube video link.

2. Add a Text module.

3. Paste the link directly into the text area.

4. Divi will automatically embed the video.

5. Save your changes.

Helpful Tips

• The Video module gives you more control over sizing and design

• Use a single-column row for best video display

• Videos will automatically resize for mobile

Common Mistakes to Avoid

• Pasting the video link into a section or row (it must be in a module)

• Forgetting to save the page

• Using a private or unlisted video without permission

If you’d like, I can also add:

• Instructions for embedding Vimeo

• How to make videos full-width

• A short troubleshooting section if the video doesn’t show

1. Turn on the Divi Visual Builder.

2. Open the Text module where you want the image.

3. Place your cursor in the text area where the image should appear.

4. Click the Add Media button above the text editor.

5. Upload a new image or select one from the Media Library.

6. Click Insert into post.

7. The image will appear inside the text.

8. Click the green checkmark to save the module.

9. Click Save at the bottom of the page.

Adjusting the Image

After inserting the image, you can:

• Click the image to resize it

• Choose alignment (left, center, right)

• Add or edit alt text

• Control spacing by switching to the Design tab

Helpful Tips

• Use images in Text modules when you want text to wrap around an image

• For standalone images, the Image module is usually a better choice

• Keep image sizes reasonable so pages load faster