Flip Box

The Flip Box widget allows you to create animated boxes that flip to reveal their other side when a visitor hovers over them. This engaging widget is particularly useful for showcasing information, features, or services with a touch of interactivity.

View Live Demo

Content Tab

Front

• Graphic Element
  • Icon: Choose an icon for the front of the flip box by clicking on the existing icon. A library of icons will appear for you to select from.
  • View: Select the style of the icon's presentation from 'Default', 'Stacked', or 'Framed'.
• Title & Description
  • Enter the title for the front of the flip box in the "Title" field.
  • Input the description text in the area provided below the title.

Back

• Title & Description
  • Enter the title for the back of the flip box in the "Title" field.
  • Input the description text in the area provided below the title.
• Button Text: If you want to include a button on the back of the flip box, enter the text for the button.
• Link: Provide the URL you want the button to link to by entering it into the "Link" field. Click the Link Options icon (resembles a cogwheel) to configure the link options such as opening the link in a new window/tab or adding a nofollow relationship.

Settings

• Height: Adjust the height of the flip box using the slider or by entering a value in the field provided.
• Border Radius: Use the slider or enter a value to set the border radius, which affects how rounded the corners of the flip box will be.
• Flip Effect: Choose the type of animation effect for the flip box: 'Flip', 'Slide', 'Push', 'Zoom In', 'Zoom Out', or 'Fade'.
• Flip Direction: Select the direction in which the flip box will animate: 'Left', 'Right', 'Up', or 'Down'.
• 3D Depth: Toggle this option to add a 3D effect to the flip box during the flip animation.

Style Lab

Front

• Padding: Adjust the padding inside the flip box to increase or decrease the space around the content. Input top, right, bottom, and left padding values in pixels.
• Alignment: Set the horizontal alignment of the flip box content to left, center, or right.
• Vertical Position: Align the content vertically to the top, center, or bottom.
• Border Type: Choose the type of border for the front flip box from options like solid, dashed, dotted, etc.
• Box Shadow: Click the icon to add a shadow around the flip box, making it stand out from the background.
• Icon
  • Spacing: Adjust the space around the icon with the slider.
  • Primary Color: Select the color of the icon using the color picker.
  • Icon Size: Use the slider to increase or decrease the size of the icon.
  • Icon Rotate: Rotate the icon to the desired angle using the slider.
• Title
  • Spacing: Use the slider to adjust the space around the title.
  • Text Color: Choose a color for the title text.
  • Typography: Click the pencil icon to set the font properties of the title.
  • Text Stroke: Click the icon to add an outline effect to the title text.
• Description
  • Text Color: Choose a color for the description text.
  • Typography: Click the pencil icon to set the font properties of the description text.

Back

• Padding: Set the padding for the back of the flip box.
• Alignment: Choose the alignment for the back content.
• Vertical Position: Align the back content vertically.
• Border Type: Select the border type for the back of the flip box.
• Box Shadow: Add or edit the shadow effect for the back.
• Title
  • Spacing: Adjust the spacing around the title.
  • Text Color: Choose the color for the title text.
  • Typography: Set the typography for the title.
  • Text Stroke: Apply a stroke effect to the title text.
• Description
  • Spacing: Adjust the space around the description.
  • Text Color: Set the color for the description text.
  • Typography: Set the typography for the description text.
• Button
  • Size: Choose the size of the button from options like small, medium, large, etc.
  • Typography: Set the typography for the button text, with different settings for normal and hover states.
  • Text Color: Choose the text color for the button.
  • Background Type: Select a background type for the button, such as classic or gradient.
  • Color: Pick a color for the button background.
  • Border Color: Choose the color for the button border.
  • Border Width: Set the width of the button border.
  • Border Radius: Adjust how rounded the button corners will be.