HubSpot Calls-to-Action: Creating Image-Based CTAs

Do you need to accomplish better conversion rates? Are you trying to build a conversion funnel from your blog articles or even product and service pages to your offerings? For a great way to promote that lead conversion opportunity that might be a checklist a white paper an Ebook, a guide a demo and assessment. Shui, the list honestly could go on.

Well, then you're in luck. In this video, we're going to talk about the HubSpot calls-to-action tool and how to create image-based CTAs that invoke an emotional response. Drive your visitor action and look pretty dang cool as well. Are you ready to rock and roll then? Hey, you know what time it is.

About the Expert

George B. Thomas

George B. Thomas is an Inbound Marketing Marketer, Video Jedi and HubSpot Certified Trainer with more than 25 years of sales and marketing experience. He leads the Impulse Creative crew in HubSpot certifications with 19 including Inbound, Email, Contextual, and Content Marketing.


George utilizes his love of teaching and learning to help companies find their way to growth via workshops, speaking engagements, business audits, and of course, Sprocket Talk.

roll-angle

Full Transcript

Do you need to accomplish better conversion rates? Are you trying to build a conversion funnel from your blog articles or even product and service pages to your offerings? For a great way to promote that lead conversion opportunity that might be a checklist a white paper an Ebook, a guide a demo and assessment. Shui, the list honestly could go on.

Well, then you're in luck. In this video, we're going to talk about the HubSpot calls-to-action tool and how to create image-based CTAs that invoke an emotional response. Drive your visitor action and look pretty dang cool as well. Are you ready to rock and roll then? Hey, you know what time it is.

Are you a HubSpot user looking for fun and interactive education that helps you be better at HubSpot then welcome to sprocket talk. That's right. It's your boy George Thomas from sprocket talk.com bring you yet another HubSpot educational video brought to you by the amazing team over at Impulse Creative.

If you're a sales, marketing, or service professional looking to learn more about HubSpot and inbound strategies to help your business grow, guess what?

You're in the right spot.

Make sure you subscribe to keep learning more and use the comment section below to ask us all the inbound and HubSpot questions that you may have. Now let's go ahead and get into the good stuff.

Tutorial

When I think of getting started with creating my CTAs or calls-to-action, the first place I head is to my blog or the page that I'll be using the CTA on.

That way, I can get the measurements and colors needed to create an amazing CTA.

So let's take a look at how that all starts.

First, when I start building an image-based CTA for HubSpot, I actually start at my blog.

Because what I want to do is figure out what the width or size of CTA I want for either at the beginning of my blog or at the end of my blog. As well as what size do I want my CTA for my sidebar if I still have a sidebar.

Now what I like to do here is I use a little tool called measure it. What this allows you to do this Chrome extension is to go ahead and darken the screen. And then we can kind of draw out the dimensions that we might want for a CTA.

So something up here, I might do about 115 pixels tall roughly. And I might do something about 660 pixels wide. So I'll write that down 660 by 115. And then I'll go down to the bottom of my blog.

And I'll say if I was going to do something a little bit taller, and I already know, of course, it's about 660 pixels wide so that I can do that width over here. And then what I'll do is I will just kind of drawdown what I actually want.

So 660 by maybe about 225, perhaps even 230.

So we'll go 660 by 230. So now I've got my top CTA. I've got my bottom CTA dimensions. One last thing I'll come over here to the sidebar, and I kind of a cheat because I already have a CTA in this case, I can just drag over the CTA and realize that I want to build something that's about 320 by probably about 390.

So now I've got all my dimensions. The next thing happens to Photoshop. But first, a little pro tip if you are trying to get the colors from your website. Another little tool I use is Colorzilla; it allows you to actually click and then select a piece of your website and get that color.

There will then be the ability to copy that color to the clipboard, which you can then grab the code for something like Photoshop.

But you can easily pull the colors off of the website so that you have them, and there is also a color picker that will have the historical colors that you can grab over time.

So in my case, I'm heading into Photoshop to create my image-based CTAs, but there are also free and inexpensive options you can use. You may want to check out Canva for your CTA creation.

You can use Canvas drag and drop feature and professional layouts to design consistently stunning graphics or calls.-to-actions, and there's a free and pro account option that you can choose from.

Or maybe you want to try something like GIMP.

GIMP can be used as a simple paint program, expert quality photo retouching program, an online batch processing system, a mass production image rendering system, or in your case, you can create calls-to-action with it as well.

Heck, To be honest, you can even create CTAs with PowerPoint or Keynote if you have nothing else. The idea here is to create something that is visually appealing evoke some type of emotional response. And of course, it is action-oriented.

With that said, let's dive into Photoshop, and I'll show you how simple I keep it when creating these image-based CTAs. For my, HubSpot calls to action tool.

Alright, so once we're in Photoshop or again, any design tool you want to use moving forward will start with a blank slate. What I did do is use Colorzilla to pull in the teal and the orange, the branded colors.

You would put in your branded colors here. Again a blank slate, so let's start with just a base background color. We'll do teal this time. We want some type of element. In this case, we're building a subscription CTA, so something that references an email and envelope something creative. We're going to do a little soft like send a plane piece of a paper type item.

Again, you can pick whatever element you want. We do want a CTA, or a button or a bar kind of section. So we will add a bar. This is just the to with an actual overlay kind of applied to it.

And then we need some text, which we'll go ahead and we'll add the title and all of that. So we've got HubSpot and inbound learnings that drive growth. We can see here each week that we bring you content focused on best practices and breaking news around inbound marketing.

We'll want to fix that.

And the HubSpot Hubs to help you and your team grow faster, smarter, better. Of course, we probably don't exclamation marks. Always run a spellcheck on your CTAs as well that is in Photoshop, but I'm sure any tool that you use will have that.

