{"id":25659,"date":"2021-06-15T15:00:52","date_gmt":"2021-06-15T13:00:52","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=25659"},"modified":"2022-01-14T11:03:34","modified_gmt":"2022-01-14T10:03:34","slug":"how-to-add-call-to-action-in-wordpress","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/how-to-add-call-to-action-in-wordpress\/","title":{"rendered":"How to Add a Call to Action in WordPress"},"content":{"rendered":"<div class=\"wpb-content-wrapper\" id=\"wpb-content-root\"><p>[vc_row][vc_column][vc_column_text]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. <strong>Introducing a call to action to your WordPress website<\/strong> is easy enough, and we will show you how to do it.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]But let\u2019s not get ahead of ourselves \u2013 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.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]This is what we will be discussing:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#what-is-a-call-to-action\">What is a Call to Action?<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#what-makes-a-good-call-to-action-button\">What Makes a Good Call to Action Button?<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#add-a-call-to-action-using-qi-addons-for-elementor\">How to Add a Call to Action Using Qi Addons For Elementor<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"what-is-a-call-to-action\"><\/a>What is a Call to Action?<\/h2>\n<p>[\/vc_column_text][vc_column_text]The clue is in the name: a <a href=\"https:\/\/qodeinteractive.com\/magazine\/what-is-microcopy\/\">CTA<\/a> is <strong>any design element introduced with the goal to encourage a user to take an action.<\/strong> The element itself is <strong>usually a button<\/strong>, 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.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]This is why a call to action is usually seen as <strong>a conversion tool<\/strong>, but it\u2019s not necessarily limited to that \u2013 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 <em>Read This First<\/em> content, for instance.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"what-makes-a-good-call-to-action-button\"><\/a>What Makes a Good Call to Action Button?<\/h2>\n<p>[\/vc_column_text][vc_column_text]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 <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-design-cta\/\">designing a CTA button<\/a>, we do have an in-depth article on best practices. We will give you the short version here.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]In terms of text, you need to really <strong>engage the visitor<\/strong>, especially if you\u2019re trying to charm them into parting from their money, while at the same time <strong>communicating unequivocally the action<\/strong> the user is expected to take: <em>Read More Here<\/em> or <em>Subscribe For More Awesome Content<\/em> make for decent and clear choices. If applicable, you should also try to spice things up by<strong> instilling a sense of urgency<\/strong> with an <em>Only Today or Click Now And Save 50%<\/em>, or similar.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]When it comes to the looks, you should take steps to make the call to action button <strong>stand out in the environment<\/strong> of your website while at the same time not clashing with it. In terms of shape, the common wisdom is that <strong>rectangles convey a sense of stability<\/strong>, while when it comes to colour <strong>complementary colours tend to provide enough contrast<\/strong> while being pleasing to the eye. When used judiciously, <strong>on-hover animation can provide more visual appeal<\/strong>, if desired.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Finally, while there are <strong>no cut and dried rules for positioning<\/strong>, 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 \u2013 you need to <strong>make good use of the context of your website.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]That about does it as far as design principles are concerned. But how can you best implement them?<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;80px&#8221;][vc_widget_sidebar sidebar_id=&#8221;qi-banner&#8221;][vc_empty_space height=&#8221;80px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"add-a-call-to-action-using-qi-addons-for-elementor\"><\/a>How to Add a Call to Action Using Qi Addons For Elementor<\/h2>\n<p>[\/vc_column_text][vc_column_text]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\u2019s already impressive array of functionalities, we at Qode have developed<strong> a suite of 60 brand-new, professionally designed widgets<\/strong> for Elementor: <a href=\"https:\/\/qodeinteractive.com\/qi-addons-for-elementor\/\">Qi Addons For Elementor<\/a>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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 <a href=\"https:\/\/qodeinteractive.com\/qi-addons-for-elementor\/call-to-action\/\">Call to Action<\/a> 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:[\/vc_column_text][vc_empty_space height=&#8221;40px&#8221;][vc_column_text]<iframe loading=\"lazy\" title=\"YouTube video player\" src=\"https:\/\/www.youtube.com\/embed\/1drBNEm8hSo\" width=\"1280\" height=\"720\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe>[\/vc_column_text][vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Not everybody likes video tutorials, though, which is why we have this step-by-step guide in text form as well, so let\u2019s get started.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]We will start with a post and some randomly generated text. On the left-hand side, search for the <em>Call to Action<\/em> element. You can distinguish a Qi Addons element by its magenta colour. Drag it to where you want your CTA element to go.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"568\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Call-To-Action-Widget.jpg\" class=\"attachment-full size-full\" alt=\"Call To Action Widget\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Call-To-Action-Widget.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Call-To-Action-Widget-300x176.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Call-To-Action-Widget-768x450.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Call-To-Action-Widget-620x363.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]In the <strong>General<\/strong> tab, the <strong>General<\/strong> section will be open by default. Here you will find the <strong>Title<\/strong> and <strong>Text<\/strong> fields for the textual content of your call to action. We have changed those from their default placeholder values.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The <strong>Button Below<\/strong> 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 <em>Below 1024px<\/em>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Finally, you can use the<strong> Enable Link Overlay<\/strong> menu to apply the CTA link to the entire section instead of just the button. We have set it to <em>Yes<\/em>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/CTA-General.jpg\" class=\"attachment-full size-full\" alt=\"CTA General\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/CTA-General.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/CTA-General-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/CTA-General-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/CTA-General-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Next down, we have the <strong>Button<\/strong> settings section. The <strong>Layout<\/strong> menu has three options: the default <em>Filled<\/em>, meaning a full colour background of the button, <em>Outlined<\/em>, which will only make the outline visible, and <em>Textual<\/em>, which hides the button altogether and leaves only the text. We will leave it as <em>Filled<\/em>. While the <strong>Layout<\/strong> is set to <em>Filled<\/em>, you also have the <strong>Type<\/strong> settings available. The default is <em>Standard<\/em>, but you can have a button <em>With Inner Border<\/em>, or <em>Icon Boxed<\/em>, which doesn\u2019t do anything much until you select an icon. We have left it at the <em>Standard<\/em>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The <strong>Enable Button Text Underline<\/strong> can be set to underline the text. We will leave it as is, because we don\u2019t want the text underlined. The <strong>Button Size<\/strong> control is pretty self-explanatory. The <strong>Button Text<\/strong> is set to <em>Click Here<\/em> by default, but we will change it to the somewhat more informative <em>View More<\/em>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The <strong>Button Link<\/strong> 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 <strong>gear<\/strong> icon next to the link field, we will open some link options. Checking <strong>Open in new window<\/strong>, as we have done, will set the link to open in a new window. Other options include <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-add-nofollow-links-in-wordpress\/\">adding the nofollow attribute<\/a> and other attributes as needed.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/CTA-Button.jpg\" class=\"attachment-full size-full\" alt=\"CTA Button\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/CTA-Button.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/CTA-Button-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/CTA-Button-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/CTA-Button-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The<strong> Button Icon<\/strong> section of the settings is where you can add an <strong>Icon<\/strong> 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 <strong>plus<\/strong> sign and selecting it from the available set, and then clicking on <strong>Insert<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"654\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/General-Icon.jpg\" class=\"attachment-full size-full\" alt=\"General Icon\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/General-Icon.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/General-Icon-300x202.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/General-Icon-768x518.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/General-Icon-620x418.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]We have also left the <strong>Icon Position<\/strong> on the default <em>Right<\/em>, as opposed to left, which is also available, but more suited for bullets.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Button-Icon.jpg\" class=\"attachment-full size-full\" alt=\"Button Icon\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Button-Icon.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Button-Icon-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Button-Icon-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Button-Icon-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]So, you\u2019ve placed a CTA. Now is the time to make it pretty and fit it into your website design.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The <strong>Style<\/strong> 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<strong> Title Tag<\/strong> to <em>H3<\/em>, 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\u2019ll leave them as they are.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]This is also where you can select a background for your CTA. Clicking the <strong>paintbrush<\/strong> 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 <strong>Image<\/strong> background.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]You can also choose a <strong>Border Type<\/strong> for your CTA (the default is <em>None<\/em> \u2013 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\u2019ve entered in the <strong>Width<\/strong> field below. The <strong>Width<\/strong> field is linked (the same on all sides) by default. You can unlink the values by clicking on the <strong>link<\/strong> icon on the right-hand side. For the border colour, we went with a light gray (#d9d9d9).[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"478\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/CTA-Style-Tab.jpg\" class=\"attachment-full size-full\" alt=\"CTA Style Tab\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/CTA-Style-Tab.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/CTA-Style-Tab-300x148.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/CTA-Style-Tab-768x379.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/CTA-Style-Tab-620x306.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The <strong>Spacing Style<\/strong> section provides you with controls for padding and margins of your call to action element. The <strong>Holder Padding<\/strong> is the distance from the edges of the box to its contents. We will first <strong>unlink<\/strong> the padding values before we tweak them just the way we want them: <em>top 72, right 74, bottom 78, and left 74 pixels<\/em>.<strong> Text Margin Top<\/strong> controls the distance between the text and the title. We like it at 17 pixels. <strong>Content Padding Right<\/strong> is the padding between the text and the button. We have given our text a comfortable 9 pixels. Finally, the <strong>Button Margin<\/strong> controls govern the distance of the button from the surrounding elements. We will leave them as they are.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]We did everything in pixels, but you can also use percentages or ems.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"457\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/CTA-Spacing.jpg\" class=\"attachment-full size-full\" alt=\"CTA Spacing\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/CTA-Spacing.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/CTA-Spacing-300x141.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/CTA-Spacing-768x362.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/CTA-Spacing-620x292.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Next down in the <strong>Style<\/strong> tab, we find the<strong> Button Style<\/strong> section. The first option is the <strong>Typography<\/strong> option, but we are satisfied with our button text so we will leave it as is. Next down is the <strong>Normal\/Hover<\/strong> toggle. The toggle is set to <strong>Normal<\/strong> by default, which means we are configuring the button as it normally appears. When we set it to <strong>Hover<\/strong>, we will be setting up the on-hover behaviour of the button.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To make the button really stand out, we will set the <strong>Text Color<\/strong> control to white (#ffffff) and the <strong>Background Color<\/strong> to a bright tangerine (#fc8d70). You could also choose a different <strong>Border Color<\/strong>, but we like the two-tone look of the button. Next down, you have the <strong>Border Width<\/strong> and <strong>Border Radius<\/strong> controls to further tweak your border, but we won\u2019t be using those for our borderless button. Finally, the <strong>Padding<\/strong> of the button governs the distance from the text to the button\u2019s edges. We will first <strong>unlink<\/strong> the values and enter our own <em>top 14, right 40 bottom 13, and left 40 pixel.<\/em>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"426\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/CTA-Button-Style.jpg\" class=\"attachment-full size-full\" alt=\"CTA Button Style\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/CTA-Button-Style.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/CTA-Button-Style-300x132.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/CTA-Button-Style-768x338.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/CTA-Button-Style-620x273.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Switching the toggle to <strong>Hover<\/strong>, 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\u2019t be using those settings. You can also see that the <strong>Padding<\/strong> settings have been adopted for the on-hover tab as well.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"460\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/CTA-Button-Hover.jpg\" class=\"attachment-full size-full\" alt=\"CTA Button Hover\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/CTA-Button-Hover.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/CTA-Button-Hover-300x142.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/CTA-Button-Hover-768x365.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/CTA-Button-Hover-620x294.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The <strong>Button Icon Style<\/strong> also has <strong>Normal\/Hover<\/strong> toggle. You can also change the <strong>Icon Size<\/strong> and <strong>Icon Color<\/strong>, but the defaults suit us. We will tweak the margins a little: <strong>unlink<\/strong> the values first, and then enter 2 for <em>top<\/em> and 10 for <em>left<\/em>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"432\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/CTA-Button-Icon-Style.jpg\" class=\"attachment-full size-full\" alt=\"CTA Button Icon Style\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/CTA-Button-Icon-Style.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/CTA-Button-Icon-Style-300x134.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/CTA-Button-Icon-Style-768x342.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/CTA-Button-Icon-Style-620x276.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Moving on to the <strong>Hover<\/strong> side of things, you can see that the <strong>Icon Color<\/strong> control has been replaced with the <strong>Move Icon<\/strong> menu. Here you can select the on-hover animation. We like the default <em>Horizontal Short<\/em> setting, which will move the icon a little bit to the right, but there are other options (<em>Horizontal, Vertical, Diagonal<\/em>) or you can eschew the animation altogether. We like a little bit of discrete animation to engage the visitor\u2019s eye.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The final two sections of the <strong>Style<\/strong> tab are controls for the<strong> Button Inner Border Style<\/strong> and <strong>Button Underline Style<\/strong>. Since we didn\u2019t use the inner border or the underline, they won\u2019t have any effect on our button. We will say that they have <strong>Normal<\/strong> and <strong>Hover<\/strong> behaviours, too.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]And this is how you build a call to action using Qi Addons For Elementor \u2013 a comprehensive set of options to make your CTAs as minimalist or as gaudy as you like.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"535\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/CTA-Final.jpg\" class=\"attachment-full size-full\" alt=\"CTA Final\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/CTA-Final.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/CTA-Final-300x166.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/CTA-Final-768x424.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/CTA-Final-620x342.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;78px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">In Conclusion<\/h2>\n<p>[\/vc_column_text][vc_column_text]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.<br \/>\n[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Gunning for a better conversion rate? Check out our tutorial on call to action in WordPress!<\/p>\n","protected":false},"author":16990,"featured_media":25688,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[29,114,4,13],"class_list":["post-25659","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-business","tag-qi-addons-for-elementor","tag-tips","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/25659","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/16990"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=25659"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/25659\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/25688"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=25659"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=25659"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=25659"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}