In this tutorial we will teach you how to use the Call to Action Widget. Using call to actions on your website is essential when trying to get your website visitors to perform an action, and with the extensive options available in the Call to Action Widget from Elementor, you’ll be sure to find a use for this fantastic widget on your website.
This tutorial will cover:
✔ The different styling options available
✔ Linking your call to action to a page or popup
✔ Examples of use cases
Hey there, it’s Ash from Elementor.
In this tutorial we are going to explore the ‘Call to Action Widget’.
This extremely versatile widget can really bring a new level of design and interactivity to your website, and will provide a fun and engaging way for your website users to perform an action.
With an extensive range of configurations, you’ll be sure to find a need for this widget on your website projects.
So let’s dive in and see what the ‘Call to Action Widget’ can do!
Today we’ll be working on this real estate website. We’ve created this grid layout of elements by using two call to action widgets within a full width section.
It’s very common to see similar layouts to this created with multiple columns & widgets, but we’ll show you a better way by achieving this with much fewer elements.
In a moment we’ll delete these widgets and recreate them from scratch giving you a full overview on how this widget works.
Afterwards, we’ll then recreate this ‘Call to Action Widget’ which we’ve linked to a Pop Up form to collect customer information.
Let’s head over to the Elementor editor and remove these call to actions widgets and recreate them from scratch.
In the widgets panel, we’ll search for ‘Call to Action’ and then drop the widget into the now empty section.
Please note this section has previously been set to full width, with no column gap, and we’ve also set the padding to 0px on all sides so that our call to action width will fill all of the available space.
If we now select our call to action widget we can see the panel updates with all of the available settings.
The first option we’re presented with is to choose a skin for our widget.
Classic positions the image either to the side or on top, whilst cover sets it into the background of the widget.
For this example, we’ll set it to classic, but we’ll be sure to explore ‘cover’ later on in this tutorial.
Next, we are able to set the position for our image. The options available are left, above & right. You’ll also see the device icon here which means you can adjust this configuration to be different for desktop, tablet & mobile devices. This is the case anywhere you see this icon moving forward.
We’ll leave the tablet and mobile configurations for now as we’ll be returning to them shortly, but let’s set the desktop position to ‘Left’.
Under ‘Choose Image’, we can choose an image already uploaded to our media library or upload a new one. Once you have chosen an image, simply select ‘Insert Media’ to add it to your call to action widget.
The final option here allows us to choose an image size. Be sure to choose an image size which allows your image to be displayed without pixelation, but be cautious not to choose an image size which is too large for this section as it will likely slow down your website’s loading times. For more information about image optimisations, check out our dedicated performance course.
The best image size for our layout is the Large option.
Let’s now switch to the ‘Content Tab’.
We can choose to set a ‘Graphic Element’ first of all, and whilst our design doesn’t use this element let’s still explore what it can do.
We can choose to upload an image first of all.
We can also choose the ‘Icon’ option.
Insert an icon from the icon library…
…or we can select an SVG icon from our media library.
If you would like to upload SVG icons to your design, be sure to enable this in the Elementor settings.
We’ll switch the ‘Graphic Element’ off and move to the next settings which are for the title and description of the call to action widget.
Both of these elements can be populated with dynamic content and this is true anywhere that you see this icon.
Let’s add our title… and description…
…And then we’ll set the Title Tag as H3.
In the next section we can specify our button configuration.
We’ll first add our button text…
Then we’ll choose a page to link to…
We can also apply additional link options here by selecting the gear icon…
And finally we can choose if we would like the link to be applied to the entire ‘Call to Action Widget’, or just the button. We’ll select ‘Button Only’.
The last option here allows us to add a ribbon to our call to action. We’ll leave this blank for now, but we’ll explore this in more detail when we create our call to action located at the bottom of our page.
Now that we have added the content and defined the structure of our call to action widget, it’s time to apply some styles so that it fits with the brand of our website.
Let’s switch to the ‘Style’ tab and the first option we see is height, which controls the height of the entire ‘Call to Action’ widget.
We can set this to a specific height using pixels, or via the ‘Viewport Height’.
The viewport height is a range of 0 to 100 and 1vh is equal to 1% of the viewport height.
We’ll set ours to 70vh which is the same as 70% of the height of our viewport.
Alignment allows us to position the text to the left, center or right. We’ll set this to the left.
And the vertical position allows us to control whether the content is displayed at the top, center or bottom of the widget.
Let’s add some padding, by switching to the percentage value and setting all four sides to 5%.
We can now set the image width. This can be set to an exact measurement using pixels or a dynamic value using percentages. We would like our image to always fill half the users screen, so we’ll set this to 50%.
The final option here is to set the image height.
Just like before with the height of the entire widget, we can set this to a specific height using pixels, or via the viewport height.
In our design, we need the image to fill all of the available space within the widget, so we’ll match our previous configuration and set this to 70vh.
Setting width and height values for any image used on your website is good practice, and can help to reduce layout shift.
Moving on, we’ll now explore the styling options for our content.
First of all we’re able to set the typography and spacing for our title & description.
The typography can be set using a global font or you can adjust them manually like so.
The spacing can be adjusted by using the slider or by entering a value.
Let’s now do the same for the description text…
As you can see in the next area, we have both normal & hover color options.
With normal selected first of all, we’ll set the background, title & description colors using our globals color choices, and we’ll leave the button color blank as the next section will allow us more control over this element.
If required, switch to the hover tab and amend the colors if you would like them to change when a user hovers over these elements. For our design, we’ll leave these blank.
Switching to the button tab next, we are able to fully configure the look and style of our button.
The first option allows us to choose a button size, we’ll set this to ‘Medium’.
Next, we can amend the typography. Again you can choose a global font here or adjust via the manual selections.
Similar to the previous section we now have the color options which can be configured for both the ‘Normal’ & ‘Hover’ states.
With normal selected first of all, we’ll set the text color to ‘Primary’, background color to ‘White’, and border color to ‘Primary’.
Switch to the ‘Hover’ tab and set the text color to ‘White’, background color to ‘Primary’, and border color to ‘Primary’.
Finally, we’ll set the border width to 1, and the border radius to 0 which will give us nice sharp corners.
Now you can see when we hover over our button, these subtle but effective styles have been applied.
The final option here in the style tab is to configure the ‘Hover Effects’.
By default, the ‘Call to Action Widget’ does have some hover effects already applied, but be sure to experiment with all of the settings to find the right look and feel for your design.
Let’s go over each option so you know which one doesn.
First, we have a ‘Sequenced Animation’ option. We’ll explore this in more detail when we create our next ‘Call to Action Widget’, as it is a better example to showcase this feature.
Next, we can choose which hover animation is applied to the image when a user hovers over the call to action widget. We’ll set ours to ‘Zoom In’.
We then have some ‘Normal’ & ‘Hover’ color options.
With the normal tab selected, we can choose a color which is applied to the image as default, and if we switch to the hover tab we can set a color which is applied when a user hovers over the call to action widget.
For our design, we’ve decided to leave the overlay colors off, so we’ll set these both to transparent.
Coming towards the end of our styling options, you’ll see that we can apply a CSS filter and blending mode if required, and if we switch over to the hover tab one last time, we can amend the transition duration. This is measured in milliseconds, so our configuration of 1500 will equal 1.5 seconds.
Before we move onto styling our ‘Call to Action Widget’ for tablet and mobile devices, let’s first switch to the advanced tab and apply a subtle fade-in effect to match the rest of our website elements.
Let’s switch to mobile view now by using the keyboard shortcut ‘Command + Shift + M on Mac or Control + Shift + M on Windows”.
We’ll first switch to the style tab and set the image width to 40%.
This looks great now on tablet and we do not need to make any other adjustments as the styles inherited from the desktop view look really good.
Now switch to mobile view, again by using the keyboard shortcut.
OK, as you can see we need to do a little more work here.
Let’s first head to the content tab and set the image position to above.
Now, switch to the style tab and under padding set all four sides to 10%.
We’ll then amend the image width to 100% and the image height to 50vh.
Alright, fantastic! As you can see our ‘Call to Action Widget’ now looks great on desktop, tablet & mobile devices.
Let’s now duplicate our ‘Call to Action Widget’ by right clicking the existing one and selecting ‘Duplicate’.
By default 20px of spacing is added to all of our widgets from our site settings, so let’s reduce that to ensure our call to actions are flush with each other.
Now amend the image position…
…update your image…
… title…
…and description…
And there we have it! We’ve created a great looking call to action to entice our users to engage with our content, and we’ve reused it to build a fantastic looking grid section on our website.
This was all built using just one section and two widgets!
If we now scroll to the bottom of our page, you’ll see we have another ‘Call to Action Widget’, however the style of this one is slightly different.
Let’s delete this widget and rebuild it to see how it was created. We’ll also explore a couple of the options we bypassed in the first example.
First of all we’ll choose the ‘Cover’ option under skin and as you can see this applies the image to the background of the widget.
Let’s now choose our image and specify a size.
In the content tab, we’ll add our title…
Description…
And set our HTML tag.
Next we’ll enter our button text and set our link. We’re going to link to a pop-up we’ve already created.
Select the dynamic tags icon and find Popup under the Actions subheading.
Now, select the popup field…
Search for…
And select your popup.
Finally switch to the ribbon options…
add some text and select an alignment.
This concludes the content configurations, so now let’s dive into styling our call to action.
Switch over to the style tab and set the box height to 45vh, alignment to center, and vertical position to middle.
In the padding fields, unlink these, switch to the percentage value and add 15% to left & right.
Under content, let’s set the typography and spacing…
…as well as the colors.
Now open up the button options and configure these options to suit your design.
Next, we’ll style the ribbon.
We’ll set the background & title colors using our global colors and increase the distance to 50.
Finally we’ll amend the typography and as you can see we can also apply a box shadow effect as well.
Let’s finish off our call to action widget by configuring the hover effects.
We’ll set the hover animation to ‘Shrink’ and animation duration to 1000. Please note these settings apply to the content areas only, so the title, description and button.
If we select the ‘Sequenced Animation’ option and preview our call to action widget, you’ll see that our title, description and button all now animate in a sequenced order.
We’re actually going to leave this off for our design, but feel free to experiment with this setting to create some amazing results.
In the final area we can apply some settings to control the background image.
We’ll set the hover animation to zoom out and apply an overlay color to both the normal and hover tabs.
Let’s now apply the same subtle fade-in effect we’ve used across our website for consistency.
And our final steps now are to make a few tweaks for mobile devices.
Switch to tablet view first of all, and as you can this looks great already so no further adjustments needed.
Now, change to mobile view.
Open the style tab and under the box settings add 10% padding on all sides.
Now switch to content and amend the description text size to 1.2em.
And there we have it, our call to action widgets are ready for the world to interact with and look great on our website!
Using the call to action widget on your website is a great way to encourage your website users to engage with your content and can be a really beneficial inclusion for any website.
We hope you enjoyed this tutorial.
Be sure to comment below with any questions and don’t forget to like and subscribe to our channel for more great tutorials.
