HTML to Elementor
Back to tutorials

Get the cleanest output: icons, images and the structure map

Beyond the basic conversion, three features decide how tidy and editable your Elementor page ends up: how icons, images and the structure are handled.

1. Icons that land in the Elementor icon library

If your HTML uses Font Awesome classes (like <code><i class=”fas fa-check”></i></code>), set the Icons option to Match Elementor icon library and each icon becomes a real, editable icon you can swap from Elementor’s icon picker — not a locked SVG.

Even better: a card made of an icon + heading + short text is converted into a single Icon Box widget. The converter matches the icon by name (using the icon’s class and the card title, e.g. “Reusable” → recycle), and carries over the icon size, spacing and typography. If it can’t find a match it leaves the icon empty for you to pick.

Tip: custom hand-drawn SVGs can’t enter Elementor’s icon control, so prefer Font Awesome classes in the source if you want library icons.

2. Images: fill them in Elementor

The AI can’t embed real image files into HTML text, so images are the trickiest part. The simplest path: set Images to Empty image placeholders. Every image becomes an empty slot, and each slot keeps its alt text as a caption — so you know which picture goes where when you upload them in Elementor.

  • Best: upload images to the Media Library first, then use those <code>https://</code> URLs in the HTML — they import with no manual step.
  • Avoid: Base64-embedded images and local file paths — the converter drops these to empty placeholders by default.

3. The structure map: review before you export

Open the Structure map tab to see the exact Elementor tree next to a live preview. Hover any row and the matching part highlights on both sides.

  • The target icon on a row sets a copy root — export only that block and drop the outer wrappers.
  • The ✕ icon excludes a part from the copy (handy for a stray element you don’t want).
  • The overview shows how many components, how deep the nesting is, and a confidence breakdown (direct / partial / kept-as-HTML).

A quick pass here catches anything that didn’t map cleanly before it ever reaches your live site.