The Easiest Way to Add a WordPress Call To Action
WordPress call to action or CTA is most commonly a button on a website that invites the user to take a specific action. But, a CTA can also come in the form of an image, piece of content, text and what have you.
WordPress CTAs are a great way to encourage interaction on your website, promote sales, inspire the user to take a specific action, and a lot more. Unlike commercials, popups, and similar marketing means, they are simple, unobtrusive, and lead to tangible results. They can be of significant help in making the navigation through your site straightforward and crystal clear. The essential role of a WordPress Call To Action is to provoke visitors to take the action you want them to take – and this can be literally anything from buying and subscribing to your email list to inviting them to read the whole text.
Knowing where to place a CTA is an art of its own. Sprinkling your website with too many CTAs may overwhelm and fend off the user from taking any action at all. On the other hand, not having CTAs at all leaves the user in a passive position and even makes your website less appealing.
There are many ways to add a WordPress call to action to your website. Almost every page builder allows you to create a CTA using an image, button, and text and there are also plenty of effective WP CTA plugins to choose from. But the fastest and easiest way to add beautiful and effective CTAs is with Qi Addons for the Elementor plugin.
Qi Addons for Elementor is an excellent, well-rounded solution for any kind of Elementor website. It includes 60 free and 40+ premium widgets that allow you to create all the elements necessary for a functional and beautiful website. It is intuitive and extremely user-friendly – not even a tutorial is necessary and after a bit of experimenting with its options you will find it incredibly versatile and powerful.
When it comes to CTAs, we can see great examples of CTAs made by the tool’s authors on the Qi Addon’s page that can also be used as an inspiration.
What is important to understand from the very start is what a CTA can contain. The Title is optional, you may or may not have it. Text is also optional and serves to give more information about the action itself. Button for action can be styled in different ways and has its own animation. With this widget not only the link has to be clickable, but the whole CTA field can also be. The next thing that can be part of the CTA is the background, and it is optional as well as the border.
After you install the Qi addons, you’ll find all of its elements in the widgets. Simply find the CTA element and drag-and-drop where you want the CTA to be.
After you insert it, as with any widget, you will find the settings on the left. After inserting the CTA widget some default forms are at your disposal and you can change and align them to match the style of your page.
Content and Style tab are the settings of the CTA widget, here you will set which of the elements you want to see, and style your CTA field. The advanced tab is, as you know, the default element tab with settings related to the settings of the column itself or any other element.
Content Tab Settings
Let’s start with the General settings in the Content tab.
This is where we insert the Title and Text. As we have already mentioned, these are not mandatory fields, if you do not enter them you will simply not have text. This is hardly ever necessary because the call to action button requires the user to be prompted to take some action in some way. If the empty button itself was enough to inspire the user to take the action then any button would do the work, but that is not the case.
The next option is Button Below and we have certain values offered. What does that actually mean?
This means that we define the size of the screen after which the button will be below the title and the text and not in line with the text, as is the case on large screens. This is a great option because there is no reason for this layout to be used on mobile devices too. It would be much harder to read and understand and would attract less attention.
Here we can notice one important thing and that is that the button is quite glued to the text. Of course, this is easy to fix and we will show how to fix it later, for now just note this to be sure to check responsiveness for smaller devices.
Enable link-overlay, the last option in the general part refers to whether only the button or the entire call to action space will be clickable. In our case, it is currently the whole black section is clickable. Pay attention, at the beginning we did not define the link to which the action will lead and until the link is set nothing is clickable.
The next chapter deals with Button. Here we adjust what our button will be made of, but not how it will be styled. Also here we select the text that will be found on it and add a link.
As for layouts, there are three options available.
The filled layout has a background and text button. With this button, we can add a border later in style options. The outlined layout only has border and text, it is not possible to change the color of the background later. The text layout has only text and no background or border can be added to it.
Also, there are three different button types that are available for filled and outlined layout but not for textual.
The standard type is the default. The inner border type option adds the inner border to the selected layout. Iconed Boxed type is used only for the button that has an icon and where we want to put a special box for the icon like this. Pay attention, we added and stylized the icon and its background below.
Here we also have the Enable Button Text Underline option if we want the text to be underlined, the underline also has animation.
In the button settings, we can also choose the size, but later in the style we can set it more precisely and achieve that the sizes match other elements on the site. We also enter Button text and Link.
Button icon settings is used to add an icon from the Icon Library or by uploading your svg icon, we also specify the icon position (right/left) here.
As we have already seen, we can use the icon with the Iconed Boxed type, but this only applies to the button where we want the icon to be in our box, otherwise, we can add any icon to all other types and layouts.
Style Tab Settings
These are the styling settings. All settings are by groups and it is quite obvious what each setting refers to. Of course, if we don’t have the underline button option selected for our button we won’t even have settings for it.
Style is used to set the typography and color of the text and title.
We also set the background of the call to action field here. You can choose some color or gradient, and what is useful is that if you do not want any background, ie transparent, this is an option for that. This table is marked with an arrow, just put this ball at the beginning. Only the default field has a color and if you change the background and put the background color the same as the site, it means that if you change the color of the page you need the background. If you put a transparent background, there is no need to change the background of the field with the change of the background of the page.
We can also add a background, there are a couple of image options.
Spacing styles are options for determining the spacing between subtitles, text, buttons.
Holder padding refers to the space around the contents.
Text Margin Top – the margin above the text is determined, ie we arrange the space between the text and the title.
Content Padding Right – Padding around the text on the right, serves to separate the text from the button if it is too long.
Button Margin – by setting the value we can set the button position, determine the margins around the button. Here we especially need to pay attention to the responsive and spaced text button. The top button margin is used to adjust this spacing.
Button Style menu allows you to set a variety of details of your buttons like font color, border color, width and radius, as well as background color and padding. The most important setting here is whether you want your button to work on hover which means it is enough to hover over it for clicking. If you choose Normal option here, the button will work when clicked on it.
In Button Icon Style settings you can set the icon size with a slider, you can also choose between normal and hover option and set the icon color and margin too.
Button Inner Border settings allow you to set the inner border’s color, width and offset.
Button Underline Style settings allow you to set button’s underline color, width, offset, thickness and alignment. It is very handy that you can immediately see all the changes that you make.
That’s practically all. If you are satisfied with your button’s look you can close the editor and check how it looks live on the page.
Final Word
Now when you know how easy it is to add CTA anywhere on your website, all that is left to do is to think carefully where exactly on your website you can place CTAs. Knowing your audience well will help you create the most effective CTAs, and there are plenty of tools too that can help you understand your audience’s traits and behaviour better. If you have any questions regarding the use of Qi Addons, feel free to ask in the comment section – we are more than happy to share our experience and knowledge.
We hope this article was helpful. If you liked it, feel free to check out some of these articles as well!
