Call To Action

The REA Call to Action Widget is a tool for creating beautiful boxes that combine an image, some text, and a button.

REA Call To Action

Content

Image

1. 1.Skin: Choose either the Classic skin or the Cover skin.
2. 2.Position: (Only shown for Classic skin) Select position as left, center, or right.
3. 3.Choose Image: Select Image for the widget.

Content

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

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

Style

Box

1. 1.Background Color: Choose a background color for the entire box.
2. 2.Min. Height: Set the minimum height of the entire box.
3. 3.Alignment: Align the content to the left, center, or right of the box.
4. 4.Vertical Position: Align the content to the top, center, or bottom of the box.
5. 5.Padding: Set the padding for the content.
6. 6.Image
   1. 1.Min. Width: Set the minimum width for the image.
   2. 2.Min. Height: Set the minimum height for the image.

Graphic Element

1. 1.Spacing: Spacing around the graphic element.
2. 2.Primary Color: Select color for the graphic element.
3. 3.Icon Size: Select the size of the icon.

Content

1. 1.Title
   1. 1.Typography: Set the typography options for the title.
   2. 2.Spacing: Set the amount of space between the title and description.
2. 2.Description
   1. 1.Typography: Set the typography options for the title.
   2. 2.Spacing: Set the amount of space between the description and the button.
3. 3.Colors > Normal/Hover State
   1. 1.Background Color: Choose the background color.
   2. 2.Title Color: Choose the title color.
   3. 3.Description Color: Choose the description color.
   4. 4.Button Color: Choose the button color.

Button

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

Ribbon

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

Hover effects

1. 1.Sequenced Animation: Choose if the animation for the text elements appears sequenced or all at once.
2. 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. 1.Overlay Color: Choose the overlay color for the image.
2. 2.CSS Filters: Set blur, brightness, contrast and saturation for the image.
3. 3.Blend Mode: (For Normal state) Set a blend mode.
4. 4.Transition Duration (ms): (For Hover state) Set the duration for the hover effect.