HTML to Elementor
Back to tutorials

HTML to Elementor JSON: export and import templates

Elementor templates are stored as JSON. That means an HTML page can be converted into a JSON template file you import like any other Elementor template — portable, reusable, and independent of the clipboard. Here is how the JSON route works and when to choose it.

Two export formats, same components

After converting HTML, you can export in two ways. Copy Elementor data puts a JSON payload on your clipboard for an immediate paste into an open editor. Download a JSON template saves that same structure as a .json file. The components are identical; the difference is that a file is portable and a clipboard payload is not.

When the JSON file is the right choice

  • Reuse across sites. Import the same file on any WordPress install with Elementor.
  • Version control. The file is plain JSON, so you can keep it in a repository, diff two exports, or archive a design as it existed on a given date.
  • Sharing. You can send a colleague or client a file; you cannot send them your clipboard.
  • Building a library. A folder of named JSON templates becomes a component library you assemble future pages from.

How to import a JSON template into Elementor

  1. Convert your HTML and click Download JSON template.
  2. In WordPress, open Templates → Saved Templates.
  3. Click Import Templates and choose the .json file.
  4. The template appears in your library; insert it on any page from the Elementor library button.

What is inside the JSON

The file describes an Elementor element tree: containers with their layout, background, border and spacing, and widgets with their content and style settings. Because it is the native Elementor format, everything imports as editable widgets — not as an HTML block. Headings, text, images, buttons, icon boxes, image boxes and grids all arrive ready to edit.

One practical note: image references in the JSON are URLs, not embedded files. If your source used real Media Library URLs they resolve on import; local paths and Base64 images become empty placeholders you fill afterwards. Uploading images first is the single change that makes a JSON template import cleanly.

Make templates site-agnostic before you save

A template that hard-codes colours and fonts will look wrong on the next site you import it into. Before you export a block you intend to reuse, convert it with site colours and site typography. The template then adopts whatever palette and fonts the destination site defines, so the same JSON looks native everywhere you import it.

Keep the structure clean

A good reusable template is one top-level Container with a shallow tree inside. Before exporting, check the Structure map: a low nesting depth and card rows that are a Grid holding widgets directly — rather than each card wrapped in its own container — make the template far easier to restyle after import. Clean input produces clean JSON.

The actual shape of the file

There is no mystery to it, and knowing the fields makes the format much less intimidating. A downloaded template is a single JSON object with five keys:

  • content — the element tree: containers and widgets, each with its settings.
  • page_settings — page-level settings, empty for a converted block.
  • version"0.4", Elementor’s template schema version.
  • title — whatever you typed in the template title field, defaulting to “HTML Converted Page”.
  • type"page".

That type value is the one worth understanding. Declaring the template as a page rather than a section means it lands in Saved Templates as a page template — which you can still insert into any existing page from the library button, so nothing is lost, but it also means you can start a blank page from it directly.

Why the clipboard payload looks different

If you inspect what the Copy button puts on your clipboard, it is not the same object. It carries type: "elementor", a siteurl and the elements array — no version, no title.

That is Elementor’s paste format rather than its template format. When you right-click and choose Paste from other site, the editor looks for exactly that marker to recognise the clipboard as Elementor data instead of plain text. It is why pasting works without any import step, and also why you cannot save a clipboard payload to a file and import it — the two formats are not interchangeable, even though they describe the same components.

Plain JSON means real version control

Because the file is readable JSON rather than a binary bundle, it behaves like source code, which opens up a few things that are genuinely useful and rarely done with page sections:

  • Diff two exports. Convert a block, change the source, convert again, and diff the files to see precisely which settings moved. This is by far the fastest way to understand what a given conversion option actually changes.
  • Archive a design at a point in time. A dated JSON file is an exact record of what a section looked like, recoverable long after the live page has been edited beyond recognition.
  • Review before import. Search the file for http and you will see every image URL it references, which tells you immediately whether it will import cleanly onto another site.

That last one takes ten seconds and catches the single most common import failure — a template full of URLs pointing at a site the destination cannot reach.

Copy or download — a quick rule

Paste the clipboard data for a one-off insert into a page you are editing right now. Download the JSON file for anything you will import more than once, share, or keep. Same conversion, two destinations — pick by whether you need portability.