Elementor Call To Action Widget
Updated · MoxKit 1.4.4 · Download free on WordPress.org
The Elementor call to action widget is a ready-made promo section: an eyebrow line, a title, a description, an image and a primary button with an optional secondary link.
- Widget name MoxKit Call to Action
- Panel category MoxKit Addons
- Settings 45+
- Requires Elementor 3.25+ (free)
- Price Free
Table of contents
What is the Elementor call to action widget?
Put the image left, right or on top, and style every part, from the eyebrow to the container.
Like every MoxKit widget, the Call to Action has Content and Style tabs with responsive settings, typography, colors and box styling, and it keeps Elementor's Advanced tab. You can switch it off under MoxKit > Widgets if you do not use it; a disabled widget loads no files.
Key features
- Eyebrow, title, description and image.
- Image position: left, right or top.
- Primary button with icon and a secondary text link.
- Alignment; typography and colors for each text; button and container styling.
How to add the Elementor call to action widget
Follow these steps to add the widget to a page. You need MoxKit Addons for Elementor installed and Elementor active.
- Open the page in Elementor (Pages > Edit with Elementor).
- In the widget panel, search for "Call to Action" or scroll to the MoxKit Addons category.
- Drag the Call to Action widget into a Container.
- Fill in the eyebrow, title and description.
- Pick the image and its position.
- Set the button text, link and icon; add a secondary link if needed.
- Click Update (or Publish) to save the page.
Designs and examples
These screenshots were taken from a live WordPress site running MoxKit 1.4.4 and Elementor. They show the Call to Action with the settings described in each caption.
Elementor call to action widget settings: Content tab
The Content tab holds what the widget shows and how it behaves. It has 1 sections and about 11 settings. Settings marked per device can have a different value on desktop, tablet and mobile.
Content
| Setting | Type | Options and notes |
|---|---|---|
| Eyebrow | Text | |
| Title | Text | |
| Description | Text area | |
| Image | Image | |
| Image position | Select | Left, Right, Top (default: Right) |
| Button text | Text | |
| Link | Link | |
| Icon | Icon | |
| Icon position | Select | Before, After (default: After) |
| Secondary link text | Text | |
| Alignment per device | Choice | Left, Center, Right |
Elementor call to action widget settings: Style tab
The Style tab controls the look of every part of the widget: 7 sections, about 34 settings. Elementor's own Advanced tab (margin, padding, motion effects, responsive visibility, custom CSS) is available as usual.
Eyebrow
| Setting | Type | Options and notes |
|---|---|---|
| Typography | Group | All the usual Elementor typography settings. |
| Color | Color | |
| Bottom spacing per device | Slider |
Title
| Setting | Type | Options and notes |
|---|---|---|
| Typography | Group | All the usual Elementor typography settings. |
| Color | Color | |
| Bottom spacing per device | Slider |
Description
| Setting | Type | Options and notes |
|---|---|---|
| Typography | Group | All the usual Elementor typography settings. |
| Color | Color | |
| Bottom spacing per device | Slider |
Secondary link
| Setting | Type | Options and notes |
|---|---|---|
| Typography | Group | All the usual Elementor typography settings. |
| Color | Color | |
| Hover / focus color (hover) | Color | |
| Bottom spacing per device | Slider |
Image & layout
| Setting | Type | Options and notes |
|---|---|---|
| Content gap per device | Slider | |
| Image width per device | Slider | |
| Image height per device | Slider | |
| Image border radius per device | Slider |
Button
| Setting | Type | Options and notes |
|---|---|---|
| Typography | Group | All the usual Elementor typography settings. |
| Text | Color | |
| Background | Color | |
| Border color | Color | |
| Text (hover) | Color | |
| Background (hover) | Color | |
| Border color (hover) | Color | |
| Icon spacing per device | Slider | |
| Icon size per device | Slider | |
| Width per device | Slider | |
| Padding per device | Spacing | |
| Border radius per device | Spacing |
Container
| Setting | Type | Options and notes |
|---|---|---|
| Background | Group | All the usual Elementor background settings. |
| Border | Group | All the usual Elementor border settings. |
| Box shadow | Group | All the usual Elementor box shadow settings. |
| Padding per device | Spacing | |
| Border radius per device | Spacing |
Tips and best practices
- Write the title as a benefit ("Ready to grow your business online?").
- Use the secondary link for a softer action, such as "See our work".
Call to Action FAQ
Can I remove the image?
Yes. Leave the image empty and the text uses the full width.
Can I have two buttons?
There is one button and one secondary text link.
Summary
The Elementor call to action widget in MoxKit is free, works with the free version of Elementor and loads its files only on pages that use it. Eyebrow, title, text, image left, right or top, and two buttons. Install MoxKit Addons for Elementor from WordPress.org, drag the Call to Action widget onto a page and start with the settings above.