Affiliate Marketing

How to Create Buttons in WordPress that Engage your Readers [3 Effective Ways]

Let’s be realistic!, Why do you think WordPress is so popular and powerful with less than two decades on the market? well, it’s because of its great flexibility. Any user without prior knowledge of HTML, CSS or PHP can create a fully customized professional website without too big of a hurdle.

As you may know, WordPress will allow you to create almost any type of element for your website. This can include content, tables, buttons, columns, etc. Again, without any prior programming knowledge.

In this post, I will be covering how to effectively create buttons in WordPress. While there are many ways to do it, I will focus on the three most popular methods. First, using the Gutenberg Editor inside WordPress. second, using the ‘Forget about shortcut buttons’ plugin and the last method, using a FREE Button Generator software. At the end of this post, don’t miss my bonus tip for you: Button ideas that will increase your website conversion rate.

How to Effectively Create Buttons in WordPress that Engage your Readers

How to create buttons in wordpress

The Gutenberg Editor:
Is the new page builder that was designed to integrate with WordPress core. It will allow you to easily create your basic CTA (Call To Action) buttons inside WordPress. It requires WordPress 5.0 or newer.


Using a Button creation Plugin:
The WordPress developer community has created many plugins for many different tasks and some of them focus on the creation of buttons. While there are many that you can try out, the one I recommend is “Forget About Shortcode Buttons”. This plugin is my go-to button creator because it doesn’t slow down your site, is effective and very easy to use.


Online Button Generator Programs:
As the name says, you can find them online and it will allow you to select from a wide range of design or create and customize a button as you wish. All that achieved without the need to install an extra plug-in to your website. The one I recommend is the FREE “Button Optimizer “. Once the button is created, you can download the image to your PC and then upload it to WordPress.

Have fun! You will be creating beautiful and catchy CTA buttons for your website in no time!!!.


Creating Buttons using Gutenberg Editor inside WordPress


Step #1. Click Edit on a page or post.

Step #2. Select the block where you want to insert the button. See Picture below.

Step #3. Click on the plus (+) icon.

creating buttons with Gutenberg editor 1


Step #4. From the drop-down list select Layout Elements.

Creating buttons with Gutenberg editor 2

Step #5. Select Button from the menu.

Creating buttons with Gutenberg editor 3


Step #6. After that, you will see a live preview of a custom button.

Step #7. In the Text box, enter the text for the button label.

Creating buttons with Gutenberg editor 4


Step #8. Click on the URL section and add the URL where visitors will go when clicking the button.

Step #9. If you want to modify the style of your new button you can do so as well.

Creating buttons with Gutenberg editor 5


Step #10. Click on the block containing the button to bring out the Block options. If the options aren’t visible, click on the gear icon on the top right.

Step #11. Select the background color and text color. You can also select the custom colors for more variety. WordPress has a handy feature that will warn you if the color scheme you choose is difficult to read.

Creating Buttons Using The ‘Forget About Shortcut Buttons’ Plugin


Install and activate the ‘Forget About Shortcut Buttons’ plugin

Step #1. Click Edit on the page or post you want to use.

Step #2. Select the area where you want to insert the button.

Step #3. If you are currently using Gutenberg Editor, change to classic Mode of WordPress. You can do so by Clicking on the (+) icon and selecting the Classic Mode box.

Step #4. Select “insert button” from the box menu. Now you will be able to see a live preview of the custom button.

Step #5
. On the properties tab, In the Text box, enter the text for the button label.

Step #5. Click on the URL box and add the URL where visitors will go when clicking the button.

Step #6.
On the icon tab, select any of the icons you want to insert from the list.

Step #7. Once you are happy with your design, Click save to save the template.

Step #8. Then Click on Update to insert your button to your post.

Step #9.
Save your post in WordPress.

Creating Buttons using a Button Generator


There are different websites that allow you to generate nice buttons. In this guide, I will be showing you how to create a button using the button optimizer website. You can also check out other good options like DaButtonFactory and Imagefu.

