Call to Action is an integral part of any website. With an efficiently designed call to action you can increase engagement of the website visitors easily. 

Using Call to Action

Using call to action, you can customize the content, style and advanced section of the tool. 

Content: The content section allows you to modify the following options. 

• Style Section
• Title
• Subtitle
• Featured Image
• Button

Style Section

The style section allows you to pick from the many preset styles. Each of these preset styles are unique and different from one another. 

Title:

In the title section, you can add the title text, add HTML tag, text color and modify the typography of the title of call to action. 

Subtitle:

If you want to include any subtitle below the title to make your call to action contextual. You can do it from this section. You can add text, change color, and typography from this section. 

Featured Image:

To make the call to action section visually attractive, you can add featured image from this section. 

Button: You can customize the call to action button by adding button label, button URL, font and background color easily. 

Style: In the style section, you can add background images, change background colors and more with just a few clicks. Plus, you can add padding to the section to make it eye soothing. 

Advanced 

In the Advanced section of the tool, you will have the flexibility to add margin and padding to the element. You can also modify the Z-index to customize the element more. 

You will also get the chance to edit and customize the following options: 

• Motion Effects
• Background
• Border
• Positioning
• Responsive
• Attributes
• Custom CSS

Motion Effects:

From the Motion Effects option you can add different effects such as fading, zooming, bouncing, sliding, rotating, attention seeking motion, lightspeed and more effects to make your website look different. 

Background: 

If you want to customize the background with specific color, gradient or images, you can do that from the advanced settings as well. You can pick background type, color, gradient, gradient type and more.

Border: 

If you want to add any line, box, dots and other design variations as borders of the element, you can do it from here. You can also customize the size and insert shadow effects if you want to. 

Positioning:

This feature will allow you to fix the positioning of the element. From the width section you can select if the position will be full width, inline or customized. And you can set the position as absolute or fixed as well from these settings. 

Responsive:

You can check the responsiveness of the elements if you toggle through the available options. However the change of the widget will be only visible on the live page or preview, not in the Elementor.