Call To Action
This is a powerful widget for WordPress users looking to boost their marketing efforts. It lets you easily add attention-grabbing buttons throughout your website to guide visitors where you want them to go. Whether you want to showcase a special offer, highlight a featured product, or direct users to a specific page, this widget has got you covered.
With the Call to Action widget, you can create eye-catching buttons with a title, subtitle, description, and multiple buttons for redirecting users. You have the freedom to choose from different layouts and icons and even add customizable ribbons to make your call to action stand out. It’s a fantastic way to promote sales or special schemes on your website in a user-friendly and engaging manner.
The “Call To Action” widget features the following controls.
Content
Content
- Layout: Select from Cover or Split.
- Image Position: Select image position from Left, Right, Up, or Down(applicable for Split Layout)
- Choose Image: Upload an image.
- Image Size: Select the image size.
![Call To Action: Layout Settings](https://www.elementoraddons.com/wp-content/uploads/2023/11/Content_content_Layout.png)
- Icon Type: Choose from a list of Icons, Images, or Lottie animations.
- Icon
- Icon: Select from the Font Awesome icon library or upload an SVG image.
- Image
- Image: Either upload an image or select a dynamic tag for display.
- Image size: Choose the size for your icon image display.
- Lottie Animation
- Source: Choose the source of the Icon by either adding an External URL or selecting a media file.
- Loop: Enable the loop option to display the animation continuously.
- Reverse: Activate the reverse option to display the animation in reverse order.
- Icon
- View: Select from default, stacked, or framed display options.
- Shape: Select either a Circle or Square shape for the stack or frame.
![Call To Action: Icon Type Settings](https://www.elementoraddons.com/wp-content/uploads/2023/11/Content_IconType.png)
- Title: Enter the title.
- Title Tag: Select the tag for title.
- Sub Title: Enter the sub title.
- Sub Title Tag: Select the tag for sub title.
- Description: Enter the description.
![Call To Action: Content Settings](https://www.elementoraddons.com/wp-content/uploads/2023/11/Content_Content.png)
- Ribbon: Enable the option to display the ribbon.
- Position: Choose ribbon position from Left or Right.
- Text: Enter the text for a ribbon.
![Call To Action: Ribbon Settings](https://www.elementoraddons.com/wp-content/uploads/2023/11/Content_Ribbon.png)
Button
- Primary Button: Enter the text for primary button.
- Link: Enter the URL to link with the button.
- Icon Type: Choose from a list of Icons, Images, or Lottie animations.
- Icon
- Icon: Select from the Font Awesome icon library or upload an SVG image.
- Lottie Animation
- Source: Choose the source of the Icon by either adding an External URL or selecting a media file.
- Loop: Enable the loop option to display the animation continuously.
- Reverse: Activate the reverse option to display the animation in reverse order.
- Icon
- View: Select from default, stacked, or framed display options.
- Shape: Select either a Circle or Square shape for the stack or frame.
- Position: Choose a position from After or Before.
![Call To Action: Primary Button Settings](https://www.elementoraddons.com/wp-content/uploads/2023/11/Content_PrimaryButton.png)
Secondary Button: As mentioned earlier, you can find the same feature settings here for your reference.
![Call To Action: Secondary Button Settings](https://www.elementoraddons.com/wp-content/uploads/2023/11/Content_SecondaryButton.png)
Style
Box
- Height: Enter the height of box.
- Border Type: Select the border Type.
- Border Radius: Set the border-radius.
- Box Shadow: Set the box shadow.
![Call To Action: Box Style Settings](https://www.elementoraddons.com/wp-content/uploads/2023/11/Style_Box.png)
Image
- Height: Enter the height of image(applicable for Split Layout).
- Width: Enter the width of image(applicable for Split Layout).
- Position: Choose a position from the Top, Bottom, or Center(applicable for Split Layout).
- Background Type: Choose either a Classic or a Gradient.
Classic
- Color: Choose the color for the background.
- Image: Either upload an image or select a dynamic tag for display.
Gradient
- Color: Select the color for the background.
- Location: Determine the position of the color on the background by specifying their location in percentage.
- Second Color: Select the second color for the background.
- Location: Determine the position of the second color on the background by specifying their location in percentage.
- Type: Select either Radial or Linear.
- Radial
- Position: Set the position.
- Linear
- Angle: Set the angle using DEG, GRAD, RAD, and TURN.
- Radial
- Object Fit: Choose from Cover or fill.
- Object Position: Select the position.
- Padding: Set the padding.
![Call To Action: Image Style Settings](https://www.elementoraddons.com/wp-content/uploads/2023/11/Style_Image.png)
Hover Effects
- Hover Animation: Select the image animation in the hover state.
- Transition Duration: Set the transition duration.
![Call To Action: Hover Effects Style Settings](https://www.elementoraddons.com/wp-content/uploads/2023/11/Style_HoverEffects.png)
Overlay
- Color: Select the color of overlay.
- CSS Filters: Set the CSS filter property.
- Hover Color: Select the hover color of overlay.
- Hover CSS Filters: Set the CSS filter property in hover state.
![Call To Action: Overlay Style Settings](https://www.elementoraddons.com/wp-content/uploads/2023/11/Style_Overlay.png)
Content
- Background Type: As mentioned above, Choose either a Classic or a Gradient. Check Here.
- Alignment: Select the alignment of content.
- Text Align: Select the alignment of text.
- Vertical Alignment: Select the vertical alignment of text(applicable for Split Layout).
- Gap: Specify the gap between content.
- Border Type: Select the border type.
- Box Shadow: Set the box shadow.
- Border Radius: Set the border radius.
- Padding: Set the padding.
- Margin: Set the margin.
![Call To Action: Content Style Settings](https://www.elementoraddons.com/wp-content/uploads/2023/11/Style_Content.png)
Title
- Typography: Set the typography.
- Text Shadow: Set the text shadow.
- Color: Select the color of title.
- Hover Color: Select the hover color of title.
- Spacing(px): Specify the space between title and other content.
![Call To Action: Title Style Settings](https://www.elementoraddons.com/wp-content/uploads/2023/12/Style_Content_Title.png)
Sub Title
- Typography: Set the typography.
- Text Shadow: Set the text shadow.
- Color: Select the color of sub title.
- Hover Color: Select the hover color of sub title.
- Spacing(px): Specify the space between sub title and other content.
![Call To Action: Sub Title Style Settings](https://www.elementoraddons.com/wp-content/uploads/2023/12/Style_Content_SubTitle.png)
Description
- Typography: Set the typography.
- Color: Select the color of description.
- Hover Color: Select the hover color of description.
- Spacing(px): Specify the space between description and other content.
![Call To Action: Description Style Settings](https://www.elementoraddons.com/wp-content/uploads/2023/11/Style_Content_Description.png)
Icon
Normal
- Primary Color: Choose the primary color for the icon.
- Secondary Color: Choose the secondary color for the icon.
Hover
Styling controls for the hover state are available under this section. These settings will be applied when Someone hovers the icon.
- Size: Set the size of the Icon.
- Padding: Set the padding.
- Rotate: Set the rotation of your Icon.
- Border Width: Set the border’s width.
- Border Radius: Set the border’s radius.
![Call To Action: Icon Style Settings](https://www.elementoraddons.com/wp-content/uploads/2023/11/Style_Content_Icon.png)
Hover Effects
Note: These options are only applicable if the Cover layout is selected.
- Hover Animation: Select the hover animation of content.
- Transition Duration: Set the transition duration.
![Call To Action: Hover Effects Style Settings](https://www.elementoraddons.com/wp-content/uploads/2023/11/Style_Content_HoverEffects.png)
Button
- Spacing: Specify the space between the buttons.
- Padding: Set the padding.
- Position: Choose position from Left, Up, Down, and Right.
![Call To Action: Button Style Settings](https://www.elementoraddons.com/wp-content/uploads/2023/11/Style_Button.png)
- Typography: Set the typography.
- Text Shadow: Set the text shadow.
Normal
- Color: Select the color or button.
- Background Type: As mentioned above, Choose either a Classic or a Gradient. Check Here.
- Box Shadow: Set the box shadow.
- Border Type: Select the border type.
Hover
Styling controls for the hover state are available in this section. These settings will be applied when Someone hovers the button.
- Border Radius: Set the border radius.
![Call To Action: Primary Button Style Settings](https://www.elementoraddons.com/wp-content/uploads/2023/12/Style_Button_PrimaryButton.png)
Icon: As we mentioned above, the styling controls the icon. Check Here.
![Call To Action: Primary Button Icon Style Settings](https://www.elementoraddons.com/wp-content/uploads/2023/11/Style_Button_PrimaryButtonIcon.png)
Secondary Button: As we mentioned above, the same styling features for buttons. Check Here.
![Call To Action:Secondary Button Style Settings](https://www.elementoraddons.com/wp-content/uploads/2023/12/Style_Button_SecondaryButton.png)
Icon: As we mentioned above, the styling controls the icon. Check Here.
![Call To Action: Secondary Button Icon Style Settings](https://www.elementoraddons.com/wp-content/uploads/2023/11/Style_Button_SecondaryButtonIcon.png)
Ribbon Style
Note: These options are only applicable if the Ribbon option is enabled in the Content section.
- Background Type: As mentioned above, Choose either a Classic or a Gradient. Check Here.
- Typography: Set the typography.
- Box Shadow: Set the bpx shadow.
- Distance: Specify the distance of ribbon.
![Call To Action: Ribbon Style Settings](https://www.elementoraddons.com/wp-content/uploads/2023/11/Style_RibbonStyle.png)
Check out the Demo page of Call To Action.