Roy 
The Elementor FlipBox widget turns a static info card into something visitors actually want to hover over. The front shows an icon or image with a short headline. On hover, the back flips into view with a description and a button. No code required.
This tutorial walks you through the FlipBox widget that ships with Master Addons for Elementor, a free plugin used on 40,000+ websites. You get 4 design variations, 20+ flip animations, full typography control, and a proper action button on the back side. Most of it works in the free version.
By the end, you will have a working flipbox section on your WordPress page, a sense of which animation fits which job, and a clearer idea of when a flipbox is the right call (and when it is overkill).
A flipbox is a two-sided card. Visitors see one face first, and on hover (or tap, on mobile) the card rotates to show a second face with more detail. Think business card that spins when you wave your hand over it.
Elementor does not ship a flipbox out of the box, so you need an addon. The Master Addons FlipBox widget gives you the front face, the back face, and a button on the back, all editable from the regular Elementor panel. No shortcodes, no template code.
The widget handles three jobs: the front content (icon, image, or heading), the back content (description and button), and the flip animation between them. Everything runs through visual controls.
A regular info card shows everything at once. That works, but it chews up vertical space and visitors scan right past it. A flip box in Elementor does a few things a static card cannot:
If your section has a lot of copy, a flipbox helps. If it is one line of text with a photo, a static card is fine. Use flipboxes where the payoff is either a longer explanation or a direct CTA.
Full setup below. This assumes Elementor is already installed. If not, grab the free version from the WordPress plugin directory first.
In your WordPress admin, go to Plugins → Add New and search for “Master Addons for Elementor.” Install, activate, done. The installing Master Addons doc has the longer version if something breaks.
Open the page in Elementor. In the widget panel on the left, type “FlipBox” in the search box. You will see it with the Master Addons icon. Drag it into any column.
Elementor loads a default flipbox the moment you drop it in. Hover over it in the preview to see the flip in action before you change anything. Worth doing because it gives you a sense of the default animation speed.
The Content tab has three sections: Front Box, Back Box, and Action Button. Start with the front, since that is what visitors see first.
Inside Front Box you can set:
The Back Box uses the same fields plus a description area. This is where the real information lives, so give yourself room to write.
The button only appears on the back side. Scroll to Action Button and fill in:
Skip the button if the flipbox is purely informational (like a feature overview grid). Add it if the card sits in a conversion-focused section where you want a next click.
The Master Addons FlipBox widget has four built-in designs. Each one changes how the front face is laid out. The back face stays the same across all four.
Pick a variation based on what the front needs to say. If the icon carries the message, stick with Front Icon. If a photo does the job better, switch to Front Image. Not much more to it.
Under the General section in the Style tab, you get a dropdown with 20+ flip animations. The animation controls how the card reveals the back face.
The common ones:
Practical tip: Stick to one animation style per page. If your flipbox grid has six cards and each one flips differently, the section feels chaotic. Pick one, commit to it. Mix styles only when you want two clearly separate sections to feel different from each other.
Want to see what each one looks like before you commit? The Elementor animation effects guide has side-by-side previews of the most common styles.
Switch to the Style tab and you get four collapsible panels: General, Front Box, Back Box, and Action Button. Each one has its own color, typography, spacing, and border controls.
What matters most in each panel:
Set the overall height of the flipbox (200px is a sensible minimum, 350px looks right for feature grids), the border radius, and the animation speed. Keep animation duration between 400ms and 700ms. Anything faster feels jumpy. Anything slower feels sluggish, and visitors will move their cursor away before the flip finishes.
Background color or gradient, icon color, icon size, title typography, subtitle typography, and internal padding. Match the background to your brand. Most designers use a soft tint (light gray, pale blue) on the front and save the strong color for the back.
Same controls as the front, but this is where your brand color usually lives. Make the back visually distinct from the front so the flip feels like a real reveal, not a subtle tint shift. A white-to-purple flip reads better than a light-gray-to-slightly-lighter-gray flip.
Text color, background, hover color, border, padding, and typography. Use the same button style you use elsewhere on the page so it does not feel out of place. If your primary CTA buttons on the site are solid purple with white text, make the flipbox button match those.
Real-world places the widget earns its keep:
If you want something more visual for portfolio work, the Image Hotspot widget is a better fit when you need to highlight specific areas inside a single image instead of flipping whole cards.
Things worth knowing from watching real sites use the widget:
Accessibility note: Flipboxes rely on hover, which screen readers and keyboard users cannot trigger the same way a mouse user can. Make sure the back-side content is also available somewhere else on the page (a collapsible section, a dedicated page, an H2 nearby) or add a visible focus state so keyboard users can flip the card too. This is the single most common thing WordPress designers forget.
The Master Addons FlipBox widget is in the free version. You can download the plugin from the WordPress directory and use it on unlimited sites. Pro unlocks more widgets and extensions around it, not the flipbox itself.
| Feature | Free | Pro |
|---|---|---|
| FlipBox widget (all 4 designs) | Yes | Yes |
| All 20+ flip animations | Yes | Yes |
| Icon libraries | Font Awesome | 8 premium libraries |
| 3D transforms & advanced effects | Basic | Full |
| Template Kits & Widget Builder | No | Yes |
| Premium support | Community | Priority |
If you only need the flipbox, free is enough. If you want the full 76+ widget library, theme builder, popup builder, and template kits, take a look at Master Addons Pro pricing.
Join 40,000+ web creators who use Master Addons to ship Elementor sites faster. Free forever. Upgrade when you actually need more.
A flipbox is a two-sided card that flips on hover to show different content on each side. The front usually has an icon and title, the back has a description and button. Elementor does not include a flipbox by default, so you need an addon like Master Addons.
Yes. The FlipBox widget is part of the free Master Addons for Elementor plugin on WordPress.org. All 4 design variations and 20+ flip animations are included in the free version, with no usage limits or site caps.
Install Master Addons, drag the FlipBox widget onto your page, and fill in your front and back content. Pick a flip animation from the General section in the Style tab. That is the whole process. No CSS, no custom code.
Pick one of the 3D animation options from the animation dropdown in the Style tab. The 3D variants add perspective so the card rotates on an axis instead of fading. The 3D Elementor FlipBox guide has step-by-step settings for the cleaner 3D effects.
Yes. On touch devices the first tap flips the card and the second tap follows the button link. The widget is responsive, so you can set different column counts for tablet and mobile from the standard Elementor responsive controls.
Master Addons FlipBox is a solid free option with 4 designs, 20+ animations, and full style control from the Elementor panel. For a wider comparison across all major Elementor addon plugins, see our 100 best Elementor addons roundup.
The Elementor FlipBox widget is one of those small additions that punches above its weight. A clean flipbox row can replace a whole block of text, pull in more hover time, and still load fast. The trick is restraint: keep the front simple, put the value on the back, and pick one animation style per section.
For deeper settings coverage, the official FlipBox documentation walks through every option. And if you want more interactive widgets to pair with it, the Elementor icon libraries guide is a good next read.
Related reading: Master Addons Animation features | Elementor marketing widgets | Elementor Pricing Table widget
Get all the premium widgets and templates you desire, built with clean code that keeps your site fast. Ditch the bloat, not the features.
110+ Premium Widgets & Lifetime Updates – Build Beyond Limits. An Exclusive Creation by Pixar Labs
Every Master Addons Pro license comes with a 14-day no-questions refund, lifetime updates, and priority support. Try it risk-free this Spring – 40% OFF with “RESET40″ coupon.
