Free tool

HTML → Elementor Converter

Paste any HTML and get Elementor-native sections and widgets — copy the JSON and paste straight into the editor. Free.

Elementor doesn't take plain HTML — everything has to be a section, container or widget in its own data format. This free converter reads any HTML and rebuilds it as Elementor-native sections/containers and widgets (heading, text editor, image, button, and more), ready to paste straight into the editor. Copy the output JSON, right-click inside the Elementor canvas and choose Paste — the structure appears editable, no import step needed. One honest limitation: the free version of Elementor has no custom-CSS field, so complex styling that doesn't map to a widget setting lands as CSS classes plus a note telling you what to do with them (Elementor Pro or a child-theme stylesheet).

  1. 1

    Copy your HTML

    Grab the markup — a full page, a section, an old site's view-source, whatever you're starting from.

  2. 2

    Convert here

    Paste it below, hit Convert, copy the resulting JSON.

  3. 3

    Paste into Elementor

    Right-click inside the Elementor canvas and choose Paste — the section appears, fully editable.

🔒 Conversion runs in your browser. If you use the URL fetcher, we retrieve that page through our server. To improve conversion quality we keep an anonymized structural copy of the input — all text is scrambled and URLs removed before anything leaves your browser. Details.

Paste a page address — we'll fetch its HTML and stylesheets and convert them automatically. Fastest way to start.

or paste HTML manually below

HTML Input

Paste any HTML — a full page, a section, an email fragment, or AI-generated markup.

Optional: add your CSS (colors, backgrounds, fonts)
Your Elementor version Pro rebuilds flex rows (like navs) as native flex containers. Free keeps them as inline widgets that still render — no custom CSS needed.

Copy the JSON, then in your Elementor editor right-click a section/column and choose Paste.

If Elementor asks for clipboard permission, allow it — that's how Elementor's own copy/paste reads the JSON you copied.

Elementor Paste JSON

Real output

Worked example: HTML in, Elementor JSON out

A real conversion, unedited. On the left a small hero section — HTML plus its CSS. On the right the exact Elementor JSON this converter produces from it. Copy the JSON, open any page in Elementor, right-click the canvas and choose Paste: the section appears with every setting native and editable.

