Rainmaker.FM is Brought to You ByWP Engine

Discover why more than 80,000 companies in 135 countries choose WP Engine for managed WordPress hosting.

Start getting more from your site today!

Rainmaker.FM

The Digital Commerce and Content Marketing Podcast Network

  • Home
  • Shows
  • Hosts
  • About
  • Home
  • Shows
  • Hosts
  • About
  • Member Area
  • Log In
Menu
  • Log In
  • Free Training
7-Figure Small with Brian Clark
Confessions of a Pink-Haired Marketer
Copyblogger FM: Content Marketing, Copywriting, Freelance Writing, and Social Media Marketing
Get More Clients With Smarter Email Marketing
Hack the Entrepreneur
Members Only
Rainmaker.FM Elsewhere
Site Success: Tips for Building Better WordPress Websites
StudioPress FM
Technology Translated
The Digital Entrepreneur
The Missing Link
The Showrunner
The Writer Files: Writing, Productivity, Creativity, and Neuroscience
Youpreneur with Chris Ducker
Zero to Book
Site Success: Tips for Building Better WordPress Websites
hosted by Jerod Morris and Sean Jackson

[18] How to Create Visually Effective Calls-To-Action

  • Social:
  • Link:
  • Embed:
https://rainmaker.fm/wp-content/uploads/2017/10/sites-season-1-episode-18.mp3
Download MP3 Subscribe by RSS Subscribe in iTunes
Previous Episode:[17] Content Marketing as Seduction More Episodes Next Episode:[19] 3 Massively Important Reasons to Keep WordPress Updated

All Episodes:

June 19, 2018

[63] 3Q for Executing Your Next Online Course

June 12, 2018

[62] 3Q for Planning Your Next Online Course

June 5, 2018

[61] 3Q for Assessing (and Improving) Your Positioning

May 29, 2018

[60] 3Q for Optimizing Your Link Strategy for Better SEO

May 22, 2018

[59] 3Q for Optimizing Your Keyword Strategy

May 15, 2018

[58] 3Q for Local SEO Done Right

May 8, 2018

[57] 3Q for Optimizing Your Website’s Performance

May 4, 2018

[56] Brian Clark’s Best Advice on How to Write Better Headlines

May 1, 2018

[55] 3Q for Writing Irresistible Headlines that Will Accelerate Your Audience Growth

April 26, 2018

[54] How to Build a Community that Attracts the Right Kind of Members

April 24, 2018

[53] 3Q for Establishing a Community Around Your Content

April 19, 2018

[52] The Simple Way to Manage Social Media for Maximum Success

April 17, 2018

[51] 3Q for a Smart Social Media Strategy

April 10, 2018

[50] 3Q Before You Publish Your First Piece of Content

April 5, 2018

[49] The Right Way to Add Opt-In Forms to Your WordPress Site, Part Two

April 3, 2018

[48] 3Q for Making Your Opt-In Incentive Irresistible

March 29, 2018

[47] The Right Way to Add Opt-In Forms to Your WordPress Site, Part One

March 27, 2018

[46] 3Q for Adding Opt-In Forms to Your Website (Without Incurring Google Penalties)

March 22, 2018

[45] Rafal Tomal on Picking the Right Design for Your WordPress Website

March 20, 2018

[44] 3Q to Answer As Soon As You’ve Chosen Your WordPress Theme

March 13, 2018

[43] 3Q for Choosing the Right Kind of Design for Your WordPress Site

March 8, 2018

[42] A 3-Point Plan for Creating Your Initial Content

March 6, 2018

[41] 3Q for Deciding What Types of Content You’re Going to Create

March 1, 2018

[40] The 5 Things You Must Know When Selecting an Email Provider

February 27, 2018

[39] 3Q for Picking the Right Email Marketing Service

February 22, 2018

[38] The 5 Most Important Factors When Picking a WordPress Host

February 20, 2018

[37] 3Q for Picking the Right Host for Your Website

February 15, 2018

[36] How to Pick the Right Domain Name for Your WordPress Website (with Brian Gardner)

February 13, 2018

[35] 3Q for Choosing the Best Domain Name

February 8, 2018

[34] Amazing Content Strategies for WordPress Sites

February 6, 2018

[33] 3Q for Defining Your Content Marketing Strategy

February 1, 2018

[32] Brian Clark on Identifying the Right Audience for Your Website

January 30, 2018

[31] 3Q to Help You Define Your Ideal Audience

December 26, 2017

[30] WordPress Design Trends for 2018

December 19, 2017

[29] What Every #GenesisWP Developer Must Know about the Genesis Framework

December 12, 2017

[28] How to Fix the Most Common Technical Issues with WordPress

December 5, 2017

