Atomic Element · Free
Put your client's accent colour on one word, add a footnote mark or a link, and keep it all in a single heading element. Free, and built for Elementor 4.
The short answer
The Elementor advanced heading widget from Animation Addons is an Elementor 4 Atomic Element that formats single words inside one heading. Bold, italic, underline, strikethrough, superscript, subscript, links and per-word colour with opacity come from a toolbar in the panel, and the heading renders on any tag from H1 to span.
Why not Elementor's own Heading? Its canvas toolbar has no colour button, so a two-colour headline means custom CSS or two elements glued together. The Advanced Heading keeps the accent word and its colour in one element. The trade-off: you type in the panel, not on the canvas.
Many "Elementor V4 compatible" addons are classic v3 widgets running inside Elementor 4. The Advanced Heading is a real Atomic Element that takes Classes and Variables like Elementor's own Heading.
| Plan | Free |
|---|---|
| Element type | Native Elementor 4 Atomic Element (single element, no children) |
| Works with | Elementor Free and Elementor Pro, Atomic Editor on |
| Formatting toolbar | Bold, Italic, Underline, Strikethrough, Superscript, Subscript, Link, Text colour, Opacity / colour code, Clear formatting |
| HTML Tag | H1, H2, H3, H4, H5, H6, div, p, span |
| Styling | Elementor 4 Style tab, Classes and Variables; the plugin ships no stylesheet for this element |
| Animations | Text Animation and Regular Animation (Pro extensions) |
| Responsive | Every Style tab value can be set per breakpoint |
| Limit | Text is edited in the panel's Content box, not inline on the canvas |
| Plugin version | Animation Addons for Elementor 4.3 · Last updated October 2026 |
Demo variations
Ideas you can build today with the Advanced Heading and native Elementor 4 elements. Cards marked Pro add an Animation Addons Pro extension or element; the rest work on the free plugin.
A left-aligned H1 in near-black over a product screenshot; the last two words bold and teal.
A centred price card; a small raised "1" after the price jumps to the terms under the card.
#terms) on the "1"; HTML Tag H3; the terms are an Elementor Paragraph with the ID terms.Two H2s on dark blue with digits set below the line and one word in aqua.
A cream banner; one phrase struck through in grey, the replacement in bold terracotta, above an "Order for Saturday" button.
An oversized serif statement on off-white; the second sentence fades back to 40% opacity.
A narrow H2 on a white card; only the report name is an underlined navy link.
Features
Every option below is a real control in the Advanced Heading panel or part of how the element renders. Nothing here needs custom code.
The Text colour swatch colours the selected words only. Opacity / colour code opens a row where you paste an exact hex or set transparency, so brand guides with tints are matched exactly.
Six one-click formats plus Link sit in the Content toolbar, so a footnote anchor never forces you to split a headline into three elements. Clear formatting resets the selection when a client changes their mind.
HTML Tag offers H1–H6, div, p and span. Choose the level your page outline needs, then style it freely in the Style tab.
If you type a block tag such as <h2> or <p> into the Content, the wrapper switches to div automatically. A heading inside a heading would make the browser push your text outside the element; this prevents it.
Allowed tags such as <mark>, <small>, <code>, <abbr> and <br> render as real elements with their class, id and style. Tags outside the list stay visible as text, so you can see they were not applied.
Built on the atomic base
Why it mattersOne Class styles every heading on the site while the exceptions live inside the text. The only base style is margin: 0, as on Elementor's Heading, so the two swap without spacing jumps.
Step by step
Six steps, from installing the plugin to publishing the page. The bold names are the exact labels you will see in the Elementor 4 panel.
Download freeInstall and activate Animation Addons for Elementor, then open a page in Elementor with the Atomic Editor on.
In the Elements panel, find Advanced Heading under the Animation Addons Atomic Elements and drag it onto the canvas.
In the Heading section, choose the HTML Tag, for example H1 for the page title.
Type your text in the Content box. Select a word and use the toolbar for Bold, Link, Superscript or Text colour.
Open the Style tab to set font, size and base colour, or apply your existing heading Class.
Check tablet and mobile, then publish.
Honest comparison
What each option has, side by side. We list where the other choice is the better fit, too.
| Feature | Elementor Atomic Heading | Animation Addons Advanced Heading |
|---|---|---|
| Requires Elementor Pro | No | No |
| Native Atomic Element with Classes and Variables | Yes | Yes |
| Where you edit the text | Inline, on the canvas | In the panel's Content box |
| Bold, italic, underline, strikethrough, sub/superscript, inline links | Yes, from the canvas toolbar | Yes, from the panel toolbar |
| Per-word colour with opacity | No colour option in the toolbar | Yes |
| Link on the whole heading | Yes, Link setting | No, link the text from the toolbar instead |
Compared with Elementor 4.3.3 (September 2026).
Elementor's Heading is better for typing on the canvas or linking the whole heading. Pick the Advanced Heading when one headline needs two colours or a footnote mark.
Who it's for
The people who get the most out of it, and what they use it for.
Matching brand guides that call for an accent word in every headline.
Writing pricing headings with footnotes and links.
Who want two-colour headings without custom CSS.
FAQ
Add the Advanced Heading from Animation Addons for Elementor, type the heading, select the word and click Text colour in the Content toolbar. Only that word changes; the rest keeps the Style tab colour. The Opacity / colour code button sets an exact hex or transparency. It works on Elementor Free with no custom CSS or second widget.
No. The Animation Addons Advanced Heading is edited in the panel's Content box, where the formatting toolbar lives, and the canvas updates as you type. Elementor's canvas inline editor only attaches to its own core elements, so if typing on the canvas matters more than per-word colour, use Elementor's Heading for that headline.
Yes. The Advanced Heading is part of the free Animation Addons for Elementor plugin and runs on Elementor Free with the Atomic Editor on. Every formatting option is free. Text Animation and Regular Animation, which move the heading on load or scroll, are optional Animation Addons Pro extensions.
No. The Animation Addons Advanced Heading ships no stylesheet and no script of its own; it outputs one heading tag with inline formatting. Script only loads if you add a Pro animation, and Pro's Lazy Animation setting loads the animation library when the animated element nears the viewport.
Yes. The Animation Addons Advanced Heading renders a real H1–H6 tag with the text in the HTML, so search engines and screen readers read the full sentence, coloured words included. Bold, colour or superscript do not change the heading level. Keep one H1 per page and check contrast on the accent word.
Yes, with Animation Addons Pro. The Text Animation extension animates the Advanced Heading by character or word, or with Text Move, Text Reveal, Text Scale and Text Invert effects, on page load, on scroll or with scroll. Regular Animation adds presets such as Classic Fade Up. Pro also includes Reduced Motion controls.
More answers in the FAQ · Documentation · Free vs Pro
Pairs well with
Elements that work well with the Advanced Heading on the same page or template.
Free on Elementor Free. Add Pro Text Animation when you want the words to move.