---
title: "How to Combine Multiple Styles on a Text in Elementor?"
url: https://theplusaddons.com/docs/multiple-styles-on-a-text-in-elementor/
date: 2024-05-15
modified: 2026-04-09
author: "Aditya Sharma"
description: "Are you looking to add different styles to a text in Elementor? Adding different styles to text, allows you to customize and enhance the appearance of your website's content. With..."
image: https://theplusaddons.com/wp-content/uploads/2024/05/How-to-Add-Different-Styles-on-a-Text-in-Elementor_-1-1024x536.jpg
word_count: 489
---

# How to Combine Multiple Styles on a Text in Elementor?

## Key Takeaways

- The Plus Addons for Elementor includes the Advanced Typography widget for adding different styles to text.
- The Advanced Typography widget allows users to apply effects like Knockout Text and On Hover Image Reveal.
- Users can customize typography, padding, and color for both normal and hover states using the Advanced Typography widget.

Are you looking to add different styles to a text in Elementor? Adding different styles to text, allows you to customize and enhance the appearance of your website's content.

With the Advanced Typography widget from The Plus Addons for Elementor, you can easily add different styles to a text in Elementor.

*To check the complete feature overview documentation of The Plus Addons for Elementor Advanced Typography widget, [click here](https://theplusaddons.com/docs//advanced-typography/).*

***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 **Multiple** from the **Select Option** dropdown.

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

2. In the **Text Listing** section you’ll find two repeater items by default. Here you can split a text into parts by adding them to different repeater items. Open one item. 

3. In the **Text** field, you have to add the text.

From the **Url/Link** field, you can add a link to the text.

Then in the **Extra Options** section, you’ll find different options to style the text.

- **Stroke/Fill Options** - From this toggle, you can [add a text stroke outline](https://theplusaddons.com/docs/create-text-stroke-outline-in-elementor/).

- **Background based Blend Mode** - From this toggle, you can [add a text blend mode](https://theplusaddons.com/docs//add-elementor-background-text-blend-mode/).

- **Knockout Text** - From this toggle, you can [add a text mask](https://theplusaddons.com/docs//text-mask-effect-in-elementor/).

- **On Hover Image Reveal** - From this toggle, you can [add an image reveal effect on text](https://theplusaddons.com/docs/image-reveal-effect-on-text-in-elementor/).

- **Marquee** - From this toggle, you can [add a marquee text effect](https://theplusaddons.com/docs/marquee-text-effect-in-elementor/).

- **Magic Scroll** - From this toggle, you can [add a scrolling effect to the text](https://theplusaddons.com/docs/magic-scroll-effect-to-text-in-elementor/).

- **Mouse Move Parallax** - From this toggle, you can [add a mouse move parallax effect to the text](https://theplusaddons.com/docs//add-mouse-move-parallax-effect-on-text-in-elementor/).

- **Continuous Animation** - From this toggle, you can [add continuous animation to the text](https://theplusaddons.com/docs//animated-rotating-circle-text-in-elementor/).

- **Advance Underline Options** - From here, you can [add unique underline text effects](https://theplusaddons.com/docs/underline-overlay-effect-on-text-in-elementor/).

Then from the **Typography** tab under the **Typography Style** section, you can edit the typography of the text.

- **Typography** - From here, you can edit the text typography.

- **Padding** - From here, you can add padding to the text.

- **Transform Normal** - From here, you can add custom [transform CSS](https://www.w3schools.com/cssref/css3_pr_transform.php) to transform the text for the normal state.

- **Transform Hover** - From here, you can add custom [transform CSS](https://www.w3schools.com/cssref/css3_pr_transform.php) to transform the text for the hover state.

- **Advanced Style** - From this toggle, edit the text width, horizontal and vertical alignment.

From the **Normal** and **Hover** tab, you can manage and add color, text shadow and CSS filter to the text for normal and hover states. 

Following this process, you can edit and add different styles to the text of the other item.

You can click on the **+ Add Item** button to add more text.

Then from the **Alignment** section, you can align the text.

This is how you can add different styles to the text. 

![](https://theplusaddons.com/wp-content/uploads/2024/05/advanced-typography-multiple-demo-1.png)

## Frequently Asked Questions

**Q: What should I do if the Advanced Typography widget is not showing up in Elementor?**
A: Ensure that The Plus Addons for Elementor is installed and activated. This widget is a part of that plugin, and without it, you won't have access to the Advanced Typography features. If it's installed but still not showing, check for any plugin conflicts or ensure you are using a compatible version of Elementor.

**Q: Can I use the Advanced Typography widget for creating a marquee text effect?**
A: Yes, the Advanced Typography widget allows you to add a marquee text effect. This feature can enhance the visibility of important messages on your site. To enable it, simply toggle the Marquee option in the Extra Options section of the widget settings.

**Q: What are the best practices for styling text with multiple styles in Elementor?**
A: When using the Advanced Typography widget, itu2019s best to split your text into different repeater items for varied styles. This allows you to apply unique typography, colors, and effects to each part. Also, consider using the Stroke/Fill Options and Background Blend Mode to create visually engaging text that stands out.

**Q: Does the Advanced Typography widget support hover effects?**
A: Yes, it supports hover effects, allowing you to add custom transform CSS for both normal and hover states. This is useful for creating interactive text that responds to user actions, enhancing user engagement on your site.

**Q: What happens when I add a text mask using the Advanced Typography widget?**
A: Adding a text mask creates a visually striking effect where the text appears to reveal an image behind it. This can be particularly effective for headers or call-to-action sections. You can enable this feature by toggling the Knockout Text option in the widget settings.

**Q: Are there limitations when using multiple styles on text in Elementor?**
A: While the Advanced Typography widget provides extensive styling options, it's important to manage performance. Using too many effects, like continuous animations or parallax, can slow down page load times. Always test your siteu2019s performance after adding multiple styles to ensure a smooth user experience.