Add High-Impact CTA Buttons to WordPress Posts and Pages Effortlessly

It’s all fine and dandy having reams of text on a site telling folk how amazing your products are or what an excellent service you offer. However, without some means for them to easily avail of those products or services, you may as well be talking to yourself. Therefore, you must allow visitors to continue the dialog by tasking them with an action of some kind. This is where the WordPress buttons step into the limelight.

Why Do You Need Call to Action Buttons in WordPress?

CTA – or call-to-action ­– buttons encourage users to take the next action. They could be as simple as a ‘Buy Now’ or ‘Add to Cart’ button to immediately secure a sale. Or they could lead the visitor to other content designed to further ‘funnel’ them in a particular direction.

Other examples of CTA buttons include:

• Read More
• Read Now
• Download
• Subscribe to Our Newsletter
• Watch on YouTube
• Listen on Spotify
• Bookmark This Page
• Join Now

The placement of CTA buttons is also crucial. For example, there isn’t much point in putting a “Buy Now” button at the beginning of a product listing as people won’t know what you want them to purchase. What’s more, most won’t be willing to read through a lengthy product description and then have to scroll back up the page to buy it – they want the button to be exactly where they expect it to be.

Therefore, place buttons at the logical point in the post or page where users are most likely to need them. For example, the main menu buttons on a website (which are also CTAs) are usually at the top of the page, where people expect to find them.

What’s more, the design of CTA buttons also plays a big part in users’ willingness to press them. They need to be obvious enough to attract attention, but not so ‘in your face’ that they scare people away. Remember, people like to think they can decide for themselves and don’t always appreciate being ‘told’ what to do. Therefore, your CTA buttons need to reflect that.

Having CTA buttons on your site can help improve conversions. They can have a massive impact when well designed and properly placed.

How To Create Buttons in WordPress

WordPress purists may tell you that you need to mess around with code or CSS to create buttons on your site. Indeed, if you want them to be totally bespoke, there is an element of truth in that.

However, if you are like me and possess zero coding skills, you’ll be happy to know there are several alternative methods for adding CTA and other button types to WordPress. I am now going to show you three of them, none of which need any knowledge or experience of CSS or code.

Option 1 – Using Gutenberg

Gutenberg is the block editor that WordPress introduced in version 5 of the platform at the end of 2018 to replace the classic editor. As with anything entirely new, Gutenberg received mixed reviews, with the negative ones coming primarily from people who had gotten used to the classic editor. However, it’s here to stay, and once you are familiar with it, going back to the classic editor feels archaic.

Gutenberg includes several handy ‘blocks’ which you add into content to do various things. Naturally, buttons are included, and adding one is child’s play:

Step 1

Firstly, you need to insert a new block in your post or page where you want the button to appear.

To do this, just hit enter (you can rearrange the blocks later if necessary, using the up/down arrows that appear in the mini toolbar, which hovers above the blocks):

Step 2

Enter a forward slash (/) in the ‘Type / to choose a block’ field – a list of commonly used blocks will pop up. In my case, the buttons block option appeared at the top, but you can type /buttons to see only the available button options:

Step 3

Choose ‘Buttons.’ A new button field will insert automatically. Press the little gear icon to the top right of the screen to call up the block editor so you can configure the button:

Step 4

Double click on the button to enter the text you want it to contain:

Then, use the options in the block editor to the right of the screen to change button colors, outlines, size, shape, etc.:

Step 5

To position the button, use the options in the floating toolbar:

Step 6

You must now add the hyperlink to which the button points. The link can be to an external web address or an internal one leading to another page or post on your website.

Click the link button on the floating toolbar, enter the URL into the URL field, and hit the curved arrow next to it to enter it.

Step 7

You have now created your button! You may see how it will look once published using the preview option. Any necessary adjustments to the size, position, color, etc. can be made by repeating steps 4 and 5:

Option 2 ­– Using Elementor

Elementor is a popular visual editor plugin that makes building pages and posts easy, thanks to drag and drop. Creating buttons in Elementor is like Gutenberg, although it offers more styling and customization possibilities, particularly if you have Elementor Pro.

Here is a very brief overview of how to add a simple button to a post or page using Elementor:

Step 1

Call up the widget menu on the left-hand side of the Elementor editor screen and type “button” in the search bar. The available button widgets will appear (some will only be accessible if you have an Elementor Pro subscription). Drag the desired button widget and drop it into the block where you want it to be located:

