Call To Action Widget

Call To Action

The Call to Action widget helps you create engaging promotional sections with a headline, description, and button to encourage user interaction. You can customize the layout, background, typography, and hover effects to make it visually compelling and aligned with your site's design.

Image Carousel Widget
Call to Action Widget

Content Tab

Call to Action
  • Skin: Choose either the Classic skin or the Cover skin
  • Choose Image: Select or upload an image
  • Position: (Only shown for Classic skin) Align the image to the left, right or on top of the image
  • Min. Height: Set the minimum height of the image.
  • Ribbon: Enter the text to be displayed on the ribbon.
  • Position: Position of the ribbon.
Content
  • Graphic Element: Choose between None, Image or Icon to display a graphical Element above the Call to Action title.
  • Icon: Select an icon from the FontAwesome library
  • View: Choose the default icon view, or select Stacked or Framed.
  • Title & Description: Choose the title and description that appears in the widget.
  • Title HTML Tag: Set the title’s HTML tag to H1- H6, Div, or Span
  • Button Text: Enter the text to be displayed on the 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.
  • Apply Link On: Set the link for the whole box or the button.
  • Button Icon: Set an icon for the button.

Style Tab

Box
  • Min. Height: Set the minimum height of the whole box
  • Alignment: Align the content to the left, center or right of the box
  • Vertical Position: Align the content to the top, center or bottom of the box
  • Padding: Set the padding for the content
Ribbon
  • Distance: Move the slider between 0-50 to set the distance for the ribbon.
  • Background Color: Choose the color for the ribbon's background
  • Text Color: Choose the color for the ribbon's text
  • Typography: Set the typography options for the ribbon's title
  • Box Shadow: Set the box shadow settings for the ribbon
Content
  • Typography: Set the typography options for the title
  • Spacing: Set the amount of space between the title and description
Description
  • Typography: Set the typography options for the title
  • Spacing: Set the amount of space between the description and the button
Colors
  • Background Color: Choose the background color
  • Title Color: Choose the title color
  • Description Color: Choose the description color
Button
  • Size: Select the button size, from Extra Small to Extra Large
  • Typography: Set the typography options for the button
  • Text Color: Choose the color for the button’s text
  • Background Color: Choose the color for the button’s background
  • Border Color: Choose the color for the button’s border
  • Border Width: Set the border width
  • Border Radius: Set the border radius to control corner roundness
Hover effects
  • Hover Animation: Choose the hover animation for the image: Zoom in or out, or move left, right, up or down
    • The following items can be set independently for both the Normal and Hover states
  • Overlay Color: Choose the overlay color for the image
  • Blend Mode: (For Normal state) Set a blend mode
  • Transition Duration (ms): (For Hover state) Set the duration for the hover effect
© WebshopWorks - Professional PrestaShop Addons