Skip to content

Programmatic Divi Layout Modification - Best Practices Request #752

@sunsoftsupport

Description

@sunsoftsupport

Programmatic Divi Layout Modification - Best Practices Request

Context

We're building an AI-powered website generator that programmatically creates Divi sites by:

  1. Selecting appropriate Divi layouts from our library
  2. Replacing placeholder text with AI-generated business content
  3. Replacing stock images with business-appropriate images
  4. Maintaining full Divi Builder compatibility

1. Color System Structure

Q: How is Divi's color system organized in the JSON?

  • Where are primary/secondary/accent colors defined in the layout JSON?
  • Is there a global color palette we can modify, or is color per-module only?
  • How do module colors relate to theme colors?
  • Are colors stored as hex (#RRGGBB), RGB, or both formats?

Use Case: We want to programmatically apply brand color schemes (e.g., spa = soft blues/greens, restaurant = warm reds/oranges) to entire layouts.

2. Color Replacement Strategy

Q: If we want to programmatically change a site's color scheme:

  • Can we replace colors globally or must we do it per module?
  • Are there color inheritance rules we should be aware of?
  • Do we need to update both light/dark mode variants?
  • Any gotchas when replacing color values?

3. Responsive Image Handling

Q: When replacing image URLs in Divi JSON:

  • Are there responsive variants (srcset) we should handle?
  • Does "image":{"url":"..."} need any accompanying metadata?
  • Do we need to update image IDs to match WordPress attachment IDs?

Current approach: We're replacing URLs and uploading to WP media library via WP-CLI, getting new attachment IDs.

4. All Image URL Patterns

Q: What are ALL the JSON patterns where images can appear?

We've found:

"image":{"url":"..."}
"src":"..."
"background_image":{"url":"..."}

Are we missing:

  • Slider images?
  • Gallery module images?
  • Video thumbnails?
  • Module-specific image fields?

5. Builder Compatibility Validation

Q: After programmatically modifying Divi JSON:

  • Are there required fields that must be present for Builder to work?
  • Any cache or meta fields we should update?
  • How can we validate our modifications won't break the Builder?

Current approach: We're preserving all JSON structure and only replacing text/image values.

What We're Doing Right Now

Text Replacement (Working ✓):

# Pattern: "innerContent":{"desktop":{"value":"<h1>Text</h1>"}}
# We decode, replace text, re-encode unicode, preserve HTML structure

Image Replacement (Working ✓):

# 1. Extract all image URLs
# 2. Classify by section type (hero, service, gallery)
# 3. Fetch business-appropriate images (Pexels API)
# 4. Upload to WordPress media library (WP-CLI)
# 5. Replace URLs in JSON

Why We're Asking

We want to ensure:

  1. Our modifications remain fully compatible with Divi Builder
  2. Sites perform optimally
  3. We're not missing any edge cases
  4. We can add color scheme intelligence next (V20)

Repository

Our codebase has evolved through 19 versions with incremental improvements. Happy to share code examples if helpful.

Thank you for any guidance!

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions