Atomic Element · Free
Service cards, team bios and pricing teasers that turn over on hover or keyboard focus, with any heading, icon, image or button on either face. Free on Elementor Free.
The short answer
The Elementor flip box from Animation Addons is an Elementor 4 Atomic Element that shows one face of a card and turns to a second face on hover or keyboard focus. The front and back are real atomic containers, so you can put headings, text, icons, images or buttons on either side and style each part on its own.
Elementor 4 has no atomic flip box, and Elementor's classic Flip Box needs Elementor Pro. The Animation Addons for Elementor Flip Box is a native Atomic Element, not a classic v3 widget, and runs on Elementor Free.
| Plan | Free |
|---|---|
| Element type | Native Elementor 4 Atomic Element (open container) |
| Works with | Elementor Free and Elementor Pro, Atomic Editor on |
| Child elements | Flip Box Front and Back, each with Flip Box Title (H1–H6) and Flip Box Text; faces also accept Heading, Paragraph, SVG, Image and more |
| Flip effects | Left, Right, Up, Down, Zoom In, Zoom Out, Fade In; optional 3D depth or single-sided variants |
| Choosing the effect | Through Apply Preset only (no direction control); a new card flips left |
| Trigger | Mouse hover and keyboard focus (the card is reachable with Tab) |
| Size | Fixed width and height you set in the Style tab; face content taller than the card is clipped |
| Script | None. The flip is pure CSS from one small stylesheet |
| Plugin version | Animation Addons for Elementor 4.3 · Last updated October 2026 |
Demo variations
Ideas you can build today with the Flip Box and native Elementor 4 elements. Cards marked Pro add an Animation Addons Pro extension or element; the rest work on the free plugin.
Three cards in a Grid: icon and service name on a light front, brand-colour back with two lines of detail and a "See the work" link.
Tall portrait cards in a row of four. The front is a photo with the name; the back flips up to show role, bio and a booking button.
Three wide, short cards: plan name and "from" price on the front; three inclusions and a "Choose plan" button zoom in on the back.
One large card on dark: the problem on the front, the result on the back, lifted toward the viewer.
A six-tile photo grid; on hover each bake's description and price fade in on a cream back.
Numbered module cards; the back turns down to show lesson count and a "Start module" button.
Features
Every option below is a real control in the Flip Box panel or part of how the element renders. Nothing here needs custom code.
Drop a Heading, Paragraph, SVG icon, Image or Button onto either face in any order, instead of filling a fixed layout.
Apply Preset sets the effect for you: flips Left, Right, Up and Down, or Zoom In, Zoom Out and Fade In. Some presets add 3D depth, so face content sits toward the viewer during the turn. A freshly dropped card already flips left.
The Flip Box Title has a Tag setting from H1 to H6, so cards fit your page outline.
Built on the atomic base
Why it mattersEach side is a container styled with the same Classes and Variables as the rest of the page, so one Class change updates every card.
Step by step
Six steps, from installing the plugin to publishing the page. The bold names are the exact labels you will see in the Elementor 4 panel.
Download freeInstall and activate Animation Addons for Elementor, then open a page in Elementor with the Atomic Editor on.
In the Elements panel, find Flip Box and drag it onto the canvas. It drops in with a Front and Back face, each holding a Title and Text.
Open Presets and use Apply Preset to choose the effect, or keep the default left flip.
Set the Flip Box width and height in the Style tab so both faces have room.
Edit the Title and Text on each face and add an icon, image or button.
Test the flip with the mouse and the Tab key on desktop and mobile, then publish.
Honest comparison
What each option has, side by side. We list where the other choice is the better fit, too.
| Feature | Elementor Pro Flip Box (classic widget) | Animation Addons Flip Box |
|---|---|---|
| Requires Elementor Pro | Yes | No |
| Element type | Classic widget | Native Elementor 4 Atomic Element |
| Effects | Flip, slide, push, zoom in, zoom out, fade | Flip left, right, up, down; zoom in, zoom out, fade in |
| Choosing a direction | A direction setting (right, left, up, down) | Pick a preset with that direction |
| 3D depth | Yes, a toggle | Yes, in 3D presets |
| Linking | Button, or the whole box | A Button or linked element on a face |
Compared with Elementor 4.3.3 (September 2026).
Elementor Pro's widget adds slide and push effects and a whole-card link. Choose the Animation Addons Flip Box on Elementor Free, or when you want any element on either face.
Who it's for
The people who get the most out of it, and what they use it for.
Presenting services in compact, scannable cards.
Who need a flip card without Elementor Pro.
Putting short bios behind team photos.
FAQ
Install the free Animation Addons for Elementor plugin and drag the Flip Box onto your page. The Animation Addons Flip Box runs on Elementor Free with the Atomic Editor on. It drops in with a front and back face and flips left by default; Apply Preset offers six other effects.
Select the Animation Addons Flip Box, open Presets and choose a design with Apply Preset. The effect comes with the preset: flip left, right, up or down, or zoom in, zoom out and fade in. There is no separate direction dropdown, so pick the preset with the effect you want, then restyle it.
The Animation Addons Flip Box has no tap setting; it turns on hover and focus. On touch screens it relies on the browser treating a tap as hover or focus, which varies, so test on your visitors' phones. Keep the key message on the front face and size the card per breakpoint.
Yes. In the Animation Addons Flip Box, both faces are open atomic containers. Drag a Button, Image, SVG icon, Heading or Paragraph into either face and style it from its own Style tab. There is no whole-card link setting, so use a Button or linked element for the call to action.
Yes. The Animation Addons Flip Box is in the Tab order and turns over when the card or anything inside it has focus. Both faces stay in the HTML, so screen readers read front and back in order. For visitors who ask for reduced motion, the Zoom and Fade effects change face without animating.
No. The Animation Addons Flip Box loads no JavaScript; the turn is pure CSS from one small stylesheet that loads only on pages using it. Text on both faces is real HTML, so search engines and AI crawlers read the back-face content too.
The Animation Addons Flip Box has a fixed height, and both faces sit on top of each other inside it, so anything taller than the card is clipped. Select the Flip Box and raise its height in the Style tab, per breakpoint if needed, or shorten the text on the back face.
More answers in the FAQ · Documentation · Free vs Pro
Pairs well with
Elements that work well with the Flip Box on the same page or template.
Free on Elementor Free, and every face is a container you design yourself.
