What is an Animated Heading

The Animated Heading addon is an advanced tool for creating dynamic and visually appealing section headings or titles. This addon offers a high level of customization, allowing you to modify various aspects such as colors, typography, spacing, gradients, padding, margins, and more. Moreover, you can easily adjust the default color, highlight color, and typography settings.

How to Add an Animated Heading

Create a new Row or Column where you want to insert your animated heading. Then navigate to the SP Page Builder sidebar and choose Addons > Animated Heading from the General section. Drag the addon and place it in the row or column according to preference.

How to Access Animated Header Editor

Once you click on the Animated Header addon, the addon editor will open up. You can access all the editing options from here and customize them accordingly.

Animated Header Settings

Animated header settings let you edit and set your headline to fit your needs. Get an advanced editing option to fully customize your animated header.

Animated Header Settings comes with 2 of the following sections:

• Content: For editing your header text.
• Animation: For choosing your animated text behavior from the dropdown menu.

Content

The Content tab lets you choose and customize both your plain text and animated text. It comes with the following options:

Animation Style: Animation style consists of two sub-options:

• Text Animation: Choose to give your text an animated effect.
• Highlighting Animation: Choose to highlight your animated text.

Before Text: Input the first part of your header before the animated text.

Animated Text: Input the text part that you wish to add animated effects on.

After Text: Input the last part of your header after the animated text.

HTML Element: The <h1> to <h6> tags are used to define the HTML headings according to the importance. 

Margin: Create your custom space around your animated header.

Padding: Create your custom space around your animated header inside your row.

Animation

The Animation tab comes with a drop-down menu containing a list of effects that you can choose for your text animation.

Typography Settings

The Typography settings are all about editing your header texts. Adjust your font types, Size, Line Height, Letter Space, Style, and Weight for your Normal, Animated, and Highlighted Text. Learn more about Typography Here.

Color

Color settings let you choose and modify colors for your Text and Animated Text. Learn more about Color Settings here.

Alignment

Choose how your header text is aligned in relation to the rest of the page. Choose from 3 available options Right, Middle, and Left.