The Flip Box Widget allows you to display a content box that flips when hovered. It’s perfect for creating interactive and engaging content on your website.
Activate the widget
This widget is part of the aThemes Addons for Elementor plugin. To activate it, go to your admin area, visit the aThemes Addons dashboard, search for the widget, and click on the switch to activate it. It will now be available in your Elementor interface.
Widget options
Settings section
- Height: Adjust the height of the flip box. You can use pixels (px) or viewport height (vh) units.
- Direction: Choose the direction of the flip animation (Left, Top, Right, Bottom).
- 3D Effect: Enable or disable the 3D effect during the flip animation.
- Transition: Select the transition timing function (Ease, Ease In, Ease Out, Ease In Out, Linear).
- Transition Time: Set the duration of the flip animation in milliseconds.
Front Side section
- Content Type: Choose between “Custom” or “Template” for the front side content.
- Choose Template: Select a pre-designed template for the front side (available if “Template” is selected).
- Icon Type: Select “None”, “Icon”, or “Image” for the front side icon.
- Icon: Choose an icon from the library (available if “Icon” is selected).
- Image: Upload an image for the front side (available if “Image” is selected).
- Title: Enter the title for the front side.
- Description: Enter a description for the front side.
- Vertical Alignment: Align the content vertically (Top, Middle, Bottom).
- Alignment: Align the content horizontally (Left, Center, Right).
Back Side section
- Content Type: Choose between “Custom” or “Template” for the back side content.
- Choose Template: Select a pre-designed template for the back side (available if “Template” is selected).
- Icon Type: Select “None”, “Icon”, or “Image” for the back side icon.
- Icon: Choose an icon from the library (available if “Icon” is selected).
- Image: Upload an image for the back side (available if “Image” is selected).
- Title: Enter the title for the back side.
- Description: Enter a description for the back side.
- Vertical Alignment: Align the content vertically (Top, Middle, Bottom).
- Alignment: Align the content horizontally (Left, Center, Right).
Style tab
Customize the appearance of your flip box under this tab. You can adjust the border radius, box shadow, padding, background, and more to ensure the widget matches your website’s design perfectly.
General Style
- Border Radius: Set the border radius for the flip box.
- Box Shadow: Add a shadow effect to the flip box.
Front Side Style
- Padding: Adjust the padding for the front side content.
- Background: Set the background color or image for the front side.
- Icon Color: Change the color of the front side icon.
- Title Typography: Customize the typography for the front side title.
- Description Typography: Customize the typography for the front side description.
Back Side Style
- Padding: Adjust the padding for the back side content.
- Background: Set the background color or image for the back side.
- Icon Color: Change the color of the back side icon.
- Title Typography: Customize the typography for the back side title.
- Description Typography: Customize the typography for the back side description.
Usage tips
- Use high-quality images and icons for a professional look.
- Ensure the content on both sides of the flip box is concise and engaging.
- Experiment with different flip directions and effects to find the best fit for your design.
Conclusion
The Flip Box Widget is a versatile tool for creating interactive content on your website. With extensive customization options , you can tailor the appearance and functionality to match your needs and provide an engaging user experience.