HTML to Elementor
Back to tutorials

A pre-flight checklist for HTML you are about to convert

The quality of a conversion is decided mostly by the HTML you feed it. This is the checklist worth running before you paste anything into the converter.

1. Use semantic tags

Headings as <h1>–<h6>, body copy as <p>, calls to action as <button> or <a class="button">, lists as <ul>. Native tags map to native widgets. A heading faked with a styled <div> can still be detected, but a real tag is never ambiguous.

2. Keep the DOM shallow

One wrapper per section. Every extra nesting level becomes another Container you have to click through in the editor. Purely decorative wrappers with no styling are collapsed automatically, but wrappers that carry a padding or background are kept because removing them would change the layout.

3. Self-contain your CSS

Inline styles or a single <style> block convert best, because the converter reads the styles the browser actually computed. An external framework stylesheet that never loads means the page renders unstyled — and unstyled is exactly what gets converted.

4. Sort out images first

Best case: upload to the Media Library and use the real https:// URLs. Otherwise switch Images to Empty image placeholders and fill them in afterwards — each slot keeps its alt as a caption. Base64 images and local file paths are dropped to placeholders by design, since they cannot be imported into WordPress reliably.

5. Prefer Font Awesome classes over inline SVG

Only class-based icons can land in Elementor’s icon library as editable icons. Inline SVGs cannot enter the icon control, and they lose any sizing and stroke colour that lived in page CSS.

6. Use gap, not per-child margins

Gaps on a flex or grid parent map to a single Elementor gap control. Margins applied to each child are carried per-widget and are far more tedious to adjust later.

7. Centre with max-width plus auto margins

The max-width + margin:0 auto pattern is recognised and becomes a Boxed container, which centres natively at every screen size.

8. Strip what you do not want to carry

Scripts, tracking tags, cookie banners and third-party embeds are removed or neutralised for safety. Forms lose their submit action — an Elementor Form needs to be reconnected to a real destination on your site. Nav menus must be pointed at a real WordPress menu.

9. Convert section by section

For a large page, use the visual picker or set a copy root in the Structure map and bring one section at a time. Smaller units are far easier to verify, and you avoid importing the site header and footer by accident.

10. Review the Structure map before exporting

Check the component count, the max nesting depth, and the confidence breakdown. Green rows converted directly; red rows were kept as HTML and are the ones worth a second look. Fixing the source and converting again is usually faster than repairing the result inside Elementor.

After import

Re-link buttons, reconnect forms and menus, step through the three device views, and re-upload any placeholder images. Then it is a normal Elementor page — fully editable, with no HTML widget standing between you and your content.