How To Use The Animated Heading Widget By Atomic Addons

The Animated Heading widget by Atomic Addons builds a heading from three parts: fixed text before, animated words in the middle and fixed text after, as in “Hello I am Creative Designer”. The middle words can swap with an animation, type themselves out and delete again, or the whole heading can build up piece by piece. This guide covers adding the widget, writing the heading and setting up each animation.

Enable the Animated Heading Widget

Animated Heading is a Pro widget and needs Atomic Addons Pro. Switch it on from the plugin dashboard:

1. 1

   Go to WordPress Dashboard → Atomic Addons.

2. 2

   Click the Widgets tab.

3. 3

   Search for Animated Heading. You can also open the Creative category.

4. 4

   Turn the Animated Heading widget on.

5. 5

   Click Save Settings.

Add the Animated Heading Widget

1. 1

   Open the page in Elementor (Edit with Elementor).

2. 2

   In the widget panel, search for Animated Heading. The widget sits in the Atomic Addons Pro category.

3. 3

   Drag it into the page and set it up with the controls below.

4. 4

   Click Publish (or Update).

Heading

Open the widget and go to Content → Heading:

1. 1

   Layout: Animated (the default) shows one of the middle words at a time and swaps them with an animation. Typed types each word out letter by letter, deletes it and types the next. Split Text shows the whole heading and animates it in, letter by letter, word by word or line by line.

2. 2

   Prefix Heading: The text before the animated words, “Hello I am” by default.

3. 3

   Heading: The animated words, separated by commas, such as Creative,Smart,Fast. The default is Animated,Morphing,Awesome. With Split Text, the words show as one phrase, with a space after each comma.

4. 4

   Post Heading: The text after the animated words, “Heading” by default.

5. 5

   Link: Makes the whole heading a link.

6. 6

   HTML Tag: The heading's markup: H1 to H6, div, span or p. H2 by default.

7. 7

   Alignment: Left, center (the default) or right, per screen size.

The three text fields accept dynamic tags. Leave the prefix or post heading empty to show only the animated words. Each animation starts once the heading scrolls into view.

Animated and Typed Settings

For the Animated and Typed layouts, the animation settings are on the Style tab, in the Animation section. With Animated:

1. 1

   Animation: How each word enters, chosen from Elementor's entrance animations: Fade In by default, or others such as Bounce In, Slide In Up or Zoom In.

2. 2

   Animation Duration: Normal, Slow or Fast: how long the entrance takes.

3. 3

   Animation Delay (ms): How long each word stays before the next one comes in, 2500 milliseconds by default (100 to 7000).

With Typed:

1. 1

   Type Speed: Milliseconds per typed letter, 60 by default. A lower number types faster.

2. 2

   Start Delay: Milliseconds before typing starts, 1 by default.

3. 3

   Back Speed: Milliseconds per deleted letter, 30 by default.

4. 4

   Back Delay (ms): How long a finished word stays before it is deleted, 500 milliseconds by default.

5. 5

   Loop: On by default: starts again from the first word after the last one. Turn it off to stop on the last word.

6. 6

   Loop Count: With Loop on: how many times the words run through. 0, the default, repeats forever.

Split Text

With the Split Text layout, Content → Spilt Text sets the animation. The pieces of the heading start invisible, turned and moved down, and fall into place one after another:

1. 1

   Animation On: What moves as one piece: Chars (each letter), Words (the default) or Lines.

2. 2

   Animation Options: Click the pencil icon to open the fine settings below. Every slider has a default, used while it is empty.

3. 3

   Perspective: The depth of the 3D turn: lower numbers make it more dramatic. 400 by default (50 to 400).

4. 4

   Transition Duration: The delay between one piece starting and the next, 0.1 seconds by default. Each piece takes half a second to settle.

5. 5

   Scale: The size each piece starts at, growing to its normal size. 0 by default, so the pieces grow from nothing.

6. 6

   rotationY: How far below its place each piece starts, in pixels, 80 by default. Negative numbers start it above.

7. 7

   rotationX: How far each piece is turned around its horizontal axis when it starts, in degrees. 180 by default.

8. 8

   Transform Origin: The point each piece turns around, 0% 50% -50 by default.

9. 9

   Animation Repeat: Plays the animation again every time the heading scrolls back into view. Off by default, so it plays once.

Visitors who have reduced motion turned on in their system settings see the heading without animation: Animated and Typed show the first word.

Style the Animated Heading

Everything below is on the Style tab. Sections that belong to a part you left empty are hidden.

• Heading — color, typography, text stroke and text shadow for the heading. Text Gradient Color (not with Split Text) fills the animated words with a gradient, dark gray to mid gray by default; change the two colors and the angle below it.
• Pre Heading and Post Heading — text color, typography, text stroke and shadow for the text before and after the animated words.