skip to content

How to design an effective website call to action

A well-designed CTA or “call to action” can make all the difference when it comes to turning visitors into customers. But what goes into a CTA? Where on my webpage should it go? How do I write effective copy for it? How do I design and build it? We’re gonna answer all of that and more. Let’s get into it.

Hello creators, I’m Ben Toalson from Podia. Ahead I’m going to take you through the following:

  • The anatomy of a CTA

  • The best placement for your CTA

  • How to write compelling CTA copy

  • Best practices for designing your CTA

  • And how to build it

The anatomy of a CTA

A CTA can be made up of any of the following:

  • An intriguing headline that grabs your visitor’s attention

  • Informative body text that resonates with your visitor’s struggles

  • An eye-catching image that pulls your visitor in

  • An engaging video that spurs your visitor to action

  • A text field that makes it easy for your visitor to share their name or email

  • And an irresistible button that will compel your visitor to click

Depending on where the CTA is on your page, you may only use some or most of these elements.

For a person who lands on your web page and is ready to buy right at that moment, it makes sense to use more of these elements because you want to pull their attention directly to the CTA.

For a person who might need a few moments to gather some info before making a decision, it’s actually okay to use a simpler version of the CTA. You still want it to be obvious how they can take action, but you also don’t want to pull too much of their attention away from other information on the page they need in order to make a final decision.

That sets up our next segment nicely. What is the best placement for your CTA?

The best placement for your CTA

We determine where you should place your CTA by answering the same question we did for the previous section, and that question is, “Who is landing on your web page?”

Folks who will actually take action fall into 2 categories:

  1. People who have already made a decision to buy

  2. People who are strongly considering buying but have some questions

Taking those two types of people into account, let’s talk about where on your page makes the most sense to place your CTA.

When a person arrives on your web page ready to buy, the last thing you want to do is make them work to find the buy button. This is why it’s important to have a strong CTA right at the top of your page above the fold.

Now what about the second category of person?

This person is looking for information and is willing to do a little bit of work to find it. They’ll scroll past the main CTA and browse the page for relevant info. For this person, you’ll want to include a CTA between or after sections that answer your visitor’s concerns.

For example, you could have a testimonial section with 2 or 3 testimonials, then an FAQ section and then a CTA right after that. Next on the page you could address specific pain points or common objections, followed by another CTA.

It’s okay to repeat this a few times all the way down the page. The idea is that if, at any stage of reading the information, the visitor becomes convinced, they don’t have to scroll back up or all the way down to take action but can do it right there.

With that in mind, it makes sense to include a CTA all the way at the bottom of the page as well to capture visitors who make it that far.

Just because a visitor is likely to buy doesn’t guarantee they will. That’s where copywriting comes in.

How to write compelling CTA copy

Compelling copy confirms your customer’s conjecture about your creation and convinces them to click. In other words, it makes them think, “Yeah! I should buy this product. Let’s do this.”

We’re going to focus on 3 places we can optimize our copy:

  • The Headline

  • Body text

  • And button text

Your headline is the first thing most people will read once they land on your page. Its purpose is to convince people to pause for a moment and take in the rest of your CTA. Use some or all of the following techniques:

  1. Ask a question that they’re already asking. Like, “What Kind of Business (or Side Hustle) Should I Start?”

  2. Include value words that imply the saving or earning of time or money or business or audience growth. Like, “Get the Free SwiftUI Picture Book”

  3. Appeal to emotion. Like, “Summer Fun Cookie Class”

Now that you’ve got their attention, your body text expands on your heading’s promise or answers your heading’s question.

This is a great opportunity to address specific objections or concerns or share the potential outcomes of taking action.

Using one of the previous examples, the creator says the following about her Summer Fun Cookie Class:

“Is anyone else as excited for Summer as I am?”

This is a callout for the emotion in the heading.

“I can’t wait for us to decorate all 5 of these fun summer cookies together! While this class is geared towards Intermediate decorators, both Advanced and Beginner decorators will find enjoyment in it as well.”

This section addresses a potential objection or concern a visitor may have and states who the class is for.

“Each design will be covered in full detail making it something I’m sure absolutely anyone will be able to follow along with!”

This last bit instills confidence that there will be enough detailed instruction for any customer to follow along.

This is also where you can include other important info like price, availability, or a listing of what’s included.

Almost there, but we still need them to click the button.

This is, after all, a call to action, so your button text should represent an action your visitor is taking.

But your visitor isn’t just clicking a button or buying a product or signing up. They are doing something for themselves.

For example, maybe you sell a community membership for illustrators who want to learn from one another and grow in their skill.

Instead of “Join the community,” you could say “Join 200 illustrators like you” or “Connect with other illustrators today” or “Get support on your illustrator journey.”

These examples speak more to the experience waiting for the customer on the other side of the click.

For each of these you can also include words that give a sense of urgency. As long as you’re not creating a false sense of urgency, this technique can be a strong motivator for taking action.

Now that we know what a CTA is, where it should go on our page, and what it should say, we still need to make sure it’s designed in a way that’s effective.

Best practices for designing your CTA

For the design of your CTA, there are standard design principles that work well like:

  • Use fonts for your text that are easy to read

  • Use a text color that contrasts well with the background color

  • Leave enough space between elements so your CTA doesn’t look crowded

  • Structure your body text by breaking up paragraphs or adding bullet points

Other things to consider in your CTA design are:

  • Differentiate your heading from your body text by increasing the size and weight

  • Call out important words or phrases by bolding or using an accent color

  • Use color and contrast in your button so it stands out

  • Create visual interest with additional graphic or background elements

If you arrive at a few different design or color options and aren’t sure which is best, feel free to test each design out to find out which is most effective. Now it’s time to build your CTA.

How to build your CTA

We’re going to Podia’s site builder to create a CTA. With Podia, you can create and sell a variety of digital products, including digital downloads, online courses, webinars, coaching, and more.

When you create a product, a sales page is automatically created, including a premade call to action. From the products tab in your dashboard, you can click the three dots next to your product and select “Edit page.”

This brings us to the Podia site editor. If you click on the CTA section, editing options will appear on the left. Your CTA is pre-filled with the information you provide when you first create the product.

You can leave that as is or you can insert new information, including a custom image or video, name, description, and button label, and you can check which additional product information you want to include.

Under design, you can adjust the layout of the content, change the style and colors, and add a background image.

You can adjust colors and fonts site-wide with the Colors and Fonts tabs at the top.

These sections are pre-designed with the design principles we listed earlier, and Podia sites are built to be responsive so you can be sure your CTA will look beautiful on any device.

About the author

Ben is a video content marketer for Podia, an all-in-one platform where online courses, digital downloads, and membership websites – alongside their creators – thrive.