We're thrilled to introduce Elementor's new Call to Action widget. With this widget, you can create interactive boxes that upgrade your website from average to exceptional.
The Call to Action (CTA) widget grabs your visitors’ attention and motivates them to interact and take action.
Start by designing stylish box layouts that combine image, content and button. Then, bring those layouts to life with interactions and effects. Combine hover animations, overlay blend modes and advanced filters to create truly spectacular sections.
Time for action
Spiraling connection
Meet new people
Explore.
Visit somewhere new & exciting
Create Interactive Boxes That Look Remarkable
The CTA box includes a Cover skin, which sets an image element as the background, arranging the content elements on top. Whether it’s for your homepage, features, about or portfolio page, you can make sure your site sets a lasting impression on your visitors.
That extra layer of interaction will make your entire website look spectacular. Until now, reaching these effects required lots of custom CSS and coding. Now you can reach the same results in minutes.
Santorini, Greece
London, UK
Himalaya, Asia
New York, USA
Paris, France
Full Flexibility to Customize Your Content
By quickly aligning the position of the image in relation to the content, you can create a wide selection of layouts. Play with the image proportion, align the different text elements, and choose exactly which element is shown.
We made it flexible enough so you can reach just what you had in mind, yet simple enough so you can reach the final goal faster than ever before.
Peachy surprises
Delightful treats
Zesty ornaments
Bring Focus to Your Boxes
Looking for a way to showcase your projects, products or services? Look no further. This widget is perfect for bringing focus to your content. By adding a noticeable ribbon, you can make sure you draw the right attention at the point of sale to generate more conversions.
With its advanced image & content customization options, there really is no limit to what you can accomplish with this tool. Plus, you can customize the result to look just as stylish on mobile devices.
New Collection
New collection
Add a Graphic Element to the Box
If you are seeking a way to combine two graphical elements together, it’s now possible using this widget. Choose either an icon or image that will appear or disappear on hover.
As you can see in the example below, the end result is quite impressive. If you’ve ever struggled before with how to present photographs and projects online, this widget might well solve that ache.
Combine Content & Background Hover Animations
As your visitors hover over the different CTA boxes, they’re able to see endless combinations of content and background hover animations. This makes their entire experience more enjoyable, leading them towards a conversion.
Browse through the examples below to get a taste to the range of possibilities this widget brings.
Allium roseum
Veroni nutans
Grape Hyacinth
Urtica gracilis
Painted Daisy
Trollius albiflor
Cleome lutea
Aster foliaceus
Use Blend & Filters For Gorgeous Results
Overlays and blend modes are at the heart of the CTA box, transforming the box into an interactive experience. There are plenty of blend modes to choose from: normal, multiply, screen, overlay, darken, lighten, color dodge, saturation, color and luminosity.
CSS filters give you even more choices! Play around with the blur, brightness, contrast and saturation, each with its own scale. Combine blends and filters to create remarkable one-of-a-kind boxes that deliver your message in the best possible way.
Janet McAdams
Janet McAdams
Janet McAdams
Janet McAdams
Janet McAdams
Janet McAdams
Janet McAdams
Janet McAdams
No Limit to Your Design Vision
Website interactions and animations are one of the key factors for improving your visitor’s user experience, creating that WOW factor and enticing the user to keep exploring your website.
Today’s users expects to see high-quality visuals. The CTA box will become your favorite tool for optimizing the visual display for your audience.
Bring Your Site to Life
Take CTA for a Spin
Start using this widget on your websites and projects, and feel free to send over the result. We’ve only given you one tiny speck of the endless designs that you can achieve using this tool.
I’m excited to look at your own CTA boxes! Add your own unique boxes to your websites and send over the results in the comments below.
About the Author
wah thats look cool. thanks for sharing
Absolutely fabulous!???
Awesone!
thumbs up! very nice
Totally amazing.
These are fantastic! I have just the project to use these on. Great work Ben!
P.S Can’t wait to hear more about the upcoming Elementor Themer release 🙂
Elementor Themer is what I’m waiting for too.
That is amazing!!
This is jaw-dropping.
Can I use this widget with blog posts?
Not at the moment.
This is great as is, but will be phenomenal if we can use this widget to point visitors to blog posts.
For now, you can point manually.
Amazing!
WOW that’s so damn killer effects.
Crazy in love with Elementor…
Same! I switched over from Webflow to Elementor 😀 Won’t be going back, that’s for sure!
Thanks!
Is there an option to have no animation on the Content Hover when using the “Cover” skin?
Thanks
Dan
Hi Dan,
You can set the hover animation for the background cover to none.
However, there’s currently no option to set the content hover animation to none.
Best,
Naweed
Fixed for the next version, thanks!
Woohoo! 😀
Keep up the good work! Elementor rocks.
This is amazing. Gonna see if it will work on a logo grid…
Yay Finally 🙂 Super Nice
very cool. thx ben.
Looks nice, but since it is hover effects it has no use on mobile devices with touch interface.
Looking forward to read about the themer 🙂
You did it again, one step ahead the competition
The progress of this plugin is amazing. What a great team. When is the themer coming?
good stuff, thanks!
This is THE best update EVER! I love it!
Awesome, as always!
This is above and beyond “AWESOME”
All I need to do now is find a “Design Imagination” 😀
You can find so much ui design inspiration on pinterest or behance 🙂
Cheers Naweed – just recently joined Behance so gonna start putting it to good use 🙂
Hey Ben, as always you are ahead of the rest. Thank You. One suggestion for us non-techies, but still able to use your amazing product. How about creating labs, that we can do after each video you have. Will help us practice and learn.
Great idea
Looks fantastic. When is the widget available?
Hi Russell,
It’s only available in Elementor Pro.
Best,
Naweed
you beautiful ones!
I dont see how I can make the layout seen at 00:47. Can you point me in the right direction?
Hi Ana,
This is very easy to do.
1. Add a new section
2. From the left element menu, add a new column inside this section (duplicate it to show 3 or 4 columns if you wish)
3. A NEW section will be created inside the original section
4. Finally, duplicate the 2nd section with the column you have just added
5. Now you will have 2 child sections placed inside a parent section
If you don’t understand, let me know and I’ll create a quick video walkthrough for you.
I’d love to see a quick video walk-through. I’m following along for the most part but not 100%. That CTA in particular would be of great value. Thanks!
me too.
Probably best to add these demo in the Library for the design challenged?
Christopher, I’ll post the YouTube link here shortly 🙂
Zulfikar, I agree.
ready to go!
Looks fantastic
Is there any way of adding my subscribe HTML form within this CTA that is created in my autoresponder plugin –
eg Enter Your Email Address To Get This Free Report — and then I enter the html form code and it shows the sign up fields in these CTA boxes ?
great question JJ Smith I have the same questions but I am not a techy 🙂 as you are do not know html … I have a free ebook want to give away and CTA to sign up etc.. thank you
This is not possible
la la lala lala la la ! So nice that make sing! la la!
Just when we think it can’t get any better the Element team takes another leap forward. Great widget. Many thanks.
Great work. Can I insert the examples as show here somehow in my website :)?
Unfortunately not. I find the best way to learn how to create an exact design is by self discovery, trial and mistake. Set yourself a one hour challenge and see what amazingness you come up with 🙂
Just in time to get on the roof of Internet . Thanks Elementor team !
Suggestion: Please add a query function so that it acts in the same way as the posts list, otherwise it will take forever to manually change the content on different pages.
Thanks for the suggestion
Thank you for acknowledging 🙂
Truly stunning………. You are my 14th Feb ❤
Hello Ben,
I am unable to see the CTA widget in my elementor pro. Can you please help me out on this.
Wow1 Thanks. Just today I went on a pro and such a surprise 🙂
I was literally about to code it manually when the email came through from Ben 😀
Looks great! How do I access the CTA widget? I have Elementor Pro but don’t see this widget listed.
Update Elementor Pro to version 1.14.0 and the module will be there ready to use.
can’t find it either! I really want to work with it by now… HELP US, PLS!
Update and search ‘call to action’
Great. Thanks
El widget es ESPECTACULAR
how cool is that… this widget was really missing in your builder …Great job guys… YOU ROCK.. keep it up like that… now I get back to work to make my websites even prettier ;P
Thank you so much! Great work
Looks amazing can’t wait to use this in a project. Elementor is such a great tool, it’s enhanced the entire web design process for me looking forward to seeing what else you guys create this year. Such a talented team, Thank You.
Are those layouts part of the CTA widget? I see there are several layouts that have the masonry effect. Is that achieved without the CTA widget?
This is done by combining single cta boxes
Elementor seems to me to become the ONLY standard WP editor!
Loving it, thx Ben and Team!
Yeah! Beautiful 😀
Awesome stuff.
Feature request – add Border Radius to the image on the Call to Action – to enable making the images rounded edged or circular easily.
thanks1
I have done the same. Used to use Webflow. Enjoying the change.
I’m an ex-webflower of 4 years. Elementor is an incredible solution to every problem without the extra hassle. The change is hugely satisfying and extremely positive. I don’t have to wait months and years for one feature (pagination should have been released when Webflow CMS was launched in 2015 and it’s still not available, just craziness)
Nice
Can I use it to give a free ebook and get subscribers? Does it integrate with mailchimp?
No
Way to go! Can I place a link to it? Or link to email provider?
Yes
I have Elementor Pro but am not seeing the widget, is there something I’m missing or need to do?
Go to my.elementor.com and download it. Then search for call to action
Incredible.
I simply LOVE elementor….
Hi, I have the latest version of Elementor (and the pro of course) but I can’t find the Click to Action element. Can you point me in the right direction? What is its French name?
Call to action
Hi, I don’t know why but the update only takes place today. I’ll test it now. Thank you:)
Hello! I have tried using the widget to test its operation. However, I think it is quite confusing.
Nothing is clear about its operation.
For example, I add an image in the “Content” tab of the left menu … and the image does not appear anywhere in the widget on the web canvas …
The video that accompanies the post already has all the widgets created, so we have not seen how we can use it.
https://www.useloom.com/share/eb9ab06980e941b298469e001fd4ffde
I re-created some of the examples from this post (the logo overlay, the plants grid and the one with all the different blends and filters). Maybe you can download these and get an idea of how they’re made 🙂
http://nicks.im/elementor-cta-examples
We are working on releasing templates and a tutorial to help you use it
Well I hope to see a Toolset integration in the themer. Then you can build your views in Toolset and combine that with elementor. That would be a KILLER combination. So fingers crossed.
I cannot find the widget, do i have to download it separately? im already a elementor pro used for about a year.
Ben where is the widget? Im not seeing it in latest update? I have pro – is it there? am i overlooking it? 🙂
You should see it by searching call to action
I thought we already had a CTA widget?
Nope
Hello,
a really great widget!
But since 2 hours I try to find out, how can I make texts appear above the picture by hover.
Please help! 🙂
No way to do that. Why would you want to?
this looks very nice on your homepage – the flying objects and texts at hover effect.
And I would like to use it too. How did you do it on the presentation?
WOW…this is awesome! Very excited to try this out right now. Thanks!! ?
Super excited about the new element and helped solve a design problem quickly. This element should not even be called CTA as it is SOOOOOOOOOO much more!!! Here is what I just worked on quickly, and is only the first revision as there are so many more possibilities!!! Thanks again Team Elementor :o)
http://elementorsb.yellowhammeragency.com/about-us-section-1/
When will ‘Call to Action Widget’ be updated?
This is freakin amazing. Love that the whole box is clickable as well!
This is amazing!!
How can I use the image as thumbnail, as in a “Services” widgets?
Same issue as others, I just downloaded the latest build from my account here on the official site and the new widget isn’t available….
I just realized that the pro version here in the account, although it states it is elementor-pro-1.14.0.zip the actual plugin is still version 1.13.2 – I think someone packaged it incorrectly by mistake 🙂
Wow, what a great update!
Wow cool. I just play with column settings and button widget yesterday and suddenly this update is coming out! This makes things easier!!
I agree, my version is still 1.13.2 also. I don’t have CTA either.
Download the latest version from my.elementor.com and search for Call to Action
I did figure this was a work around, but it won’t show as an update within the dashboard? It seems a little clunky to have manually load the update.
Do you have a valid license? You should see it in your plugins list as an update
Ben, there was an issue when updating the plugin. No option to update unless you deactivate and reactive Elementor Pro (not great for a live website).
It is not working! Look very good!
It was not working but I deactivated the plugin and re-activated it. Now it seems its working.
Elementor was a revolution to our web. Once you adopt it, you will never be willing to work with anything else
+1
Perfect
Amazing!!!
Wordpress meant a lot for all of us working with web design…
Elementor represents another quantum leap in web design.
Hi,
Super addition to the library of widgets. Is there a way to combine the hovers of the picture and the button ? So if hovering over the image, both the image hover and the button hover are activated simultaneously.
Sure
Fantastic! I love this widget! BTW, I have something to ask… In the “Post Widget”, how to put post title and date as overlay on the image?
You should use the Portfolio widget
custom queries! custom queries! custom queries! … ?
Hi – possible to extend the ribbon functionality to other widgets such as ‘image box’. thanks
We have this on the price table widget
I have been trying to create a similar effect for so long using image overlays with buttons that appear when you hover over them…. this is just what I’ve been looking for can’t believe how beautiful these effects are <3
It looks Great !!! But… I don’t see it in my elementor…
Why is that?
Update to the latest version or go to my.elementor.com and download the version from there
Is it possible to use videos instead of pictures? Need something smart like this to showcase my videoes. If so, ill buy the pro version TODAY.
Great! Do you know how to make the borders of the buttons thinner? Thanks!
Under Style > Button > Border Width you can change the width
Thanks alot for both Elementor, Elementor Pro and for your great customer support
Everything is way over normal standard
Kenneth – pro. photographer
Denmark
Είμαι πολύ ευχαριστημένος απο την συνεργασία .η νέα εφαρμογή είναι καταπληκτική
Lokks great, is there a possibility to have a lightbox on the picture?
No, use the regular image widget for lightboxes
love this it’s really amazing!!
cant find the widget, where is it?
Download the latest version from my.elementor.com, and search for Call to Action. If you still can’t find it contact our support
When will it be available? I do not have it in my Pro Section and no update was sent to me. Can you give me more information?
Download the latest version from my.elementor.com, and search for Call to Action. If you still can’t find it contact our support
this is really cool and i started using it on all my sites, however, it looks bad on mobile. it makes it into two skinny columns instead of two columns stacked on top of each other. maybe i’m doing something wrong but
Great addition, Ben!
please make this examples available as a template to be able to import them
I ‘ve used this widget and it is relly good. You can work very fast with it.
However, I have a FEATURE REQUEST:
When applying the classic version the images are background images without the alt-tag.
Is it possible to change this?
Looks great but why is there no Update Notification for Elementor Pro inside wordpress? (running the latest Elementor PRO version v1.13.0 according to my WP dashboard but not CTA widget available…)
I really don’t know. It might be a WordPress issue. You can always go to my.elementor.com and download the latest version. Also, subscribe to this blog so you know when a new feature comes out.
Thanks, I deactivated Siteground Optimizer plugin for a second and suddenly the Elementor PRO update was available… (not sure if it was related to the specific plugin)
This is very a very widget with many creative possibilities. However, it has a BIG BUG! Which I wish Elementor will fix asap! When choosing an image as the graphic element in the content tab, all the hover animations aren’t working! For instance zoom in, zoom out and fade in. The image won’t disappear like the icons do when hovering the image. Now I get why Elementor used the slide up hover animation in the examples of this post. 🙂 Nice one dudes!
Please contact our support
+1
Cannot find call to action widget in my elementor pro. Any idea?
Please contact our support
wowwww Awesone!
Experiencing problems with Call to Action when I unable “blur” in CSS Filter from Hover Effects Menu. Block blinks to white when running the animation.
Please contact support
Just wondering, can I also achieve this image hover effect done here?:
http://themes.uxbarn.com/wp/enso/
Why do I not see the call to action widget on my pro panel?
Nice! And then my client asks….”can you add a second button….” :-/
Might be a silly question, but is it possible to somehow allow users to “sort by” when using the blocks? I’m designing it to use as a Recommended Watching section for our news website, would be great if there is a way to let users arrange the blocks if they are looking for a specific category
You can try the portfolio widget. Otherwise, we don’t have this option yet.
how can you make the whole box clickable? I can not find the option 🙁
ok – you just have to really ad a url to see the option, never mind 🙂
thank you for a great product!
There seems to be a white border around my CTA. Is it possible to make it full width?
This seems strange. Maybe it gets the white border from the theme. If you don’t manage to remove it, contact our support
How can i actually change the style of the button. I know there are the color, size settings. But in my button is appearing an arrow that i want to delete, but i can’t find how. :O