REA 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. Skin: Choose either the Classic skin or the Cover skin.

2. Position: (Only shown for Classic skin) Select position as left, center, or right.

3. Choose Image: Select Image for the widget.

Content

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. Title & Description: Choose the title and description that appears in the front of the flip box.

3. Title HTML Tag: Set the title’s HTML tag to H1- H6, Div, or Span.

4. Button Text: Enter the text to be displayed on the button.

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. Title: Enter the text to be displayed on the ribbon.

Style

Box

1. Background Color: Choose a background color for the entire box.

2. Min. Height: Set the minimum height of the entire box.

3. Alignment: Align the content to the left, center, or right of the box.

4. Vertical Position: Align the content to the top, center, or bottom of the box.

5. Padding: Set the padding for the content.

6. Image

   1. Min. Width: Set the minimum width for the image.

   2. Min. Height: Set the minimum height for the image.

Graphic Element

1. Spacing: Spacing around the graphic element.

2. Primary Color: Select color for the graphic element.

3. Icon Size: Select the size of the icon.

Content

1. Title

   1. Typography: Set the typography options for the title.

   2. Spacing: Set the amount of space between the title and description.

2. Description

   1. Typography: Set the typography options for the title.

   2. Spacing: Set the amount of space between the description and the button.

3. Colors > Normal/Hover State

   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. Border Width: Set the border width.

3. Border Radius: Set the border radius to control corner roundness.

4. Text Color (Normal & Hover): Choose the color for the button’s text.

5. Background Color (Normal & Hover): Choose the color for the button’s background.

6. Border Color (Normal & Hover): Choose the color for the button’s border.

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.