Beyond the basic conversion, three settings decide how tidy and editable your Elementor page ends up: how icons, images and the structure are handled. Getting these right before you export is the difference between a page you are happy to hand over and one you spend an hour cleaning.
All three share a theme: the converter can only work with what is actually in the source. Each of these settings is really about giving it something it can map cleanly — and knowing what to do when it cannot.
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 did not map cleanly before it ever reaches your live site.
Putting the three together
These settings compound. A card row built from Font Awesome icons, real image URLs and shallow markup converts into a Grid holding clean Icon Box or Image Box widgets — something you would be happy to have built by hand. The same row built from inline SVG, Base64 images and five levels of wrappers converts into a deep tree of containers with locked graphics. Same tool, same page, very different afternoon.
A quick decision guide
- Bringing a section into an existing branded site? Icons matched to the library, site colours, site typography. The block adopts your brand automatically.
- Reproducing a design faithfully? Icons matched to the library, original colours, original typography. Then register any custom fonts in Elementor before you judge the result.
- Images not uploaded yet? Empty placeholders, and make sure every image in the source has meaningful alt text first.
- Long page? Set a copy root and bring it across one section at a time.
The habit worth forming
Open the Structure map every single time, before you export — not only when something looks wrong. It takes fifteen seconds to read the component count, the nesting depth and the confidence breakdown, and those three numbers tell you whether to export now or go back and fix the source. Fixing the input and converting again is consistently faster than repairing the output inside Elementor, and it is the habit that separates a smooth workflow from a frustrating one.