help center

Search
Close this search box.
On this page

CTA widget

Last Update: February 13, 2025

Add the widget

2024 12 02 12 30 51 CTA widget 1

To access and use a widget:

  1. In Elementor Editor, click +.
    All available widgets are displayed.

  2. Click or drag the widget to the canvas. For more information, see Add elements to a page.

What is the CTA widget?

A Call to Action (CTA) is a prompt that encourages the audience to take a specific action. It is commonly used in websites to guide people toward a desired action, such as making a reservation, signing up for a newsletter or making a purchase.Β 

The CTA widget helps you quickly construct an attractive call to action for your visitors to take.

See all the options available with the CTA widget.Β Β 

Common use case

Alex is creating an About us page to for their website. Since they are trying to recruit new employees, they decide to add a CTA to the page asking people to email them resumes.

SAmple widget CTA widget 3

Additional use cases

  • A restaurant puts a CTA on their Menu page encouraging people to make reservations.
  • A clothing store adds a CTA to their Home page asking visitors to sign up for sales notifications.
  • The clock tower committee is raising funds to repair the local landmark. They put a CTA on their front page asking for donations.

Adding a CTA widget: Step-by-step

In the example below, we’ll create a CTA encouraging potential employees to email applications to pub management.Β 

Add a CTA widget

To add a CTA widget:

  1. Drag the CTA widget to the canvas.
    Add the heading CTA widget 5
  2. In the panel, in the Heading text box, enter Ready for your next challenge?
    Enter Description 1 CTA widget 7
  3. In the Description text box, enter, Join our lively pub team! Seeking enthusiastic bartenders and servers to deliver great service and smiles. Flexible hours, great tips, and a fun atmosphere. Apply today and pour the fun!
    Open CTA button section CTA widget 9
  4. Open the CTA button section.
    Change CTA button CTA widget 11
  5. In the Text text box, enter, Apply Now.
    You can add two CTA buttons to the widget, but in this case we’ll only need one.
    Turn second cta off CTA widget 13
  6. Toggle Secondary CTA to Hide.
    Add the link CTA widget 15
  7. In the Link field enter mailto:[email protected]
    This will open a new mail sent to this address.Β 
    Let’s add an icon to help the button stand out.Β 
    Click the icon CTA widget 17
  8. In the Icon field, click the icon symbol.
    This opens the icon library.
    Locate the mail icon.
    icon and insert CTA widget 19
  9. Select the mail icon and click Insert.
    The mail icon is now added to the button letting visitors know what to expect when they click the button.
    Now let’s tweak the look of the widget.Β 
    Select the Style tab CTA widget 21
  10. Click the Style tab.
    The description is difficult to read, so let’s change the color.
    Click the globe icon 1 CTA widget 23
  11. In the Description section, click the global icon next to Text Color.
    Click bordo CTA widget 25
  12. Select the Bordo elements color.
    The text is more visible, but let’s add some weight to make the text stand out more.
    The pencil icon CTA widget 27
  13. Click the pencil icon next to Typography.
    Change weight to 500 CTA widget 29
  14. Use the Weight dropdown menu to select 500.
    The Widget CTA widget 31
    The CTA is now ready.

Settings for the CTA widget

You can customize your widgets using content, style, and other advanced parameters, offering you great flexibility in tailoring them to your needs. Click the tabs below to see all the settings available for this widget.

Content tab

Here is where you’ll enter the Heading, Description and CTA button details

Screenshot 2025 02 13 at 9.05.21 CTA widget 33
Layout

Choose one of the Presets.

  • Focus: Optimized for full width.
  • Showcase: Optimized for full width.
  • Streamline: Works well with inline and grid layouts.
  • Storytelling: Works well with inline and grid layouts.

If you choose Streamline or Storytelling layouts, go to theΒ Style tab to adjust the Width and Position.

Content tab Text 1 CTA widget 35

Enter the Heading text into the text box. Heading should be kept short – up to ten words at most.

The HTML tag shows search engines and accessibility tools the importance of the text. We recommend sticking with the default value, but you can use the dropdown menu to change the HTML tag.

Enter the Description text into the text box.

The HTML tag shows search engines and accessibility tools the importance of the text. We recommend sticking with the default value, but you can use the dropdown menu to change the HTML tag.

Content tab CTA button CTA widget 37

Text: Enter the text you want to appear on the CTA button.

Link: Enter the URL you want visitors to go to when they click the CTA button.

Icon: Click No icon CTA widget 39 to have no icon on the button,Β  upload svg CTA widget 41 to upload an .svg file as an icon, or the icon symbol to select an icon from the icon library.

Β 

The HTML tag shows search engines and accessibility tools the importance of the text. We recommend sticking with the default value, but you can use the dropdown menu to change the HTML tag.

Toggle to Hide if you only want one CTA button. The Secondary CTA button acts just as the first one.

Style tab

Determine the look and feel of menu items and controls.

Style tab text CTA widget 43

Position the text either at:

  • The start of the widget Align Start CTA widget 45
  • The center of the widget Justify Center CTA widget 47

Determine look and feel of the Heading text:

Determine look and feel of the Description text:

Screenshot 2025 02 13 at 14.44.44 CTA widget 49

The buttons can be placed:

  • At the start of CTA widget Start CTA widget 51.
  • At the end of the CTA widget end CTA widget 53.

The CTA widget can include two buttons/links. The same options are available for both.

The CTA can be displayed as either a button or a simple text link. Use the dropdown to switch between them.

The options below can change depending on where the cursor is:

  • Normal: How the CTA button/link appears by default.
  • Hover: How the CTA button/link appears when visitors mouse over it.

Dynamic options for the CTA:

  • Text Color: Change the color of the CTA text.Β For details, seeΒ Choose a colorΒ orΒ Use global fonts and colors.
  • Background type: (button only) Switch between a classic background or a gradient background. For details, see Create a Background.
  • Color (button only): Change the background color of the CTA. You must choose a global color.

Use the dropdown menu to add a border to the toggle. Learn more about border types.

  • Shape: Use the dropdown to determine the roundness of the CTA button.Β  Choose between:
    • Default
    • Sharp: Rectangular button.
    • Round:Β Buttons appear with smooth corners.
    • Rounded:Β Buttons appear with evenly curved edges.

Click the pencil icon Edit CTA widget 55 to add shadow to the toggle. Learn more about shadows.

Width and Position only appear under Style for Streamline and Storytelling layouts.

Choose between the Default width or Stretch.

Choose between the Default position or End.

Style tab Content CTA widget 57

Determine how look and feel of the CTA widget as a whole.

Add a background to the widget content. Learn more about backgrounds.

Add a border around the widget. Learn more about border types.

Round the corners of the borders around the CTA widget if you added a border.Β Β 

To adjust the radius with the counter control, use the four counters to adjust each individual corner. Learn more about measurement methods.Β 

To adjust the radius, use the four counters to adjust each individual corner. Learn more aboutΒ these measurement methods.Β 

Click the pencil icon Edit CTA widget 55 to add a shadow to the menu tab’s content. Learn more about shadows.

Add space around the CTA widget content. Learn how to create space with padding and margins.

Advanced tab

Control the placement of your widget, insert links, add custom code and more.

Advanced tab CTA widget 61

Learn more about the Advanced tab settings.

Have more questions? We’re more than happy to assist.

Link is copied to clipboard!
On this page

Is this article helpful?

Share this article