The Flip Box Widget helps you create animated boxes that flip to the other side, once the visitor hovers over them.
Content
Front
Content
This tab controls the content of the front side of the flip box.
Graphic Element: Choose between None, Image or Icon to display a graphical Element in the front of the flip boxIf 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 sizeIf 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 FramedShape: If Stacked or Framed is chosen, choose Circle or SquareTitle & Description: Choose the title and description that appears in the front of the flip box
Background
This tab controls the background of the front side of the flip box.
Background Type: Choose Color, Image or Gradient as the background of the front of the flip box.
If you choose an Image Background, the following options become available:
Position: Select the position of the image, such as Top Center, Top Right, Center Center, etc.Attachment: Select from Default, Scroll, or FixedRepeat: Choose from Default, No-repeat, Repeat, Repeat-x, or Repeat-ySize: Select from Default, Auto, Cover, or ContainBackground Overlay: Choose a color for the overlay
If you choose Gradient Background, the following options become available:
Color: Select the primary color of the gradientLocation: Select the location of the primary colorSecond Color: Select the second color of the gradientLocation: Select the location of the second colorType: Choose Linear or RadialAngle: Set the angle of the gradient
Back
The back side of the flip box has the same elements as the front side listed above, except for the graphic element that only appears on the front. The back side also includes a button.
Button Text: Choose the text that appears inside the buttonLink: Choose where the button points to. The link needs to include the entire URL (including http / https)Apply Link On: Choose to apply the clickable link to the Button Only, or to the Whole Box
Settings
Height: Control the height of the flip boxBorder Radius: Set the border radius of the flip box, and make its corners roundFlip Effect: Choose between flip effects, including flip, slide, push, zoom in, zoom out or fadeFlip Direction: If you choose the flip or slide effects, you can have the flip box flip right, left, up or down3D Depth: Slide to On to give the flip box a 3D animation effect
Note: The Safari browser is partially incompatible with the 3D Depth effect on mobile. If 3D Depth is used, portions of the flip box may show through the Nav Menu dropdown. It is not possible to use the 3D Flip Box widget and the Nav Menu widget with IOS due to issues with Safari being unable to support this option. We advise modifying the content for mobile in this case with the 「hide section」 option in the section』s Advanced tab in Responsive > Visibliity.
Style
Front Side
Padding: Add padding to the content area of the front of the flip boxAlignment: Choose to align the flip box content to the left, right or center of the flip boxVertical Position: Align the flip box content to the top, center or bottom of the flip boxBorder Type: Set a border to the entire flip boxWidth: If a border type is chosen, set a width for the borderColor: If a border type is chosen, select a color for the border
Icon
Spacing: Control the space between the icon and the titlePrimary Color: Choose the primary color of the iconSecondary Color: Choose the secondary color of the iconIcon Size: Choose the size of the iconIcon Padding: Set the amount of padding around the iconIcon Rotate: Rotate the icon to any angleBorder Width: Set the width of the icon borderBorder Radius: Set the radius of the icon border to control corner roundness
Image
Spacing: Control the space between the image and the titleOpacity: Choose the opacity of the imageBorder Type: Choose a border for the image: None, Solid, Double, Dotted, Dashed, or GrooveBorder Radius: Control the border radius of the image border
Title
Spacing: Control the space between the title and descriptionText Color: Choose the color of the titleTypography: Set the typography settings of the title
Description
Text Color: Choose the color of the descriptionTypography: Set the typography settings of the description
Back Side
For the back side of the flip box, you get all the options listed previously for the front side, minus the graphical element settings. You also get control over the button settings.
Button
Size: Choose a size for the button (extra small, small, medium large and extra large)Typography: Customize the typography of the button textText Color: Choose the text color of the buttonBackground Color: Choose the color of the button backgroundBorder Color: Control the color of the button borderBorder Width: Control the width of the button borderBorder Radius: Control the border radius of the button
Advanced
Set the Advanced options that are applicable to this widget
Read the full release post about the Flip Box widget