Call to Action Widget (Pro)

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

1. Skin: Choose either the Classic skin or the Cover skin
2. Layout: (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

1. Graphic Element: Choose between None, Image or Icon to display a graphical Element above the Call to Action title
2. If 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.
3. 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.
4. Title & Description: Choose the title and description that appears in the front of the flip box
5. Title HTML Tag: Set the title’s HTML tag to H1- H6, Div, or Span
6. Button Text: Enter the text to be displayed on the button
7. 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.

Ribbon

Title: Enter the text to be displayed on the ribbon.

---

Style

Box

1. Min. Height – Set the minimum height of the whole box
2. Alignment – Align the content to the left, center or right of the box
3. Vertical Position – Align the content to the top, center or bottom of the box
4. Padding – Set the padding for the content

1. Min. Width: Set the minimum width for the image
2. Min. Height: Set the minimum height for the image

Content

Title

1. Typography: Set the typography options for the title
2. Spacing: Set the amount of space between the title and description

Description

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

Colors

1. Background Color: Choose the background color
2. Title Color: Choose the title color
3. Description Color: Choose the description color
4. Button Color: Choose the button color

Button

1. Size: Select the button size, from Extra Small to Extra Large
2. Text Color: Choose the color for the button’s text
3. Background Color: Choose the color for the button’s background
4. Border Color: Choose the color for the button’s border
5. Border Width: Set the border width
6. Border Radius: Set the border radius to control corner roundness

Ribbon

1. Background Color: Choose the color for the ribbon’s background
2. Text Color: Choose the color for the ribbon’s text
3. Distance: Move the slider between 0-50 to set the distance for the ribbon.
4. Typography: Set the typography options for the ribbon’s title
5. Box Shadow: Set the box shadow settings for the ribbon

Hover effects

1. Sequenced Animation: Choose if the animation for the text elements appears sequenced or all at once
2. 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

1. Overlay Color: Choose the overlay color for the image
2. CSS Filters: Set blur, brightness, contrast and saturation for the image
3. Blend Mode: (For Normal state) Set a blend mode
4. Transition Duration (ms): (For Hover state) Set the duration for the hover effect

---

If Cover Skin is chosen, the following options are available:

Content

1. Graphic Element: Choose between None, Image or Icon to display a graphical Element above the Call to Action title
2. If 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.
3. 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.
4. Title & Description: Choose the title and description that appears in the front of the flip box
5. Title HTML Tag: Set the title’s HTML tag to H1- H6, Div, or Span
6. Button Text: Enter the text to be displayed on the button
7. 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.

Ribbon

Title: Enter the text to be displayed on the ribbon.

Style

Box

1. Min. Height: Set the minimum height of the whole box
2. Alignment: Align the content to the left, center or right of the box
3. Vertical Position: Align the content to the top, center or bottom of the box
4. Padding: Set the padding for the content

Content

Title

1. Typography: Set the typography options for the title
2. Spacing: Set the amount of space between the title and description

Colors

1. Title Color: Choose the title color
2. Button Color: Choose the button color

Button

1. Size: Select the button size, from Extra Small to Extra Large
2. Typography: Set the typography options for the button text
3. Text Color: Choose the color for the button’s text
4. Background Color: Choose the color for the button’s background
5. Border Color: Choose the color for the button’s border
6. Border Width: Set the border width
7. Border Radius: Set the border radius to control corner roundness

Ribbon

1. Background Color: Choose the color for the ribbon’s background
2. Text Color: Choose the color for the ribbon’s text
3. Distance: Move the slider between 0-50 to set the distance for the ribbon.
4. Typography: Set the typography options for the ribbon’s title
5. Box Shadow: Set the 

   box shadow
    settings for the ribbon

Hover Effects

Content

1. Hover Animation: Choose the hover animation for the image: Zoom in or out, or move left, right, up or down
2. Animation Duration: Set the amount of time the animation takes to complete
3. Sequenced Animation: Choose if the animation for the text elements appears sequenced or all at once

Background

1. Hover Animation: Choose the hover animation for the image: Zoom in or out, or move left, right, up or down
2. Overlay Color: Choose the overlay color for normal and hover
3. CSS Filters: Set blur, brightness, contrast and saturation for the image
4. Blend Mode: (For Normal state) Set a blend mode for the image
5. Transition Duration (ms): (For Hover state) Set the duration for the hover effect 

---

Advanced

Set the Advanced options that are applicable to this widget