Add an Animated Background Image to a CTA

Follow

Objective

In this article, you'll learn how to create an "animated CTA" by setting a GIF to be the CTA's background image. When displayed in your Hub, the background animation will play in a loop, creating an eye-catching CTA that stands out from your Item tiles.

Kapture_2019-06-19_at_12.38.43.gif

 

Prerequisites

To create an animated CTA, you'll need to add custom code to your Hub. We will not provide explicit instruction on how to configure a custom code block, so you should only proceed if you are familiar and comfortable with the Custom Code feature in Uberflip. For more information, see this article.

Before you get started, you will need:

  • The animated GIF you want to use as the background. The GIF you choose must be 1.5 MB in size or smaller. As you won't be able to crop/reposition the image, it should already be in the correct dimensions for the CTA: 330 px high by 250 px wide.
  • The CTA ID of the CTA to which you want to apply the animated background. To get the CTA ID, navigate to the Calls-to-Action section in your Hub and hover your mouse over the CTA — the ID is shown at the bottom of the CTA Tile:
    Fullscreen_2019-06-19__2_46_PM.png
  • You should also make sure to remove any existing background image from the CTA (under the Design section of the CTA Editor).

 

Step 1: Upload the Animated GIF

The first thing you need to do is upload the animated GIF to your Hub using the Image Manager and get its URL.

  1. Log in to your Hub
  2. Click on Images in the left sidebar menu
  3. The Image Manager will appear: here, click on the Upload button
  4. Choose the animated GIF that you want to use and upload it
  5. You'll be returned to the Image Manager, and the GIF you just uploaded should appear at the top of the list
  6. Copy the URL from the URL field for the animate GIF you just uploaded and keep it somewhere you can quickly get at it, as you'll need it again in a moment

 

Step 2: Create the Custom Code Block

The next step is to create a custom code block that will insert the animated GIF as the background image of the CTA.

  1. In your Hub, click on Appearance > Custom Code and either add a new custom code block (with any name/description of your choice), or edit an existing block
    • Make sure the placement of the code block is set to Head
  2. Add the following code snippet to the code block:
    <style>
    /* GIF CTA */
    #hub-cta-[CTA ID GOES HERE] {
    background: url('[URL GOES HERE]') !important;
    background-color: inherit !important;
    background-repeat: no-repeat !important;
    background-origin: padding-box !important;
    background-size: cover !important;
    }
    </style>
  3. For [CTA ID GOES HERE], insert the numerical CTA ID for the CTA to which you want to add the animated background, without the square brackets
    • Example: 123456
  4. For [URL GOES HERE], insert the URL for the animated GIF that you copied from the Image Manager earlier, without the square brackets
    • Example: url('https://content.cdntwrk.com/files/myanimatedgif.gif')
  5. Save and enable the custom code block
  6. The change will take effect immediately, and you can test it by simply viewing any Stream in which the CTA has been placed

 

Additional Notes

If you prefer, you can also host the animated GIF externally, and simply skip Step 1. In Step 2, insert the external URL into the code snippet.

1 out of 1 found this helpful

Comments

0 comments

Please sign in to leave a comment.