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

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.

Explore.

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

Visit somewhere new & exciting

Sale

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
Sale

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

Photographer

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.

White-logo.png

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 is Elementor's CMO. He has been in the online marketing industry for over 10 years, specializing in content marketing. WordPress has been Ben's platform of choice since the time it was used solely for blogging.

144 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 🙂

  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.

    https://www.useloom.com/share/eb9ab06980e941b298469e001fd4ffde

  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 elementor-pro-1.14.0.zip 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
    Denmark

  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

Leave a Reply