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

Still puzzling over something?