How to migrate a Divi site to a block theme
Off the page builder, onto native Gutenberg — without breaking your live site.
A step-by-step guide to rebuilding a Divi site as a Full-Site-Editing block theme — by hand, or automatically with an AI agent.
To migrate a Divi site to a block theme: work on a disposable copy (never production), extract Divi’s colors, fonts, and layout into a block theme’s theme.json and templates, rebuild each page as native Gutenberg blocks in menu order, verify every page before moving on, and keep Divi installed as instant rollback. Pete Panel’s /retheme workflow runs this whole process automatically inside a local playground.
Why move off Divi in the first place
Divi is a capable page builder, but it stores your content in its own shortcodes and loads a heavy runtime on every page. A native block theme renders as clean Gutenberg markup — lighter HTML, faster loads, no builder lock-in, and full compatibility with the WordPress Site Editor. The catch is that “just switch themes” doesn’t work: your content is entangled with Divi, so migrating means rebuilding it as blocks. Done carelessly, that breaks pages. Done in the right order on a safe copy, it’s methodical and low-risk. Here’s the process.
The steps, start to finish
Work on a disposable copy — never production
Clone your live Divi site into an isolated local environment (a Docker dev playground). Every change happens on a throwaway copy, so an experiment can’t take down the real site. If a step goes wrong, delete it and clone again.
Inventory the real scope
List every page your main menu links to — homepage first. That, not “the homepage,” is the actual work list. Note custom templates, global header/footer, and any reusable sections so nothing is missed.
Extract the design into tokens
Pull Divi’s palette, fonts, and spacing into a block theme’s theme.json (a Twenty Twenty-Four child theme is a solid base). These design tokens are what make the new block theme look like the original site.
Rebuild structure as templates and patterns
Recreate the header, footer, and recurring section layouts as block templates and reusable patterns — stored in theme files, not the database, so the whole design travels inside the theme’s .zip.
Convert each page to native blocks — one at a time
Divi content lives in shortcodes; rebuild each page’s sections as Gutenberg blocks, working in menu order. One page at a time keeps the change small and traceable.
Verify before moving on
Render each converted page and check it against the original — text, images, links, and responsive layout — before starting the next. If something regresses, it points straight at the page you just touched.
Keep Divi installed as rollback; package the theme
Leave the Divi theme installed but inactive — it’s your “before” state and instant rollback. Package the finished block theme as an installable .zip so it deploys as one file.
Deploy when it’s verified
Activate the block theme in production, purge page caches, and confirm the new block HTML is actually being served. Only now do you retire Divi.
The shortcut: let an agent run it with /retheme
Every step above is exactly what Pete Panel’s /retheme workflow automates. Inside a local agentic WordPress environment, an AI agent inventories the Divi theme, extracts your palette, fonts, and section structure, rebuilds them as a Full-Site-Editing theme (design-token theme.json, block templates, and patterns), then converts every main-menu page one at a time — verifying each render before the next. It keeps Divi installed as rollback and ends at an installable .zip, with a design gate when the brief is thin. One command runs the whole migration:
$ /retheme <PETE_SITE_LOCAL_URL>
Frequently asked questions
Can I migrate Divi to a block theme automatically?
Largely, yes. Pete Panel’s /retheme workflow runs the full migration — inventory, design extraction, template and pattern build, and a verified page-by-page conversion — inside a local playground, ending at an installable .zip. You still review the result and approve the design direction, but you’re not rebuilding each page by hand.
Will I lose my content or design?
No, if you do it right. The design is preserved by extracting Divi’s palette, fonts, and layout into the block theme’s theme.json and templates, and content is rebuilt page by page and verified against the original. Keeping the Divi theme installed as rollback means you can always compare or revert.
Do I have to rebuild every page by hand?
Manually, yes — Divi’s shortcodes don’t convert to blocks on their own, so each page is rebuilt. The /retheme workflow removes that grind by running the page loop for you, converting and verifying each main-menu page in order.
Is it safe to do this on my live site?
Don’t. Always work on a disposable copy in a dev playground and deploy only once every page is verified. That way a mistake stays in the sandbox, and your live Divi site keeps running untouched until you’re ready to switch.
How long does the migration take?
By hand it depends on page count and design complexity — often days for a real site. With /retheme running the inventory and page loop for you, a typical small-to-mid site can be rebuilt and verified in an afternoon, with your review at the design gate and before deploy.
Migrate your Divi site the agentic way.
Spin up a free dev playground, clone your site, and run /retheme — verified page by page, rollback always one command away.