Advanced Typography Widget: Settings Overview

Updated on May 27, 2024 by Ananda
Table Of Content

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

Required Setup

Learn via Video Tutorial:

How to Activate the Advanced Typography Widget?

Go to 

  • The Plus Settings Plus widgets 
  • Search the widget name and turn on the toggle then click Save.

Advanced typography activate advanced typography widget: settings overview from the plus addons for elementor

Key Features

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 – 

Select the option as per your requirements, let’s select Normal here.

Advanced typography normal advanced typography widget: settings overview from the plus addons for elementor

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.

Advanced typography text direction advanced typography widget: settings overview from the plus addons for elementor

Stroke/Fill Options

From this tab, you can create an outline text effect.

Advanced typography stroke fill option advanced typography widget: settings overview from the plus addons for elementor

Circular Text

From this tab, you can create a circle text effect.

Advanced typography circular advanced typography widget: settings overview from the plus addons for elementor

Background based Blend Mode

From this tab, you can add a text blend effect on a background.

Advanced typography background based blend mode advanced typography widget: settings overview from the plus addons for elementor

Knockout Text

From this tab, you can create a text mask on a background color or image.

Advanced typography knockout advanced typography widget: settings overview from the plus addons for elementor

On Hover Image Reveal

From this tab, you can add an image reveal effect on hover.

Advanced typography on hover image reveal advanced typography widget: settings overview from the plus addons for elementor

Marquee

From this tab, you can add a marquee text effect.

Advanced typography marquee advanced typography widget: settings overview from the plus addons for elementor

Advanced Options

In the Link field, you can add a link to the text.

Advanced typography advanced options 1 advanced typography widget: settings overview from the plus addons for elementor

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.

Advanced typography style advanced typography widget: settings overview from the plus addons for elementor

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.

Advance Underline Options – You’ll see this tab only for the Normal text. From here, you can add unique underline effects to the text.

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

Advanced options remain common for all our widget, you can explore all it options from here.

View Advanced Tab Tutorial

OR
Get Free 25+ Secrets to Make Elementor Website Faster [Guaranteed Results]



    Subscribe to our YouTube Channel for Elementor Tutorials
    New Video Every Week!
    Automatically Convert Figma Designs to 100% Editable Elementor Website
    X