Call to action button is one of the most prominent differences between an eye-catching attractive website that still fails to convert or increase sales and the one that actually generates results. In simple words, no matter how much time you spend on your website copy, graphics, design and layout, if you are not making use of “call to action” button, your website is not an effective one.

According to Rakesh Soni, CEO and the founder of LoginRadius, “CTA button is the most important part of your website.”

There is a difference between an attractive website and an effective one. If your Weebly website looks good to eyes but doesn’t convert, what is the point of good looks? Simply put, if you own a business Weebly website that is always looking to generate more sales, increase conversions and to make users take specific actions, “call to action” button is the most important design tool you need to master.

Good News for Weebly Users

But is that it? Installing a “call to action” button on your Weebly website and you are good to go? The sales and conversion rate are going to increase? Unfortunately… NO. There is a lot more to CTA buttons than just installing them on your website.

There are tricks, tips and best practices for making CTA buttons more and more productive for your business. There is science, math, statistics, and a lot more involved when it comes to effectively using CTA buttons. For example, the statistics claim CTA placed at sidebar results in 0.5% to 1.5% conversion rate while the CTA placed at featurebox results in 3% to 9% conversion rate.

In this article, we will explore some of the best practices for using CTA button to your advantage. We will explore what the statistics claim, which practice generates the best result, what science has to say about placement of CTA buttons, and similar stuff.

Keep reading!

What is Call to Action Button?

Okay, you may find this heading a little basic, but unfortunately, there is a good number of Weebly site owners especially those who are trying to create their own for the first time on tools like Weebly confuse CTA button with many things that are absolutely not a CTA.

One of the most common misconceptions is calling a hyperlinked text that brings customers to product page or something like that a CTA.

Make sure you are using an actual CTA button that looks like a button.

Simply put, CTA buttons encourage readers to buy or download or subscribe to whatever the website is selling. It’s what the reader must click to take the action the website’s owner wants.

Enough of the basics, let’s begin with our expert’s advice.

Begin with Questions

I am 100% sure that most of the readers already have CTA buttons on their websites or planning one for the website they are building. You are most probably reading this article to learn how to make them more effective, that I can assure you we will get to in next few paragraphs, but first, ask yourself some questions. We will answer these questions in this article step by step and you can just check them as you read through the article.

• Is your CTA copy clear and easy to understand?
• Does it look like a lazy man’s call to action?
• Is it actually killing your conversions? (You face decline in conversions after using the CTA)
• Are you not sure where to place the CTA?

The CTA Button Copy

The text, the copy of your CTA button is extremely important for its better performance. If your text is generic and common, it may sounds like a lazy man’s call to action.

Many case studies proved that simply changing text of CTA buttons doubled the conversion rates for websites.

For example, a ContentVerve case study claimed an increase of 90% click-through rate by converting the previous text “Start your free 30 day trial” into first person phrasing, “Start my free 30 day trial”. A simple one word change increased the click-through rate by 90%, this is how important the CTA copy is.

Research has shown that the first person copy results in far more clicks than using the second person. It makes an emotional appeal to the reader.

It conveys truth, trust, intimacy in a way that the second person simply cannot and also helps you establish a personal connection, which makes it more likely for the reader to click on your Call-To-Action button.

Avoid generic text like buy now, purchase now, add to cart, click here and similar copy that you read on every other website. When “37 Signals” change their CTA text to “See Plans and Pricing” instead of “click here”, their conversion rates increased to 200%.

Make sure it is easy to read, clear, connects with the reader and personalized. Personalized and dynamic CTA buttons are the rising trends as they are more productive and help create better results. According to an interesting data research by HubSpot, personalized CTA converts 42% better.

Do This:
Instead of generic text, make sure the text of the CTA button is related to your products and services as it converts better. Don’t copy from other websites, write your own copy.

Use Action Oriented Verbs

Another excellent and highly productive practice is to use action oriented verbs. Make sure to use active, action-oriented verbs, such as “see”, “reserve” and “get” – versus familiar – passive verbs such as “enter” or “submit.”

Also combine these action oriented verbs with a text that grabs attention of the visitors like “Free”. For example, if you want visitors to download your ebook, use text like “Get Free ebook”. If you are not offering anything for free, make sure your copy highlights the value the users are getting for clicking the CTA button.

Be Creative

A lot also depend on your own creativity. There are a lot of examples to take your inspiration from, but you can also come up with your own creative idea of CTA copy.