And then notice we do have our stay educated subscribe today, which is kind of our call to action here. So this is how you can quickly create a bottom of the blog image CTA.

Now, we're going to save this out as a JPEG, you do have two options, you can save as a JPEG, or you can save as a PNG. To be honest with you, we're going to do both, but historically, I found that PNGs actually are a little bit clear in the CTA tool.

We'll do a JPEG sprocket talk bottom of the blog, subscribe, we'll save it to our desktop. And then we'll go ahead, and we'll do a file save again. And we'll go ahead and do a PNG so we can actually see both of them when we get into the HubSpot tool and see what happens here. We'll do a large file size, and we'll hit OK. And now, we have our bottom of our blog. CTA.

Now you would rinse and repeat this with the top bar with the sidebar. Again, it's just a few little elements. You don't want to overdo it. You want something that is colorful that is action-oriented that evokes some type of emotional response and has some type of button or bar where you're actually giving them action on what to do in this case, stay educated.

Now it's time to get into your HubSpot marketing hub and create that CTA. At this point, you might be wondering, why can't I just use the image on the page that we just created in Photoshop George?

Well, great question. You see, an image, if used on the page, is not trackable. However, the CTA tool and HubSpot will allow you to track the views clicks and conversion, and based on that CTA, this enables you to report on the success or failure of your design, the copy, and the actual action you're asking your visitors to take.

Also, the CTA tool allows you to do multi-variant testing, and you just can't do that with a simple image. Now with that out of the way, let's dive into our HubSpot portal and create our CTA as well as get it on the page where we want it to be. So here we are in the HubSpot CTA or calls-to-action tool.

I got there by going marketing and then lead capture, and then CTAs so call to actions or CTAs.

In this tutorial, obviously, we've been talking about image-based CTA. So we're going to head over to this button, and we're going to create a CTA. Now by default, HubSpot sets you up to create buttons CTAs. Again, we'll cover that probably in another tutorial at another time. But notice right up here, we've got the custom button, or Image button is what it's called.

Now you don't need to create a button necessarily. It can be any type of graphic as we've been creating along this process. But we're going to hit the Image button and then we're going to hit the upload right here, which will get us to our file manager.

We're going to look for the file that is the sprocket talk bottom of the blog, subscribe. First, we're going to do the JPEG. We'll go ahead and open that up. And we'll see that this is brought in here we have a width of 710 by 300. And then we want to give it an alt text, so in this case, we'll go ahead and do alt text blog, subscribe.

Once you've got that added in, we're going to hit next. And this is when you can name your CTA or your call-to-action. So we'll call it blog subscribe Sprocket Talk.

Then you want the URL redirect type. So we're going to go to sprocket talk.com forward slash subscribe because we would have a subscribe page, which would be a page with some information and, of course, a form. You can make it look however you want, but we're going to go ahead and add that URL.

And then do we want to open it in a new window? In this case, we know that we're going to be clicking from a blog article into the subscribe, so yes, we will open on a new page, and then we want to associate it with a campaign. So we'll associate this with Sprocket Talk.

And then finally, we can hit Save. Now we've got our CTA here; we do have an edit button. If we wanted to edit it, we can close it to create a smart version or create multi-variant all great tutorials in the future.

But in this case, we're going to go ahead and hit close. We need an embed code if we are using it on an external website, but we're not using it on external sites. So what we will do is actually go over to a blog article and add this CTA.

We're going to come over here, here is our blog article. I'm going to go ahead and save it and refresh it real quick because it was loaded. Before we actually had the CTA, we're going to go into our blog section. So, in this case, it's at the very bottom of the blog, and we will hit enter once, and then in our whizzy wig editor, we have insert and call-to-action.

We're just going to go ahead and select the call to action that we inserted. And we're going to insert here. Then what we can do is we can hit update, and we will update the post. Now, if I come here to this post, I see no CTA at the bottom. But if I refresh the page, then I will have the CTA now. One of the things that may be hard to see in the video is there are some artists or pixelation on the JPEG image that we put in here.

You can kind of see it around where the text areas are. And again, I said that there were two options you could do the JPEG or the PNG. We're going to come back over here; we're going to go actions we're going to edit. And what we're going to do is we're actually going to remove this image, and we're going to upload the other image, which is the PNG.

We're going to open that go ahead and let that come in. And we'll hit next. And we'll hit save.

Again, just giving it that PNG image. Now, if I come over to the blog and do a hard refresh, we're going to be able to see that that artifact is gone. So it is a suggestion that you use a PNG file for your CTAs. They will look a little bit clearer when doing that.

So what have we accomplished we measured our CTA locations? Use the design tool to build the images we needed. Then added them to the HubSpot calls-to-action tool now in the future.

We can do testing to make them smart and, of course, measure the results of our efforts.

Protip when you decide the CTA needs an image refresh. You can simply change the image you're using, and it will automatically show up on all the pages of the old CTA image was once on.

Tha ks HubSpot.

Remember to use PNG files for a higher quality CTA as well as maybe even design your CTAs at two x or two times the size. So they also look good on retina displays or four and 5k monitors. As you build the CTAs, make sure they are visually enticing, that the headline and copy tug at your viewer's emotions. Of course, it leads the visitor into the action of downloading, contacting, or whatever it is that you want them to do.

Exit

Hey, sprockets here, Did you like this video then make sure you subscribe to the channel and hit that bell as well for those instant notifications and so we know that you're part of the sprocket talk community.

Make sure you head over to sprocket talk comm for more actionable and tactical HubSpot user resources.

And as always, it's been an absolute pleasure.

But until next time when we meet in the following video, make sure you're focused on being a happy, helpful, humble, human. As always, make sure you're doing some happy HubSpotting