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

Shane Melaugh   33

Updated on December 22, 2019

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.

Mobile Responsiveness

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:

The call to action ribbon seen on an approximation of a tablet and on a smartphone screen.

You can go here to discover more about the mobile responsiveness workflow in Thrive Architect.

Curious About What Else You Can Do?

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:

What Else Would You Like to See?

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.


by Shane Melaugh  September 6, 2017


Enjoyed this article ?

You might also like:

Leave a Comment

  • In the teaser videos, you (or whoever was recording his/her screen) were creating an angled background. I’d love to see an actual tutorial on how to do this correctly.

    • Hello Alexandre,

      That sounds like a bug. My first suggestion here is to do a hard refresh in your browser (Ctrl + F5). This will eliminate caching issues. If the problem persists, please post in our support forum about it.

  • Hi Shane
    You sent me an email with this site link, however I assume that to do what you suggest one must have a copy of Architect. I don’t as I couldn’t afford the upgrade. Apparently you are no longer supporting Visual Editor. Therefore there is little chance of me taking advantage of your advice.

    • hello Derek,

      If you are a Thrive Content Builder customer, then the upgrade to Thrive Architect is free. You can update directly from your WordPress dashboard.

  • Oh, the animations video at the bottom of the post is amazing, there are a lot of really exciting features and I can’t wait to get a chance to use them on my website! Quick question about the ribbon, it could also be made via Thrive leads with an opt-in and Thrive ultimatum with a countdown option, right?

    • Hi Abigail,

      Thanks for your comment! Glad you liked the tutorial I added.

      Yes, since Thrive Architect powers Thrive Leads and Ultimatum as well, you can build this exact same design in those plugins as well. 🙂

  • Thanks, Shane – Wonderful info and a great help. I have to say, building websites has become FUN again! I am Loving TA 🙂

    • That’s great to hear, Kevin! I think it’s a lot of fun as well. I’ve been spending more time building landing pages and templates than I should, considering other work I could be doing. 😀

    • You can hack together something similar with the current functionality, but it’s far from ideal. We will be introducing more advanced animation and transition features that will be built for such things in the future, though.

  • I’m wondering if there is some ads manager functionality coming- something like interstitial links or category driven text and display ads based on characters & paragraphs.

  • Much appreciated, Shane. There was, however, an option in TCB that seems to have been removed in Architect.

    The Event Manager allowed us to put an empty link on a text selection, and then animate the link with a tooltip. Very useful to make tooltip “footnotes”. Actually, that’s probably the most useful function for a tooltip I can think of atm.
    It’s not just the tooltip either. The only animation available for text seems to be the CSS “entrance”. It would be nice to have the overlay etc. on text too, will you add that to a future release?

  • Just starting to get used to Thrive Architect. These videos are really useful for opening up all those new features to me. Thank you.

  • Shane,
    I appreciate the tutorials. They are helpful and inspirational. The tutorials get me thinking about designs I can try in the future.

    I would like to see a comprehensive comparison of the theme version of apprentice vs. the plugin version. I’m having an issue right now with the plugin version not showing the lessons as being completed until you get to the last lesson, then a check mark appears that you can click that recognizes that lesson complete. Previous lessons show as “not viewed”.

    In the Theme version of Apprentice there is a box to check once you complete a lesson. I’m probably missing something really simple but this issue has me stuck in producing my coarse.

  • Nice one Shane. Really appreciate the ongoing support. I will use this right away. Elegant, efficient and powerful. If you are not a Thrive member, stop thinking about it and just do it.

  • Another great feature from Thrive Architect. You show an “Add to Cart” button but how will it work for an eCommerce solution like WooCommerce? What code will we use to add the product to the cart take the customer to the checkout page for a product in WooCommerce? If not, what shopping cart solution will this work with in Word Press?

  • Shane, I thought that having Comments on one’s website was pase until I saw the response you and your team get at Thrive Themes. What do you use for Comments here. I need to replace the Google Comments I had been using. I tried going to Facebook Comments only to discover that plugin is no longer supported.

    • Hi John,

      We’re working on a comments plugin for WordPress, actually. We’ll have some more news on that shortly. We mainly developed it for our own use, but we will make it available as a product as well.

  • I’m not a techie gal so forgive my non-techie way of describing what I would like to see! What I’d love to see in a tutorial is how to add an image like my photo, into a template and it not look like my photo is in a box and that instead it is blended with the background. Make sense? I’ve seen this look in the Author template that Thrive has, there’s an image of a man in with a red background, how do I create that look with my image? Thank you!

    • I think I know what you mean, yes. What you need is an image with an isolated background, so that you can make the background transparent. This is something you can’t do directly in Thrive Architect or in WordPress. You have to isolate the subject from the background in a photo editor. Also, such pictures are usually shot in front of an all white or all green background, to make it easier to separate subject and background. So, there’s no simple trick for this, unfortunately.

      • The fastest and best value way to get the photo with a transparent background that I have found is to use clipping magic. It is an online tool and beats any photo editing software that I have tried. However it is a subscription not free. For a one off photo try fivr or upwork.

  • Hi Shane,
    Great tutorial – many thanks. I have a question:

    In TA whole elements are “linkable”.

    Can you do the same thing with i.e. tooltips on hover — go to the outmost content-box and set that on hover?

    Can you choose or respectively change the size of a tooltip (width and hight)?

    Many thanks.
    JuanPedro S

  • {"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}