For example, what you expect if the copy says, “don’t click here”? Probably a conversion killer? But not in the case of Timothy Sykes website who used the text “don’t click here if you are lazy”, only to report 39% increase in the conversion rate as a result.

What about the Size of the Text?

As we make sure that the CTA is the most prominent piece of our web page, the text of the CTA button is also larger than most of the other website copy. The text must be clear so the use of easy to read fonts is recommended.

But this doesn’t mean that larger the text is, the better it converts. If the size looks too big, it will annoy the readers. If the first impression the visitors have is something like ”eeeeh, why this text is so big”, forget about the high conversion rate.

To summarize everything I discussed so far, listed are 5 simple steps to follow for a high performing copy of your CTA button.

1. Make sure to lead with an action driven and known verb.
2. To avoid robotic tone, use articles or prepositions in the copy.
3. Mention something in the copy that your target audience is looking for.
4. No generic, be specific to your service or products.
5. Convert your “call to action” into “call to value”.

Wait, wait… “Call to Value”? What are we talking about here? To explain this point further, consider the following case study of Schedulicity.com.

The call to action text used by the website in the past was “Try Schedulicity Free”. This is also an effective copy using action oriented verb as well as an attention grabbing word, “Free”.

But Schedulicity.com did better by converting it into a “call to value” text. The conversion rate increased by an impressive 24% when the text was changed to “End My Scheduling Hassles” even when there is no mention of “FREE”.

Call to Action: Try Schedulicity Free

Call to Value: End My Scheduling Hassles. Conversion rate > 24%.

Interesting, isn’t it? When you mention the value your CTA button offers to your visitors, the conversion rate increases. So make sure to write about the value instead of simply calling to the action.

What is the Ideal Length of the CTA Button Copy?

It should be short, not long. Add text at the bottom of the CTA button if your message is long, but make sure it does not exceed 5 words.

What is Personalized CTA Button?

Personalization is not only about writing a different CTA copy, but it is a very detailed process about analyzing different needs of audiences and catering to them accordingly.

Consider a scenario. You are running an ecommerce store and also feature a blog. You decided to place a CTA with a particular offer on every blog post. Now, you can place one standard CTA at every page, but another approach is to create CTA according to the blog subject.

For example, if your blog post is about men’s foot wear – make the CTA offer for men’s footwear, if it’s a blog about kids – make an offer related to kids’ products.

Similarly, you can segment the audience according to the pages they visit, the products they are interested in, the actions the audience already took, etc.

For example, if you are using a CTA button to offer a subscription, you may want to create a different CTA for those who are already subscribed.

Think and be creative, you can find a lot of ways to come up with personalized CTA buttons that ultimately results in better sales and conversions.

Do This:

If you don’t want to invest a lot of time researching your audience, a quick solution is to divide your audience into three basic categories, visitors, leads and customers and write your CTA copy accordingly.

The Colors of Your CTA Button Matters More than What You Think

The next step after writing the copy and deciding about what you are using your CTA for is the color. For different industries, products, audience demography, type of website, theme and design of the website, different colors can work better than others.

According to few case studies discussed by Neil Patel in his article, 11 Ways to increase your calls to action, different colors worked for different businesses.

For example, Performable reported a boost in conversion rate by 21% when they changed the color of their CTA button to Red. On the other hand, SAP experienced a 32.5% growth in conversion rate when they used an entirely different color – orange – for their CTA button.

Do This:

It is not necessary if a particular color works for one business, it can generate same results for you. A good and the scientific way to make sure you are using the color that converts the most is A/B testing. Keep testing different colors until you come up with the best one.

Testing is the key here. Gmail once did 50 tests for the right shade of the blue before finalizing the best converting shade. Yes, you read it right, 50 tests for the best performing shade of blue.

I understand that this is not possible for most people designing their own Weebly websites, but I expect you to test at least few colors before opting for the best one.

I previously mentioned there is also science involved in making CTAs more productive. There were hundreds of researches and scientific studies in last few decades on the role of colors for advertising industry. Different colors create different impact on the viewers. For example,

• Blue color represents business honesty and its conservative values.
• Orange color represents that business is affordable.
• Green is used for eco-friendly approach of business.
• Black and Silver are used to represent elegant businesses.

Similarly, research and studies also provided details about colors that work best for different sets of online buyers. For example,

• Orange, Red, Black and Royal Blue: Use these colors for impulse shoppers.
• Red color also creates sense of urgency.
• Navy Blue and Teal: Use these colors for Budget shoppers.
• Rose, Pink and Sky Blue: Use these colors for traditional shoppers.

