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.

More...

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.

Shane

Author: Shane Melaugh

Shane Melaugh is one of the co-founders of Thrive Themes and in charge of marketing, content and product strategy. When he isn't plotting new ways to create awesome WordPress themes & plugins, he likes to geek out about camera equipment and medieval swords. He also writes about startups and marketing here.

30Comments

Martin M Reply

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.

    Good stuff, Shane! I second Martin’s request for the angled background tutorial.

    Shane Melaugh Reply

    Thank you for the suggestion, Martin! I’ll get to work on a tutorial for that. :)

I’m having problems when I click the paragraph or the heading section: It doesnt show the right sidebar to edit it.

Awesome use of Thrive Architect – thanks, Shane and crew!

    Shane Melaugh Reply

    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.

Derek W Reply

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.
Regards
Derek

    Shane Melaugh Reply

    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.

Abigail W Reply

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?

    Shane Melaugh Reply

    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. :)

Kevin B Reply

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

    Shane Melaugh Reply

    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. :D

Viktor E Reply

The feature to open External Image in lightbox does not work. You can only link to library image.

    Shane Melaugh Reply

    You’re right, that doesn’t seem to work. We’ll fix that. Out of interest: what’s the use case where you’d want to link to an image that’s not on your own site?

Phil D Reply

Hi Shane
Another great and really useful video. Thrive Architect is something very special.
One quick question. Can you animate overlays like the ones used to show the team members on the page link below?
http://www.officemachineservices.co.uk/meet-the-team/
Thanks
Phil

    Shane Melaugh Reply

    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.

Chris J Reply

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.

Engel J Reply

Sigh…You all are amazing

Lorenzo D Reply

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?

Quentin P Reply

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

Len R Reply

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.

Jamie W Reply

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.

Shantie R Reply

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.

    Shane Melaugh Reply

    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.

Angelina C Reply

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!

    Shane Melaugh Reply

    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.

Just a dream Shane, will be the next button I´ll use!