How to Create an Attention-Grabbing, Animated Call to Action Ribbon

In this tutorial, we're building a call to action that you can add to any page - and that your visitors will not be able to ignore.

We're using Thrive Architect to create this design and, even though it's a short tutorial, you'll discover many of the unique features in this plugin. You'll see how those features work together to create something that is greater than the sum of its parts.

Highlights from the video:

01:30 - Foundation
How to set up a background section and a content box (to later apply the click action to).

02:38 - Colors
How to apply the background gradient to the CTA ribbon. A more in-depth tutorial on gradients and gradient best practices is coming soon!

03:26 - Inside Shadow
How to apply a subtle inside shadow effect to the ribbon, to give it the appearance of being slightly behind the rest of the page content.

04:23 - Text Animation
How to set up the text so that it animates, each time a visitor scrolls to bring it into view.

04:40 - Hover Effect
How to apply a hover effect to the CTA ribbon. This part also covers why I set the hover effect the way I did, to arouse curiosity and increase the chances of someone clicking through.

06:09 - Click Action
How to apply the link and make sure the entire call to action area is clickable. This part also shows how to use the breadcrumbs to easily navigate among nested elements.

07:25 - The Bonus Bit
See an example of a different click action applied to the call to action area, to open a video and button in an overlay. In the video, I use Thrive Leads for the overlay, but you could accomplish the same thing with a Thrive Lightbox, in case you don't own Thrive Leads yet.

In the tutorial, I didn't add the steps I would take to make the ribbon responsive. The main reason for this is that I copied the headline element to add as a text in the call to action (see 01:52 in the video) and that headline was already set to change sizes on different devices.

Here's a screenshot of what my ribbon looks like on a smaller screens:

A key component to making this call to action ribbon is the "Animation & Actions" feature in Thrive Architect. With this feature, you can do far more than what was shown in this brief video. If you want an overview of how Animation & Actions work in Thrive Architect, check out this tutorial video:

Are there other elements or designs you would like to see built in a tutorial like this? Do you have questions about how to more effectively use Thrive Architect? Let me know by leaving a comment below.