--- title: "Advanced Typography Widget: Settings Overview" url: https://theplusaddons.com/docs/advanced-typography/ date: 2024-05-15 modified: 2026-03-31 author: "Aditya Sharma" description: "Typography plays a crucial role in the success of any website design. It not only affects the overall appearance of the website but also contributes to the readability and user..." image: https://theplusaddons.com/wp-content/uploads/2024/05/Advanced-Typography-Widget_-Settings-Overview-1024x536.jpg word_count: 701 --- # Advanced Typography Widget: Settings Overview Typography plays a crucial role in the success of any website design. It not only affects the overall appearance of the website but also contributes to the readability and user experience. Adding different effects to texts can add a touch of creativity to your design. With the Advanced Typography widget from The Plus Addons for Elementor, you can add different types of effects to text. ### Check the Live Widget Demo [LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/advanced-typography-for-elementor/) ## Required Setup - [Elementor FREE Plugin](http://wordpress.org/plugins/elementor/) installed & activated. - You need to have [The Plus Addons for Elementor plugin](https://wordpress.org/plugins/the-plus-addons-for-elementor-page-builder/) installed and activated. - This is a Premium widget, and you need the [PRO version of The Plus Addons for Elementor.](https://theplusaddons.com/pricing//?utm_source=tpae&utm_medium=docs&utm_campaign=text) - Make sure the Advanced Typography widget is activated, to verify this visit The Plus Addons → Widgets → and Search for Advanced Typography and activate. ## Learn via Video Tutorial: https://youtu.be/_zdX4iGcbtA ## How to Activate the Advanced Typography Widget? Go to  - **The Plus Addons **→** Widgets ** - **Search **the widget name** **and** turn on the toggle.** ![](https://theplusaddons.com/wp-content/uploads/2024/05/advanced-typography.png) ## Key Features - **Single/Multiple Text **- You can [add unique text effects to single or multiple texts](https://theplusaddons.com/docs//mulitple-styles-on-a-text-in-elementor/). - **Vertical Text **- You can [add a ](https://theplusaddons.com/docs/add-vertical-text-in-elementor/)[vertical ](https://theplusaddons.com/docs/add-vertical-text-in-elementor/)[text](https://theplusaddons.com/docs/add-vertical-text-in-elementor/). - **Text Stroke** - You can [add a text stroke outline effect](https://theplusaddons.com/docs/create-text-stroke-outline-in-elementor/). - **Circle Text** - You can easily [create a circle text effect](https://theplusaddons.com/docs//create-circular-text-in-elementor/). - **Text Blend** - You can [add a text blend effect on a background](https://theplusaddons.com/docs//add-elementor-background-text-blend-mode/). - **Marquee Text** - You can easily [add a marquee text effect](https://theplusaddons.com/docs/marquee-text-effect-in-elementor/). - **Text Mask** - You can [add a text mask over a background color or image](https://theplusaddons.com/docs//text-mask-effect-in-elementor/). - **Image Reveal on Hover** - You can [add an image reveal effect on hover in text](https://theplusaddons.com/docs/image-reveal-effect-on-text-in-elementor/). ## How to Use the Advanced Typography in Elementor? Add the Advanced Typography widget to the page. ### Advanced Typography From the **Select Option** dropdown, you have to select the text type. Here you’ll find two options -  - **Normal** - For adding effect on a single text. - **Multiple** - For adding different effects on multiple texts. Using this option, you can [create an impression of having multiple effects on a single text or paragraph](https://theplusaddons.com/docs//mulitple-styles-on-a-text-in-elementor/). Select the option as per your requirements, let’s select Normal here. ![](https://theplusaddons.com/wp-content/uploads/2024/05/advanced-typography-normal.gif) > *Note: For the Multiple text option, you’ll only see one tab and all the options are included inside the repeater item.* In the **Text** field, you have to add your text.  From the **Tag** dropdown, you can change the HTML tag of the text. Then from the **Alignment** section, you can align the text for different devices. ### Text Direction From this tab, you can [create vertical text](https://theplusaddons.com/docs/add-vertical-text-in-elementor/). ![](https://theplusaddons.com/wp-content/uploads/2024/05/advanced-typography-text-direction.png) ### Stroke/Fill Options From this tab, you can [create an outline text effect](https://theplusaddons.com/docs/create-text-stroke-outline-in-elementor/). ![](https://theplusaddons.com/wp-content/uploads/2024/05/advanced-typography-stroke-fill-option.png) ### Circular Text From this tab, you can [create a circle text effect](https://theplusaddons.com/docs//create-circular-text-in-elementor/). ![](https://theplusaddons.com/wp-content/uploads/2024/05/advanced-typography-circular-text.png) ### Background based Blend Mode From this tab, you can [add a text blend effect on a ](https://theplusaddons.com/docs//add-elementor-background-text-blend-mode/)[background](https://theplusaddons.com/docs//add-elementor-background-text-blend-mode/). ![](https://theplusaddons.com/wp-content/uploads/2024/05/advanced-typography-background-based-blend-mode.png) ### Knockout Text From this tab, you can [create a text mask on a background color or image.](https://theplusaddons.com/docs//text-mask-effect-in-elementor/) ![](https://theplusaddons.com/wp-content/uploads/2024/05/advanced-typography-knockout-text.png) ### On Hover Image Reveal From this tab, you can [add an image reveal effect on hover.](https://theplusaddons.com/docs/image-reveal-effect-on-text-in-elementor/) ![](https://theplusaddons.com/wp-content/uploads/2024/05/advanced-typography-on-hover-image-reveal.png) ### Marquee From this tab, you can [add a marquee text effect](https://theplusaddons.com/docs/marquee-text-effect-in-elementor/). ![](https://theplusaddons.com/wp-content/uploads/2024/05/advanced-typography-marquee.png) ### Advanced Options In the **Link** field, you can add a link to the text. ![](https://theplusaddons.com/wp-content/uploads/2024/05/advanced-typography-advanced-options-1.png) ## How to Style the Advanced Typography Widget? You’ll find all the styling options in the Style tab to style the Advanced Typography widget. **Advanced Typography** - From here, you can manage the text typography and padding. You can also add different text colors, text shadows and CSS filters to the text for normal and hover states. ![](https://theplusaddons.com/wp-content/uploads/2024/05/advanced-typography-style.png) **Continuous Animation** - You’ll see this tab only for the Normal text. From here, you can add different continuous animations to the text. You can also set the animation to hover only as well. ***Also Read***: *[How to Create an Animated Rotating Circle Text in Elementor?](https://theplusaddons.com/docs//animated-rotating-circle-text-in-elementor/)* **Advance Underline Options** - You’ll see this tab only for the Normal text. From here, you can [add unique underline effects to the text](https://theplusaddons.com/docs/underline-overlay-effect-on-text-in-elementor/). **On Scroll View Animation** -  This is our global extension available for all our widget, this adds scrolling animation as the widget comes in viewport. You can learn more about this from here. [Learn more about On Scroll View Animation](https://theplusaddons.com/docs//on-scroll-view-animation/) Advanced options remain common for all our widget, you can explore all it options from here. [View Advanced Tab Tutorial](https://docs.posimyth.com/tpae/advanced-tab/?_gl=1*1ddxxa0*_ga*NDA4ODUyMjYwLjE3MDEyMzIxNzE.*_ga_WXCC3REEFQ*MTcxNjQ1OTY0My40MzcuMS4xNzE2NDU5NzMyLjYwLjAuMA..)