Adding Animated Headings in Smart Builder

If you've got a unique product or service that provides a unique value to your customers, why shouldn’t your landing page uniquely showcase this?

This article will explain how to install and add the Animated Heading App to your landing page. 

Installing the Animated Heading App

1. Navigate to the Apps tab on the left-hand side of Smart Builder.
2. Search and locate the Animated Heading App.
3. Click the plus button next to Animated Heading to install the app.
4. The Animated Heading app will appear in the Add tab in Smart Builder.

You can now drag and drop the Animated Headings app anywhere on your page. To learn more about drag and drop, see this article: Using Drag and Drop in Smart Builder.  

Adding an Animated Heading to Smart Builder

Follow the steps below to add an Animated Heading to your landing page.

1. Drag and drop the Animated Heading app into a section in Smart Builder. 
2. Animated heading text will appear with the placeholder as New Heading Content:
   
   
   • You may notice that the animated heading “bounces”. Bounce is the default animation effect, one of many you can choose from.
3. Type in your desired heading, and use the Design Settings to update the font size, weight, and style of your heading:
   

Choosing Your Heading Animation

1. Single-click animated heading. 
2. Click the Headline Animationicon at the bottom of text; a dropdown list will appear with all of the animations you can add to your heading.
3. Hover over each option to see a preview of each animation:
   
4. Single-click on the animation you would like to apply to your heading. Your animation will then appear in Smart Builder.
   

Be sure to Save and Publish your page once you’re happy with the changes!

FAQ

Does the Animated Heading appear only on page load or can it trigger on scroll?

Your animated heading will trigger once the element reaches 25% from the bottom of your visitor's screen.

So, an animated heading in your Hero Section (above the fold) will automatically appear once a visitor lands on your page since the heading will be above this line.

If you place an animated heading below the fold, the animation will trigger after the visitor scrolls to allow the element to reach the 25% line. See the gif demo below:

What is the best way to preview my animation?

Heading animations will appear while you're editing your page in Smart Builder, in Preview mode, and on the published version of your page.

The best way to test the animations is to toggle Preview mode on and off within Smart Builder.