Do This:

To make your CTA buttons more personalized, divide your consumers according to their background, income level, and previous shopping history. Assign different colors to your Weebly website’s CTA that best fits to their needs.

Make sure that your CTA button color goes well with the overall color theme of your website. You may want to use contrasting colors that are more visible on your website.

Don’t use colors that are not much visible if your color theme is bright or bold. Don’t use a color that is already used on the webpage. To use a color that makes your CTA button stand out on your web page is extremely important.

Where to Place CTA Button?

Consider your web page a land for real estate. Make sure you reserve the best piece of land – the perfect location – for your CTA button. Studies have found that placement of your CTA button has the most impact on your conversation rate.

One of the best places is to add the CTA button under the fold, that is your key message or offer. According to Neil Patel – owner of Neilpatel.com – when he tried adding the CTA button above the fold, the conversion rate decreased by 17%.

Putting call to action at the top may not work as you expect. It may feel right to present the CTA as the first thing on your website, but users may want to learn some more before deciding to click on the CTA button.

Another good example is of CrazyEgg.com. The website used a fixed CTA button that remains at the top of the page as you move down the web page. This is a nice approach as you may not have to think about the best place for better conversion.

Do This:

Just like the color of the CTA button, the best way to find the sweet spot for your CTA is A/B testing.

Simply put, the CTA button must appear on the web page without any need to scroll down to find it. But it must not be at the top of the actual pitch of the business. It is also a good practice to keep some distance between the CTA button and the other text on the page. There must be some empty space around the CTA.

Listed are some interesting findings by Grow & Convert about placement of the CTA button.

• Sidebar: 0.5 – 1.5%
• Generic, end-of-post: 0.5 – 1.5%
• Pop-ups: 1 – 8%
• Sliders and bars: 1 – 5%
• Welcome gates: 10 – 25%
• Featurebox: 3 – 9%
• Navbar: varies

Timing is also important. This mean, you may want users to view your CTA button once they understand what you are selling and the benefits they get. In such cases, come businesses place the CTA button at the bottom of the page, to make sure the website visitors read the pitch and other benefits they offer before reaching the CTA button.

The surprising thing is, in some cases it worked, like in the case of Kimberly Synder website, where CTA button doesn’t appear on the web page until visitors watch a video. And guess what, it increased the conversion rate by 144%.

Is Shape of the Button Important?

Yes, it is. It must be in sharp contrast with the overall theme and layout of the website just like the color.

According to one research, buttons with rounded corners seem to work the best because they draw people’s attention inward. Our brain processes buttons with rounded corners more quickly according to neuroscientists.

In one case, when the color and shape of the call to action button is changed to green and rounded corners, the actual sales increased by 35.81%. I am not talking about conversion rate, but the actual sales for a major European e-commerce store.

Again, a lot depend on the overall layout, design and theme of the website. There is no one fit-for-all solution when it comes to the shape of the button. A/B testing is again the right option to try to come up with the best shape for your button.

What is the Best Size?

Large or small, the performance of the CTA button depends a lot on your website design, layout and the perfect size that makes the CTA a highlight on the page. The size must look good and must be relative to the layout and other elements on the Weebly website you are designing but at the same time, it must stand out on its own.

The best performing CTA button is not always a large one. When a size that makes it visible on the website is a good practice, a huge size may create an impression that it is not clickable. Irrespective of the size, make sure there is some empty blank space with contrasting color around the CTA.

In one case, the bigger size backfired as the conversion rate dropped by 10% on a payment page of the ecommerce store. According to the marketer who designed the CTA, the size of the button backfired because it became too big for the users who feel pressured to carry out the action and decided against it as a result.

If you are unsure of the best size, try zooming in your webpage to 75-80 percent and then seeing how noticeable your button and other elements are. The Weebly app page, which helps users create and customize buttons, also has some good examples of properly sized Call-To-Action buttons.

Consider Attention-Getting Graphics for Your Button

Consider using attention-getting button graphics, such as an arrow or finger, but make sure they clarify what you want the reader to do and are not confusing. There are plenty of case studies that proved a simple addition of arrow or similar graphic made a huge difference.

In a case of a popular Danish portal for buying and selling used phones, when a green arrow button was removed from CTA button, the conversion rate dropped by 12.29%.

In another example, Helzberg Diamonds reported an increase of 26% in click-through rates when an arrow icon was added to the CTA.

