Divi

Overview

Divi, developed by Elegant Themes, functions as both a WordPress theme and a visual page builder. It provides a front-end drag-and-drop interface, allowing users to design and customize WordPress websites without direct coding. This approach aims to reduce the technical barrier for creating complex layouts and designs. The Divi Builder is integrated into the Divi Theme but can also be used as a standalone plugin with other WordPress themes, though its functionality is most complete when used with its native theme.

The platform is primarily utilized by freelance web designers, digital agencies, and small to medium-sized businesses that require a flexible and visually-driven tool for WordPress site development. It offers a library of pre-made layouts, modules, and design elements, which can be customized to fit specific project requirements. For developers, Divi supports child themes for custom code additions, though the core workflow emphasizes its visual builder. This can be a benefit for rapid prototyping and deployment, but also means that extensive custom functionality often requires working within Divi's architectural constraints.

Divi's feature set is designed to cover a broad range of website needs, from simple blogs to e-commerce sites (via WooCommerce integration) and portfolio showcases. Its strength lies in its ability to quickly generate visually distinct web pages. The platform's ecosystem includes options for A/B testing, email opt-ins, and theme building, allowing users to create custom headers, footers, and post templates. While it abstracts much of the underlying HTML, CSS, and JavaScript, understanding fundamental web design principles remains beneficial for optimizing performance and accessibility within the builder environment. For instance, managing image sizes and ensuring semantic structure, even when using a visual builder, contributes to better page load times and user experience, as detailed in web.dev's guidance on image optimization.

The Divi ecosystem also includes community support and extensive documentation, which can assist users in troubleshooting and extending its capabilities. Updates often introduce new modules, design options, and performance improvements. However, as with any comprehensive page builder, attention to performance optimization and semantic coding practices remains important for creating efficient and accessible websites, a point often emphasized in discussions around Web Content Accessibility Guidelines (WCAG).

Key features

• Visual Drag & Drop Builder: A front-end interface for designing pages in real-time without writing code. Users can click on the page and start typing, highlighting, and customizing elements directly.
• Theme Builder: Extends the visual builder's capabilities to customize every part of a WordPress theme, including headers, footers, post templates, and archive pages.
• Pre-made Layouts & Modules: Access to a library of pre-designed pages and content modules (e.g., text, images, sliders, forms) that can be inserted and customized.
• Global Elements & Styles: Ability to save and reuse design elements and apply global styles across an entire website, ensuring design consistency and enabling efficient updates.
• Responsive Editing: Tools to preview and adjust designs for various screen sizes (desktop, tablet, mobile) directly within the builder interface.
• A/B Testing (Divi Leads): Built-in split testing functionality to test different versions of pages or modules to determine which performs better in terms of conversions.
• WooCommerce Integration: Dedicated modules and styling options for building and customizing online stores powered by the WooCommerce plugin.
• Portability: Features to import and export Divi layouts, modules, and entire websites, facilitating efficient development and deployment across multiple projects.

Pricing

Divi offers two primary pricing models for access to its theme and builder, as of May 5, 2026. Both options provide access to all Elegant Themes products, including Divi, Extra Theme, Bloom Email Opt-in Plugin, and Monarch Social Media Plugin, along with updates and premium support. There is no free tier available for Divi's core products.

Current pricing details are available on the Elegant Themes pricing page.

Common integrations

• WooCommerce: Divi integrates directly with WooCommerce, providing dedicated modules for product displays, carts, and checkout pages to build e-commerce stores within the visual builder. More details can be found in the Divi WooCommerce documentation.
• Email Marketing Services: Via the Bloom Email Opt-in plugin (included with Divi membership), it integrates with services like Mailchimp, AWeber, and Campaign Monitor to build email lists. Refer to the Bloom email provider integration guide.
• Social Media Networks: The Monarch Social Media Sharing plugin (included) enables integration with various social networks for sharing and following functionalities. The Monarch documentation provides setup instructions.
• WordPress Plugins: Divi is designed to be compatible with a broad range of standard WordPress plugins, including SEO tools like Yoast SEO (Yoast SEO website), caching plugins, and security solutions.

Alternatives

• Elementor: Another popular WordPress page builder known for its extensive free version and a Pro version with advanced features like theme building.
• Beaver Builder: A WordPress page builder plugin recognized for its stability, developer-friendliness, and clean code output.
• SeedProd: Primarily a landing page builder for WordPress with coming soon, maintenance mode, and custom page functionalities.
• Gutenberg (WordPress Block Editor): The native WordPress block editor, which has evolved to offer page building capabilities directly within the core platform.
• Oxygen Builder: A more developer-centric WordPress site builder that provides powerful visual editing with greater control over HTML and CSS.

Getting started

To begin using Divi, you typically start by installing the Divi Theme or the Divi Builder plugin on a self-hosted WordPress installation. The following steps outline a basic setup process:

// This is a conceptual example for a Divi child theme's functions.php
// It demonstrates adding a custom script, a common developer task.
// For full installation, download Divi from Elegant Themes and install via WordPress admin.

<?php
function divi_child_theme_scripts() {
    // Enqueue a custom stylesheet for the child theme
    wp_enqueue_style( 'divi-child-style', get_stylesheet_directory_uri() . '/style.css' );

    // Enqueue a custom JavaScript file
    wp_enqueue_script( 'divi-custom-script', get_stylesheet_directory_uri() . '/js/custom.js', array('jquery'), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'divi_child_theme_scripts' );

// Example: Adding a shortcode (for custom content insertion)
function custom_greeting_shortcode() {
    return '<p>Hello from your custom Divi child theme!</p>';
}
add_shortcode( 'custom_greeting', 'custom_greeting_shortcode' );

// Remember to activate your child theme after creating it.
?>

1. Purchase and Download: Obtain the Divi Theme files from your Elegant Themes account after purchasing a membership (Elegant Themes pricing page).
2. Install WordPress: Ensure you have a working WordPress installation on your web server.
3. Upload & Install Divi: Navigate to Appearance > Themes > Add New > Upload Theme in your WordPress dashboard, then upload and activate the Divi theme. Alternatively, install the Divi Builder plugin through Plugins > Add New > Upload Plugin if you plan to use it with another theme.
4. Activate License: Go to Divi > Theme Options > Updates and enter your Elegant Themes username and API Key to activate your license and enable updates.
5. Start Building: Create a new page or post and select the option to "Use The Divi Builder." You can then choose to build from scratch, use a pre-made layout, or clone an existing page.
6. Child Theme (Recommended for Developers): For custom code or extensive modifications, create and activate a Divi child theme to ensure your changes are not overwritten during theme updates.

For detailed instructions and advanced configurations, refer to the official Divi documentation.