Call to action widget allows you to design appealing boxes that motivate your website visitors to perform specific actions such as subscribing to a newsletter, making a purchase, or reaching out for contact.
Content tab
Image
- Position: Specify how the image should be displayed relative to the content—choose from Left, Above, or Right of the text.
- Graphic Element: You can choose to add an additional graphical element above the CTA title. Options include None, Image (select an existing image from your media library or upload a new image), or Icon ( choose an icon from the icon library provided or upload an SVG image of your choice ).
Content
- Title: Enter the main title text
- Title HTML Tag: Choose the appropriate HTML tag for the title from the options: H1 through H6, Div, or Span. Selecting the right tag is important for SEO and semantic structure.
- Description: Add a brief description that supports the title and provides more context about what the user can expect from clicking the button.
- Apply Link On: Decide where the link will be applied—either on the Whole Box or on the Button Only.
First/Second button
- Button Text: Specify the text that will appear on the button.
- Link: Enter the URL to which the button will redirect users.
Ribbon
- Title: Add the text that will appear on the decorative ribbon.
Style tab
Box
- Height: Adjust the overall height of the widget
- Vertical Position: Set the vertical alignment of the content within the box to the top, center, or bottom.
Image
- Border Type: Choose the style of the border,
- Border Color: Select the color for the button's border.
- Border Width: Adjust the width of the button's border.
- Border Radius: Control the roundness of the button's corners.
- Min Width: Set the minimum width of your CTA image box.
- Min Height: Set the minimum height of your CTA image box.
- Background Size: Choose how you want your image to fit in the image box.
Content
- Padding: Adjust the padding to increase or decrease the space between the content and the edges of the box.
- Text Alignment: Align the text to the left, right, and center.
- Title Typography: Customize the appearance of the title text.
- Spacing: Define the space between the title and the description.
- Description Typography: Adjust the typography of the description.
- Background Color: Select the background color for both normal and hover states.
- Title Color: Choose the title color for both normal and hover states.
- Description Color: Pick the description color for both normal and hover states.
Buttons positioning
- Horizontal Alignment: Determine the alignment of buttons to the left, right or center.
- Position: Specify the placement of buttons to the right or bottom.
First button
- Width: Specify the horizontal size.
- Size: Determine the overall dimensions including both height and width.
- Typography: Adjust the appearance of the text displayed.
- Border Width: Specify the thickness of the button's border.
- Border Radius: Determine how rounded the corners of the buttons are.
- Margin: Set the space surrounding the button, separating it from nearby elements.
- Padding: Control the space between the button's text and its border.
- Text Color: Specify the color of the text.
- Border Color: Define the color of the border.
- Background Color: Set the color that fills the background of the button.
- Box Shadow: Add a shadow effect around the button.
Hover effects
- Image Hover Animation: Select the animation effect for the image when hovered.
- Animation Duration: Set the duration for the animation to complete.
- Overlay Color: Choose the overlay color for both normal and hover states.
- Css Filters: Set CSS filters such as blur, brightness, contrast, and saturation for the image in both normal and hover states.
- Blend Mode: Set a blend mode for the image in its normal state.
Advanced tab
You can customize the widget further using the settings available in the Advanced tab. These options provide additional styling and functionality adjustments, allowing you to tailor the widget to better fit your design needs.