[27] How to Be a Successful Affiliate Marketer in the WordPress Ecosystem

November 28, 2017

[26] The Essential Guide to WordPress Membership Plugins from Chris Lema

November 21, 2017

[25] An Interview with @Yoast on the Future of WordPress SEO

November 14, 2017

[24] Brian Gardner on the Future of StudioPress

November 7, 2017

[23] What’s New in SEO? (And What’s the Future of This Podcast?)

October 31, 2017

[22] 6 SEO Friendly Tips to Improve Site Speed on WordPress Blogs

October 24, 2017

[21] The Persuasive Power of Analogy

October 17, 2017

[20] Quality Over Quantity: Repurpose Your Best Ideas and Distribute Them Far and Wide

October 10, 2017

[19] 3 Massively Important Reasons to Keep WordPress Updated

October 3, 2017

[18] How to Create Visually Effective Calls-To-Action

September 26, 2017

[17] Content Marketing as Seduction

September 19, 2017

[16] How to Decide Which Content to Sell and What to Give Away for Free

September 12, 2017

[15] 5 Questions to Help You Avoid a Catastrophic Plugin Decision

September 5, 2017

[14] How Creativity Can Kill a Good Website Design

August 29, 2017

[13] How to Create Content that Deeply Engages Your Audience

August 22, 2017

[12] What if You Could Simply Eliminate SEO from Your Life?

August 15, 2017

[11] 5 Steps to Website Security You Can Trust

August 10, 2017

Q&A: Keep it all on one site or split?

August 8, 2017

[10] How User Experience Design Pays Back to the Business

August 3, 2017

Q&A: How do I increase conversions?

August 1, 2017

[09] How to Know Exactly What Content You Should Create

July 25, 2017

[08] 10 Goals that Make Content Marketing Meaningful

July 20, 2017

Bonus: I want your website questions!

July 18, 2017

[07] Are You Making This Common SEO Mistake?

July 11, 2017

[06] 3 Ways to Better Connect with Your Audience through Design

July 3, 2017

[05] How to Attract Your Ideal Customer with Perfectly Positioned Content

June 27, 2017

[04] The Most Dangerous Threat to Your Content Marketing Strategy

June 20, 2017

[03] Is WordPress Hosting Really That Important?

June 13, 2017

[02] How Great Design Can Help Your Content Marketing

June 6, 2017

[01] The Simple 3-Step Process to a Winning Content Marketing Strategy

October 3, 2017

[18] How to Create Visually Effective Calls-To-Action

The greatest call-to-action copy in the world won’t make a lick of difference if your CTA isn’t visually compelling enough to draw attention to it. So that’s what we’re going to discuss this week: how to create visually effective calls to action.

Listen to Site Success: Tips for Building Better WordPress Websites below ...

[18] How to Create Visually Effective Calls-To-ActionJerod Morris
  • Social:
  • Link:
  • Embed:
https://rainmaker.fm/wp-content/uploads/2017/10/sites-season-1-episode-18.mp3
Download MP3 Subscribe by RSS Subscribe in iTunes

Important links from this episode:

  • Try StudioPress Sites
  • Sites Weekly Newsletter
  • Subscribe to Sites on Apple Podcasts
  • @JerodMorris on Twitter
  • Original blog post: How to Create Visually Effective Calls-To-Action by Rafal Tomalk

The Transcript

Jerod Morris: Welcome to Sites, a podcast by the teams at StudioPress and Copyblogger. In this show, we deliver time-tested insight on the four pillars of a successful WordPress website: content, design, technology, and strategy. We want to help you get a little bit closer to reaching your online goals, one episode at a time.

I’m your host Jerod Morris.

Sites is brought to you by StudioPress Sites — the complete hosted solution that makes WordPress fast, secure, and easy … without sacrificing power or flexibility. For example, you can upload your own WordPress theme, or, you can use one of the 20 beautiful StudioPress themes that are included and just one click away. Explore all the amazing things you can do with a StudioPress Site, and you’ll understand why this is way more than traditional WordPress hosting. No matter how you’ll be using your site, we have a plan to fit your needs — and your budget. To learn more, visit studiopress.com/sites. That’s studiopress.com/sites.

Welcome back to another episode of Sites — another week of unpacking a strategy that will help you build a better, more powerful, more successful WordPress website.

Last week, we talked about how your content can seduce your audience. This week, we’re going to talk about how to capitalize on that moment when the seduction actually works. How do you close the deal?

Whether it’s a small, relatively easy deal — like getting an email signup. Or a larger, more complex deal like asking for a recurring purchase.

It’s all about crafting effective calls to action. And the greatest CTA copy in the world won’t make a lick of difference if your CTA isn’t visually compelling enough to draw attention to it.

