Home / / Call to Action Widget for Elementor

Call to Action Widget for Elementor

370 views
In this step-by-step tutorial, you’ll learn how to manage and customize the Call to Action widget from WPResidence with Elementor. Watch Video on Youtube

The Call to Action widget allows you to create a visual section with an image, title, description, button, and optional ribbon.

Use this widget when you want to guide visitors toward an important action, such as viewing listings, contacting your agency, booking a consultation, or exploring a featured service.

Important: This widget is used with Elementor. To edit it, open the page with Edit with Elementor.

Content

How to add the Call to Action widget

  1. Log in to your WordPress dashboard.
  2. Go to Pages and edit an existing page, or create a new page.
  3. Click Edit with Elementor.


Edit page with Elementor in WPResidence

  1. In the Elementor panel, search for WPResidence Call to Action.
  2. Drag and drop the widget into your page.


WPResidence Call to Action widget in Elementor

Image settings

In the Image section, you can upload or select the image used in the Call to Action widget.

You can also manage image-related options, such as the image skin and image resolution, depending on the widget settings available in your version.


Call to Action image settings in Elementor

Content settings

In the Content section, you can add the text shown in the widget.

You can edit:

  • Title – add the main heading for the section.
  • Description – add supporting text below the title.

Use a clear title and short description so visitors understand the action you want them to take.


Call to Action content settings in Elementor

Button settings

The Call to Action widget includes a button.

You can set:

  • Button Text – for example, View Listings, Contact Us, Learn More, or Book a Tour.
  • Button Link – the page or URL visitors will open when they click the button.
Tip: Use a direct button label that matches the action, such as View Listings for a listings page or Contact Us for a contact page.

Ribbon settings

The Ribbon section allows you to add a small highlighted label to the Call to Action widget.

This can be useful for labels such as:

  • Featured
  • New
  • Limited Offer
  • Recommended


Call to Action ribbon settings in Elementor

Style settings

Use the Style tab in Elementor to adjust the design of the Call to Action widget.

You can manage options such as:

  • Colors – change text, background, button, and ribbon colors.
  • Typography – adjust font family, size, weight, and style.
  • Spacing – control padding, margins, and layout spacing.
  • Button design – style the button color, text, border, and hover effects.


Call to Action style settings in Elementor

Important: Elementor style settings can override theme colors. If the widget colors do not match your Theme Options settings, check the widget Style tab in Elementor.

Important notes

  • The Call to Action widget is managed from Elementor.
  • The widget can include an image, title, description, button, and ribbon.
  • The button should link to the page where you want visitors to go next.
  • Use the Style tab to control colors, typography, spacing, and button design.
  • If design changes do not show immediately, update the page and clear cache if needed.