How to Create Text Stroke Outline in Elementor?

Want hollow, outlined headline text that fills with color on hover?

The Stroke/Fill Options of the Advanced Typography widget from The Plus Addons for Elementor draw an outline around the letters, with separate stroke and fill colors for normal and hover.

To check the complete feature overview documentation of The Plus Addons for Elementor Advanced Typography widget, click here.

Requirement – This widget is a part of The Plus Addons for Elementor, make sure it’s installed & activated to enjoy all its powers.

Before You Start

• Edition: Pro — The Advanced Typography widget needs The Plus Addons for Elementor Pro. In the free plugin it shows in the Elementor panel with a lock icon.
• Widget to enable: Advanced Typography, switched on under The Plus Addons > Widgets.

Steps

1. Add the Advanced Typography widget, keep Select Option on Normal and type your text.
2. Open Content > Stroke/Fill Options and turn on Enable/Disable. The text becomes outlined right away.

3. Go to Style > Stroke/Fill Style and set the Stroke Width.
4. On the Normal tab, set the Stroke Color (Classic or Gradient) and, if you want, a Fill Color.
5. On the Hover tab, set a Fill Color to fill the letters when the mouse is over them.

How It Behaves

• With no styling, the outline is 2 px dark gray (#313131) and the letters are transparent.
• Style > Stroke/Fill Style appears only while Stroke/Fill Options is on.
• A hover Fill Color turns the outline into solid text on hover.
• In Multiple mode, each item has its own Stroke/Fill Options, so you can outline a single word.

Related Docs

• Advanced Typography widget: settings overview
• Combine multiple styles on a text
• Add vertical text