How to Add a Call to Action in WordPress
A call to action is a website feature which can take many shapes and forms and perform many functions. And as is often the case, there are no clear rules, but solutions tend to certain regularities. Introducing a call to action to your WordPress website is easy enough, and we will show you how to do it.
But let’s not get ahead of ourselves – let us take some time to discuss what a call to action (or CTA) really is. If you feel confident you know your stuff when it comes to design, feel free to scroll right down to the nuts and bolts section.
This is what we will be discussing:
The clue is in the name: a CTA is any design element introduced with the goal to encourage a user to take an action. The element itself is usually a button, but it can take many different forms. Similarly, the action you wish the user to take can be anything, from visiting a particular page, through subscribing to your newsletter to buying a product or service from you.
This is why a call to action is usually seen as a conversion tool, but it’s not necessarily limited to that – you can use it to prompt the visitors of your home page to join a live stream of an event you are organizing, or read your FAQ or any kind of Read This First content, for instance.
As with many other website elements, there is much to be said about designing a CTA. In fact, if you want to get into the details of designing a CTA button, we do have an in-depth article on best practices. We will give you the short version here.
In terms of text, you need to really engage the visitor, especially if you’re trying to charm them into parting from their money, while at the same time communicating unequivocally the action the user is expected to take: Read More Here or Subscribe For More Awesome Content make for decent and clear choices. If applicable, you should also try to spice things up by instilling a sense of urgency with an Only Today or Click Now And Save 50%, or similar.
When it comes to the looks, you should take steps to make the call to action button stand out in the environment of your website while at the same time not clashing with it. In terms of shape, the common wisdom is that rectangles convey a sense of stability, while when it comes to colour complementary colours tend to provide enough contrast while being pleasing to the eye. When used judiciously, on-hover animation can provide more visual appeal, if desired.
Finally, while there are no cut and dried rules for positioning, the best place for a CTA seems to be the point at which the user has had enough context to make up their mind. This means that the top of the page tends not to be the best place for it – you need to make good use of the context of your website.
That about does it as far as design principles are concerned. But how can you best implement them?
Elementor is a free page builder which is growing in popularity, and for good reason: this front-end builder features a simple, intuitive, drag-and-drop interface, loads of useful and attractive widgets, and a feature-rich and versatile free version. In order to expand and extend Elementor’s already impressive array of functionalities, we at Qode have developed a suite of 60 brand-new, professionally designed widgets for Elementor: Qi Addons For Elementor.
All you need to do to get started on creating beautiful and impressive WordPress websites in style is install the latest version of Elementor (the free version will do), and then install our proprietary Qi Addons For Elementor plugin, which is, by the way, completely free.
The plugin brings a collection of Elementor widgets for an array of purposes, from infographics and typography to SEO and e-commerce.The widget we will be focusing on in this article is, unsurprisingly, the Call to Action widget. Setting up a CTA in WordPress using our plugin is easy and takes next to no time at all, as you can see in the video below:
Not everybody likes video tutorials, though, which is why we have this step-by-step guide in text form as well, so let’s get started.
If you are already using Elementor, all you need to do is install Qi Addons For Elementor. If not, you need to install Elementor, too. Qi Addons For Elementor, not at all surprisingly, require Elementor to work.
Once you have installed the latest Elementor and Qi Addons For Elementor, find the page or post you wish to add your CTA to, or create a new one. We will show you how to use it as part of a post, but adding it to a page works much the same.
We will start with a post and some randomly generated text. On the left-hand side, search for the Call to Action element. You can distinguish a Qi Addons element by its magenta colour. Drag it to where you want your CTA element to go.
In the General tab, the General section will be open by default. Here you will find the Title and Text fields for the textual content of your call to action. We have changed those from their default placeholder values.
The Button Below drop-down menu governs the behaviour of the button. By default, the button is on the right-hand side of the element. However, on certain screen sizes, this may not be the perfect position, and you can adjust that right here, by defining the screen width at which the button will appear below the text, instead of right. We have selected Below 1024px.
Finally, you can use the Enable Link Overlay menu to apply the CTA link to the entire section instead of just the button. We have set it to Yes.
Next down, we have the Button settings section. The Layout menu has three options: the default Filled, meaning a full colour background of the button, Outlined, which will only make the outline visible, and Textual, which hides the button altogether and leaves only the text. We will leave it as Filled. While the Layout is set to Filled, you also have the Type settings available. The default is Standard, but you can have a button With Inner Border, or Icon Boxed, which doesn’t do anything much until you select an icon. We have left it at the Standard.
The Enable Button Text Underline can be set to underline the text. We will leave it as is, because we don’t want the text underlined. The Button Size control is pretty self-explanatory. The Button Text is set to Click Here by default, but we will change it to the somewhat more informative View More.
The Button Link is where you want your user to be taken once they act on your call to action. Since this is just a demonstration, we will use a hashtag as a placeholder. Clicking on the gear icon next to the link field, we will open some link options. Checking Open in new window, as we have done, will set the link to open in a new window. Other options include adding the nofollow attribute and other attributes as needed.
The Button Icon section of the settings is where you can add an Icon by uploading an .svg file or using one from your icon library. We have chosen to use an angle icon from our library by clicking on the plus sign and selecting it from the available set, and then clicking on Insert.
We have also left the Icon Position on the default Right, as opposed to left, which is also available, but more suited for bullets.
So, you’ve placed a CTA. Now is the time to make it pretty and fit it into your website design.
The Style tab is where you can find the styling options for your call to action. The most basic styling options are self-explanatory. We will set our Title Tag to H3, our title colour to black (hex code #000000) and our background to a dark gray (#1e1e1e). You can also change your typography settings (typeface, weight, spacing and other formatting options.). We are happy with the ones we have, so we’ll leave them as they are.
This is also where you can select a background for your CTA. Clicking the paintbrush will open the settings for a classic colour background, while the option next to it allows you to create a colour gradient background. We will go with a simple colour background, and make it white (#ffffff), but you can choose whichever colour fits your style. The widget also allows you to set an Image background.
You can also choose a Border Type for your CTA (the default is None – no border). There are several options, but we have gone for a solid border. We only want it one pixel thick, which is what we’ve entered in the Width field below. The Width field is linked (the same on all sides) by default. You can unlink the values by clicking on the link icon on the right-hand side. For the border colour, we went with a light gray (#d9d9d9).
The Spacing Style section provides you with controls for padding and margins of your call to action element. The Holder Padding is the distance from the edges of the box to its contents. We will first unlink the padding values before we tweak them just the way we want them: top 72, right 74, bottom 78, and left 74 pixels. Text Margin Top controls the distance between the text and the title. We like it at 17 pixels. Content Padding Right is the padding between the text and the button. We have given our text a comfortable 9 pixels. Finally, the Button Margin controls govern the distance of the button from the surrounding elements. We will leave them as they are.
We did everything in pixels, but you can also use percentages or ems.
Next down in the Style tab, we find the Button Style section. The first option is the Typography option, but we are satisfied with our button text so we will leave it as is. Next down is the Normal/Hover toggle. The toggle is set to Normal by default, which means we are configuring the button as it normally appears. When we set it to Hover, we will be setting up the on-hover behaviour of the button.
To make the button really stand out, we will set the Text Color control to white (#ffffff) and the Background Color to a bright tangerine (#fc8d70). You could also choose a different Border Color, but we like the two-tone look of the button. Next down, you have the Border Width and Border Radius controls to further tweak your border, but we won’t be using those for our borderless button. Finally, the Padding of the button governs the distance from the text to the button’s edges. We will first unlink the values and enter our own top 14, right 40 bottom 13, and left 40 pixel.
Switching the toggle to Hover, we can see that we can set all the same options for the on-hover behaviour of our button. You can set the colour of the text, background, or border to change when a user hovers over the button with their mouse, but we won’t be using those settings. You can also see that the Padding settings have been adopted for the on-hover tab as well.
The Button Icon Style also has Normal/Hover toggle. You can also change the Icon Size and Icon Color, but the defaults suit us. We will tweak the margins a little: unlink the values first, and then enter 2 for top and 10 for left.
Moving on to the Hover side of things, you can see that the Icon Color control has been replaced with the Move Icon menu. Here you can select the on-hover animation. We like the default Horizontal Short setting, which will move the icon a little bit to the right, but there are other options (Horizontal, Vertical, Diagonal) or you can eschew the animation altogether. We like a little bit of discrete animation to engage the visitor’s eye.
The final two sections of the Style tab are controls for the Button Inner Border Style and Button Underline Style. Since we didn’t use the inner border or the underline, they won’t have any effect on our button. We will say that they have Normal and Hover behaviours, too.
And this is how you build a call to action using Qi Addons For Elementor – a comprehensive set of options to make your CTAs as minimalist or as gaudy as you like.
In Conclusion
As you can see, a call to action is an important stage in the transition from casual visitor to paying customer, and installing one takes just a little time and effort. All you need are two free plugins and one good idea. Qi Addons for Elementor have you covered with all the options and functionalities you could possibly need.