So that’s what we’re going to discuss this week: how to create visually effective calls to action.

And we have a great blog post from Rafal Tomal to help us do it.

Here is my reading of Rafal’s blog post: How to Create Visually Effective Calls-To-Action.

How to Create Visually Effective Calls-To-Action

Designing your pages for conversion is a tricky job. It’s a constant fight between what works and what doesn’t. It’s a never ending process of testing, measuring, and making changes.

One of the most difficult tasks I have found in my work is to point your visitors right into your call to action — in order to catch their attention and interest them in your offer.

While your copy is probably the most important part of this process, it’s still very important to support it with suitable design techniques that can put an emphasis on your message.

The good thing is that human behavior is mostly predictable and we can use it for our own advantage.

People love repeatable visual patterns. People will also quickly find any distractions from a well-defined pattern. We can use that knowledge to get their attention.

The question is, how can you lead your visitors right into your call to action in a subtle way without being too annoying and screaming with exclamation marks?

Every call-to-action wants some attention

Ok, before we dive into talking about the design of your website, let’s think about getting attention for a moment. Why do you even need to get someone’s attention and why is it so hard that you have to use some kinds of visual tricks?

The purpose of most websites is to attract the target audience and call them to action. The action can be an email sign up, social interaction or a product purchase.

Of course, the action you want people to take is usually not that attractive for first time visitors. You can’t just invite people to your website by saying “come and sign up for my email newsletter!” That wouldn’t convert well…

So, it is the content that attracts your target audience. It can be a sales page with compelling copy, your blog posts, an infographic, a free ebook, you name it.

Once you have them in, and you have their attention, that’s the time when you want to point them in a certain direction — the next level of your conversion funnel.

Now, getting someone’s attention and calling them to take the action is hard. The bigger the commitment to make, the harder to convert. Different types of actions may also require different approaches.

For example, asking people to sign up for your email newsletter in exchange for valuable free content is much easier than asking them to pay for something.

A call to action with a smaller commitment can be more direct. You can put it right in front of your visitors in the form of a popup or a big top banner.

However, the same approach wouldn’t work well if you used it for your buy button on a sales page. Before asking someone to purchase your product, you want to prepare them, educate them, resolve their concerns and build interest.

That’s why a sales call to action should be positioned more strategically. You need to be careful not to ask for the conversion too early or your visitors may not be ready yet.

If you want to think about how this would look visually, just think about websites that you visit every day.

Where do you typically see an email sign-up form — which is a low-commitment call to action? In the sidebar, in a banner beneath or even sometimes above the header, or maybe even in a pop-up that appears when you start scrolling.

Contrast that with where you see the CTA for a sales page. It’s typically near the end of the page after a lot of copy — the more complicated and expensive the product, the longer and more explanatory the copy (typically).

Okay, now let’s talk about defining visual patterns — because you have to define them first, before you can break them.

Define your visual patterns first

As I mentioned before, you can’t convince someone to take the action just by your design. It’s your copy that does all the heavy lifting, but you can help to emphasize the message and point some visitors right into your CTA through design.

And this brings us to the main point of this whole episode, which is how to effectively break your visual patterns to get a visitor’s attention.

Your website’s visual identity is defined by typography, colors, layout and all the user interface elements. Together, all of these elements create certain repeatable visual patterns.

Try to make navigating and browsing your website predictable. You want to create a consistent and positive user experience in reading your content. That should be your base and foundation.

Now, consistency is the main point here. The more consistent your visual patterns are, the easier it’ll be to break it in a more subtle and elegant way.

And why would you want to break your beautiful design? To lead your visitor’s eye right into your offer on a busy page full of content.

In other words, to get your visitor’s attention where you need it.

To explain better, imagine you’re invited to a party where everyone is dressed in whatever they want. So, you have all different colors and styles. It would be pretty hard to stand out from the crowd if you wanted someone to pay attention to you. It’s still possible, but you would need to take some ridiculous steps to do so.

Now, imagine that you’re going to a party where everyone is dressed in black and white. What could you do to stand out from the crowd? It would be as easy as wearing a red t-shirt. People would notice you and you wouldn’t have to run around and scream.

As you can see in this analogy, it all makes sense only when there is a certain consistent theme applied as a base. Without it, when everything is different, nothing can clearly stand out.

Now, break your visual patterns

In your design, emphasizing your call to action can be easily achieved by using contrast. I’m not talking about just color contrast, but a contrast in size, boldness, space or even position.

Some techniques work better for some people and may not even affect another group of visitors. So, the best idea is to combine at least a few of them.

For example, your call to action can be placed on a contrasting background and the title font set in bold. Additionally, you can add some extra space around it to make a bigger content/space contrast.

