Call To Action

The Call to Action Widget is a versatile tool for creating visually appealing boxes that combine an image, text, and a button. These boxes are designed to capture user attention and encourage specific actions.

View Live Demo

Content Tab

Image
  • Skin: Choose the skin for the image; options include Classic and Cover.
  • Position: Set the position of the image using the alignment controls.
  • Choose Image: Upload or select an image to be used in the call to action.
Content
  • Graphic Element: Add an icon or an image that will appear with the content.
  • Title: Enter the heading for the call to action.
  • Description: Provide the descriptive text for the call to action.
  • Title HTML Tag: Select the appropriate HTML tag for the title, such as H1, H2, etc.
  • Button Text: Specify the text for the call to action button.
  • Link: Insert the URL the button will link to.
Ribbon
  • Title: Input text for a ribbon, if desired.

Style Tab

Box
  • Height: Adjust the height of the call to action box.
  • Alignment: Set the alignment of the content within the box.
  • Vertical Position: Position the content vertically within the box.
  • Padding: Add padding around the inside of the box.
Image
  • Width: Set the width of the image within the call to action.
  • Height: Define the height of the image.
Content
  • Title:
    • Typography: Customize the font settings for the title.
    • Text Stroke: Apply a stroke to the title text.
    • Spacing: Adjust the spacing of the title text.
  • Description:
    • Typography: Customize the font settings for the description.
    • Spacing: Adjust the spacing of the description text.
  • Colors: Define the background, title, and description colors for both normal and hover states.
Button
  • Size: Choose the size of the button (e.g., Small, Medium, Large).
  • Typography: Customize the typography of the button text.
  • Text Color: Set the text color for both normal and hover states.
  • Background Color: Choose the background color for the button.
  • Border Color: Select the border color for the button.
  • Border Width: Adjust the width of the button's border.
  • Border Radius: Set how rounded the button corners will be.
Hover Effects
  • Hover Animation: Choose an animation effect for when the mouse hovers over the call to action, like Zoom In or Grow.
  • Overlay Color: Select a color for the overlay that appears on hover.
  • CSS Filters: Apply CSS filters to the call to action on hover, such as blur or brightness.
  • Blend Mode: Choose a blend mode for the hover effect.
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.