Divi Builder Essentials

Divi is Elegant Themes' visual page builder. Used on many legacy WordPress sites. Key operations for maintenance and builds.

Divi vs Elementor Decision

| Factor | Use Divi | Use Elementor | |--------|----------|---------------| | Existing Divi site | Yes | No | | New build | No | Yes | | Client on Elegant Themes license | Yes | No | | WooCommerce integration | Works | Elementor Pro preferred |

Divi Theme Builder

Divi > Theme Builder > Add New Template:

1. Click "Add New Template" > choose scope
2. Create Global Header: Add Header > Design as needed
3. Create Global Footer: Add Footer
4. Create Single Post template, Archive template
5. Apply display conditions: All Pages, All Posts, or specific CPT

Module Custom CSS

Each module has "Custom CSS" fields. Use %%order_class%% as the unique selector for that specific module instance:

/* Card hover effect on a Blurb module */
%%order_class%%.et_pb_blurb {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
%%order_class%%.et_pb_blurb:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

Performance Settings

Divi > Theme Options > Performance:

| Setting | Value | |---------|-------| | Static CSS file generation | ON | | Dynamic CSS loading | ON | | Critical CSS | ON | | Defer jQuery and jQuery Migrate | ON (test — may break sliders) | | Disable Google Fonts | ON if using system fonts |

Disable Divi icon packs if not used — saves ~100KB per pack.

Child Theme (Required for Customizations)

Never edit parent Divi theme files. Use a child theme:

// Child theme functions.php
add_action('wp_enqueue_scripts', function() {
    wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
    wp_enqueue_style('child-style', get_stylesheet_uri(), ['parent-style']);
});

Child theme style.css header:

/*
 Theme Name:   My Site Child
 Template:     Divi
*/

Layout Export/Import

Export before major changes: Divi > Divi Library > Export > Select layouts > Export Divi Builder Layouts (JSON file)

Import on new site: Divi > Divi Library > Import > Upload JSON file

Divi JSON Layouts

Divi page content is stored as Divi JSON in post_content. Transferring pages requires:

1. Export layout from Divi Library
2. Import on destination site via Divi Library
3. OR use WPvivid/Duplicator to migrate entire site