How to Update a Divi WordPress Site: A Step-by-Step Guide to the Visual Builder

Divi is one of the most widely used WordPress page-builder themes in Australia — thousands of small business sites run on it. If you have inherited or been handed access to a Divi site and just need to update some text, swap an image, or change a button, the Visual Builder makes it possible without touching any code. This guide walks through exactly how to do it: what to click, what to leave alone, and how to save without breaking the layout.

What You Need Before You Start

• WordPress admin login credentials for the site.
• Confirmation of which page needs updating and what specific changes are required.
• Any replacement content (text, images) ready and optimised before you start.

Important: If you are updating a client site, confirm the scope before you touch anything. Never publish changes without approval — “Save” in Divi pushes changes live immediately, there is no separate publish step.

Step 1: Log In to WordPress

Go to the WordPress admin URL for the site — usually [yourdomain]/wp-admin/. Some sites use a custom admin URL for security; if the default 404s, ask whoever gave you access.

Enter your username and password. You will land on the WordPress Dashboard.

Step 2: Navigate to the Page

There are two ways to open a page for editing with Divi.

Option A: From the WordPress admin

1. In the left sidebar, go to Pages → All Pages.
2. Find the page you need to edit. Use the search bar if the site has many pages.
3. Hover over the page title and click Edit with Divi — not the standard “Edit” link. This is the key distinction: “Edit” opens the WordPress block editor, “Edit with Divi” opens the Visual Builder.

Option B: From the front end

While logged in, navigate to the page on the live site. In the WordPress admin bar at the top of the page, click Enable Visual Builder. The page will reload into edit mode with all the Divi controls exposed.

Step 3: Understand the Divi Builder Layout

Divi pages are built with three layers, colour-coded so you always know what you are clicking:

• Sections (blue outline): the largest containers — full-width horizontal bands across the page.
• Rows (green outline): sit inside sections and control the column layout.
• Modules (grey outline): the actual content blocks inside rows — text, image, button, video, and dozens of others.

When you hover over any element in the Visual Builder, you will see the coloured outline plus a small toolbar of icons in the top corner: move, settings (gear), duplicate, disable, delete.

The most important icon is the gear (settings). Everything you can change on a section, row, or module opens from there.

Step 4: Edit Text

Two ways to edit text in Divi:

• Inline editing: click directly on the text in the Visual Builder. It becomes editable — type your changes and click outside the module to commit.
• Module settings panel: click the gear icon on the text module. The Content tab has a full text editor with formatting buttons (bold, italic, links, headings, lists).

Important: Do not change heading levels (H1, H2, H3) without a specific reason. Heading structure affects both SEO and accessibility — see our guide to HTML heading structure for why it matters. If unsure, keep the same heading level as the original text.

Do not delete entire modules or sections — only edit the content within them. If you need to add a new paragraph, add it inside the existing text module rather than creating a new one.

Step 5: Edit Images

To swap an existing image inside an image module:

1. Click the gear icon on the image module to open its settings.
2. In the Content tab, click on the image thumbnail. The WordPress Media Library opens.
3. Either select an existing image or click Upload Files to add a new one.
4. Select the replacement image and click Place Image.

Image requirements before uploading:

• Compress and resize before uploading. Run through ShortPixel, TinyPNG, or Squoosh.
• WebP is preferred for modern browsers, JPEG for photos, PNG only where transparency is required.
• Maximum width: 1920px for full-width hero images, 800–1200px for content images.
• Always add descriptive alt text in the image module settings — required for accessibility and helpful for SEO.

Step 6: Edit Background Images

Some sections use a background image applied to the section or row itself, rather than a standalone image module. To swap one:

1. Click the gear icon on the section (blue outline) or row (green outline).
2. Go to Content → Background.
3. Click the image tab (small image icon).
4. Click the existing background image to replace it via the Media Library.

Keep the position and size settings at Cover and Centre unless you have a specific reason to change them. These defaults ensure the background scales cleanly across screen sizes.

Step 7: Edit Buttons and Links

To change a button label or destination URL:

1. Click the gear icon on the button module.
2. In the Content tab, update Button Text (the label shown to visitors) and/or Button Link URL (the destination).
3. For internal links, use relative URLs (for example, /contact/ rather than the full domain).
4. For external links, tick Open in new tab.

Step 8: Watch for Desktop and Mobile Duplicate Sections

On some Divi pages, you will see what looks like duplicate content — one section appears normal and another looks slightly greyed out. These are usually the desktop and mobile versions of the same content, set up separately for layout control.

