A Guide to Editing Pages with the Divi Builder
The Divi Builder is an incredibly powerful tool for marketers and business owners, giving you the ability to create beautiful, custom pages and edit a page’s content without a single line of code. However, navigating its features can feel overwhelming at first.
This guide will walk you through everything you need to know about editing your website’s pages using Divi, from the basics of its visual interface to making quick, confident changes to your content.
1. Entering the Divi Visual Builder
Editing a page in Divi is done in real time on the front end of your website. This is what’s known as the Divi Visual Builder.
To get started, simply navigate to the page you want to edit on your website. Once there, click the “Enable Visual Builder” button.
Or to edit an existing page using Divi Builder, click the “Build on the Front End” button.
Or Divi 5 Theme Button for reference – it’s just slightly different than Divi 4 Theme.
2. Understanding Divi’s Building Blocks
Divi is built on a simple, color-coded structure. Once you understand how these pieces work together, editing your pages becomes much easier.
- Blue Sections: These are the largest building blocks on your page. Sections act as containers for everything else and are typically used to separate different parts of your content. You can add background colors, images, or videos here.
- Green Rows: Rows sit inside sections and allow you to organize content into columns. For example, you can create one full-width column or split the row into multiple columns to place content side by side.
- Gray Modules: Modules are where your actual content lives. This includes text, images, buttons, videos, accordions, and other page elements.
- Lime Green Global Items: Some sections, rows, or modules may be global, meaning they are reused across multiple pages.
Important: Most regular content edits, like changing text, swapping images, or updating links, are made inside gray modules. If something is marked as global, be careful before editing it. Anything changed inside a global section, row, or module will update across the entire website wherever that global item is used.
screenshot showing a global section in divi builder
3. How to Edit Text, Images, and Videos
The beauty of the Visual Builder is that you can often edit content simply by clicking on it.
- Editing Text: To change text, you can click directly on the text module and start typing. For more advanced options like changing font size, color, or style, hover over the module and click the gray gear icon (⚙️) to open the module’s full settings.
- Editing Images: To replace an image, hover over the image module and click the gray gear icon (⚙️). In the pop-up window, click the image thumbnail to open your WordPress Media Library. You can then select an existing image or upload a new one from your computer.
- Editing Videos: To change a video, follow the same process. Click the gray gear icon (⚙️) on the video module to change the YouTube or Vimeo URL, or to upload a video file directly.
4. How to Add, Move, and Delete Content
The Visual Builder’s drag-and-drop interface makes managing your page layout simple.
- Add New Content: To add a new element, click the plus icon (+) inside any blue section, green row, or gray module.
- Clone (Duplicate) an Item: This is a huge time-saver. To make an exact copy of a section, row, or module, simply click the duplicate icon (⎘). It’s the most efficient way to add new content while keeping a consistent design.
- Move an Item: Click and hold the move icon (⤢) to drag and drop any element to a new location.
- Delete an Item: Click the delete icon (🗑️) to remove a section, row, or module.
- Change Column Structure: To alter the number of columns in a row, click the columns icon (⊞) on a green row and choose your desired layout.
5. Saving Your Page
Once you’ve finished making your edits, you must save your work.
- Click the purple circular icon with three dots at the bottom of the page to open the main menu.
- Click the green “Save” button on the bottom right.
- Tip: If you’re using a performance optimization plugin like WP Rocket or Speed Optimizer, don’t forget to clear cache.
screenshot showing Divi Builder page save button
If you ever make a mistake, you can undo it by pressing Ctrl + Z or by using the “Editing History” feature (click icon) in the bottom Divi menu.
Now you have the tools to confidently edit your website’s content and keep your digital presence fresh and effective.
Need More Help?
Still Need Help? Reach out to Real Digital Marketing at info@realdigitalmarketing.co or call 615-375-0375.