Create an animated CTA tile

---

Learn how to set an animated GIF as a CTA's background image to create an animated Link or Form CTA.

---

 

Before you begin

• To create an animated CTA, you'll need to add Custom Code to your Hub. We won't go into detail on how to use or configure Custom Code in this article, so you should have an understanding of how to work with the Custom Code feature before you proceed. To learn how to use the Custom Code feature, see Add HTML, CSS, and JavaScript to your Hub with Custom Code.

 

About animated CTA background images

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.

 

Setup

Prepare the CTA and get its ID

Begin by getting the CTA ID of the CTA to which you want to apply an animated background.

• First, navigate to the Calls-to-Action section in your Hub and click on the CTA to open it. The CTA ID for the selected CTA will be shown beside its title, near the top of the screen:
  

  

• While editing the CTA, make sure to remove any existing background image (if present) in the Design tab of the CTA editor.

 

Get the animated GIF

You'll also need to prepare the animated GIF that you want to use as the background for the CTA. The background must meet these requirements:

• Be an animated GIF image (i.e. an animated image file with the file extension .gif)
• Be 1.5 MB or smaller in size
• Be exactly 330 px tall by 250 px wide (you won't be able to resize the image in Uberflip as you can with a normal CTA background image)

 

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 to open the Image Manager.
3. Click on the Upload button.
4. Choose the animated GIF that you want to use and upload it. You'll be returned to the Image Manager, and the GIF you just uploaded should appear at the top of the list.
5. Copy the URL from the URL field for the animated GIF you just uploaded and make a note of it, as you'll need it again in a moment.

 

Step 2: Set up the custom code block

The next step is to set up a custom code block that will insert the animated GIF as the background image of the CTA, and enter the code snippet that makes it work.

Create or choose a custom code block

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.
2. Set the placement of the code block to Head.
3. Add one of the code snippets below to the custom code block.

Add the custom code snippet

You'll need to choose the appropriate code snippet based on the version of the Uberflip Hub Front End that your Hub is using. If you're not sure which version you are on, see this article for instructions.

For Front End V1 Hubs

You can use this code snippet for both Form and Link CTAs.

<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>

For Front End V2 Hubs

Choose the corresponding code snippet for the type of CTA you are working with.

For a Form CTA:

<style>
/* GIF Form CTA */
/*form cta tile class */
.uf-form-cta-tile-[CTA ID GOES HERE]
{
background-image: url([URL GOES HERE]) !important;
background-color: inherit !important; 
background-repeat: no-repeat !important;
background-origin: padding-box !important;
background-size: cover !important;
}
</style>

For a Link CTA:

<style>
/* GIF Link CTA */
/*link cta tile class */
.uf-link-cta-tile-[CTA ID GOES HERE]
{
background-image: url([URL GOES HERE]) !important;
background-color: inherit !important; 
background-repeat: no-repeat !important;
background-origin: padding-box !important;
background-size: cover !important;
}
</style>

Configure the custom code snippet

In the code snippet, there are two parameters you will need to configure to specify the CTA to be animated, and where the GIF is located (the URL you noted down earlier). These parameters bolded in the code snippets above:

• For [CTA ID GOES HERE], insert the numerical CTA ID for the CTA to which you want to add the animated background. Do not include the square brackets.
  • Example: 123456
• For [URL GOES HERE], insert the URL for the animated GIF that you copied from the Image Manager earlier. Do not include the square brackets.
  • Example: url('https://content.cdntwrk.com/files/myanimatedgif.gif')

Save and enable the custom code block

1. Finally, click on the Save button to save your custom code block.
2. Under Enable Custom Code, switch the toggle button to the on (green) position to enable the code snippet on your Hub.
3. Your changes 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. In this case, simply:

• Skip Step 1: Upload the animated GIF.
• In Step 2: Set up the custom code block, insert the external URL where the animated GIF is hosted into the code snippet (for [URL GOES HERE]).