If you see duplicate content like this, both sections need to be updated — the mobile version is not automatically synced from the desktop one. Miss the mobile version and your update will be invisible to more than half your traffic.

Step 9: Save and Publish

1. Click the purple circle icon at the bottom of the page to open the Divi toolbar (if not already visible).
2. Review your changes visually on the page.
3. Click the green Save button.
4. Wait for the save confirmation message.

Important: “Save” on a published page pushes changes live immediately. There is no separate “publish” step in Divi like there is in the block editor. Always open the page in an incognito or private browser window to verify the changes look correct on the live site.

Common Mistakes to Avoid

• Do not drag modules, rows, or sections around. Divi lets you move things, but doing so changes the page layout in ways that are easy to break and hard to undo.
• Do not delete any modules, rows, or sections unless specifically instructed. Deletion is permanent within the current save; the whole section may need to be rebuilt.
• Do not change fonts, colours, or spacing. These are set at the theme level so they stay consistent sitewide. Overriding them per-module creates visual chaos.
• Do not edit the header or footer from within a page. These are controlled by the Divi Theme Builder — editing them from a page affects every page on the site.
• Do not update plugins or the Divi theme itself. Updates need testing and staging first — leave these to whoever manages the site.

If you accidentally break something, press Ctrl+Z (Cmd+Z on Mac) immediately. Divi supports multiple undo steps within a session.

After You Finish

• Clear any caching plugin if the site uses one (WP Rocket, W3 Total Cache, or the host’s built-in cache).
• Check the page on mobile: resize your browser or use Chrome DevTools (F12 → toggle device toolbar).
• Let whoever owns the site know the update is done so they can review before it goes to the client.

Troubleshooting

The Visual Builder will not load or shows a blank page

• Try a hard refresh: Ctrl+Shift+R (Cmd+Shift+R on Mac).
• Disable browser extensions that might interfere — ad blockers and script blockers are the usual culprits.
• Try a different browser.
• Fallback: use the backend Divi Builder via Pages → Edit (standard) → Use Divi Builder.

I accidentally deleted a module or section

• Immediately press Ctrl+Z to undo. This works even for multi-step edits.
• If you already saved, check the Divi revision history — click the clock icon in the Divi toolbar to browse prior saves and restore.

The page looks different after saving

• Clear your browser cache and any site caching plugin.
• Check the page in an incognito window (this bypasses browser cache).
• If the layout shifted, undo or restore from the Divi revision history.

Frequently Asked Questions

What is Divi?

Divi is a WordPress theme and visual page builder made by Elegant Themes. It lets non-developers build and edit pages by dragging elements around and editing them in place, rather than writing HTML or CSS. As of 2026, it is one of the most-installed premium WordPress themes globally.

Do I need to know code to edit a Divi site?

No. All routine edits (text, images, buttons, backgrounds) are done through the Visual Builder — no code required. If you want to change the underlying design system (fonts, sitewide colours, spacing), that is best handled by a developer who understands the theme customisations already in place.

What is the difference between the Visual Builder and the Backend Builder?

Both edit the same page and save the same content. The Visual Builder shows a live preview of the page as you edit — click on things to change them. The Backend Builder shows the same structure as blocks in the WordPress admin, useful when the front-end preview is slow or broken. Most people use the Visual Builder for everything.

Why should I not change heading levels (H1, H2, H3)?

Heading levels give the page its structural hierarchy for both SEO (Google reads headings as topical signals) and accessibility (screen readers navigate by heading). Randomly changing an H2 to an H3 can break both. See our guide to HTML heading structure for the details.

What happens when I click Save?

Save writes your changes to the live database and the change appears on the public page immediately. There is no draft mode or scheduled publishing on saves to an already-published page. If you need to work on a version safely, either work on a staging copy of the site or duplicate the page as a draft first.

How do I know if a change I made is live?

Open the page in an incognito or private browser window. This bypasses any admin toolbar, cache, and browser cache — you will see exactly what a first-time visitor sees.

Can I edit the header or footer this way?

Not through a page. Headers and footers on Divi sites are usually built in the Divi Theme Builder, which applies them globally to every page. Edits inside a single page’s Visual Builder cannot touch them.

Need Help With Your Divi Site?

Rank Haus manages Divi WordPress sites for Australian clients, including ongoing content updates, technical maintenance, and SEO. If your site is on Divi and you would rather hand off the updates, get in touch.