Step 1 is where most of the actual work is: page builders tend to wrap even a single paragraph in three or four nested divs, and replicating that nesting literally as blocks just moves the page-builder bloat into block markup instead of removing it, which defeats the point of migrating off the plugin.
Gutenberg
Convert a page builder export into native Gutenberg blocks
A scenario prompt that untangles Elementor-style div soup, with its plugin-specific classes and inline widths, into clean nested Group and Columns block markup that survives the plugin's removal.
Works with Claude / GPT620 uses★ 4.2
The prompt
gutenberg-elementor-divi-to-native-blocks
We're dropping Elementor and need to rebuild a page that currently exists only as its exported HTML. Here's the raw markup pulled from the page: [paste the raw exported HTML here, including nested divs with classes like elementor-section, elementor-row, elementor-column, elementor-widget-wrap, inline style="width: 33.33%;" on columns, and a section with a CSS background-image set inline for what looks like a hero] Convert this into native block markup. This export style is dense and repetitive, so work through it methodically: 1. Collapse the nested `elementor-section` > `elementor-row` > `elementor-column` > `elementor-widget-wrap` chain down to its actual structural equivalent: usually section becomes a `wp:group`, row plus column becomes `wp:columns` with `wp:column` children, and widget-wrap is just a wrapper to discard, not a block of its own. Nesting every level literally as a separate Group produces four levels of wrapper for content that only needs two. 2. Strip every `elementor-*` class name once conversion is done, these classes have no meaning or matching CSS once the plugin is deactivated, and leaving them in the block markup is dead weight that can also visually break things if another plugin happens to reuse a similarly-named class. 3. Convert inline `width: 33.33%;` style attributes on columns into the block editor's column width setting (expressed as the block's width attribute), not left as inline CSS, so widths stay editable in the block inspector instead of locked in raw style attributes. 4. Find any section with a CSS `background-image` set inline for what's visually a hero or banner, and rebuild that specific section as a `wp:cover` block with the image as its actual media, rather than a Group with a leftover inline background-image style, since a Cover block's overlay and focal point controls don't exist on a plain styled Group. 5. Watch for unbalanced or orphaned closing `</div>` tags, a common artifact of page-builder exports when the original export tool interleaved widget markup unusually, an unbalanced div structure carried into block comments produces a block validation error the first time the page is opened in the editor. 6. Output the fully converted, cleaned block markup with all elementor-specific classes and inline styles removed.