{"slug":"divi-builder-essentials","title":"Divi Builder Essentials","tags":["divi","page-builder","theme-builder","child-theme","performance"],"agent_summary":"Divi builder operations: Theme Builder for headers/footers/templates, module custom CSS using %%order_class%%, performance settings (static CSS, critical CSS, defer jQuery), child theme setup, and layout export/import.","trigger_phrases":["divi builder","divi theme builder","divi child theme","divi performance","divi module css","divi layout export","elegant themes divi","order_class divi"],"runnable":true,"markdown":"\nDivi is Elegant Themes' visual page builder. Used on many legacy WordPress sites. Key operations for maintenance and builds.\n\n## Divi vs Elementor Decision\n\n| Factor | Use Divi | Use Elementor |\n|--------|----------|---------------|\n| Existing Divi site | Yes | No |\n| New build | No | Yes |\n| Client on Elegant Themes license | Yes | No |\n| WooCommerce integration | Works | Elementor Pro preferred |\n\n## Divi Theme Builder\n\nDivi > Theme Builder > Add New Template:\n1. Click \"Add New Template\" > choose scope\n2. Create Global Header: Add Header > Design as needed\n3. Create Global Footer: Add Footer\n4. Create Single Post template, Archive template\n5. Apply display conditions: All Pages, All Posts, or specific CPT\n\n## Module Custom CSS\n\nEach module has \"Custom CSS\" fields. Use `%%order_class%%` as the unique selector for that specific module instance:\n\n```css\n/* Card hover effect on a Blurb module */\n%%order_class%%.et_pb_blurb {\n    transition: transform 0.3s ease, box-shadow 0.3s ease;\n}\n%%order_class%%.et_pb_blurb:hover {\n    transform: translateY(-5px);\n    box-shadow: 0 10px 30px rgba(0,0,0,0.1);\n}\n```\n\n## Performance Settings\n\nDivi > Theme Options > Performance:\n\n| Setting | Value |\n|---------|-------|\n| Static CSS file generation | ON |\n| Dynamic CSS loading | ON |\n| Critical CSS | ON |\n| Defer jQuery and jQuery Migrate | ON (test — may break sliders) |\n| Disable Google Fonts | ON if using system fonts |\n\nDisable Divi icon packs if not used — saves ~100KB per pack.\n\n## Child Theme (Required for Customizations)\n\nNever edit parent Divi theme files. Use a child theme:\n\n```php\n// Child theme functions.php\nadd_action('wp_enqueue_scripts', function() {\n    wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');\n    wp_enqueue_style('child-style', get_stylesheet_uri(), ['parent-style']);\n});\n```\n\nChild theme style.css header:\n```css\n/*\n Theme Name:   My Site Child\n Template:     Divi\n*/\n```\n\n## Layout Export/Import\n\n**Export before major changes:**\nDivi > Divi Library > Export > Select layouts > Export Divi Builder Layouts (JSON file)\n\n**Import on new site:**\nDivi > Divi Library > Import > Upload JSON file\n\n## Divi JSON Layouts\n\nDivi page content is stored as Divi JSON in `post_content`. Transferring pages requires:\n1. Export layout from Divi Library\n2. Import on destination site via Divi Library\n3. OR use WPvivid/Duplicator to migrate entire site\n","html":"<p>Divi is Elegant Themes' visual page builder. Used on many legacy WordPress sites. Key operations for maintenance and builds.</p>\n<h2>Divi vs Elementor Decision</h2>\n<p>| Factor | Use Divi | Use Elementor |\n|--------|----------|---------------|\n| Existing Divi site | Yes | No |\n| New build | No | Yes |\n| Client on Elegant Themes license | Yes | No |\n| WooCommerce integration | Works | Elementor Pro preferred |</p>\n<h2>Divi Theme Builder</h2>\n<p>Divi > Theme Builder > Add New Template:</p>\n<ol>\n<li>Click \"Add New Template\" > choose scope</li>\n<li>Create Global Header: Add Header > Design as needed</li>\n<li>Create Global Footer: Add Footer</li>\n<li>Create Single Post template, Archive template</li>\n<li>Apply display conditions: All Pages, All Posts, or specific CPT</li>\n</ol>\n<h2>Module Custom CSS</h2>\n<p>Each module has \"Custom CSS\" fields. Use <code>%%order_class%%</code> as the unique selector for that specific module instance:</p>\n<pre><code class=\"language-css\">/* Card hover effect on a Blurb module */\n%%order_class%%.et_pb_blurb {\n    transition: transform 0.3s ease, box-shadow 0.3s ease;\n}\n%%order_class%%.et_pb_blurb:hover {\n    transform: translateY(-5px);\n    box-shadow: 0 10px 30px rgba(0,0,0,0.1);\n}\n</code></pre>\n<h2>Performance Settings</h2>\n<p>Divi > Theme Options > Performance:</p>\n<p>| Setting | Value |\n|---------|-------|\n| Static CSS file generation | ON |\n| Dynamic CSS loading | ON |\n| Critical CSS | ON |\n| Defer jQuery and jQuery Migrate | ON (test — may break sliders) |\n| Disable Google Fonts | ON if using system fonts |</p>\n<p>Disable Divi icon packs if not used — saves ~100KB per pack.</p>\n<h2>Child Theme (Required for Customizations)</h2>\n<p>Never edit parent Divi theme files. Use a child theme:</p>\n<pre><code class=\"language-php\">// Child theme functions.php\nadd_action('wp_enqueue_scripts', function() {\n    wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');\n    wp_enqueue_style('child-style', get_stylesheet_uri(), ['parent-style']);\n});\n</code></pre>\n<p>Child theme style.css header:</p>\n<pre><code class=\"language-css\">/*\n Theme Name:   My Site Child\n Template:     Divi\n*/\n</code></pre>\n<h2>Layout Export/Import</h2>\n<p><strong>Export before major changes:</strong>\nDivi > Divi Library > Export > Select layouts > Export Divi Builder Layouts (JSON file)</p>\n<p><strong>Import on new site:</strong>\nDivi > Divi Library > Import > Upload JSON file</p>\n<h2>Divi JSON Layouts</h2>\n<p>Divi page content is stored as Divi JSON in <code>post_content</code>. Transferring pages requires:</p>\n<ol>\n<li>Export layout from Divi Library</li>\n<li>Import on destination site via Divi Library</li>\n<li>OR use WPvivid/Duplicator to migrate entire site</li>\n</ol>\n"}