Divi: WordPress Visual Builder and Theme for Developers

Overview

Divi, a product of Elegant Themes, functions as both a WordPress theme and a standalone page builder plugin. It provides a visual, drag-and-drop interface for constructing WordPress websites, allowing users to design pages on the front end in real-time. This approach aims to reduce the need for direct code manipulation for layout and styling tasks. The platform includes a library of pre-made layouts, modules, and global elements, which can be customized to fit specific design requirements.

The Divi Builder operates on a modular system, where individual content elements, such as text, images, videos, and contact forms, are represented as modules. These modules can be arranged within rows and sections, forming the page's structure. Users can adjust module settings, apply custom styling, and save configurations for reuse across a website or multiple projects. The visual editor displays changes immediately, providing an iterative design workflow.

Divi is often adopted by web design agencies, freelance designers, and small businesses that require a flexible tool for building and managing multiple WordPress sites. Its feature set supports responsive design, allowing layouts to adapt to various screen sizes. While it emphasizes a no-code/low-code experience, developers can extend its functionality through custom CSS, JavaScript, and PHP snippets. For instance, advanced users might implement custom functionalities or integrate third-party services that are not natively supported by Divi's modules by adding code through WordPress's theme or child theme files, or via custom plugin development. This dual approach allows for both rapid development and deeper customization where necessary.

The platform's core products include the Divi Theme, the Divi Builder plugin (which can be used with other themes), the Extra Theme (a magazine-style theme also powered by the Divi Builder), and complementary plugins like Bloom for email opt-ins and Monarch for social sharing. These tools collectively aim to provide a comprehensive ecosystem for WordPress site development. The extensive documentation available on the Elegant Themes documentation site supports users in implementing and troubleshooting various aspects of the builder.

Key features

• Visual Drag-and-Drop Builder: Real-time front-end editing interface for page and post creation.
• Global Elements & Styles: Define and manage design elements and styles centrally, applying changes across multiple pages simultaneously.
• Responsive Editing: Tools to preview and adjust designs for various screen sizes directly within the builder.
• Layout Library: Access to pre-made page layouts and sections, designed for different industries and purposes.
• Custom CSS Control: Option to add custom CSS to individual modules, rows, sections, or globally, enabling granular styling adjustments.
• Portability: Export and import Divi layouts, theme builder templates, and general settings between different WordPress installations.
• Theme Builder: Design custom headers, footers, post templates, and other theme areas using the visual builder.
• A/B Testing (Split Testing): Built-in functionality for testing different versions of pages or modules to optimize conversions.
• Role Editor: Control access to Divi features for different user roles within WordPress.
• Undo/Redo & Revision History: Track changes and revert to previous design states.

Pricing

Divi's licensing model provides access to all Elegant Themes products, including the Divi Theme, Divi Builder plugin, Extra Theme, Bloom Email Opt-In Plugin, and Monarch Social Sharing Plugin. The pricing structure, as of May 2026, is detailed below:

Full details on licensing and features included with each plan are available on the Elegant Themes join page.

Common integrations

Divi integrates with the standard WordPress ecosystem and supports various third-party services through its modules or custom code:

• WordPress Core: Deep integration with WordPress posts, pages, custom post types, and the WordPress Customizer. Users can refer to the WordPress Developer Resources for core functionality.
• WooCommerce: Dedicated Divi modules for building product pages, shop archives, and other e-commerce elements, integrating with the WooCommerce plugin.
• Email Marketing Services: Built-in integration with services like Mailchimp, AWeber, ConvertKit, and others through the Email Opt-in module and the Bloom plugin.
• Social Media Platforms: Integration for sharing and following through the Monarch plugin and dedicated social media modules.
• Google Maps: Dedicated module for embedding interactive Google Maps.
• Payment Gateways: While Divi itself doesn't directly process payments, it integrates with e-commerce plugins like WooCommerce, which in turn support various payment gateways such as Stripe and PayPal. Developers can find information on e-commerce best practices for search engines.

Alternatives

• Elementor: A direct competitor in the WordPress page builder market, offering a visual drag-and-drop interface and a theme builder.
• Beaver Builder: Another established WordPress page builder known for its clean code output and developer-friendly features.
• SeedProd: Primarily focused on landing page, coming soon, and maintenance mode page creation for WordPress, also featuring a drag-and-drop builder.

Getting started

To begin using Divi, the general process involves installing the Divi Theme or Divi Builder plugin on a WordPress installation. After activation, the builder can be enabled for pages and posts. The following sequence outlines a basic setup for creating a new page with Divi:

// Assuming WordPress is already installed and Divi Theme/Plugin is active.

// 1. Log in to your WordPress Admin Dashboard.
//    (e.g., yourdomain.com/wp-admin)

// 2. Navigate to Pages > Add New.
//    This will open the standard WordPress editor.

// 3. Click the "Use The Divi Builder" button.
//    This typically appears below the page title field or as a prominent button.

// 4. Choose how to start building:
//    - "Build From Scratch": Start with an empty canvas.
//    - "Choose A Premade Layout": Select from Divi's library of pre-designed layouts.
//    - "Clone Existing Page": Duplicate an existing Divi page.

// 5. If building from scratch, add a new "Section" (the largest structural element).
//    Sections contain rows, and rows contain modules. Click the "+" icon to add.

// 6. Inside a section, add a "Row" and select a column structure (e.g., 1/2 + 1/2).
//    Rows define the horizontal distribution of content within a section.

// 7. Inside a row's column, add a "Module" (e.g., Text, Image, Button).
//    Configure the module settings (content, design, advanced CSS) in the pop-up window.

// 8. Save your changes regularly using the green "Save Draft" or "Publish" button
//    at the bottom right of the Divi visual builder interface.

// Example of adding a text module with custom CSS (via Advanced tab in module settings):
// CSS Element: main_element
// Custom CSS:
// background-color: #f0f0f0;
// padding: 20px;
// border-radius: 5px;

Once content is added and styled, the page can be published or updated. The Divi Theme Options panel, accessible from the WordPress dashboard, allows for global settings management, including typography, color palettes, and integration with external services like Google Analytics.