Free Elementor Flip Box Widget with Hover Flip Animations
Flipbox is a free Master Addons flip box widget for Elementor. The front face shows an icon or image with a title and short text, and on hover the card turns to a back face with more detail and an action button. The free plugin includes the Default and Front Icon designs and 6 animations: Flip Horizontal, Flip Vertical, Fade, Flip Box, Flip Box Fade and Fade Up. Master Addons Pro adds the Front Image and Diagonal designs and 16 more animations, including Cube, Rollover and 3D Flip, for 22 in total. Free Elementor has no flip box widget, so this works without Elementor Pro.
Design Variations and Flip Animations
Design Variation sets the front layout: Default and Front Icon are free, Front Image and Diagonal need Pro. Animation Style sets how the card turns. Free: Flip Horizontal, Flip Vertical, Fade, Flip Box, Flip Box Fade and Fade Up. Pro adds four Cube directions, Fade Hideback, Fade Up Hideback, four slide directions, two Diagonal slides, Fade In Out, Nananana, Rollover and 3D Flip, which has its own direction setting.
- 22 animations in total: 6 free and 16 with Pro.
- The flip runs on hover on desktop and on tap on touch screens.
- Use one animation per section so a row of cards feels consistent.
Dual-Side Content Builder
The Front Box and Back Box each have their own icon with Default, Stacked or Framed view and Circle or Square shape, a Title, a Description, Alignment and a heading tag. Keep the front short, like a service name, and use the back for the explanation. In the Style tab each face gets its own background, title and description colors, typography, icon colors and border.
- Separate content and styling for each face.
- Title HTML Tag on both faces, so a grid of cards keeps a clean heading order.
- A Flip Box Height setting in General keeps both faces the same size.
CTA Button with Hover
The Action Button shows on the back face with your Button Text and link. Style it for Normal and Hover with text color, background, border, border radius and padding, plus typography. The button is the only link inside the widget. To make the whole card clickable, add the free Wrapper Link extension to the widget.
- Use a specific label such as “See Pricing” when that is where the link goes.
- Skip the button on purely informational cards.
- If you use Wrapper Link, point the button to the same page.
Elementor Pro Flip Box vs Master Addons Flipbox
Elementor Pro has its own Flip Box widget. If you already pay for it, you may not need another one. Here is how the two compare.
| Feature | Elementor Pro Flip Box | Master Addons Flipbox |
|---|---|---|
| Price | Needs Elementor Pro | Free, with more designs and animations in Pro |
| Flip effects | Flip, Slide, Push, Zoom In, Zoom Out and Fade, with direction and 3D Depth | 6 free animations, 22 with Pro, including Cube, Rollover and 3D Flip |
| Front graphic | None, Image or Icon | Icon, or an image with the Pro Front Image design |
| Whole card link | Apply Link On: Whole Box or Button Only | Button only, or the whole card with the free Wrapper Link extension |
| Button | Yes | Yes, with Normal and Hover styling |
Elementor Pro is simpler if you want a whole-box link built in. Master Addons suits free Elementor sites and gives more animation choices with Pro. For a static card with nothing hidden, use the free Info Box widget.
Flip Box Ideas and Tips
A flip box keeps a grid clean while still carrying detail, because the description sits behind the card instead of under it. It works well for service grids, team cards with a photo on the front and a bio on the back, feature tiles and stat cards that flip to what a number means.
- Set Flip Box Height. Without it, a longer back face resizes the card as it turns and the row jumps.
- Make the faces look different. A tint on the front and your brand color on the back makes the flip obvious.
- Plan for phones. Touch screens have no hover, so the card flips on tap and the button needs a second tap. Test on a real phone.
- Keep essential details on the front. Prices, phone numbers and booking links should not live only on the back face.
- Limit the motion. One or two flip box rows per page reads better than six different animations.
How to Add a Flip Box in Elementor
You need Elementor and the free Master Addons plugin from WordPress.org.
- Check that Flipbox is switched on under Master Addons, Widgets.
- In the Elementor editor, search for Flipbox and drag it into a container.
- Pick a Design Variation and an Animation Style, then hover the card to preview it.
- Fill in the Front Box and Back Box: icon, title, description and heading tag.
- Add the Action Button text and link.
- In Style, General, set Flip Box Height so the card does not resize mid-flip, then style each face.
For 3D effects, read How to Create 3D Elementor Flipbox Animations. Every setting is in the Flipbox widget settings.
Frequently Asked Questions For Flipbox
How does the flip box work on phones?
Touch screens have no hover, so the card flips when tapped. The back face button needs its own tap after the flip. Keep must-see information on the front and test on a real device.
Can I use an image instead of an icon on the front?
Yes, with the Front Image design variation, which is a Master Addons Pro option. In the free version, use an icon on the front or set a background image for the face in the Style tab.
Is the Flipbox widget free?
Yes. Flipbox is in the free Master Addons plugin with the Default and Front Icon designs and 6 animations. Master Addons Pro adds 2 more designs and 16 more animations.
Does Elementor have a flip box widget?
Only Elementor Pro has one. Free Elementor does not, so on free Elementor you need an addon such as this Flipbox widget.
Can I link the entire flipbox to a page without the separate button?
The widget links the button only. To make the whole card clickable, turn on the free Wrapper Link extension and add the link to the Flipbox widget.
How many flip animations are there?
22 in total. Flip Horizontal, Flip Vertical, Fade, Flip Box, Flip Box Fade and Fade Up are free. The other 16, including Cube, Rollover and 3D Flip, need Master Addons Pro.
Trending Elementor Widgets & Extensions
Build sophisticated websites in less time.
Glassmorphism
Container Extras
Patterns
![Master Addons Post/Page Duplicator extension for Elementor: MA Duplicator row link in the WordPress Pages list creating a Landing Page - [Duplicated #128] draft](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
Post/Page Duplicator
