The main difference between native widgets and the HTML widget in Elementor is where you edit them. A native widget such as Heading, one of over 40 in Elementor Free, has three panel tabs: Content, Style and Advanced. The HTML widget holds code, with no Style settings. AI to Elementor converts HTML into native widgets where they map: one free conversion per website, then $47 a year for 30 a month.
Native widgets against the HTML widget is a choice every Elementor page makes, element by element. Elementor’s free plugin lists the HTML widget among its free widgets, described as “Insert code into the page” (wordpress.org/plugins/elementor/, checked November 9, 2026). A converted HTML page uses both kinds, and this page shows which parts land where and why.
Disclosure: this page is published by AI to Elementor, the converter named here. Every fact about Elementor’s widgets comes from Elementor’s own help pages and its wordpress.org page, read November 9, 2026. Every fact about AI to Elementor comes from our readme, AI Guidelines, pricing block, Terms, refund page and Replit guide, from our engine’s code and from our engineering notes.
| Native widgets vs the HTML widget at a glance | |
|---|---|
| Native widget | One element (Heading, Text Editor, Button, Image, Video and others), edited in the panel’s Content, Style and Advanced tabs, with values per device |
| HTML widget | One block of HTML, CSS, JavaScript or shortcodes, edited as code; its own settings are the Advanced options |
| Use the HTML widget for | An embed, a badge or a script that nobody edits in the panel |
| Use native widgets for | Every heading, paragraph, button and image a client or a colleague will change |
| From HTML to native widgets | AI to Elementor, a free WordPress plugin: one free conversion per website; Solo $47 a year for 30 conversions a month on 1 domain |
| Does not convert | Content a script builds at runtime, JavaScript behavior such as GSAP timelines, app logic and backends, Figma files, a whole site in one conversion. Pages from other builders (Divi, WPBakery, Beaver, Bricks) convert poorly. |
| Needs | Elementor Free or Pro with the Flexbox Container feature on; an administrator or an editor, or the network administrator on a multisite |
| Checked against Elementor’s help pages for the HTML, Heading and Text Editor widgets, wordpress.org/plugins/elementor/, the wp.org readme 1.3.51, our AI Guidelines and the aitoelementor.com pricing block on November 9, 2026, our Replit guide on October 29, 2026, and our engine’s code and scope decisions on October 30, 2026. | |
The card puts the difference in one line: a native widget is edited in Elementor’s panel, and the HTML widget is edited as code.
Contents
- What is the difference between a native widget and the HTML widget?
- What is a native Elementor widget?
- What is the Elementor HTML widget?
- When should you use the HTML widget?
- Which parts of a converted page become native widgets?
- Why does the converter keep some parts as HTML widgets?
- How do you turn an HTML widget into native widgets?
- Frequently asked questions
- Sources
What is the difference between a native widget and the HTML widget?
The difference between a native widget and the HTML widget is where you edit the content, because of what Elementor knows about it. A native widget stores its text, link, color and spacing as settings, so the panel shows a field for each. The HTML widget stores one block of code, so the panel shows that code and nothing inside it.
| Attribute | Native widget | HTML widget |
|---|---|---|
| What it holds | One element, such as a heading, a text block, a button or an image | HTML, CSS, shortcodes and JavaScript |
| Where you edit it | Content, Style and Advanced tabs in the panel | The code field, plus the Advanced options for the widget’s box |
| Text and colors | Typed in fields and picked in color controls | Changed in the code |
| Tablet and mobile | Values per device in Elementor’s responsive controls | The code’s own CSS; the widget has no per-device fields for the content inside |
| Scripts | No script field; the widget’s behavior comes from its settings | Runs the scripts you paste |
| Who can use it | Anyone with access to the editor; the Role Manager can limit it | Admins by default, by Elementor’s warning; the Role Manager changes it |
| In Elementor Free | Heading, Text Editor, Image, Video and Button among its free widgets | Yes, in the free widget list |
| From Elementor’s help pages for the HTML, Heading and Text Editor widgets and the Role Manager, and wordpress.org/plugins/elementor/, checked November 9, 2026. | ||
The table reads down to one rule: content someone will change belongs in native widgets, and code nobody edits in the panel belongs in the HTML widget. Each kind has its own definition.
What is a native Elementor widget?
A native Elementor widget is a building block that Elementor ships and edits through its own panel. The Heading widget takes its text in the Title field, a link, and an HTML tag from H1 to H6, Div, Span or Paragraph. Its Style tab sets the alignment, the text color and the typography (elementor.com/help/heading-widget/, checked November 9, 2026). The Text Editor widget uses the TinyMCE editor, which Elementor compares to the classic WordPress visual editor (elementor.com/help/text-editor-widget/, checked November 9, 2026). A client who clicks a native heading changes its words in a field, with no code in sight. The HTML widget works the other way round.
What is the Elementor HTML widget?
The Elementor HTML widget is a widget that places your own code on the page. Elementor’s help page says you can embed HTML, CSS and shortcodes in it and include JavaScript scripts (elementor.com/help/html-widget/, checked November 9, 2026). You enter the code in its text area, and Elementor tries to flag errors in that code. The same page warns that the code can contain malware, so access to the widget is restricted to admins and can be changed in the Role Manager. The help page describes the code field and the Advanced options, and no Style settings. A heading inside the HTML widget has no field of its own, so its words change only in the code. The code-only edit decides when the HTML widget fits.
When should you use the HTML widget?
You should use the HTML widget for code that nobody will edit in Elementor’s panel. Four cases fit it.
- Embed a third-party element, such as a booking calendar or a chat box, with the code its provider gives you.
- Place a badge or a small custom block that stays as it is.
- Add a script that one page needs, inside a script tag.
- Keep a part that the converter keeps as code, such as a data table or a navigation menu with its own script.
Our experience: a page with a hero, a features row, pricing, an FAQ and a footer takes us 3 to 6 hours to rebuild by hand. A page with custom animations takes a full day. We use the HTML widget for a badge or an embed that nobody will edit, never for a whole page.
A whole page pasted into one HTML widget looks right and stays one block in the editor. A converter splits that page between the two kinds.
Which parts of a converted page become native widgets?
The parts of a converted page that become native widgets are its layout, text, buttons, images and icons. AI to Elementor sorts every element of an HTML page into one of three buckets.
| Bucket | What goes there | What you do with it in Elementor |
|---|---|---|
| Native widgets | Containers from sections and flex or grid layouts, headings, text, buttons, images, icons, dividers, YouTube and Vimeo videos, tabs, FAQs and accordions; colors, gradients, Google Fonts loaded with a link tag, CSS variables, Tailwind utility classes; tablet and mobile settings from the page’s @media rules | Edit text, colors, spacing and images in the widget panels |
| Kept as an HTML widget | The page’s CSS in one widget at the top and its scripts as code in one widget at the end; navigation menus and sticky headers, data tables, inline SVG icons (by default; an Image widget with the htel_import_svg_icons filter), iframes other than YouTube or Vimeo, video files, forms on Elementor Free, elements that animate visible text, intricate custom blocks | Edit as HTML; the widget renders as in the original |
| Reduced or not carried over | A carousel arrives with its slides stacked, or whole in an HTML widget when its own script drives it. Content a script builds at runtime (React or Vue sections, canvas) is not in the static HTML. GSAP ScrollTrigger timelines do not bind to Elementor’s page. A stylesheet linked by a path the converter cannot reach is not read. Pages authored in Divi, WPBakery, Beaver or Bricks convert poorly. App logic and backends stay with the app. A whole site does not convert in one step: each conversion takes one page, and a .zip holds that page with its images and CSS. | Put the CSS in a style tag or beside the page in the .zip; save the fully rendered page and convert that; rebuild the interactive parts with Elementor’s own controls; convert the pages one at a time |
| From our AI Guidelines and readme 1.3.51, checked November 9, 2026, and our engine’s code, read October 30, 2026. | ||
The table shows where a converted page’s work lands: most of a well-structured page arrives in the first bucket, a few parts stay as code, and runtime content stays behind. On Elementor Pro, a form with fields the converter maps becomes Pro’s native Form widget, and you set where its submissions go. Tablet and mobile values come from the page’s @media rules, so a page without them gets few or none. On Elementor 4, a converted template imports as classic elements, which Elementor 4 supports alongside its Atomic elements (wp.org readme 1.3.51, checked November 9, 2026). In Elementor 4’s editor, a new Heading element has a General and a Style tab (elementor.com/help/heading-element/, checked November 9, 2026). The classic widgets in a converted template keep their Content, Style and Advanced tabs. The second bucket has its reasons.
Why does the converter keep some parts as HTML widgets?
The converter keeps some parts as HTML widgets because our engine writes no native widget for them that keeps them working as in the original. Inline SVG icons are the exception: they stay markup by default, because saving SVG files is the site owner’s security decision. Navigation menus and sticky headers stay whole, because decomposing a menu into widgets breaks it far more often than it helps, by our AI Guidelines (checked November 9, 2026). Kept whole, the sticky header stays sticky and the mobile menu button works. A form stays an HTML widget on Elementor Free, because the Form widget belongs to Elementor Pro. A data table and an embed from a host other than YouTube or Vimeo have no native widget that our engine writes (our engine’s code, read October 30, 2026). The site owner turns inline SVG icons into Image widgets with the htel_import_svg_icons filter (wp.org readme 1.3.51, checked November 9, 2026). An element that animates visible text stays whole, so the animation keeps running. The page’s CSS and scripts go into HTML widgets of their own, so the page keeps its styles and its scripts run as code.
From our engineering notes: in July 2026 three pages converted to 493, 179 and 422 native elements and still brought two refunds, over “raw HTML not widgets”. The header, footer and navigation had stayed as one HTML widget. Header mode, added in August 2026, converts a header or footer on its own: a template with native buttons on Elementor Free, a site part in the Theme Builder on Elementor Pro. The lesson stands: a page reads as not converted when its menu is a block of code.
On Elementor Pro, a header converted in header mode gets Pro’s Nav Menu widget. A part left as code turns into native widgets by hand, and a whole page turns into them with a converter.
How do you turn an HTML widget into native widgets?
To turn an HTML widget into native widgets, rebuild its content by hand with Elementor’s widgets, or convert its code with AI to Elementor. The rebuild suits a small block. The conversion suits a whole page, and it takes five steps.
- Copy the code out of the HTML widget with the CSS it uses, or take the page’s HTML file with its CSS in a style tag or a .zip.
- Install the free plugin “AI to Elementor — HTML Importer for Elementor” from WordPress.org, with Elementor Free or Pro active and its Flexbox Container feature on.
- Open AI to Elementor → Convert in the WordPress admin, as an administrator or an editor, or as the network administrator on a multisite.
- Paste the HTML, or upload the .html file or the .zip, then enter a template title and click “Convert to Elementor”. For a header or footer on its own, tick “I’m converting a header or footer” first.
- Open the page with the old HTML widget in Elementor, insert the template through the add template icon from your saved templates, and delete the old HTML widget.
The template is listed in Templates → Saved Templates in the WordPress admin, and Elementor’s editor inserts it with Insert (elementor.com/help/template-library/, checked November 9, 2026). The first conversion per website is free and needs no sign-up and no key. The Solo plan then costs $47 a year for 1 domain and 30 conversions a month. Pro costs $79 a year for 3 domains and 100 conversions a month. Agency costs $247 a year for unlimited domains, no monthly cap, up to 50 conversions a day per license key. Every plan carries a 30-day money-back guarantee (aitoelementor.com pricing block, checked November 9, 2026; the daily cap from our Terms §8, checked November 9, 2026). A working setup needs WordPress 6.8 or later, Elementor’s minimum (wordpress.org/plugins/elementor/, checked November 9, 2026), while the plugin itself needs 5.8. The host must allow outbound HTTPS to our API. A site that sets DISALLOW_UNFILTERED_HTML cannot convert pages, because WordPress gives the unfiltered-HTML right to nobody there (readme 1.3.51, checked November 9, 2026). Our complete guide on how to convert HTML to Elementor covers every method, and the other converters with their prices are in our list of the best HTML to Elementor converters. The questions below cover the rest.
Frequently asked questions
Short answers on native widgets and the HTML widget, each from the pages named in the Sources.
Is the HTML widget part of Elementor Free?
Can the HTML widget run JavaScript?
Is a converted page made only of native widgets?
Does AI to Elementor work with Elementor Free?
Try AI to Elementor
Try AI to Elementor on a page held in an HTML widget: the plugin turns its HTML into an editable Elementor template, with native widgets where they map.
The plugin is free to install from WordPress.org. The plans on the AI to Elementor homepage start at $47 a year. The prompt in our AI Guidelines is designed to make an AI tool write HTML that maps to native widgets. Our tool guides show the route from Cursor to Elementor, Codex to Elementor and Google AI Studio to Elementor.
Sources
- HTML widget: HTML, CSS, shortcodes and JS scripts; the code field and error notices; the Advanced options; the malware warning, admins by default, the Role Manager · elementor.com/help/html-widget/ · checked November 9, 2026
- Heading widget: Title, Link, HTML Tag; Content, Style and Advanced tabs; alignment, text color, typography · elementor.com/help/heading-widget/ · checked November 9, 2026
- Text Editor widget: the TinyMCE editor, like the classic WordPress visual editor; Content, Style and Advanced tabs · elementor.com/help/text-editor-widget/ · checked November 9, 2026
- Over 40 free widgets, the HTML widget in the free list, responsive design for desktop, tablet and mobile, WordPress 6.8 as Elementor’s minimum · wordpress.org/plugins/elementor/ (Elementor 4.3.6) · checked November 9, 2026
- AI to Elementor: one free conversion per website, one page per conversion, the .zip with images and CSS, inline SVG icons as markup by default or Image widgets with the htel_import_svg_icons filter, classic elements in Elementor 4, DISALLOW_UNFILTERED_HTML, Elementor Free and Pro, Flexbox Container, Saved Templates, the unfiltered-HTML right and the multisite rule, outbound HTTPS, “Convert to Elementor” · wordpress.org/plugins/aitoel-html-importer/ (readme 1.3.51) · checked November 9, 2026
- Plans and prices · aitoelementor.com/ (pricing block) · checked November 9, 2026
- Daily limit of 50 conversions per license key · aitoelementor.com/terms-and-conditions/ §8 · checked November 9, 2026
- 30-day money-back guarantee · aitoelementor.com/refund/ · checked November 9, 2026
- The three buckets, menus kept whole and why, runtime JavaScript, other builders, the fully rendered page, header mode and the fragment pasted alone · aitoelementor.com/ai-guidelines/ · checked November 9, 2026
- The widgets the engine writes, CSS and scripts in HTML widgets, data tables kept as HTML and layout tables rewritten to containers, iframes, video files, inline SVG icons, tablet and mobile settings, carousels stacked or kept whole, GSAP ScrollTrigger, Pro’s Form widget and Nav Menu widget · our engine’s mainline code and repository · read October 30, 2026
- Backends stay with the app · aitoelementor.com/replit-to-elementor/ · checked October 29, 2026
- Figma files out of scope as an input · our engine’s scope decision of May 22, 2026 · read October 30, 2026
- Inserting a saved template from the editor · elementor.com/help/template-library/ · checked November 9, 2026
- Elementor 4’s Heading element: General and Style tabs · elementor.com/help/heading-element/ · checked November 9, 2026
- Who can use the editor, and limits by role · elementor.com/help/role-manager/ · checked November 9, 2026
- The July 2026 refunds over “raw HTML not widgets” and header mode · our engineering notes · read October 30, 2026
