Flipbox
What if one piece of real estate on your page could tell two stories? With Master Addons Flipbox Element, it can. This isn’t just a card – it’s a dynamic, two-sided experience. Start with a compelling front side featuring an icon and title. Then, on hover, it elegantly flips to reveal detailed descriptions, calls-to-action, or additional information on the back. Choose from multiple style presets and over a dozen smooth animations. It’s the perfect elements for feature highlights, service showcases, team profiles, or creative calls-to-action that surprise and engage.
Multiple Design Presets & Animation Preset
First, pick your base look from four Style Presets: the classic Default, Front Image, Diagonal, and Front Icon. Each preset changes the initial visual layout. Then, bring it to life by selecting an Animation Style from a huge library. Go for a simple Flip Horizontal or Vertical, a sophisticated 3D Flip, a smooth Fade, or creative options like Cube rotations, Rollover, or Diagonal reveals. This combination lets you match the flipbox’s behavior perfectly to your site’s energy – subtle or dramatic.
- Four Style Foundations: Choose from Default, Front Image, Diagonal, and Front Icon preset designs.
- Extensive Animation Library: Select from 15+ animations including Flip, Fade, Cube, Rollover, and 3D Flip.
- Control the Effect: Animations trigger on hover by default, creating an intuitive, interactive experience.
Dual-Side Content Builder
Build two complete faces of content independently. For the Front Box, add an Icon (choose Stacked or Framed styles), a strong Title, and a short teaser Description. Set the Alignment and Title HTML Tag for SEO. For the Back Box, repeat the process with different content – expand on the description, add more details, or focus entirely on a call-to-action. This two-stage approach lets you tease with the front and deliver with the back.
- Independent Content Panels: Fully separate controls for Front Box and Back Box content (Icon, Title, Description).
- Icon Style Options: Present icons as Stacked (solid) or Framed (bordered) directly from the content tab.
- Strategic Messaging: Use the front for a headline benefit and the back for details, features, or social proof.
- Structural Control: Set Alignment (Left, Center, Right) for content on each side independently.
CTA Button with Hover
The back box isn’t just for information – it’s for action. Include a clear Action Button with customizable Button Text (like “Buy Now” or “Learn More”) and a Link. Then, design it to perfection. Style the Normal and Hover states separately, controlling Text Color, Typography, Background Color, Border, Border Radius, and Padding. This turns the flipbox’s reveal into a direct pathway to conversion, all without needing a separate widget.
- Direct Call-to-Action: Add a button with text and link that appears on the back box after the flip.
- Professional Button Styling: Use Border Radius, Padding, and Background controls for a polished button.
Frequently Asked Questions For Flipbox
What happens on mobile devices where there's no hover?
The flip interaction is typically triggered by a tap on mobile devices. The user taps the front box to flip it to the back, and can tap again to flip back. This makes it fully functional and intuitive on touchscreens.
Can I use an image instead of an icon on the front?
Yes! One of the Style Presets is called “Front Image.” Selecting this preset will change the icon selector to an image uploader, allowing you to use a photo, logo, or graphic as the main visual on the front box.
Is the flipbox content responsive?
Absolutely. The text, icons, and button inside will scale and wrap appropriately on different screen sizes. The Flip Box Height you set is also responsive, but you can adjust it specifically for mobile using Elementor’s responsive editing mode if needed.
What's a good real-world use for this element?
- Service Boxes: Front: Service icon & name (e.g., “Web Design”). Back: Description & “Get a Quote” button.
- Team Profiles: Front: Photo & name. Back: Bio & social links.
- Product Features: Front: Feature icon & title. Back: Detailed specs & “View Product” link.
- Statistics: Front: A big number. Back: What it means and a source link.
Can I link the entire flipbox to a page without the separate button?
By default you can add link to the button only. But with the help of our Wrapper link extension, you can link the entier flipbox.
How do I choose the right animation?
Consider your site’s pace. For corporate or clean sites, use Flip Horizontal/Vertical or Fade. For creative, tech, or portfolio sites, 3D Flip, Cube, or Rollover can add more personality. Preview a few – the best one feels smooth and not distracting from your message.
Trending Elementor Widgets & Extensions
Build sophisticated websites in less time.
Caldera Forms
