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.
Content
Image
Skin: Choose either the Classic skin or the Cover skinLayout: (Only shown for Classic skin) Align the image to the left, right or on top of the image
If Classic Skin is chosen the following options are available:
Content
Graphic Element: Choose between None, Image or Icon to display a graphical Element above the Call to Action titleIf Image is selected as the Graphic Element:Choose Image: Select or upload an image Image Size: Set the size of the image, from thumbnail to full, or set a custom size.If Icon is selected as the Graphic Element: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 front of the flip boxTitle HTML Tag: Set the title』s HTML tag to H1- H6, Div, or SpanButton Text: Enter the text to be displayed on the buttonLink: 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.
Ribbon
Title: Enter the text to be displayed on the ribbon.
Style
Box
Min. Height – Set the minimum height of the whole boxAlignment – Align the content to the left, center or right of the boxVertical Position – Align the content to the top, center or bottom of the boxPadding – Set the padding for the content
Image
Min. Width: Set the minimum width for the imageMin. Height: Set the minimum height for the image
Content
Title
Typography: Set the typography options for the titleSpacing: Set the amount of space between the title and description
Description
Typography: Set the typography options for the titleSpacing: Set the amount of space between the description and the button
Colors
Background Color: Choose the background colorTitle Color: Choose the title colorDescription Color: Choose the description colorButton Color: Choose the button color
Button
Size: Select the button size, from Extra Small to Extra LargeText Color: Choose the color for the button』s textBackground Color: Choose the color for the button』s backgroundBorder Color: Choose the color for the button』s borderBorder Width: Set the border widthBorder Radius: Set the border radius to control corner roundness
Ribbon
Background Color: Choose the color for the ribbon』s backgroundText Color: Choose the color for the ribbon』s textDistance: Move the slider between 0-50 to set the distance for the ribbon.Typography: Set the typography options for the ribbon』s titleBox Shadow: Set the box shadow settings for the ribbon
Hover effects
Sequenced Animation: Choose if the animation for the text elements appears sequenced or all at onceHover 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 imageCSS Filters: Set blur, brightness, contrast and saturation for the imageBlend Mode: (For Normal state) Set a blend modeTransition Duration (ms): (For Hover state) Set the duration for the hover effect
If Cover Skin is chosen, the following options are available:
Content
Graphic Element: Choose between None, Image or Icon to display a graphical Element above the Call to Action titleIf Image is selected as the Graphic Element:Choose Image: Select or upload an image Image Size: Set the size of the image, from thumbnail to full, or set a custom size.If Icon is selected as the Graphic Element: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 front of the flip boxTitle HTML Tag: Set the title』s HTML tag to H1- H6, Div, or SpanButton Text: Enter the text to be displayed on the buttonLink: 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.
Ribbon
Title: Enter the text to be displayed on the ribbon.
Style
Box
Min. Height: Set the minimum height of the whole boxAlignment: Align the content to the left, center or right of the boxVertical Position: Align the content to the top, center or bottom of the boxPadding: Set the padding for the content
Content
Title
Typography: Set the typography options for the titleSpacing: Set the amount of space between the title and description
Colors
Title Color: Choose the title colorButton Color: Choose the button color
Button
Size: Select the button size, from Extra Small to Extra LargeTypography: Set the typography options for the button textText Color: Choose the color for the button』s textBackground Color: Choose the color for the button』s backgroundBorder Color: Choose the color for the button』s borderBorder Width: Set the border widthBorder Radius: Set the border radius to control corner roundness
Ribbon
Background Color: Choose the color for the ribbon』s backgroundText Color: Choose the color for the ribbon』s textDistance: Move the slider between 0-50 to set the distance for the ribbon.Typography: Set the typography options for the ribbon』s titleBox Shadow: Set the
box shadow settings for the ribbon
Hover Effects
Content
Hover Animation: Choose the hover animation for the image: Zoom in or out, or move left, right, up or downAnimation Duration: Set the amount of time the animation takes to completeSequenced Animation: Choose if the animation for the text elements appears sequenced or all at once
Background
Hover Animation: Choose the hover animation for the image: Zoom in or out, or move left, right, up or downOverlay Color: Choose the overlay color for normal and hoverCSS Filters: Set blur, brightness, contrast and saturation for the imageBlend Mode: (For Normal state) Set a blend mode for the imageTransition Duration (ms): (For Hover state) Set the duration for the hover effect
Advanced
Set the Advanced options that are applicable to this widget