Programmatic Divi Layout Modification - Best Practices Request
Context
We're building an AI-powered website generator that programmatically creates Divi sites by:
- Selecting appropriate Divi layouts from our library
- Replacing placeholder text with AI-generated business content
- Replacing stock images with business-appropriate images
- 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:
- Our modifications remain fully compatible with Divi Builder
- Sites perform optimally
- We're not missing any edge cases
- 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!
Programmatic Divi Layout Modification - Best Practices Request
Context
We're building an AI-powered website generator that programmatically creates Divi sites by:
1. Color System Structure
Q: How is Divi's color system organized in the JSON?
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:
3. Responsive Image Handling
Q: When replacing image URLs in Divi JSON:
"image":{"url":"..."}need any accompanying metadata?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:
Are we missing:
5. Builder Compatibility Validation
Q: After programmatically modifying Divi JSON:
Current approach: We're preserving all JSON structure and only replacing text/image values.
What We're Doing Right Now
Text Replacement (Working ✓):
Image Replacement (Working ✓):
Why We're Asking
We want to ensure:
Repository
Our codebase has evolved through 19 versions with incremental improvements. Happy to share code examples if helpful.
Thank you for any guidance!