How to Convert a Website to Elementor (HTML to Elementor, 2026)

Elementor has no "import this website" button. That is the first thing worth saying plainly, because most guides on this topic bury it.

Elementor imports its own template files and kits. It does not import arbitrary HTML. So when you find a pricing section you like and want it in your WordPress build, you have four real options, and they differ enormously in how much work you do afterwards.

The four ways to convert a website to Elementor

1. Rebuild it by hand

Open the page, open DevTools, read off the colors, fonts, spacing and radii, then drag widgets onto the canvas until it matches.

What it keeps: everything, eventually. The result is native Elementor, so every control works.

What it costs: an hour or two per section, and it is the part of the job that feels like data entry rather than design. You will also miss things. The hover transition on the button, the slightly different padding at the tablet breakpoint, the letter spacing on the heading. Those are the details that make a copy look "close but wrong".

Use it when: the section is simple, or you want to change the design anyway.

2. Paste the markup into an HTML widget

Copy the section's HTML and CSS from DevTools, drop an HTML widget on the page, paste it in.

What it keeps: the appearance, if you also bring the CSS across.

What it breaks: the editing experience, completely. An HTML widget is a sealed box. Elementor's Structure panel shows one item called HTML. You cannot click the heading and change the text, you cannot restyle the button in the Style tab, and the responsive controls do nothing, because the original CSS is deciding the layout. Six months later, when a client asks to change a price, someone has to edit raw markup.

Use it when: you need something on the page today and nobody will ever edit it.

3. Redraw it in Figma, then use a Figma-to-Elementor plugin

Tools like UiChemy and Fignel convert a Figma file into Elementor. They work well, and if your design already lives in Figma this is a good path.

The catch for an existing website: the design does not live in Figma. So the flow becomes website, then Figma, then Elementor. You either import the page into Figma with another plugin, or you redraw it. Each hop loses something, and the Figma import step is exactly the one that tends to produce absolutely positioned layers that convert badly.

Use it when: you are designing in Figma first anyway.

4. Capture the section from the live page, paste it as widgets

Skip Figma. Read the page directly, convert what is there into Elementor's own format, paste.

This is the path PocketUI takes, and it is the reason the tool exists: the design already exists as a working website, with real CSS and real breakpoints. That is better source material than a redrawn Figma file, because nothing has been interpreted yet.

What "real widgets" actually means

This is the distinction that decides whether a conversion is useful, so it is worth being concrete.

A sealed result looks like this in the Structure panel:

• HTML

A native result looks like this:

• Container · Pricing
  • Heading · Simple pricing
  • Text Editor · No hidden fees
  • Container · 3 columns
    • Icon Box · Pro
  • Button · Start free

In the second one, every line is something you can click, restyle and set a different value for on mobile. That is the whole point of using a page builder. A conversion that gives you the first one has saved you the layout work and taken away the editing work.

What survives a good conversion

Doing it with PocketUI

PocketUI is a Chrome extension that saves parts of live websites as real code: the structure, the authored CSS rather than hundreds of computed values, the hover and focus states, and the breakpoints. The same capture can then go to Figma as editable layers, out as HTML, Tailwind, React or Vue, or into a page builder.

1. Open the page you want to convert. Find the section you want: a pricing block, a hero, a testimonial row.
2. Select it. Drag over the section in the extension. It captures the real structure, the authored CSS, the hover states and the breakpoints, not a screenshot.
3. Check what was captured. The section lands in your library as real code. Open it to see the preview at desktop and phone width.
4. Copy it for Elementor. The capture is converted into Elementor's own format: containers with widgets inside, responsive values filled in from the original CSS.
5. Paste it into the editor. The section appears in the Structure panel as real widgets, not one HTML block.
6. Swap the content for your own. You kept the layout work; the words and images should be yours.

A note on honesty, because this is a guide and not an advert: the Elementor export is not live yet. Figma and the code exports work today; Elementor, Webflow, Bricks and Shopify are in development, and early-access members get them first. If you need the conversion this afternoon, use option 1 or 2 above, and put your name on the list if the last row of that table is the one you want.

The part everyone skips: the content

Whichever method you use, the layout is the part you are reusing. The words, the photographs, the logo and the brand colors belong to whoever made the site.

Copying a competitor's pricing layout to understand how they present their tiers is ordinary competitive work. Moving a client's existing site into a new Elementor build is ordinary agency work. Publishing their copy and their images under your own domain is not. Swap the content out as soon as the structure is in place.

Which method should you use?

• One simple section, and you want to change the design anyway: rebuild it by hand.
• A complex section, needed today, never edited again: HTML widget, and accept the trade.
• Your design already lives in Figma: UiChemy or Fignel.
• The design exists as a live website and you want native widgets: capture it from the page.

The thing worth optimising is not the first paste. It is what the section looks like in the Structure panel a month later, when someone needs to change a price on mobile.