Call to action widget (Pro)

the Call to action widget es una herramienta para crear hermosos cuadros que combinan una imagen, algo de texto y un botón. El widget utiliza animaciones y efectos CSS para crear interacciones de Username, que aparecen cuando el usuario pasa el mouse sobre el cuadro.

Content

Image

1. Skin: Choose Classic Mask or Cover Mask
2. Design: (Only displayed for classic skin) Align the image to the left, right, or above the image

Yes Classic skin You choose the following options are available:

Content

1. Graphic element: Choose from None, Image, or Icon to display a graphic 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 image size, from thumbnail to full, or set a custom size.
3. If Icon is selected as a graphic element:
   Icon: Select an icon from the FontAwesome library
   Watch: Choose the default icon view or select Stacked or Framed.
4. Title Description: Choose the title and description that appear in the front of the drop-down box
5. Label HTML de título: Set the HTML tag of the title to H1-H6, Div or Span
6. Text button: Enter the text to be displayed on the button
7. Link: Introduzca la Url del enlace del botón. Haga clic en el engranaje Opciones de enlace para agregar rel = nofollow al enlace o para abrir el enlace en una nueva ventana.

Headband

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

Style

Box

1. Min. Height - Set the minimum height of the entire box
2. Alignment - Align content to the left, center, or right of the box
3. Vertical position - Align content to the top, center or bottom of the box
4. Filling - Set padding for content

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

Content

Title

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

Description

1. Typography: Sets the font options for the title
2. Spacing: Sets 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 color from description
4. Button color: Choose the button color

Button

1. Size: Select button size from Extra Small to Extra Large
2. Text color: Choose the button text color
3. Background Colour: Choose the color for the button background
4. Border color: Choose the button border color
5. Border width: Sets the width of the border
6. Edge radius: Sets the radius of the border to control the roundness of the corners

Headband

1. Background color: Choose the background color of the ribbon
2. Text color: Choose the color of the ribbon text
3. Distance: Move the slider between 0 and 50 to set the tape distance.
4. Typography: Sets the typography options for the title of the tape
5. Shadow of the box: Sets the box shadow setting for the ribbon

Scroll Effects

1. Sequenced animation: Choose whether the animation of the text elements appears in sequence or all at once
2. Scrolling animation: Choose the scrolling animation for the image: zoom in or out, or move left, right, up or down

The following items can be independently set to Normal and Float up state

1. Overlay color: Choose the overlay color for the image
2. Filters CSS: Sets the blur, brightness, contrast, and saturation of the image
3. Blend mode: (For normal state) Set a blend mode
4. Duration of transition (ms): (For hover state) sets the duration of the hover effect

Yes Cover the skin is chosen, the following options are available:

Content

1. Graphic element: Choose from None, Image, or Icon to display a graphic 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 image size, from thumbnail to full, or set a custom size.
3. If Icon is selected as a graphic element:
   Icon: Select an icon from the FontAwesome library
   Watch: Choose the default icon view or select Stacked or Framed.
4. Title Description: Choose the title and description that appear in the front of the drop-down box
5. Title HTML tag: Set the HTML tag of the title to H1-H6, Div or Span
6. Text button: Enter the text to be displayed on the button
7. Link: Enter the URL of the button link. Click the Link Options gear to add rel = nofollow to the link or to open the link in a new window.

Headband

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

Style

Box

1. Min. Height: Sets the minimum height of the entire box
2. Alignment: Aligns content to the left, center, or right of the box
3. Vertical position: Aligns content to the top, center, or bottom of the box
4. Filling: Sets padding for content

Content

Title

1. Typography: Sets the font options for the title
2. Spacing: Sets 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 button size from Extra Small to Extra Large
2. Typography: Sets the typography options for the button text
3. Text Colour: Choose the button text color
4. Background Colour: Choose the color for the button background
5. Border color: Choose the button border color
6. Border width: Sets the width of the border
7. Edge radius: Sets the radius of the border to control the roundness of the corners

Headband

1. Background color: Choose the background color of the ribbon
2. Text color: Choose the color of the ribbon text
3. Distance: Move the slider between 0 and 50 to set the tape distance.
4. Typography: Sets the typography options for the title of the tape
5. Shadow of the box: Select the
   
   box shadow
   settings for ribbon

Scroll Effects

Content

1. Scrolling animation: Choose the scrolling animation for the image: zoom in or out, or move left, right, up or down
2. Animation duration: Sets the amount of time the animation takes to complete
3. Sequenced animation: Choose whether the animation of the text elements appears in sequence or all at once

Background

1. Scrolling animation: Choose the scrolling 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 move the cursor
3. CSS filters: Sets the blur, brightness, contrast, and saturation of the image
4. Blend mode: (For Normal state) Set a blending mode for the image
5. Duration of transition (ms): (For hover state) sets the duration of the hover effect

Advanced

Set the advanced options that are applicable to this widget