---
title: "How to Create Text Stroke Outline in Elementor?"
url: https://theplusaddons.com/docs/create-text-stroke-outline-in-elementor/
date: 2024-05-15
modified: 2026-05-23
lang: en
author: "Aditya Sharma"
description: "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..."
image: https://theplusaddons.com/wp-content/uploads/2024/05/How-to-Create-Text-Stroke-Outline-in-Elementor_-1024x536.jpg
word_count: 505
---

# How to Create Text Stroke Outline in Elementor?

## 

- Utilizes the Advanced Typography widget from The Plus Addons for Elementor to create text stroke outlines.
- Enables stroke options by toggling the Enable/Disable switch in the Stroke/Fill Options tab.
- Adjusts stroke width and colors for normal and hover states in the Stroke/Fill style tab.

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](https://theplusaddons.com/docs/advanced-typography/) 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](https://theplusaddons.com/docs/advanced-typography/).*

**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.***

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/advanced-typography-for-elementor/)

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.

![](https://theplusaddons.com/wp-content/uploads/2024/05/advanced-typography-stroke-fill-option-enable.gif)

> *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.

![](https://theplusaddons.com/wp-content/uploads/2024/05/advanced-typography-stroke-fill-style.gif)

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](https://theplusaddons.com/docs/add-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](https://theplusaddons.com/docs/multiple-styles-on-a-text-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.

![](https://theplusaddons.com/wp-content/uploads/2024/05/advanced-typography-stroke-fill-option-demo.gif)

***Suggested Reading***: *[How to Add Vertical Text in Elementor?](https://theplusaddons.com/docs/add-vertical-text-in-elementor/)*