Introducing The Call To Action Widget, Create Beautiful Boxes That Drive Engagement

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

Make a statement about who you are. A watch is much more than a status symbol, it's a part of your identity.

Spiraling connection

It doesn't matter whether you are coming or going, as long as you're on your way.

Meet new people

You meet the nicest people, if you are willing to open your mind.


Find out just where to go and discover new places never before visited.

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

Learn More

London, UK

Learn More

Himalaya, Asia

Learn More

New York, USA

Learn More

Paris, France

Learn More

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

This branded soap will gently clean and exfoliate your skin. The ultimate skin pampering.

Delightful treats

This branded soap will gently clean and exfoliate your skin. The ultimate skin pampering.

Zesty ornaments

This branded soap will gently clean and exfoliate your skin. The ultimate skin pampering.

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

Winter 2018

New Collection

Trendy Handbags

New collection

Elegant watches

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

Adipiscing elit dolor amet consectetur adipiscing elit.

Veroni nutans

Adipiscing elit dolor amet consectetur adipiscing elit.

Grape Hyacinth

Adipiscing elit dolor amet consectetur adipiscing elit.

Urtica gracilis

Adipiscing elit dolor amet consectetur adipiscing elit.

Painted Daisy

Adipiscing elit dolor amet consectetur adipiscing elit.

Trollius albiflor

Adipiscing elit dolor amet consectetur adipiscing elit.

Cleome lutea

Adipiscing elit dolor amet consectetur adipiscing elit.

Aster foliaceus

Adipiscing elit dolor amet consectetur adipiscing elit.

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

Art Director

Janet McAdams

Android Developer

Janet McAdams

UX/UI Designer

Janet McAdams

Account Manager

Janet McAdams

Content Writer

Janet McAdams

Graphic Artist

Janet McAdams

iOS Developer

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.

Elementor Page Builder for WordPress

Bring Your Site to Life

With Call To Action, there's no limit in terms of what can be achieved. Create interactive boxes that beautifully change as the user hovers over them.

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

Ben Pines
Ben Pines
Elementor evangelist & head of content. Follow me on Twitter

Share on

Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp

Liked This Article?

We have a lot more where that came from! Join 1,365,209 subscribers who stay ahead of the pack.

By entering your email, you agree to our Terms of Service and Privacy Policy.


182 Responses

  1. 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 🙂

          1. How do you set it to show post manually?? with Dynamic Content or having to put in all images and title stuff then URL?

  2. 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 🙂

  3. 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.

    1. 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.

      1. 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!

  4. 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 ?

    1. 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

    1. 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 🙂

  5. 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

  6. 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.

    1. 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)

  7. 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?

  8. 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.

  9. 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.

  10. 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! 🙂

      1. 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?

    1. I just realized that the pro version here in the account, although it states it is the actual plugin is still version 1.13.2 – I think someone packaged it incorrectly by mistake 🙂

      1. 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.

  11. 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.

  12. 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

  13. 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.

  14. Thanks alot for both Elementor, Elementor Pro and for your great customer support
    Everything is way over normal standard

    Kenneth – pro. photographer

  15. 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

  16. 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?

  17. 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…)

    1. I really don’t know. It might be a WordPress issue. You can always go to and download the latest version. Also, subscribe to this blog so you know when a new feature comes out.

  18. 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)

  19. 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!

  20. 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.

  21. 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

  22. 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

  23. Hi, I love this cat widget, great job done! But I’m struggling with it when it comes to tracking. Do you have any idea how to track a click on the image for example with Google tag manager? Best regards, Reinhard

  24. Hey Ben!
    Why not making all CTA examples available to import directly from the builder?
    After all they are already built. They will add value to the builder and user’s work as well.

  25. In addition to call to action widget you can use callback tracker widget or similar service for your website. It will provide you a click to call widget, call recording and basic analytics which will increase your conversion rate.

  26. Incredible! I have long been looking for something like this. Indeed God shall bless you for making lives easier, Amen

  27. This is amazing Plugin For WordPress.
    It’s all about your website is customize for this plugin.
    Great jobs for Elementor Team.
    Thanks for create this amazing plugin.



  28. I was wondering if someone can help explain how to achieve the responsive full-width of 3 widgets fit so evenly like the example on the “Peachy Surprises” / “Delightful Treats” / “Zesty Surprises”.

    I’ve been wrecking my head for hours, and for some reason I cannot align the widgets dimension so evenly like the example given on that website. I tried everything, from adjusting the column width to 33.34% in the section, to adjusting the height, but somehow the last widget on the right most column always misaligns, especially so when I click into mobile mode.

    Any way you can help me out here?

Leave a Reply

Your email address will not be published. Required fields are marked *

Want to learn how to build better websites?

Join 1,365,209 Elementors, and get a weekly roundup of our best skill-enhancing content.

By entering your email, you agree to our Terms of Service and Privacy Policy.