The popular digital marketing website – Quick Sprout – reported an impressive 28% increase in conversion rate when the product image was also added to the design of the CTA button that previously only read “add to cart”.

Do This:

Adding graphics like arrows and product images to your CTA button is among the best but often a rare practice. Make sure you are using it for your Weebly website.

Check out the Baamboo Studio Call to Action App which makes it possible for Weebly users to add graphics to their buttons easily.

You can also use additional text around the button to educate people about the value they are getting. Especially in case of checkout or purchase button, minor adjustments can have major impact on sales.

For example, if you are asking for credit card payment, you can also add alternative payment methods such as PayPal at the bottom of the CTA button which is rated as more convenient by many online buyers.

Limit the Choices Your Button Offers

This might seem counter-intuitive, but limit the choices that your Weebly website or the Call-To-Action button provide. People function better with fewer choices versus being overwhelmed.

In 1999, Mark Lepper, now a psychology professor at Stanford University and S.S. Iyengar, now the Director of Computer Science at Florida International University, published an article entitled “Rethinking the value of choice: a cultural perspective on intrinsic motivation.”

In three separate experiments they found participants were likely to buy chocolates or gourmet jams or write an additional class essay when given six choices versus 24 or 30.

Study participants actually expressed more satisfaction with their chocolate or jam purchase and wrote higher quality essays when presented with fewer choices. If you do have more than one Call-To-Action button, make one more enticing than the others to help the readers choose.

Layout Your Webpage and Button the Way People Read

When Weebly Web Design is laying out your page, we remember how readers read webpages and place your button accordingly. Eye tracking studies conducted by researcher Jakob Nielsen of the Nielsen Norman Group in Fremont, Calif. have revealed readers scan webpages in a pattern resembling an “F” or an “E”.

They begin by reading across the top portion of the webpage. Then they move down the webpage and read across again, although not as far as the top section. Then they scan down the webpage’s left side. So your Weebly Webpage designer will keep this information in mind when deciding just where to place your Call-To-Action button. Toward the bottom of the webpage or on the right-hand side are best.

Along those same lines, don’t make your reader backtrack to click on your button. It should be located in logical places that are at the end of where the reader will scan or read. For example, don’t put a sign-up or order button before the text explaining what the reader is signing up for ordering.

Whitespace around Your Button

Everything we discussed so far revolved around how to make your CTA stand out on your web page. Leaving empty space around the CTA button, especially whitespace can do exactly the same.

It not only makes CTA prominent and more visible, but it also makes the text easier to read. A simple rule of thumb is to avoid placing too many elements in your Weebly website especially around the CTA. It is a guaranteed conversion killer. The empty whitespace around the CTA can quickly grab the attention of visitors and can affect conversion rate significantly.

A variation on white space that has become popular is known as the “Ghost Button”. They are transparent, with a basic shape such as a square or rectangle. The border usually is a thin line while the plain text uses a sans-serif font. These also tend to be large than typical colored buttons.

Is Your CTA Button Optimized for Mobile Devices?

Try out Call to Action App by Baamboo Studio to design a custom CTA button for desktop and mobile devices.

All the themes and designs on the Weebly websites are responsive as are the apps developed by Baamboo Beach. So you are all good on this one.

Test Your Button, Then Re-Test It

When you finally are finished designing your Call-To-Action button, you really aren’t. That’s when you must test it, test it and test it again. Then tweak anything and everything that doesn’t seem to work. Make sure to check if the link is right and takes the users to the right page. If your CTA button do something else than what it promises, you can say goodbye to higher conversion rate or sales.

Call to Action Buttons: Examples and Best Practices

1. Along with the colors and the rounded edges, these websites from U.S. Bank and Mortgage Calculator demonstrate keeping the Call-To-Action button’s text short. https://www.usbank.com/bank-accounts/checking-accounts/compare-checking-accounts.aspx  http://www.mortgagecalculator.org/
2. Desktime has a Call-To-Action button that is proportionate to the other elements on the webpage and also uses the first person. https://desktime.com/mobile/
3. Jazz ATS @ Recruiting Software uses bright colors, first person and interesting button shapes and graphics. https://www.jazz.co/
4. Daily Mile places its button where it is seen easily but also after the reader has read what the website has to offer. http://www.dailymile.com/
5. Notepod provides an excellent example of both using icons to get your attention and then bright, contrasting colors to distinguish the arrows from the buttons. http://notepod.net/
6. Incredimail offers the reader good, exciting colors, short but exciting text and prominent placement for its button. http://www.incredimail.com/en

Conclusion