Using white space is a great way to make something more prominent without adding more noise to your design. By simply creating more space around something, you separate it from the rest of the content. That separation and a clear layout break can quickly draw the user’s eye.

You can also break your grid if your design is set on a layout grid.

Layout grid is a common design tool used by web designers these days. It’s a good topic for a whole new episode, and Rafal covered this concept deeper in his ebook, The Essential Web Design Handbook, if you’re interested in learning more about it.

For now, all you need to know is that a grid is nothing more than just an invisible web of vertical and horizontal lines that dictate your entire layout.

By placing all your content elements along those lines, you can create an organized and consistent design structure throughout the entire page. It helps to create a visual pattern in your website layout.

Breaking that grid will make your call to action stand out. It’s that simple. Just by positioning a certain element loose on the grid will put more emphasis on it.

Our eyes love patterns and we follow them. Every human eye will catch such a distraction in a perfectly designed layout.

And that, my friends, is how you get your visitor’s attention.

Now stick around for this week’s hyper-specific call to action.

Call to action

Here is this week’s call to action:

Open up your website …

Take a look at it. What visual patterns do you see? Don’t spend any time judging yet. Just look. Get a feel for it.

Next, focus on your calls to action. What jumps out about them? How do they fit in with the visual patterns on your site? Do they fit in too much? Do they clearly stand out? In other words, why is your eye drawn to them — or, conversely, why is your eye NOT drawn to them?

Take what you learned from Rafal’s insight and use it to make your CTAs stand out more. Perhaps it’s adding more contrast. Perhaps it’s adding more white space around it. Perhaps it’s moving a sales page CTA further down the page — so you’re not asking for the sale before someone is ready to move forward.

Look at your site, analyze the patterns … and then break them. Do this for at least one call to action. Then track it.

Okay — coming next week, we’re back to technology. We’re going to talk about WordPress updates.

Finally, before I go, here are two more quick calls to action for you to consider:

Subscribe to Sites Weekly

If you haven’t yet, please take this opportunity to activate your free subscription to our curated weekly email newsletter, Sites Weekly.

Each week, I find four links about content, design, technology, and strategy that you don’t want to miss, and then I send them out via email on Wednesday afternoon.

Reading this newsletter will help you make your website more powerful and successful. Go to studiopress.com/news and sign up in one step right there at the top of the page. That’s studiopress.com/news.

Rate and Review Sites on Apple Podcasts

And finally, if you enjoy the Sites podcast, please subscribe to the show on Apple Podcasts (formerly known as iTunes), and consider giving us a rating or a review over there as well.

One quick tip on that: to make the best use of your review, let me know something in particular you like about the show. That feedback is really important.

To find us in Apple Podcasts, search for StudioPress Sites and look for the striking purple logo that was designed by Rafal Tomal. Or you can also go to the URL sites.fm/apple and it will redirect you to our Apple Podcasts page.

And with that, we come to the close of another episode. Thank you for listening to this episode of Sites. I appreciate you being here.

Join me next time, and let’s keep building powerful, successful WordPress websites together.

This episode of sites was brought to you by StudioPress Sites, which was awarded “Fastest WordPress Hosting” of 2017 in an independent speed test‏. If you want to make WordPress fast, secure, and easy — and, I mean, why wouldn’t you — visit studiopress.com/sites today and see which plan fits your needs. That’s studiopress.com/sites.

Never Miss New Shows and Episodes on Rainmaker.FM

Get the best of the Rainmaker.FM network in a single weekly email, along with two weeks
of free training that will change the way you think about online marketing ...

Free Registration

You might also like...

The Digital Entrepreneur

Does Traditional PR Really Matter Anymore?

Listen to episode
Copyblogger FM: Content Marketing, Copywriting, Freelance Writing, and Social Media Marketing

Revisiting Authenticity: What It Is, What It’s Not, and Why It Matters

Listen to episode
Rough Draft

004 How Search Engines Work, Part Two

Listen to episode
Hack the Entrepreneur

How a Bus Commute Helped Build a Speaking Career

Listen to episode
Copyblogger FM: Content Marketing, Copywriting, Freelance Writing, and Social Media Marketing

Is Authority Earned or Bestowed?

Listen to episode
Rough Draft

057 The Doomsday Cult School of Specificity

Listen to episode

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Rainmaker.FM is Brought to You ByWP Engine

Discover why more than 80,000 companies in 135 countries choose WP Engine for managed WordPress hosting.

Start getting more from your site today!

Copyright © 2023 Rainmaker Digital, LLC. Powered by the Rainmaker Platform.

Privacy Policy  ·  Refund Policy  ·  Cookie Policy  ·  Terms of Service  ·  Contact