Now that you are ready to create nice looking buttons go to this site http://buttonoptimizer.com/ and you will see a very nice pre-made button which can be customized as desired.


Step #1. In the Button Text area, you can enter the text, font type, and color of your button.

Step #2. On the size, Border & color Details tab, you can also change the background and borderline color.

Step #3. In the Icon section: you can type a category of icons and it will display a list of very nice remarkable icons that you can choose from. For example, type ‘home’ and a list of icons will display.

Step #4. Text and Box Shadow: To add or modify shadow to your text or the button itself.

Step #5. Once you are happy with the look of your button, Click Save to download the icon as a PNG file.

Step #6. Now, go to WordPress and click Edit on a page or post you want to insert your button.

Step #7. Select the area where you want to have your button and click Add Image icon.

Step #8. Once you insert the button, go to your WordPress menu, add the URL where you want your visitors to go when clicking the button.

There you go! Three different ways you can create CTA buttons to your WordPress content.

BONUS TIP!! BUTTONS IDEAS FOR YOUR WEBSITE

Copy and paste any of the following phrases and use it as a reference.

There are 2 types of call to action buttons you can use: Primary Action buttons and Secondary Action buttons:

Primary Action Buttons:
That’s when your readers decide to take action immediately or buy from you right away.




Create Your Free Account
Yes! Sign Me Up!
Register Today!
Buy Now!

Start Learning Now
Take A Peek
Try Now!

Sign Up For Your Free Trial
Sign Up & Get Started!
Join Today!

Sign Up For Free
Sign Up Now!
Sign Up Today

Secondary Action Buttons:
For readers that need to read more before taking any action.



More Info
Learn More
See How It Works
Find Out More

Get Your Free E-Book
More Info
Learn More
See How It Works

Find Out More Free Tour
Take A Tour


Free Tour
Learn More
See Plans & Pricing

For both intentions combined: Primary & Secondary Call to Action Plan

Take a look at this example…

Sign Up & Get Your Free E-Book!
Sign Up for Your Free Trial, Instant Access
Sign Up, And See How It Works


MY EXTRA TIP!, If you are considering to monetize your blog so that it generates more traffic and income, I suggest you visit the community where I hang out a lot and where I have received great training. It really makes a difference because you will learn a lot from other bloggers.

See my full Review of Wealthy Affiliate here. You will see the benefits of having a mentor that will personally help you out! I hope to see you around in this community! You can find me by my username, RiaBatista.

check my WA review3

Final Thoughts

The creation of CTA buttons is a fundamental aspect of your website’s success. It is an excellent way to invite your readers to take action and as a result, increase your conversion rate.

If you need to add buttons frequently because you realized that having an outstanding button design improves your overall conversion in your website, then use a plugin. Otherwise, I recommend using an external button creator.

As always, please leave me a comment or question below and I will be happy to help in any way I can.

I enjoy helping people who are starting as a blogger and building an online business around anything they are passionate about.

See you around,

ria
Smart Leader Affiliate

2 thoughts on “How to Create Buttons in WordPress that Engage your Readers [3 Effective Ways]”

  1. Hi Ria –

    I really enjoyed reading this post because, to be honest, I’m not really using buttons or CTAs effectively at the moment.

    Ironically, I’ve been that busy writing that I haven’t really thought about getting the reader to engage to your post has really made me think about my recent articles and what I can add to them to get more interaction on my pages.

    Personally, I think I prefer the Gutenberg route. It’s so simple and it’s built into WordPress now.

    I hope you don’t mind a suggestion – it might be helpful for other readers if you added some more screenshots to your excellent step-by-step guides as some people are more visual.

    Phil

    • Thank you I’m glad it was helpful to you. Bytheway, thanks for your observation, the idea is to promote that we can help each other. Very soon, I will be integrating other screenshots to improve the adding buttons process.

      Many blessings

Leave a Comment