Divi 5 Support

Divi 5 support overview

Divi 5 changes how layouts are stored, and Respira is built to handle both the new block format and older shortcode layouts safely.

Respira helps you plan and validate your Divi 5 migration. Divi’s Migrator performs the actual conversion.

What you’ll learn:

1. How Respira detects Divi 5 vs Divi 4 pages and handles mixed content.
2. What Respira edits in Divi 5 block layouts and what it preserves.
3. How to keep existing Divi 4 workflows running while you migrate.

Tip: Treat Divi 5 migration as a content and structure project, not only a plugin update. Plan, stage, and validate before you switch production pages.

What Divi 5 support means in Respira

Divi 5 support in Respira focuses on safe reading and editing of both layout formats without changing how Divi itself works.

Divi 5 layout format

• Divi 5 uses a block-based layout format.
• Divi modules appear as divi/* blocks stored in post_content.
• The content structure is similar in spirit to WordPress core blocks but with Divi-specific block names and attributes.

Divi 4 layout format

• Divi 4 uses shortcode-based layouts.
• Layouts are stored as et_pb_* shortcodes inside post_content.
• Each shortcode encodes a module, row, or section with attributes.

Respira behavior

• Respira can read, edit, and save Divi 5 pages as blocks safely.
• Respira continues supporting Divi 4 pages by reading and writing the existing et_pb_* shortcodes.
• Respira does not perform automatic conversion between these formats.

How Respira detects Divi 5 pages

Respira identifies the layout format by scanning the raw post_content for known Divi patterns instead of relying only on metadata.

Detection rules

1. Divi 5 pages (block-based)

   • Respira scans post_content for block markers where the block name starts with divi/.
   • If it finds one or more divi/* blocks and no et_pb_ shortcodes, Respira treats the page as a Divi 5 layout.

2. Divi 4 pages (shortcode-based)

   • Respira scans post_content for shortcodes where the tag name starts with et_pb_.
   • If it finds et_pb_* shortcodes and no divi/* blocks, Respira treats the page as a Divi 4 layout.

3. Mixed pages (backward compatibility mode)

   • Divi 5 can load legacy Divi 4 modules via Backward Compatibility Mode.
   • On these pages, post_content can contain both:
     • divi/* blocks, and
     • et_pb_* shortcodes for legacy modules.
   • Respira flags these as mixed-format pages so that editing is more conservative.

Warning: Mixed pages running Backward Compatibility Mode can have performance and editing side effects. Plan to stabilize these layouts before doing large-scale edits.

Quick checklist: how Respira classifies a page

• Scan post_content for divi/* blocks.
• Scan post_content for et_pb_* shortcodes.
• If only blocks are present, treat as Divi 5.
• If only shortcodes are present, treat as Divi 4.
• If both are present, treat as mixed and apply stricter safety rules.

What Respira edits in Divi 5 pages

On a Divi 5 page, Respira works directly with the block structure stored in post_content.

Block structure handling

Respira:

1. Reads the full block tree for divi/* blocks.
2. Focuses changes on:
   • Text content within modules.
   • Selected attributes that are safe to adjust (for example, copy, headings, basic configuration).
3. Writes changes back while keeping the block order and hierarchy intact.

Preservation rules

To avoid breaking layouts or custom behavior, Respira:

• Preserves unknown attributes on Divi 5 blocks.
• Avoids altering block types or turning Divi blocks into other block types.
• Does not strip or re-key attributes it does not recognize.
• Leaves custom JSON-like structures inside attributes untouched unless explicitly targeted for edit.

Tip: If a block has complex styling or custom configuration attributes, edit only the specific text or fields you intend to change and leave structural attributes as they are.

Safe edit checklist for Divi 5 blocks

• Confirm the page is classified as Divi 5 or mixed in the Respira readiness report.
• Target clear, content-focused fields such as headings, body copy, buttons, and alt text.
• Avoid renaming block types or moving blocks across the layout in bulk edits.
• After changes, review the page live on staging to confirm layout and interactions still behave as expected.

What remains compatible for Divi 4 pages

Your existing Divi 4 workflows continue to work in Respira.

Shortcode handling

Respira:

• Reads et_pb_* shortcodes from post_content as structured modules.
• Edits module content and selected attributes while keeping shortcode tags and nesting intact.
• Writes updated shortcodes back without converting them into blocks.

Existing workflows

You can continue to:

1. Run content and SEO updates on Divi 4 layouts.
2. Use Respira to refactor copy, headings, and basic module settings.
3. Keep using the same safety practices you already follow for Divi shortcode pages.

Tip: Use your current Divi 4 workflows to clean up copy and structure before running Divi’s Migrator. Cleaner source layouts usually migrate more predictably.

Limitations and safety rules

Divi 5 introduces Backward Compatibility Mode and mixed layouts, which require extra care. Respira leans toward safety over aggressive restructuring.

General limitations

• Divi 5 can load legacy modules through Backward Compatibility Mode, which can affect performance and editing behavior.
• Respira does not disable or configure Backward Compatibility Mode. It only works with the content format it finds in post_content.
• Page-level performance issues from running both blocks and shortcodes come from the site configuration, not from Respira.

Safety rules Respira follows

Respira treats certain parts of the layout as opaque unless you explicitly choose to edit them:

• Unknown attributes on Divi 5 blocks are preserved as-is.
• Legacy modules referenced via et_pb_* shortcodes remain in place.
• Complex layout constructs, such as nested containers or advanced cosmetic settings, are not restructured by default.

Recommended operating procedure

Use this checklist to keep Divi 5 work safe:

1. Work on staging first

   • Clone your production site to a staging environment.
   • Connect Respira to staging while you map and test your Divi 5 migration.

2. Audit your pages

   • Identify which pages are pure Divi 4, pure Divi 5, and mixed.
   • Prioritize high-traffic and template-based pages for extra review.

3. Limit edits on mixed pages

   • For pages with both divi/* blocks and et_pb_* shortcodes, avoid large structural changes.
   • Focus on text and minor attribute updates until you complete migration.

4. Validate before going live

   • After Respira edits, open each key page with Divi’s own editor.
   • Load the page on the front end to confirm layout, modules, and performance look correct.
   • Only then mirror changes to production.

FAQ

Related links

Use these resources to plan and execute your Divi 5 rollout with Respira:

Divi 5 Simplified Settings (v5.5.3+)

All divi/* modules accept a settings object with shorthand keys. Respira maps them to Divi 5's deep nested attribute paths automatically — no need to construct paths like module.decoration.bodyFont.body.font.color.desktop.value.

Content keys

Styling keys

Examples

Styled heading:

{
  "type": "divi/heading",
  "settings": {
    "title": "Welcome to Our Site",
    "tag": "h1",
    "heading_color": "#ffffff",
    "heading_font": "Inter",
    "heading_font_size": "48px",
    "text_alignment": "center",
    "background_color": "#1a1a2e",
    "padding": "60px 40px 60px 40px"
  }
}

Hero section with background:

{
  "type": "divi/section",
  "settings": {
    "background_color": "#0f172a",
    "padding": "100px 0px 100px 0px"
  },
  "children": [{
    "type": "divi/row",
    "settings": {"column_structure": "24_24"},
    "children": [{
      "type": "divi/column",
      "children": [
        {"type": "divi/heading", "settings": {"title": "Build Faster", "tag": "h1", "heading_color": "#ffffff", "heading_font_size": "56px", "text_alignment": "center"}},
        {"type": "divi/text", "settings": {"content": "<p>Ship your WordPress site with AI-powered tools.</p>", "text_color": "#94a3b8", "font_size": "20px", "text_alignment": "center"}},
        {"type": "divi/button", "settings": {"button_text": "Get Started", "button_url": "/pricing", "button_bg_color": "#4f46e5", "button_color": "#ffffff"}}
      ]
    }]
  }]
}

Two-column feature row:

{
  "type": "divi/row",
  "settings": {"column_structure": "12_24,12_24"},
  "children": [
    {"type": "divi/column", "children": [{"type": "divi/blurb", "settings": {"title": "Fast Setup", "content": "<p>Connect in under 2 minutes.</p>", "heading_color": "#1e293b", "text_color": "#64748b"}}]},
    {"type": "divi/column", "children": [{"type": "divi/blurb", "settings": {"title": "Secure by Default", "content": "<p>API keys, snapshots, governance.</p>", "heading_color": "#1e293b", "text_color": "#64748b"}}]}
  ]
}

You can mix simplified settings with raw attributes in the same node. Settings are applied first, then any explicit attributes override them. Use attributes for Divi 5-specific features not covered by the simplified keys.

v5.2.0 Elemental — New Capabilities

Divi 5 Intelligence Module

Respira now includes comprehensive Divi 5 intelligence:

40+ Module Definitions — Every Divi 5 module with full attribute schemas, self-closing vs container flags, and key attributes.

7 Page Patterns — Real-world layout templates:

1. Single-column centred content row
2. Three-feature card row
3. Hero section two-column
4. Testimonials pattern
5. CTA section
6. Stats bar
7. Animated background orbs

Design Token System — Variable references for colors and fonts using Divi 5's $variable() syntax. Global colors and global variables are fully supported.

Flex Fraction System — flexColumnStructure with N_24 fractions (24_24=100%, 12_24=50%, 8_24=33.3%, etc.).

13-Point Payload Validation

Before saving Divi 5 content, Respira validates:

1. Root structure (context: "et_builder")
2. Data format (single key, string value)
3. Placeholder wrapper present
4. Section → Row → Column hierarchy enforced
5. Module placement (must be inside column)
6. builderVersion on every module
7. Self-closing syntax (space + slash)
8. Matching close tags on containers
9. flexColumnStructure matches actual column count
10. Heading title is plain text (no HTML)
11. Button uses linkUrl / linkTarget (not Divi 4 names)
12. Variable references include settings: {}
13. Spacing sync uses string values ("on"/"off")

16 actionable error messages guide AI agents to fix common mistakes.

Support Level

Divi 5 has Full Intelligence support — the highest tier alongside Elementor.