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
Meet new people
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.
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.
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.
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.
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.
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.