How to Edit a Page (Text, Images, Videos) Using Divi
The Complete Guide to Adding and Editing Pages in Divi
Navigating the Divi Builder for the first time can seem a little daunting, but its visual nature makes the entire process incredibly intuitive once you know the core principles. This guide will walk you through everything you need to know, from adding a new page to making precise edits on text, images, videos, and more.
Step 1: Adding a New Page to Your Website
The most efficient way to add a new page in Divi is to start with a great foundation.
- From your WordPress dashboard, go to Pages > Add New.
- Give your page a title, then click the purple Use The Divi Builder button.
You’ll be presented with three options:
- Build from Scratch: This gives you a blank canvas. While it offers full control, it’s often time-consuming and can lead to inconsistent formatting.
- Choose a Premade Layout: Divi provides hundreds of professionally designed layouts. This is a great choice for a new website but can sometimes clash with your existing site’s design.
- Clone Existing Page: This is the most efficient and recommended option for adding a new page to an existing site. It carries over all the formatting, styles, and custom rules, ensuring your new page looks and feels cohesive with the rest of your website.
For consistency and speed, always choose Clone Existing Page. Simply scroll or search for the page you want to duplicate, and click Use This Layout. The entire page will load, and you’ll be ready to start editing the content.
Step 2: Understanding the Divi Builder Hierarchy
Before you begin editing, it helps to understand the basic structure of a Divi page. The Visual Builder uses a simple color-coded hierarchy:
- Blue Sections: These are the largest containers on your page. They usually hold full-width background images, colors, or videos.
- Green Rows: Found within blue sections, rows divide your content into columns (for example, a two-column layout for content on the left and right).
- Gray Modules: These are the individual content items you edit, such as Text, Images, Videos, Buttons, Accordions, and more.
You’ll always work within the color that contains the content you want to edit.
Step 3: Editing Content in the Visual Builder
Once you’ve added your page, it’s time to edit the content.
- Enable the Visual Builder: On any page, click the Enable Visual Builder button in the top black WordPress admin bar to enter live editing mode.
- Editing Text: Click on a text module and start typing directly on the page. For advanced options like fonts, colors, or links, hover over the module and click the gray gear icon.
- Adding a Link to Text: Highlight the text, click the link icon, and enter the URL. For external sites, set the Target to New Window.
- Editing an Image: Click the gray gear icon on the image module, then click the image thumbnail to open the Media Library and select or upload a new image.
- Editing a Video: Open the video module settings to change the YouTube or Vimeo URL or upload a new video file. You can also add an image overlay.
- Editing a Button: Open the button module settings to change the button text and the destination URL.
Step 4: Managing Page Elements (Add, Move, Delete, Clone)
Divi’s drag-and-drop interface makes it easy to rearrange and manage your content.
- Cloning: Click the Duplicate icon to copy a section, row, or module.
- Deleting: Click the Trash icon to remove an item.
- Moving: Click and hold the Move icon, then drag the element to a new location.
- Altering Columns: Click the Columns icon to change the layout of a row.
- Saving to the Library: Click the Save to Library icon to reuse custom modules, rows, or sections on other pages.
Step 5: Saving Your Changes
Once you’ve finished editing, you have a few options for saving your work.
- Click the purple circular icon in the bottom right to open the Divi menu.
- Click the green Save button to publish your changes live.
- To save without publishing, use Save Draft in the WordPress sidebar.
- To schedule the page, click Edit next to Publish immediately and choose a future date.
- To undo a change, press Ctrl + Z or use Editing History in the Divi menu.