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.