Call To Action Widget

The Call to Action Widget is a tool for creating beautiful boxes that combine an image, some text, and a button. The widget uses animations and CSS effects to create user interactions, that appear when the user hovers over the box.

Call to Action Widget

Content Tab

• 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.

• 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

• 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

• 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

• Typography: Set the typography options for the title
• Spacing: Set the amount of space between the title and description

• Typography: Set the typography options for the title
• Spacing: Set the amount of space between the description and the button

• Background Color: Choose the background color
• Title Color: Choose the title color
• Description Color: Choose the description color

• 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 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