Would you like to add interactive flip content to your website? The Flip Box widget in aThemes Addons for Elementor lets you create animated boxes that flip to reveal different content on each side, giving your pages an engaging and dynamic feel.
In this guide, we’ll walk you through how to use the Flip Box widget in aThemes Addons for Elementor.
Before you get started, make sure you’ve installed and activated the aThemes Addons plugin on your WordPress site along with Elementor.
Activating the Widget
Go to your WordPress admin dashboard and navigate to the aThemes Addons dashboard. Search for Flip Box and toggle the switch to activate the widget.
Exploring Widget Options
Configuring the Settings Section
The Settings section controls the overall behavior of the flip box:
- Height – Set the flip box height in pixels or viewport height units.
- Direction – Choose the flip direction: Left, Top, Right, or Bottom.
- 3D Effect – Toggle to enable a three-dimensional flip animation.
- Transition – Select the animation easing: Ease, Ease In, Ease Out, Ease In Out, or Linear.
- Transition Time – Set the flip animation duration in milliseconds.
Configuring the Front Side Section
Configure the content displayed on the front side of the flip box:
- Content Type – Choose Custom content or a saved Template.
- Choose Template – Select an Elementor template to display (when using the Template content type).
- Icon Type – Select None, Icon, or Image.
- Icon – Choose an icon from the icon library.
- Image – Upload or select an image to display.
- Title – Enter the front side title text.
- Description – Enter the front side description text.
- Vertical Alignment – Set content alignment to Top, Middle, or Bottom.
- Alignment – Choose Left, Center, or Right text alignment.
Configuring the Back Side Section
Configure the content displayed on the back side of the flip box:
- Content Type – Choose Custom content or a saved Template.
- Choose Template – Select an Elementor template to display (when using the Template content type).
- Icon Type – Select None, Icon, or Image.
- Icon – Choose an icon from the icon library.
- Image – Upload or select an image to display.
- Title – Enter the back side title text.
- Description – Enter the back side description text.
- Vertical Alignment – Set content alignment to Top, Middle, or Bottom.
- Alignment – Choose Left, Center, or Right text alignment.
Customizing the Style Tab
The Style tab lets you customize the flip box appearance for both the front and back sides.
Customizing General Style
- Border Radius – Round the corners of the flip box.
- Box Shadow – Add a shadow effect around the flip box.
Styling the Front Side
- Background – Set a color, gradient, or image background.
- Title Color – Set the front side title color.
- Description Color – Set the front side description color.
- Icon Color – Set the front side icon color.
- Icon Size – Adjust the front side icon size.
Styling the Back Side
- Background – Set a color, gradient, or image background.
- Title Color – Set the back side title color.
- Description Color – Set the back side description color.
- Icon Color – Set the back side icon color.
- Icon Size – Adjust the back side icon size.
Following Usage Tips
- Keep content concise on both sides so the flip box remains clean and readable.
- Use the 3D effect sparingly to avoid overwhelming visitors with too many animations.
- Test the flip animation on mobile devices to ensure it works smoothly on touch screens.
- Ensure both sides contain valuable content to make the flip interaction worthwhile.
That’s it! You’ve successfully learned how to use the Flip Box widget in aThemes Addons for Elementor to create interactive flip content on your website.
Next, would you like to display a restaurant or cafe menu on your site? Check out our guide on using the Food Menu widget to learn more.