Input: HTML + CSS
<style>
.hero { display: flex; flex-direction: column;
        align-items: center; gap: 16px;
        padding: 64px 24px; background: #1a1333; }
.hero h2   { color: #ffffff; font-size: 40px; }
.hero p    { color: #cfc7f2; font-size: 18px;
             max-width: 560px; }
.hero .btn { background: #7c66f7; color: #ffffff;
             padding: 14px 28px; border-radius: 8px;
             font-weight: 600; }
</style>
<section class="hero">
  <h2>Launch your site faster</h2>
  <p>Design once, convert to clean WordPress
     markup, and ship the same week.</p>
  <a class="btn" href="/pricing">See pricing</a>
</section>
Output: Elementor JSON, paste-ready
{ "type": "elementor",
  "elements": [ {
    "elType": "section",
    "settings": { "background_color": "#1a1333",
      "padding": { "top": "64", "right": "24", … },
      "text_align": "center" },
    "elements": [ { "elType": "column",
      "elements": [
        { "widgetType": "heading",
          "settings": { "title": "Launch your site faster",
            "title_color": "#ffffff",
            "typography_font_size": { "size": 40 } } },
        { "widgetType": "text-editor", "settings": { … } },
        { "widgetType": "button",
          "settings": { "text": "See pricing",
            "link": { "url": "/pricing" },
            "background_color": "#7c66f7",
            "border_radius": { "top": "8", … } } }
      ] } ] } ] }
Real output

Worked example: a pricing section with nested cards and buttons

A second real conversion, also unedited. The input is a two-plan pricing section: cards nested inside a flex row, a feature list per plan, and two call-to-action buttons. The output shows how nesting comes through: each card becomes its own Elementor column with native background, padding and border radius, and each <a class="btn"> becomes a real Button widget.

Input: HTML + CSS
<style>
.pricing { display: flex; justify-content: center;
           gap: 24px; padding: 56px 24px;
           background: #f6f4ff; }
.plan { display: flex; flex-direction: column;
        gap: 12px; padding: 32px; background: #ffffff;
        border-radius: 12px; max-width: 320px; }
.plan .price { font-size: 36px; font-weight: 700; }
.plan .btn { background: #7c66f7; color: #ffffff;
             padding: 12px 24px; border-radius: 8px; }
.plan--pro { background: #1a1333; }
.plan--pro h3, .plan--pro .price { color: #ffffff; }
</style>
<section class="pricing">
  <div class="plan">
    <h3>Starter</h3>
    <p class="price">$0</p>
    <ul>
      <li>5 conversions per month</li>
      <li>All free converters</li>
      <li>Community support</li>
    </ul>
    <a class="btn" href="/pricing">Start free</a>
  </div>
  <div class="plan plan--pro">
    <h3>Pro</h3>
    <p class="price">$19</p>
    <ul> … </ul>
    <a class="btn" href="/pricing">Go Pro</a>
  </div>
</section>
Output: Elementor JSON, paste-ready
{ "type": "elementor",
  "elements": [ {
    "elType": "section",
    "settings": { "background_color": "#f6f4ff",
      "padding": { "top": "56", "right": "24", … } },
    "elements": [
      { "elType": "column",
        "settings": { "background_color": "#ffffff",
          "border_radius": { "top": "12", … },
          "padding": { "top": "32", … } },
        "elements": [
          { "widgetType": "heading",
            "settings": { "title": "Starter",
              "typography_font_size": { "size": 22 } } },
          { "widgetType": "text-editor",
            "settings": { "editor": "<p>$0</p>",
              "typography_font_weight": "700" } },
          { "widgetType": "text-editor", "settings": { … } },
          { "widgetType": "button",
            "settings": { "text": "Start free",
              "link": { "url": "/pricing" },
              "background_color": "#7c66f7",
              "border_radius": { "top": "8", … } } }
        ] },
      { "elType": "column",
        "settings": { "background_color": "#1a1333", … },
        "elements": [ …the Pro plan's widgets… ] }
    ] } ] }
From the makers of ready→made

Building from a Figma design instead?

ready→made converts your Figma designs straight into clean HTML — a real layout engine, not AI guesswork — then bring it into Elementor the same way.

See ready→made →
FAQ

Good to know.

Is this really free? Do I need a plugin?

Completely free, no plugin needed on top of Elementor itself — you paste the JSON straight into the editor with Elementor's own paste handling.

What HTML can I paste in?

Anything: a full page, a section, an old static site, output from an email builder or AI tool.

What happens to complex CSS?

Elementor's free tier has no custom-CSS field on widgets. Styling that maps to a widget setting (color, spacing, typography) is set natively; anything else lands as a CSS class name on the element plus a note in the conversion output telling you it needs Elementor Pro's custom CSS or a theme stylesheet to take effect.

How do I get the JSON into Elementor?

Select the converted output, copy it, then inside the Elementor editor right-click the canvas (or an empty area) and choose Paste — Elementor recognizes its own clipboard format and rebuilds the structure.

What can't be converted?

Inline <script> tags and anything relying on JavaScript at render time are skipped and listed in the conversion notes.

What format is the output, exactly?

Elementor's own clipboard JSON — the same format the editor produces when you right-click → Copy a section. That's why a plain right-click → Paste in the canvas rebuilds it natively: sections, containers and widgets, not an embed. You can also save the pasted result as a template and reuse it anywhere.

How is the Elementor JSON structured?

It is a tree, the same one you see in the editor's Navigator panel. The top level has a type of elementor and an elements array. Every entry in that array is an element object with three keys that matter: elType names the kind of node (section, column, container or widget), settings holds its configuration, and a nested elements array holds its children. Sections and containers nest further layout nodes or widgets inside their elements; widgets are always leaves, so their elements array is empty. Each element also carries a short random id, which Elementor regenerates on paste, so you never need to manage those yourself.

What do widgetType and settings mean?

Elements with elType: "widget" carry an extra widgetType key naming the concrete widget: heading, text-editor, image, button and so on. The settings object holds exactly the values you would otherwise set in the editor's left panel. Content keys like title, editor or text carry the actual content; style keys like title_color or background_color carry colors as hex strings; dimensions such as padding or border_radius are objects with a unit, per-side values and an isLinked flag. Typography keys only take effect when typography_typography is set to "custom", which the converter does for you. Keys with a leading underscore, like _padding or _css_classes, belong to the widget's Advanced tab.

Can I import the JSON as an Elementor template instead of pasting?

The paste route is the fastest: copy the output, right-click the Elementor canvas and choose Paste, because the converter emits Elementor's clipboard format directly. If you want a reusable template, paste it once, then right-click the section and choose Save as a template. From Templates → Saved Templates you can export that as a .json file, import it on another site, or insert it into any page from the template library.

Moving away from Elementor instead?

That's the other direction — use Elementor → Gutenberg, Elementor → Bricks or Elementor → Etch to convert your existing Elementor build to its native format.

I'm starting from a design, not existing HTML.

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

More free tools

Other converters in the suite.

Ready?

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

menu