Table of contents
1. How to install2. Accessing the Divi Builder3. Choosing a layout method4. Using the visual editor5. Customizing content and design6. Saving and publishing your pageUsing Divi Theme BuilderHow to manageTroubleshootingFAQsVideo walkthroughNext stepsAdditional resources
Get the industry’s fastest hosting for WordPress◦ 100% network uptime
◦ Comprehensive security
◦ 24/7 support
Explore options

WordPress Guide → Build → Divi Builder

How to use Divi Builder in WordPress: a beginner’s guide

A woman sits at a desk in an office as she sets up her Magento hosting by choosing a data center

WordPress powers your website. Salesforce powers your CRM. When you connect the two, you can streamline lead capture, automate marketing, and sync customer data without lifting a finger.

Get fast, reliable hosting for WordPress

Power your site with the industry’s fastest, most optimized WordPress hosting

WordPress.org hosting

What is Divi Builder?

Divi Builder is a powerful drag-and-drop visual editor created by Elegant Themes. You can use it to build custom page layouts by adding and arranging modules like text, images, buttons, sliders, and forms—without needing to write any code.

There are two ways to access Divi Builder: through the Divi Theme, which bundles the builder with theme settings and site-wide design tools, or through the Divi Builder Plugin, which works with any WordPress theme. If you’re using the Divi Theme, you already have the builder built in.

1. How to install and activate Divi Builder

Before you can start building with Divi, you need to get the theme or plugin installed and activated.

Install the Divi theme or plugin

  1. Log in to your Elegant Themes account and download either the Divi Theme or Divi Builder plugin ZIP file.
  2. In your WordPress dashboard, go to Appearance > Themes > Add New and upload the Divi Theme if you’re using the full theme.
  3. Alternatively, go to Plugins > Add New > Upload Plugin if you’re using just the Divi Builder plugin with a different theme.

Activate Divi

  • For the theme, go to Appearance > Themes and click Activate under Divi.
  • For the plugin, go to Plugins > Installed Plugins and click Activate next to Divi Builder.

2. Accessing the Divi Builder

Once Divi is active, you can launch the builder from any page or post.

For new pages or posts

  1. Go to Pages > Add New (or Posts > Add New).
  2. Click the purple Use Divi Builder button above the content editor.

For existing content

  1. Navigate to Pages or Posts, then click Edit on the content you want to change.
  2. In the admin toolbar at the top, click Enable Visual Builder to launch Divi’s visual editor.

3. Choosing a layout method

When you open Divi Builder, you’ll see three layout options to begin with. Each one is helpful depending on your project goals.

  • Build from scratch: Start with a blank canvas. You’ll manually add every section, row, and module yourself—ideal for fully custom layouts.
  • Choose a pre-made layout: Divi includes hundreds of professionally designed layout packs. These are great for quickly launching blog pages, service pages, ecommerce sites, and more.
  • Clone an existing page: If you already have a page design you like, cloning it lets you reuse the layout and content as a starting point.

4. Using the visual editor: Sections, Rows, and Modules

Divi’s editor works in a structured, visual way using three main building blocks.

  • Sections: These are large horizontal blocks that define major areas of the page. You might use different sections for your hero area, content grid, or contact form.
  • Rows: Rows sit inside sections and define column layouts. You choose how many columns each row has and how wide each should be.
  • Modules: Modules are the actual content elements—text, images, call-to-action buttons, sliders, testimonials, and more. Every module includes its own design and functionality settings.

5. Customizing content and design

Every module, row, and section comes with three tabs: Content, Design, and Advanced.

  1. Content: Add text, media, links, icons, or shortcodes.
  2. Design: Change typography, colors, borders, shadows, padding, and spacing.
  3. Advanced: Add custom CSS, transitions, visibility settings, or motion effects.

You can preview changes in real-time as you build.

6. Saving and publishing your page

Divi makes it easy to save your progress and publish your page when you’re ready.

  1. Click the purple circle at the bottom center of the screen to open the settings bar.
  2. Click the Save (checkmark) icon to save your work.
  3. Click Exit Visual Builder to return to the regular WordPress editor.
  4. Use the Publish or Update button to make your changes live.

Using Divi Theme Builder for global layouts

The Divi Theme Builder goes beyond individual pages, letting you create reusable templates for your entire site.

  1. Go to Divi > Theme Builder in your WordPress dashboard.
  2. Create templates for posts, product pages, 404 pages, category archives, or any condition you like.
  3. Each template includes its own header, body, and footer sections.
  4. Use Divi’s dynamic content options to pull in featured images, post titles, and other WordPress data.

This tool is especially useful for WooCommerce stores, blogs, and directory sites that share layout structures.

How to manage Divi global settings and presets

One of Divi’s most underrated features is its global design system.

  • Presets let you create default design settings for any module type (like buttons or headers) so every time you add one, it starts with your chosen styles.
  • You can set global colors for your brand palette, which update sitewide when changed.
  • Save modules, rows, or entire sections to the Divi Library and reuse them on multiple pages.

This is a huge time-saver if you want consistent branding across your site.

Troubleshooting common Divi Builder issues

If something doesn’t work as expected, here are common fixes:

  • Spinning loader or white screen:
  • Divi not loading: Disable other plugins to check for conflicts, especially optimization tools like Autoptimize or WP Rocket.
  • Styling not updating: Use a private/incognito window, clear browser cache, or flush server-level cache.
  • Mobile layout issues: Use the responsive preview tools in the Divi Builder and tweak settings per device.

Divi Builder FAQs

The Divi Theme includes both theme styling and the builder tool, while the Divi Builder Plugin is just the drag-and-drop builder and can be used with any WordPress theme.

After installing the Divi Theme or Divi Builder Plugin from your Elegant Themes account, go to your WordPress dashboard and activate it under Appearance > Themes or Plugins > Installed Plugins.

Yes. Divi Builder is designed for beginners. Its drag-and-drop interface, real-time editing, and pre-made layouts make it approachable even if you’re new to WordPress.

There’s no separate install needed. The Divi Theme Builder is part of the Divi Theme. Just activate the theme, then go to Divi > Theme Builder in your WordPress admin to access it.

Divi Builder video walkthrough

For more details and a visual walkthrough, check out this great tutorial by Fery Korpershoek:

Additional resources

How to build a WordPress site →

A complete beginner’s guide that covers 9 key steps to a successful launch

Give your website the dark mode treatment (WordPress) →

Learn how to enable dark mode on your WordPress website to enhance user experience and reduce eye strain.




































How to use WordPress Gutenberg blocks →

A complete beginner’s guide to Gutenberg blocks