Step 2

The menu to the right-hand side of the screen should now show ‘Edit Button’ with all the button configuration options. If it isn’t, simply click on your newly created button to access that menu.

Step 3

Change the button’s text by typing into the ‘Text’ field. The changes you make will reflect in real-time in the button:

Step 4

Enter the required hyperlink into the ‘Link’ field. Please note that clicking the little cog icon will drop down a couple more options:

Step 5

Style your button using the various options in the ‘Content’ and ‘Style’ tabs under the ‘Edit Button’ menu:

Step 6

When you are happy with your button, you can continue creating the rest of your page or post by adding new blocks.

Option 3 – Using a Plugin (MaxButtons)

If you want many button options, including pre-made ones, a WordPress plugin such as MaxButtons is a good option.

MaxButtons is a freemium plugin that, even in its free form, offers excellent flexibility in button design thanks to a super-simple editor. A Pro version offering even more options is available starting from $24 per year.

Get MaxButtons Here

Here are the steps for adding MaxButtons to your WordPress and using it to create jazzy CTA and other types of buttons:

Step 1

From your WordPress admin dashboard, select ‘Plugins’ in the left-hand menu and then click ‘Add New.’ Then type “MaxButtons” in the search bar that will appear in the ‘Add Plugins’ screen:

Step 2

Locate the ‘MaxButtons’ plugin from the plugins that WordPress suggests and hit ‘Install Now’:

Step 3

Once the plugin installation completes, the ‘Install Now’ button will switch to ‘Activate.’ Press that to activate the MaxButtons plugin:

Step 4

A new item will appear in the left-hand menu titled ‘MaxButtons.’ Click on that to show the MaxButtons dashboard and to reveal the dropdown submenu:

Step 5

You are now ready to create buttons using MaxButtons. Start by pressing ‘Add New’ either in the MaxButtons submenu or in the Maxbuttons dashboard:

Step 6

You will now see the configuration and customization options for your button. This step covers the basic settings you need to create a simple one.

Firstly, you need to give the button a memorable name which will help you if you need to use the same one in the future.

Next, you must add the hyperlink to where it will point to, which can either be an external URL, or you may use the ‘Select Site Content’ button to link other parts of your site. You also need to add the CTA text that you want on the button. Furthermore, if you wish, you may optionally add a ‘tooltip’ (explanatory text that appears when users hover over the button):

Step 7

If you wish, you can play around with the other customization options to get the button to look precisely how you want it. You’ll notice that the preview to the right-hand side of the screen shows the changes you make to the button in real-time:

Step 8

Another advanced setting is available to adjust the button to suit certain mobile device types (assuming your theme is responsive). This is accessed by pressing the ‘+ Add for mobile’ option and choosing the appropriate presets. You may create several profiles for different device types:

Step 9

When you are happy with your button, press ‘Save.’ A yellow box will appear containing a shortcode that you can use to embed your new button wherever you want in your site’s content, so copy that:

Note that pressing the little down arrow next to ‘Preview’ closes the button preview, and pressing the one by ‘How to make your life easier’ gives several useful alternative shortcodes you can use:

Step 10

To add the button to your pages or posts, simply insert the shortcode from the previous step wherever you want the button to appear. For example, here I am using the ‘Shortcode’ block in Gutenberg to insert the button:

Step 11

You can now save and preview the post or page to see the button in action:

Step 12

To view a list of all the buttons you have created, plus to easily see the shortcodes for each of them, go back to your WordPress admin dashboard and click on ‘Buttons’ under ‘MaxButtons’:

Incidentally, WPLift have a full review of the MaxButtons plugin if you’d like to read more about it.

What Method Do You Use to Add CTA Buttons to Your WordPress Website? 

Personally, I think a well-designed button often looks much more attractive than a hyperlink on a page or post, particularly when used for call-to-action purposes.

As I explained in this article, adding buttons is very straightforward irrespective of what WordPress editor you prefer. What’s more, button plugins like MaxButtons can really lift your CTAs to another level.

What are your thoughts on CTA or buttons in general? Do you use them on your WordPress website? If so, did you just use Gutenberg to create them, or have you fancied them up using Elementor or a plugin? Do you have any tips on button design for other WPLift readers? Your input is always highly appreciated.