Heading Animation

Heading Animation

Heading animation is a UI block used to create heading titles or headlines with animation.

A catchy or visually attractive headline is very much important to bring the reader in view. An animation attracts the user to catch someone’s eye and get them to read anything that follows the headline.

Pro tip
Use numbers along with animated title for any advertisement. It works with double impact.

How to use the Heading Animation Block of The Plus Addons For Gutenberg

The Anything Heading Animation is an advanced block and needs to be set up properly. Let’s understand how to use this block in the tutorial below. 

Configuration for Heading Animation

We provide two types of heading animation, highlights which displays highlighted words and another one is text animation which provides multiple words support for animation of text. Choose the right one for you and place content accordingly.

Table Of Contents

Setting up

Gutenberg gives multiple ways to add Heading Animation into the content building area or we say playground. Check for the “+” icon in the top toolbar or click the “+” icon in the content area or start typing Heading Animation after “/” sign, eg.“/Heading Animation”, in the content area. Gutenberg also provides drag & drop after opening the list of blocks panel.

After placing the block you’ll see three tabs on the right editing panel containing “Layout”, “Style” and “Advanced”. Go and start with the Layout tab.

1. Layout

Content

Type

We have provided two types of heading animations. One is Highlights which supports highlighting animation for a single word and another one is text animation which provided multiple words support for text animations.

Highlights Style

Select the word highlighting style you prefer from the list.

Animation Style

Select text animation style you prefer from the list.

Prefix Content

A word or sentence is going to be placed before animated word/ s.

Highlighted Content

A word that is going to be animated in type Highlights.

Labels

A repeater field that takes a single word per input & will be used for text animation content.

Postfix Content

A word or sentence which is going to be placed after animated word/ s.

Layout

Alignment

Alignment of content into left, center or right direction.

2. Style

The Style tab is used for customizing the appearance of all the Heading Animation components. All these styling options include customizing the fonts, colors, background, margins and padding which are common across all the blocks. So, we have created a single detailed article explaining these Styling Options.

View The Style Tab Article

Prefix and Postfix

Typography

Assign a size, weight, spacing and much more to fonts.

Color

A color picker to assign a suitable color to the prefix & postfix content.

Animated Text

Typography

Assign a size, weight, spacing and much more to fonts.

Color

A color picker to assign a suitable color to the animated text.

Highlight Animation

Animation Duration

A timing input to assign animation time duration.

Stroke Width

An input to assign a width to the highlighter SVG.

Stroke Color

An input to assign a color to the highlighter SVG.

3. Advanced

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

View The Advanced Tab Tutorial

Was this article helpful?
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.