Divi

Overview

Divi, launched in 2008 by Elegant Themes, functions as both a WordPress theme and a visual page builder. Its primary purpose is to enable users to design and customize WordPress websites through a drag-and-drop interface, reducing the need for manual coding. The platform is designed for a range of users, from individuals creating personal websites to professional web designers and agencies managing multiple client projects. Divi's architecture centers around its visual builder, which allows real-time editing of page content and layout directly on the front end of a WordPress site.

The Divi Theme integrates the Divi Builder directly, providing a cohesive environment for design. Users can select from a library of pre-made layouts and modules, or create custom designs from scratch. Modules include elements such as text, images, contact forms, and calls to action, which can be configured and styled without writing CSS. The builder supports responsive design, allowing users to preview and adjust layouts for different screen sizes, including desktops, tablets, and mobile devices. This capability is critical for modern web development, where accessibility across various devices is a standard expectation, as outlined in the Google Web.dev responsive web design guidelines.

For developers and advanced users, Divi supports child themes, which allow for custom code additions and modifications without altering the core theme files. This approach helps maintain custom changes during theme updates. While the visual builder abstracts much of the underlying HTML and CSS, understanding these foundational web technologies can enhance a user's ability to customize Divi further or troubleshoot issues. The platform's emphasis on visual design aims to streamline the development workflow for those who prioritize rapid prototyping and client review cycles.

Divi's target audience includes freelancers and agencies who require a tool that can accelerate website creation and offer a consistent design experience across various projects. Its system of global elements and custom CSS controls provides a balance between ease of use and design flexibility. The platform's extensive documentation and community support also contribute to its utility for users seeking assistance with its features and functionalities, as detailed in the Divi documentation.

Key features

• Visual Drag-and-Drop Builder: Allows real-time editing of page content and layout directly on the front-end of a WordPress site.
• Responsive Editing: Provides controls to adjust designs for various screen sizes (desktop, tablet, mobile) and preview changes dynamically.
• Pre-made Layouts and Modules: Access to a library of pre-designed templates and content modules (e.g., text, images, forms, galleries) for rapid site construction.
• Global Elements: Ability to create and manage elements that can be updated across multiple pages simultaneously, such as headers, footers, and call-to-action sections.
• Custom CSS Control: Options for adding custom CSS to individual modules, rows, or sections, as well as site-wide, for granular styling.
• Theme Builder: Extends Divi's visual building capabilities to customize all areas of a WordPress site, including post templates, archive pages, and custom post types.
• Portability: Features for exporting and importing Divi layouts, modules, and entire websites, facilitating design reuse and site migration.
• Role Editor: Control over user permissions within the Divi Builder, allowing agencies to manage client access to specific design functionalities.

Pricing

Divi offers two primary pricing models for access to its theme and builder, as of June 13, 2026.

For detailed and current pricing information, refer to the Elegant Themes pricing page.

Common integrations

• WooCommerce: Divi includes dedicated modules for integrating and styling WooCommerce stores, allowing users to build e-commerce sites within the Divi builder.
• Mailchimp: The email opt-in module in Divi can be configured to connect with Mailchimp accounts for email list building.
• Google Fonts: Divi integrates with Google Fonts, providing access to a library of web fonts for typographic customization.
• Font Awesome: Icons from Font Awesome are integrated into Divi modules, allowing users to easily add scalable vector icons to their designs.
• Sucuri: While not a direct integration, Divi users often implement security solutions like Sucuri for website protection, a common practice for WordPress site security hardening.

Alternatives

• Elementor: A popular drag-and-drop page builder for WordPress with a visual editor and extensive widget library.
• Beaver Builder: Offers a front-end visual editor for WordPress, known for its stability and developer-friendliness.
• SeedProd: Primarily a landing page and coming soon page builder for WordPress, also offering drag-and-drop functionality.

Getting started

To begin using Divi, the first step is to have a functional WordPress installation. Once WordPress is set up, you would typically purchase and download the Divi Theme from the Elegant Themes website. The process involves installing it like any other WordPress theme.

After installation and activation, you can start building pages using the Divi Builder. Here's a basic outline of how to create a new page with Divi:

// This is a conceptual representation of the Divi setup process,
// as Divi is primarily a visual builder and doesn't involve direct code for "hello world" pages.
// The actual steps are performed through the WordPress admin interface.

// 1. Install WordPress (if not already done)
//    Refer to the official WordPress installation guide: https://wordpress.org/support/article/how-to-install-wordpress/

// 2. Download Divi Theme from Elegant Themes after purchase

// 3. Log in to your WordPress admin dashboard
//    Navigate to: Appearance > Themes > Add New > Upload Theme
//    Upload the Divi .zip file and click 'Install Now'.

// 4. Activate the Divi Theme
//    After installation, click 'Activate'.

// 5. Create a new page and use the Divi Builder
//    Navigate to: Pages > Add New
//    Give your page a title (e.g., "My First Divi Page").

//    Click the "Use The Divi Builder" button (or "Edit With Divi" if already active).

//    You will be prompted to choose an option:
//    - "Build From Scratch": Start with an empty canvas.
//    - "Choose A Premade Layout": Select from Divi's layout library.
//    - "Clone Existing Page": Duplicate an existing Divi page.

//    For a simple "Hello World":
//    - Select "Build From Scratch".
//    - Click the green "+" icon to add a new row.
//    - Choose a column structure (e.g., single column).
//    - Click the grey "+" icon inside the row to add a new module.
//    - Select the "Text" module.
//    - In the text module settings, enter "Hello, webfield!" into the content area.
//    - Save your changes and publish the page.

// This will create a basic page displaying "Hello, webfield!" using Divi's visual editor.

This process demonstrates the visual nature of Divi, where configuration and content entry are done through the user interface rather than direct code editing for basic tasks.