Adding buttons to content is important. The point is not only as a place to put hyperlinks. But also to lead visitors to want to download, subscribe, or buy your product.
However, the use of buttons should be adapted to the context of your content. Not all hyperlinks must use the button element. There are some of them that only need to be inserted into the anchor text, such as: “read here” or “click here”.
That’s why, this article will not only explain how to make a WordPress button. But we will also tell you how to make an effective button.
Oh yes, here we will explain two ways to make buttons, namely with the Gutenberg editor and plugins. So, later you can just choose which way is easiest to follow. Please pay attention!
How to Add WordPress Buttons with Gutenberg
The friendliness of using WordPress is indeed not half-hearted. Those of you who are unfamiliar with coding don’t have to bother creating buttons or buttons on website pages with HTML or CSS.
Because, WordPress already provides two flexible ways to do it. First, by using the Gutenberg WordPress block editor. Second, by installing plugins.
So as not to get confused, let’s create the first scenario, namely how to create a WordPress download link with the Guttenberg block button. Please follow, okay!
1. Login to your WordPress account.
2. Create new content or you can also select the page you want to add a button to.
3. If you add content that has already been created, click Edit.
4. Click the (+) icon to add a new block. Then look for the word buttons.
– After the button appears, type the text you want to enter.
– Click the hyperlink icon to insert the link on the button.
– Enter the destination URL.
– You can click on the icon below to shift the position of the button so that it leans to the left, center or right.
– To make it more eye-catching, you can freely change the button shape design, text color and background on the right sidebar block editor menu.
– Your button creation is complete!
How to Make WordPress Buttons with Plugins
Apart from making buttons with Gutenberg, you can use the help of plugins. Especially if you want a button with a more attractive design.
Actually, there are many choices of WordPress button plugins that you can use. However, in this article we will explain one button plugin, namely Stackable.
Stackable is the newest WordPress plugin that allows you to get 24 types of Gutenberg block editors in an advanced version. So, in this plugin you are not only facilitated by advanced features for creating buttons. But another additional feature on several Gutenberg blocks.
Such as count up features, icon lists, video popups, calls to action, rows and columns, grids, and many more.
So how do you create a button with the Stackable plugin? What are the additional features? Come on, follow the tutorial below!
Step 1 – Installing Stackable Plugins
Before you can create a button, make sure the Stackable plugin is installed on your WordPress. Here are the steps:
– Login your WordPress account.
– Select Plugins on the WordPress dashboard menu, then click Add New.
– You can find this plugin by typing Stackable in the Search field. Then, click Install Now and Activate the plugin
Step 2 – Creating the buttons
After successfully installed, then you can create the button you want. The steps are more or less the same as the first way.
– Create new content or you can also select the page you want to add a button to.
– If you add in content that has already been created, click Edit.
– Click the (+) icon to add a new block. Then scroll down until you find the words Stackable and select block Button.
– After the button appears, enter the desired call to action text.
– There you can set several forms of Layout, namely Basic, Full Width or Spread — on the block editor menu on the right side of the screen.
– To insert a link on the button, select the Style menu in the block editor. Then, enter the link in the Link / URL field.
– Well, in this plugin you can change the form of writing with various types of fonts. The trick is to scroll down in the Style menu until you find Typography. Then, click the ‘pencil’ icon on the right and select a font type in the Font Family column.
– Next, if you want to change the text color and button background, scroll down in the Style menu until you find the Button color type option. Select an available color or click Custom color if you want to use a custom color.
– The next interesting feature is that you can add icons to buttons. There are many icon choices available, such as social media logos, shop carts, downloads, and various other platforms. The trick is to scroll down in the Style menu until you find the Icon option.
– Click the Icon button, and enter keywords according to the icon you need in the search field.
– Finally, you can also add a background in the form of images and videos to the button. The method is easy. Scroll down in the Style menu until you find Block Background. Then, enter a photo or video in the Background Image and Video section.
So, those are some of the features offered by the Stackable plugin. You can also upgrade to the Premium version if you want more complete features.
Oh yes, there are many other best button plugins that you can install on WordPress. And of course, some of them also offer free services. Such as WordPress Button Plugin MaxButtons, Forget About Shortcode Buttons, Buttons Shortcode and Widget, Ultimate Blocks and Ultimate Shortcodes.
5 Tips for Making Effective WordPress Buttons
At first glance, maybe the button is considered a trivial element. In fact, the effect of using buttons in content is not that simple.
If you carelessly use the wrong color, size, or type of font, this can result in a lack of interest for visitors to click. Because, the visual aspect of the button is important to attract the attention of your visitors.
In addition to the visual factor, there are other factors that also need attention. Such as text writing, button placement and so on.
To make it clearer, let’s immediately look at some of the tips for making effective buttons below.
1. Ensure Text is Easy to Read
Regardless of the button design you create, make sure the text is easy to read. Easier, you can adjust the font size of the text. To be precise, the text in the CTA must be the same or slightly larger than the size of the text in the body of the paragraph.
In addition, avoid using convoluted font types or cursive handwriting which makes it difficult for readers.
It’s better to choose a simple font type, for example Times New Romans, Arial, Roboto, and whatever is commonly used.
2. Create Interactive CTA Text
Call to action (CTA) is the main role in making buttons. Writing the command word or solicitation listed on the button really has to be able to persuade your visitors to want to click.
How to?
It’s so simple. Some important things to pay attention to are using clear, friendly and interesting vocabulary. Take for example, you want to provide a free trial service for an application for 30 days.
Instead of writing CTA text like: “Download the Free Trial Application”, you can make it more interactive to “Enjoy Your Free Trial Application Now!” Clear right, the difference?
When visitors read text like that, they don’t think you’re giving orders. Rather it is the benefits they can get by clicking your button.
That is, the button can have the opportunity for you to get conversions. So, to make your CTA writing tactics sell even more, read our full review on Increase Your Conversion Rate with these 5+ CTA Tips!
3. Choose a Contrasting Color
If you have sorted out the CTA text, next you need to think about the color of the button. At least, there are two aspects that can be used as a reference when choosing a color, namely: a color that contrasts from the color of the entire page. Or adjust to the color of your brand.
For example, suppose your entire page is dominated by purple and blue tones. Although there are no specific requirements regarding which color is right — preferably, choose a contrasting color from the two colors. Like for example yellow or red.
With a contrasting color, your button will stand out from the other elements around it. And potentially attract the attention of visitors.
The next alternative, you can use a color that is in harmony with the color of your brand. An example like the image below uses a green color on the button with white text. Deliberately adjusted to the color of their website logo which is indeed green.
4. Create the Right Size and Space
Setting the button size and space button also needs attention. Especially if your website is also converted in the mobile version. So, make sure your button size fits the user’s finger on a touchscreen phone — so they don’t click wrong.
Oh yeah, there are actually no specific rules for the space button. It’s just that you need to leave a little white space in the button design so that it doesn’t stick with the text.
5. Put the Button in the Right Position
As we explained earlier, the use of contrasting colors has the potential to attract the attention of visitors. And if you can take advantage of the right button placement, this potential can also increase.
There are two effective ways to place buttons: first, by understanding the user’s mental model and second, by the user journey.
The mental model is formed through how often a certain pattern is used. Which ultimately creates a habit in the user.
Here’s an example. If we asked where you can find a sign up button on a page without you looking at it, which side would you point to?
Most likely, we’re guessing you’ll be pointing at the top-right corner of the page. This is because most websites often place buttons in that position. So, by understanding this pattern, you can easily determine where to place the button.
Then the second way is to understand the user journey or user journey. That is, you can predict the user’s eye movements when browsing a website page.
Why is Adding a Button in WordPress Important?
Every time you create a page, of course you hope that the page can direct or persuade visitors to stop by your other pages. Either to read the latest articles, invite them to the checkout page or visit your social media.
That’s why it’s important for website owners to insert hyperlinks on every page accompanied by a command sentence, aka a call to action.
So, what are the advantages of using buttons? Here are some of the answers:
– 90 percent of CTA buttons must be read by visitors when they stop by a page. This makes it easier for you to direct readers to take certain actions.
– The potential for CTA to be clicked and get conversions can increase up to 120 percent.
– Make it easier for visitors when skimming pages. Because, Chartbeat says that a third of visitors only view articles for 15 seconds. So adding a button can encourage them to do your command while skimming the page.
But you need to know, that the use of buttons should be used as wisely as possible. In that sense, don’t use too much so as not to overdo the impression.
Create Your Version of WordPress Button Now!
Okay, now you know how to make a WordPress button, right? In essence, adjust to the needs of your content. For example, if you want a simple button, using Guttenberg is enough.
However, if you want a more interactive button model, you can use plugins. Don’t forget to follow our tips on how to make an effective WordPress button, OK? So that later visitors want to do certain orders that have the opportunity to increase your conversions.
[hurrytimer id=”247″]
