Comment on page
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.
REA Button
REA Contact Form 7 Styler
Last modified 1yr ago