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

 

Before you begin

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

Note

Remember that each individual code snippet will add an animated background to one CTA only (the one you specify by its CTA ID). To add animated backgrounds to additional CTAs, you will need to add further instances of the code snippet to your custom code block, configured with the appropriate CTA IDs and URLs.

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. In Step 2, insert the external URL into the code snippet (for [URL GOES HERE]).

1 out of 1 found this helpful

Comments

0 comments

Please sign in to leave a comment.