Case Study
Replicating a React Website
in WordPress + Divi
How I reverse-engineered a Next.js production site and rebuilt it section by section as pixel-perfect Divi 5 layout files — without writing a single line of CSS by hand.
01 — Overview
The Project
Cinevo is an Arizona-based cinema equipment rental company. Their marketing site was built as a modern single-page React application deployed on Vercel, using Next.js and Tailwind CSS. The goal was to faithfully replicate the entire homepage inside a WordPress + Divi 5.1 installation on WP Engine — matching colors, typography, spacing, images, and layout exactly.
This wasn’t a redesign. It was a precise platform migration where every design decision from the React codebase had to be translated into an equivalent that a non-developer could edit through Divi’s visual builder — with no quality loss.
🎯 Core Challenge
Bridging the gap between a statically rendered React SPA and a traditional CMS page builder, while producing output that is fully importable, editable, and maintainable by a non-developer.
02 — Challenges
What Made This Hard
Four specific technical problems had to be solved before any design work could happen:
🏗️ Architecture Mismatch
React uses component-based state, CSS utility classes, and zero CMS dependency. Divi is a PHP-rendered page builder with shortcodes and a MySQL backend. There is no direct translation — every section had to be rebuilt from scratch.
📄 Undocumented Import Format
Divi 5 changed its portability format from previous versions. Importing .txt shortcode files — the widely-documented approach — silently failed. The correct JSON format was not documented anywhere publicly.
🎨 Exact Design Values
Visual inspection of the React site can’t yield exact values. Tailwind utility classes compile to specific computed CSS — you’d need to know that py-20 is exactly 80px, or that the card gradient stops at rgba(44,44,44,0.4) at the 40% mark.
🔤 Custom Font Stack
The React site uses three non-standard Google Fonts not loaded by Divi: Barlow Condensed (headings), Barlow (body), and JetBrains Mono (labels). These had to be identified and documented as prerequisites.
03 — Methodology
How I Did It
Rather than eyeballing the design, I used a systematic code-driven process for every section:
Visual Audit via Browser Automation
Using Claude in Chrome, I navigated the live React site section by section, taking screenshots at each scroll position to build a complete visual map of the full homepage layout.
Programmatic CSS Extraction
JavaScript was injected into the live page to call getComputedStyle() on every key element — extracting exact hex colors, pixel measurements, font families, letter-spacing, gradient definitions, and grid configurations. No guessing.
Divi Format Reverse Engineering
To fix the silent import failure, I read Divi’s actual portability.js source file served by the staging site. The formatBuilderLayoutFile() function revealed the exact JSON schema Divi 5 expects — solving a problem with no public documentation.
Section-by-Section JSON Generation
Each section was built as a Python script that assembled Divi shortcodes with extracted exact values, then wrapped in the correct Divi Library JSON format. Each output file was independently importable and named descriptively.
Import & Verification
Each JSON file was imported into the live Divi Library on the staging site via Divi → Layouts → Import & Export, verified to load correctly, and confirmed before moving to the next section.
04 — Design System
Extracted Design Tokens
Every value below was extracted programmatically from the live React site. Nothing was estimated by eye.
Color Palette
Primary Blue
#3B82F6
Dark BG 1
#252525
Dark BG 2
#2C2C2C
Card BG
#363636
White Text
#F0F0F0
Muted Text
#909090
Body Text
#B8B8B8
Icon Color
#707070
Typography Scale
| Font Family | Usage | Weight | Key Sizes |
|---|---|---|---|
| Barlow Condensed | All headings (H1–H3) | 700 | 64px hero · 51px section · 30px card |
| Barlow | Body text, buttons, nav links | 400 / 600 / 700 | 18px body · 14px card · 12px small |
| JetBrains Mono | Section labels, step numbers | 400 / 700 | 10–12px · 2px letter-spacing · uppercase |
05 — Key Discovery
Cracking the Divi 5 Import Format
The biggest technical breakthrough of this project was solving the Divi 5 import failure. Every import attempt returned a silent error with no message. The solution came from reading Divi’s actual source code.
Inside portability.js, the formatBuilderLayoutFile() function revealed that Divi 5 expects a very specific JSON structure — one that no community resource or official documentation describes correctly:
“context”: “et_builder_layouts”, // ← This is the critical key. Not “et_pb_layout”.
“data”: {
“1”: {
“ID”: 1,
“post_title”: “Section Name”,
“post_content”: “[et_pb_section …]”,
“post_type”: “et_pb_layout”,
“post_meta”: { “_et_pb_built_for_post_type”: [“page”] },
“terms”: { “1”: { “name”: “section”, “taxonomy”: “layout_type” } }
}
}
}
💡 Why This Matters
This format is not in Elegant Themes’ official docs, and community resources describe the old format from Divi 4. If you’re building tools or automations around Divi 5 layout imports, this is the schema you need.
06 — Deliverables
What Was Built
Six Divi Library JSON files were produced, each independently importable and editable in the Divi 5 visual builder:
cinevo-stats-bar.json
4-column statistics bar — 31+ Years, 4.9★ Google Rating, 82+ Reviews, #1 Inventory. Blue accent numbers, column dividers, dark background.
cinevo-services-grid.json
“What We Offer” section — 4 image cards with gradient overlays, category labels, descriptions, blue highlight text, and Browse Inventory CTA.
cinevo-simple-process.json
“How to Place an Order” — 3-step process layout with blue left borders, step numbers in JetBrains Mono, body text, and mailto CTA link.
cinevo-client-reviews.json
“4.9 Stars on Google” — header row with stars and review count, 3 review cards with dark background, italic quotes, and monospace reviewer names.
cinevo-cta-banner.json
Full-width blue CTA — “Let’s Talk About Your Project” with subtext and 3 action buttons: Email, Phone, and Contact Form.
cinevo-global-footer.json
4-column global footer — logo + tagline + social icons, Services nav, Why Cinevo list, Contact info, Get a Quote CTA, and bottom copyright bar.
07 — Technical Notes
React vs. Divi: Side by Side
Here’s how specific React/Tailwind patterns map to their Divi equivalents in this project:
🔧 Native Modules vs. Code Modules
For complex visual elements (gradient cards, styled review cards, left-border steps), I used et_pb_code modules with inline HTML rather than native Divi modules. This produced more faithful output with fewer CSS overrides and no risk of Divi updates breaking the layout.
08 — Tools
Stack Used
Claude AI
Analysis, code generation & automation
Claude in Chrome
Live site browsing & JS injection
Python 3
JSON templating & file generation
Divi 5.1
Target page builder (WP Engine)
Next.js / Tailwind
Source site stack (Vercel)
Google Fonts
Barlow · Barlow Condensed · JetBrains Mono
09 — Results
Outcomes
6 importable Divi 5 JSON layout files delivered
All design tokens extracted to pixel-perfect accuracy
Divi 5 import format reverse-engineered & documented
Global footer built as reusable Theme Builder component
Zero manual CSS estimation — all values code-extracted
Process is fully repeatable for remaining pages
The Takeaway
This project shows that a sophisticated React/Next.js marketing site can be faithfully translated into WordPress + Divi when approached with a systematic, code-driven methodology rather than visual approximation.
The hardest part wasn’t the design replication — it was navigating undocumented platform-specific import formats and knowing when native CMS modules fall short of custom HTML. Both problems were solved through source code analysis and automated CSS extraction.
The client gets a fully editable, CMS-managed website that matches their brand exactly — no React knowledge required to maintain it.