Do you want to create a text stroke outline in Elementor? This text effect makes headlines stand out on the page, draws attention to key messaging, and adds visual depth to your typography.
Elementor includes a basic text stroke option in its Heading widget, but the Advanced Typography widget in The Plus Addons for Elementor gives you stroke and fill color control with independent hover state colors, so you can build a text outline-to-fill animation directly in the Elementor editor.
To check the complete feature overview documentation of The Plus Addons for Elementor Advanced Typography widget, click here.
Best Used For:
- Creative agency websites and portfolios that use bold headline typography to reinforce brand identity
- SaaS and service landing pages where hero text needs visual distinction beyond standard font weight
- eCommerce and promotional pages using outlined price figures or badge-style heading accents
Requirement – This widget is a part of The Plus Addons for Elementor, make sure its installed & activated to enjoy all its powers.
To do this, add the Advanced Typography widget to the page and follow the steps –
1. In the Advanced Typography tab, select Normal or Multiple from the Select Option dropdown. Use Normal when applying a stroke style to a single text string. Use Multiple when you want to apply different stroke and fill styles to separate text elements within the same widget.
For this walkthrough, select Normal.
2. In the Text field, add the text you want to display with a stroke outline.
3. Enable the Enable/Disable toggle in the Stroke/Fill Options tab to activate the stroke effect on your text.
Note: In the Multiple option you’ll find the Stroke/Fill Options in each text repeater item.
You will find more style controls in the Stroke/Fill Style tab, under the Style panel.
From the Stroke Width section, set the thickness of the text stroke in pixels. A higher value creates a bolder outline, which works well for large display headings where the stroke needs to be visible at a distance.
For another way to create animated text effects in Elementor, see how to add a text typing effect in Elementor using the Heading Animation widget in The Plus Addons for Elementor.
In the Stroke Color and Fill Color fields, set separate colors for the Normal and Hover states. The stroke color controls the outline around text characters, while the fill color controls the solid color inside each character.
When you set a different fill color for the Hover state, the text transitions from an outlined look to a fully filled look as the visitor hovers over it. This creates a text stroke-to-fill animation that works well for call-to-action headings and feature highlight text.
To style multiple words with different stroke and fill settings within the same widget, see how to combine multiple text styles in Elementor using the Advanced Typography widget.
This is how you can create a text stroke outline in Elementor using The Plus Addons for Elementor.
Suggested Reading: How to Add Vertical Text in Elementor?
