Advanced Typography

< All Topics

Typography also known as Fonts are a very useful element in Web Design. The right selection of a font, its size, weight, layout, and alignment is very important for the page appearance. There are two main types of fonts which are widely used, they are Serif and Sans Serif fonts.

Using Advanced Typography widget, you can create advanced typography such as Knockout Text, Magicscroll Typography, Text Blend Mode, Arc typography, Circular Text, Underline to hover styles, Shadow 3d typography, Vertical Text & Stroke Typography.

Pro tip
Typography is a very crucial aspect of your website overall look and aesthetics. Don’t go overboard by using too many types of fonts for your website, they will make your website look horrible. It is recommended not to use more than two different font families for your website.

How to use the Advanced Typography Widget of The Plus Addons For Elementor

The Advanced Typography widget comes with different styles and a plethora of customization options using which you can create stylish looking typography for your websites.

Table Of Contents

General Steps

Search for the Advanced Typography element from the Elementor screen in the left and then drag and drop it into the content building area. After dropping the element, you will see three tabs i.e. Content, Style, and Advanced related to the Advanced Typography widget. First, click on the Content tab.

1. Content

Advanced Typography (Normal)

Select Option

Select the option here for Advanced Typography. You can select Normal or Multiple. Based on your selection, you will see options to configure the widget.

Text

Enter the text here.

Alignment

Select alignment of your text entered above.

Text Direction

Vertical Text

Select the vertical text style. The options given here are Normal, Right to Left and Left to Right.

Vertical Letters

Slide to show Vertical Letters.

Vertical Direction

Set the Vertical Direction here.

Transform Normal

Enter the Transform Normal code here.

Transform Hover

Enter the Transform Hover code here.

Transform Origin

Set the transform Origin position here.

Stroke/Fill Options

Enable/Disable

Enable and set the Stroke/Fill options.

Circular Text

Enable/Disable

Enable and set the Circular Text options.

Background Based Blend Mode

Enable/Disable

Enable and set the Background Based Blend Mode options.

Knockout Text

Enable/Disable

Enable and set the Knockout Text options.

On Hover Image Reveal

Enable/Disable

Enable and set the On Hover Image Reveal options.

Marquee

Enable/Disable

Enable and set the Marquee options.

Advanced Options

Link

Add a link to your text here.

2. Style

The Style tab is used for customizing the look of all the Advanced Typography widget components which are listed below.

Advanced Typography

Set the Typography, Padding, Color, Text Shadow, and CSS filters for the Advanced Typography here.

Stroke/Fill Style

Set the Stroke Width, Color, Stroke Color, Text Fill Color, and Fill Color here.

Continuous Animation

Enable and customize the Continuous Animation style here.

Advanced Underline Options

Set the Underline style, Underline line, and Line color over here.

On Scroll View Animation

On Scroll View Animation Options are used to set beautiful animations to your sections. They are a common option for almost all the widgets. So, we have written a detailed tutorial explaining how to use these options.

View On Scroll View Animation Tutorial

3. Advanced

Advanced Tab Options are common across all the widgets. So, we have written a detailed tutorial explaining how to use these options

View The Advanced Tab Tutorial

Do you want to rate this article?
0 out of 5 stars
5 Stars 0%
4 Stars 0%
3 Stars 0%
2 Stars 0%
1 Stars 0%
How can we improve this article?
Please submit the reason for your vote so that we can improve the article.
Need help?