Widget Flip Box (Pro)

the Widget Flip Box helps you create animated frames that flip over once the visitor passes over them.

Content

Front

Content

This tab controls the contents of the front of the folding box.

1. Graphic element: Choose from None, Image, or Icon to display a graphic element in front of the drop-down box
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 Framing
   Shape: If Stacked or Framed is chosen, choose Circle or Square
4. Title Description: Choose the title and description that appear in the front of the drop-down box

Background

This tab controls the bottom of the front of the folding box.

Fund type: Choose Color, Image, or Gradient as the background for the front of the drop-down box.

If you choose a Background, the following options will be available:

1. Position: Select the position of the image, such as Top Center, Top Right, Center Center, etc.
2. Attachment: Select from Default, Scroll, or Fixed
3. Repeat: Choose from Default, Do not repeat, Repeat, Repeat-x, or Repeat-y
4. Size: Select from Default, Automatic, Cover, or Contain
5. Background overlay: Choose a color for the overlay

If you choose Gradient background, the following options will be available:

1. Colour: Select the primary color of the gradient
2. Location: Select the location of the primary color
3. Second Colour: Select the second color of the gradient
4. Location: Select the location of the second color
5. Type: Choose Linear or Radial
6. Angle: Sets the angle of the gradient

Back

The back of the folding box has the same elements as the front mentioned above, except for the graphic element that only appears on the front. The back also includes a button.

1. Text button: Choose the text that appears inside the button
2. Link: Choose where the button is pointing. The link must include the full URL (including http / https)
3. Apply link in: Choose to apply clickable link to button only or full frame

Configurations

1. Height: Control the height of the folding box
2. Edge radius: Set the radius of the edge of the folding box and round its corners
3. Flip effect: Choose from flip effects, including flip, slide, nudge, zoom in, zoom out, or dim
4. Flip direction: If you choose flip or slide effects, you can make the flip box flip right, left, up or down
5. 3D depth: Slide to On to give the dropdown box a 3D animation effect

Note: The Safari browser is partially incompatible with the 3D depth effect on mobile devices. If 3D depth is used, some parts of the drop-down box may be displayed through the navigation drop-down menu. Unable to use 3D Flip Box widget and Nav Menu widget with IOS due to issues with Safari not supporting this option. We recommend modifying the mobile content in this case with the option "hide section" in the Advanced tab of the section in Responsive> Visibility.

Style

Front side

1. Filling: Add padding to the content area on the front of the folding box
2. Alignment: Choose to align the content of the drop-down box to the left, right, or to the center of the drop-down box
3. Vertical position: Aligns the content of the drop-down box with the top, center, or bottom of the drop-down box
4. Border type: Sets a border for the entire dropdown box
5. Width: If a border type is chosen, set a width for the border
6. Colour: If a border type is chosen, select a border color

Icon

1. Spacing: Controls the space between the icon and the title
2. Primary color: Choose the primary color of the icon
3. Secondary color: Choose the secondary color of the icon
4. Icon size: Choose the size of the icon
5. Icon fill: Sets the amount of padding around the icon
6. Rotate icon: Rotate the icon to any angle
7. Border width: Sets the width of the icon border
8. Edge radius: Sets the icon border radius to control the roundness of the corners

Image

1. Spacing: Controls the space between the image and the title
2. Opacity: Choose the opacity of the image
3. Border type: Choose an image border: None, Solid, Double, Dotted, Dotted, or Groove
4. Edge radius: Controls the radius of the image border

Title

1. Spacing: Control the space between the title and description
2. Text Color: Choose the title color
3. Typography: Set the title font settings

Description

1. Text Color: Choose color from description
2. Typography: Set the font settings for the description

Rear side

For the back of the dropdown box, you get all the options listed above for the front, minus the graphic element settings. You also have control over the button settings.

Button

1. Size: Choose a button size (Extra Small, Small, Medium Large, and Extra Large)
2. Typography: Customize the button text font
3. Text Colour: Choose the button text color
4. Background color: Choose the button background color
5. Border color: Controls the button border color
6. Border width: Controls the width of the button border
7. Edge radius: Controls the radius of the button border

Advanced

Set the advanced options that are applicable to this widget

Read the full launch post about the Flip Box widget