1. Home
  2. Docs
  3. Marketing Elements
  4. Call To Action

Call To Action SA Element

The Call to Action element grabs your visitors’ attention and motivates them to interact and take action. With this widget, you can create interactive boxes that upgrade your website from average to exceptional. This element is a handy tool for creating beautiful boxes that combine an image, some text, and a button. It uses animations and CSS effects to create user interactions, that appear when the user hovers over the box. Here in this tutorial, you’re going to learn how to use the Call To Action element into Elementor Page Builder. So let’s get straight into it:


If you don’t know how to activate elements and start using it, then check the tutorials below:

Ξ Activate/De-activate Elements

Ξ Using Elementor Addons in Elementor


 

How to Customize the Call To Action Element

 

»Content

 

Content Settings

⇒Content Style: Set the call to action content style.

⇒Color Style: Customize the color style either background color, image or background fixed image.

⇒Icon: Add an icon in the content or upload an SVG from your system.

⇒Title: Add the title here. Click on Dynamic settings to apply the AnalogWP Classes to the title text. (Ex. Add a dark background)

⇒Content-Type: Set the content type either content or from the saved templates.

⇒Content: Type the content you want to have in your call to action box.

⇒Button Text: Enter the text to be displayed on the button

⇒Button Link: Enter the URL for the button’s link. Click the Link Options cog to either add rel=nofollow to the link or to open the link in a new window.

⇒Background Image: Upload an image for the call to action background.

⇒Overlay Color: Choose the overlay color for the image.

 


»Style

 

Call to Action Style

⇒Set Max-Width for the Container? Do you want to set the max-width for the call to action container? Enable it here.

⇒Container Max-Width: Set the container max-width for different dimensions.

⇒Background Color: Choose the background color.

⇒Padding: Set the padding value for the top, right, bottom and left around the call to action box for different dimensions. You can link the values together or customize them individually.

⇒Margin: Set the margin value for the top, right, bottom and left around the call to action box for different dimensions. You can link the values together or customize them individually.

⇒Border Type: Select a border type from the list according to your preference. And then set the border width for the top, right, bottom and left of the box for different dimensions. You can link the values together or customize them individually.

⇒Border Color: Add a custom color to the border.

⇒Border Radius: Set the border-radius around the call to action box for different dimensions.

⇒Box Shadow: Customize the box-shadow color, set the horizontal and vertical value of the shadow, control the blur radius and spreading, and set the position either outline or inset.

 

Color & Typography

⇒Title Style

→Color: Add a custom color to the title text of your call to action box.

→Typography: Set the typography options for the titles.

 

⇒Content Style

→Color: Add a custom color to the content text of the call to action.

→Typography: Set the typography options for the content text.

 

Button

⇒Effect: Add a hover effect to the button on the call to action box.

⇒Padding: Set the padding value for the top, right, bottom and left around the button for different dimensions. You can link the values together or customize them individually.

⇒Margin: Set the margin value for the top, right, bottom and left around the button for different dimensions. You can link the values together or customize them individually.

⇒Typography: Set the typography options for the button text.

⇒Text Color: Customize the button text color for Normal & Hover view.

⇒Background Color: Customize the button text background color for Normal & Hover view.

⇒Border Type: Select a border type from the list according to your preference. And then set the border width for the top, right, bottom and left of the button for different dimensions. You can link the values together or customize them individually.

⇒Border Color: Add a custom color to the border.

⇒Border Radius: Set the border-radius around the button for different dimensions.

⇒Box Shadow: Customize the box-shadow color, set the horizontal and vertical value of the shadow, control the blur radius and spreading, and set the position either outline or inset.

 

Icon Style

⇒Font Size: Customize the font size of the icon.

⇒Color: Add a custom color to the icon within the call to action content.

 


»Advanced

Set the Advanced options that are applicable to this widget

Still can’t figure out? Don’t worry, we got your back! Just watch the video tutorial below to have a precise understanding of the Call To Action Element.


Was this article helpful to you? Yes No

How can we help?