Flip Box Widget - Creative Elements

The Flip Box Widget helps you create animated boxes that flip to the other side, once the visitor hovers over them.

Flip Box Widget

Front

Graphic Element: Choose between None, Image or Icon to display a graphical Element in the front of the flip box.
Choose Image: Select or upload an image.
Image Size: Set the size of the image, from thumbnail to full, or set a custom size.
Icon: Select an icon from the FontAwesome library.
View: Choose the default icon view, or select Stacked or Framed.
Shape: If Stacked or Framed is chosen, choose Circle or Square.
Title & Description: Add the title and description that appears in the front of the Flip Box.
Title HTML Tag: Set the title’s HTML tag to H1- H6, Div, or Span.

Back

Graphic Element: Choose between None, Image or Icon to display a graphical Element in the front of the flip box.
Choose Image: Select or upload an image.
Image Size: Set the size of the image, from thumbnail to full, or set a custom size.
Icon: Select an icon from the FontAwesome library.
View: Choose the default icon view, or select Stacked or Framed.
Shape: If Stacked or Framed is chosen, choose Circle or Square.
Title & Description: Add the title and description that appears in the front of the Flip Box.
Title HTML Tag: Set the title’s HTML tag to H1- H6, Div, or Span.
Button Text: Choose the text that appears inside the button.
Button Link: Choose where the button points to. The link needs to include the entire URL (including http / https).

Settings

Height: Control the height of the flip box.
Border Radius: Set the border radius of the flip box, and make its corners round.
Flip Effect: Choose between flip effects, including flip, slide, push, zoom in, zoom out or fade.
Flip Direction: If you choose the flip or slide effects, you can have the flip box flip right, left, up or down.
3D Depth: Slide to On to give the flip box a 3D animation effect.

Front / Back

Background Type: Choose Color, Image or Gradient as the background of the front of the flip box.
Position: Select the position of the image, such as Top Center, Top Right, Center Center, etc.
Attachment: Select from Default, Scroll, or Fixed.
Repeat: Choose from Default, No-repeat, Repeat, Repeat-x, or Repeat-y.
Size: Select from Default, Auto, Cover, or Contain.
Background Overlay: Choose a color for the overlay.
Alignment: Align the content to the left, center or right of the box
Vertical Position: Align the content to the top, center or bottom of the box
Padding: Set the padding for the content
Border Type: Choose a border for the image: None, Solid, Double, Dotted, Dashed, or Groove.
Border Color: Choose the color for the button’s border
Border Width: Set the border width
Box Shadow: Set the box shadow settings for the front

Title

Description

Icon

Spacing: Control the space between the icon and the title.
Primary Color: Choose the primary color of the icon.
Secondary Color: Choose the secondary color of the icon.
Icon Size: Choose the size of the icon.
Icon Padding: Set the amount of padding around the icon.
Icon Rotate: Rotate the icon to any angle.
Border Radius: Set the radius of the icon border to control corner roundness.

Image

Spacing: Control the space between the image and the title.
Size: Choose the size of the image.
Opacity: Choose the opacity of the image.
Border Type: Choose a border for the image: None, Solid, Double, Dotted, Dashed, or Groove.
Border Radius: Control the border radius of the image border.

Button