1. Documentation
  2. Unbounce Apps
  3. Design Element Apps

Adding Animated Headings in Smart Builder

Follow
Avatar
Meredith
Last Updated

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. You may see a pop-up that appears, explaining that you can swap an element on your page with this App:
    A pop-up on top of Smart Builder explaining that this App is swappable.

To learn more about changing elements, see our documentation: Changing Elements on your Smart Builder Page.

Once you've installed the App, you can apply it to your landing page.

Adding an Animated Heading to Smart Builder

You can replace any element on your page - headings, text, images, etc. - with an Animated Heading.

Do note that an Animated Heading will be denoted as a Heading Level 1 (H1) in the page heading hierarchy, with the only difference being it includes the animation effect you will select.

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

  1. Select the element that you would like to replace with an Animated Heading.
  2. Click the Change Element icon that appears at the bottom of the element.
  3. From the drop-down menu that appears, navigate to the Enhancement tab, and select Animated Heading:
    Change element button highlighted with drop-down list in Smart Builder.
  4. A new Animated Heading will appear with the placeholder as New Heading Content:
    Gif demo of user changing the element to an Animated Heading element
    • You may notice that the animated heading “bounces”. This is because Bounce is the default animation effect, one of many you can choose from.
  5. Click the placeholder New Heading Content and type in your desired heading. 

Now that you have your text in place, you can pick a different heading animation for your page.

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:
    Gif demo of user hovering over different animations options.
  4. Single-click on the animation you would like to apply to your heading. Your animation will then appear in Smart Builder.
    Gif demo of user selecting the 'Fade in Right' animation

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, then the animation will trigger after the visitor scrolls to allow the element to reach the 25% line. See the gif demo below:

Gif demo of an animated heading appearing 25% from below the bottom of the page

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.

Related articles