User guide

1. Getting started

HTML to Elementor runs right in your browser — nothing to install, no sign-up. All you need is the HTML you want to convert and access to Elementor on your WordPress site.

1. Open htmltoelementor.es in your browser.
2. You'll see the text area with the placeholder "Paste your HTML code here…"
3. Paste your HTML or use the "Load Example" button to try it out.
4. Click "Convert to Elementor" (or wait for the automatic debounce).
5. The results appear below: info, preview, CSS and JSON.

2. Basic conversion

The tool analyzes your HTML's DOM tree and maps each element to its equivalent Elementor widget. The more semantic your HTML, the better the result.

Sample input

<section class="hero" style="background:#667eea;padding:60px 20px;text-align:center;">
  <h1 style="color:white;font-size:48px;">My Landing Page</h1>
  <p style="color:rgba(255,255,255,0.9);">A clear description of your value proposition.</p>
  <a href="#contacto" style="background:white;color:#667eea;padding:14px 32px;border-radius:8px;">
    Get started
  </a>
</section>

What you get

• Generated CSS: clean CSS rules ready to add to your theme.
• Elementor JSON: a hierarchical structure with Container, Heading, Text Editor and Button.
• Preview: how the design will look in the browser.

3. CSS and styles

The tool's CSS engine supports three style sources, applied in cascading priority order:

1. Inline styles (style="...") — highest priority
2. <style> blocks inside the HTML itself — medium priority
3. Inherited styles from the parent element — lowest priority

Mapped CSS properties

4. Supported widgets

5. Importing into Elementor

Once you have the generated JSON, there are two ways to import it into Elementor:

Method A: Paste from another site (recommended)

1. Copy the full JSON (the "Copy JSON" button in the tool).
2. Go to WordPress → open the page with Elementor.
3. Click the ☰ menu icon (top left of the editor).
4. Select "Paste from another site".
5. Paste the JSON with Ctrl+V / Cmd+V and confirm.

Method B: Inside an existing Container

1. Right-click any section or Container in the editor.
2. Select "Paste from another site" from the context menu.
3. Paste the JSON and confirm.

6. Troubleshooting

The JSON won't import into Elementor

Make sure you copy the entire JSON, including the outer brackets [{…}]. Incomplete JSON fails silently.

Styles aren't applied after importing

Inline styles are converted into CSS classes. Add the generated CSS under Appearance → Customize → Additional CSS.

Images show up broken

Relative paths (./img/photo.jpg) don't work outside their original server. Upload the images to WordPress and update the URLs.

Forms don't work

<form> elements are converted to an HTML Widget with a warning. For working forms, use Elementor Pro's native Form widget.

SVG icons look huge

The tool normalizes SVGs that have no dimensions by reading their viewBox. If they still look too big, add width and height to the SVG in your original HTML.

7. Known limitations

Being upfront about limitations helps set realistic expectations:

• External CSS (linked .css files) isn't loaded — only <style> blocks and inline styles.
• CSS Grid isn't mapped to Elementor Grid (still in development).
• Pseudo-classes (:hover, :focus) and media queries aren't converted.
• JavaScript included in the HTML is stripped for security.
• CSS animations (@keyframes) aren't mapped to Elementor Motion Effects.
• Images with relative paths need to be updated manually after importing.
• Very complex HTML structures (>5 levels of nesting) may need manual tweaking.

8. Frequently asked questions

The most common questions about using the tool.

General

Technical

Privacy

Support