Free tool

Elementor → Gutenberg Converter

Leaving Elementor? Paste your Elementor JSON and get clean, native Gutenberg blocks with your design intact — nothing to install, completely free.

Use the tool ↓ See ready→made

Elementor pages don't survive deactivating the plugin — the content is locked in Elementor's own data format. This free converter turns that data into native Gutenberg blocks: groups, columns, headings, images, buttons, galleries and more, with your colors, typography, spacing and tablet/mobile settings carried over in a single embedded style block. Paste your page's JSON (a template export, an Elementor copy, or raw _elementor_data), convert, and paste the result into Gutenberg's code editor. No plugin, no account, no lock-in — the output is plain WordPress.

  1. 1

    Copy in Elementor

    Right-click a section in the Elementor editor and hit Copy — or export the page as a template (Save as Template → Export) and paste the file's contents.

  2. 2

    Convert here

    Paste the JSON below and hit Convert. Skipped or simplified widgets are listed under the output, with the core block to use instead.

  3. 3

    Paste into Gutenberg

    In the block editor open ⋮ → Code editor, paste, switch back to the visual editor — done. No plugin needed.

Full tutorial with screenshots ↓

Elementor JSON Input

No Elementor JSON yet? Grab it in your Elementor editor via right-click → Copy.

The output is native Gutenberg blocks with one embedded <style> block carrying your design. In the block editor open the ⋮ menu → Code editor (Ctrl+Shift+Alt+M), paste, and switch back to the visual editor.

Dynamic widgets (Posts, Navigation Menu, forms) can't become static blocks — the converter tells you exactly what was skipped and which core block to use instead.

Global Styles (optional)

If your site uses Elementor's Global Styles (Site Kit colors/typography), paste your exported site-settings.json below so the converter can resolve them — otherwise those colors/fonts are skipped and listed in the notes. Export it via Elementor → Tools → Website Kit → Export.

Gutenberg Blocks Output

Live Preview

Step by step

How to migrate a build, start to finish.

  1. 1

    Copy a section

    Open the page in the Elementor editor, hover a section until its handle (the six-dot icon) appears, right-click it and hit Copy. Elementor puts the section's full JSON — structure, widgets and styling — on your clipboard. Nothing to install.

    Elementor editor with a section right-clicked, showing the context menu with Copy
  2. 2

    No "Copy All Content" on your version? Export the whole page as a template instead

    Some Elementor versions add a Copy All Content item when you right-click the empty canvas below the last section — if you see it, use it and skip to step 4. If you don't (it's a newer addition and not every install has it), save the whole page as a template the same way as step 3, just triggered from the page-level menu instead of one section's handle, so every section on the page is captured in one go.

  3. 3

    Or export as a template

    Right-click a section (or the page) and choose Save as a template. Give it a name and save it to Site Templates. This is the move for anything you want to reuse, or when you want the whole page in one file rather than a single clipboard copy.

    Elementor context menu with Save as a template highlighted
  4. 4

    Download it from Templates → Saved Templates

    In WordPress go to Templates → Saved Templates, hover the row for the template you just saved and click Export (labelled "Export Section" or "Export Template" depending on the type). That downloads a .json file — open it in a text editor and paste its contents into the converter below.

    WordPress admin Saved Templates list with the Export row action visible on hover
  5. 5

    Watch out for embedded templates

    If a section shows a raw [elementor-template id="…"] shortcode, or looks like a Template widget, that's just a reference to a saved template — its content doesn't travel with your copy or export. You'll see the literal shortcode text where the content should be, as in the screenshot. Export that template separately (step 3) and convert it on its own, then place the result where the reference was.

    Elementor editor with a widget selected showing the unrendered [elementor-template id] shortcode instead of its content
  6. 6

    Convert and paste

    Paste your JSON into the converter, hit Convert, then Copy to Clipboard. In the WordPress block editor open ⋮ → Code editor, paste, and switch back to the visual editor. Use the Live Preview button first if you want to check the result before committing it to a real page.

From the makers of ready→made

Building from a Figma design instead?

ready→made converts your Figma designs straight into Gutenberg, Oxygen 6, Etch or clean HTML — real structure from a real layout engine.

See ready→made →
FAQ

Good to know.

Is this really free? Do I need a plugin?

Completely free, and no plugin at all — the output is native Gutenberg blocks that any WordPress install understands. Your design travels in one embedded style block on the page.

What do I paste in?

Any of: a right-click Copy from the Elementor editor, an exported template .json file's contents, or the raw _elementor_data of a page. The converter detects the format automatically.

What survives the conversion?

Layout (sections, columns, flex and grid containers), headings, text, images, buttons, galleries, icon lists, spacers, dividers, tabs and accordions (as native collapsibles), testimonials, call-to-actions and more — plus colors, typography, spacing, backgrounds and your tablet/mobile overrides as media queries.

What can't be converted?

Dynamic widgets: a Posts grid or Navigation Menu queries your database live, so it can't become a static block — the converter skips it and tells you to use Gutenberg's Query Loop or Navigation block instead. Forms need a form plugin, and icon-font glyphs can't render without Elementor's fonts. Every skip is listed in the conversion notes.

Which WordPress version do I need?

Any current WordPress. Tabs and accordions convert to the Details block, which needs WordPress 6.3 or newer.

I'm starting from a design, not an old build.

Then use ready→made to convert the Figma design directly to Gutenberg.

Ready?

Build a real site from your Figma file — in minutes.

Get ready→made Try free in Figma →
menu