Halloween 40% off every Pro plan. Lifetime from $51, pay once.40% off Pro Vanishes in Claim40% off
Get Animation Addons Pro
Classic Elementor widget · Pro

Flip Box for Elementor Cards with a front and a back that turn over on hover

The Flip Box widget builds an Elementor flip card with a front and a back: an icon and a title on the front, more text and a button on the back. Choose a flip to the left, right, up or down, a zoom or a fade, add 3D depth, and style both sides in the panel.

Get Animation Addons Pro See the live demos
  • 7 flip and hover effects
  • 3D depth
  • Front and back content
  • Button or whole-box link

Classic widget · Elementor 3 and 4 · ProUpdated

Live demos

Eight flip box effects, live

Eight rows of flip cards on small sites, one for each effect. Hover a card to see the back. You can also tab to a card with the keyboard or tap it on a phone.

Arolax®WorkServicesStudio
What we do

Brand work that holds up

Brand Strategy

Know where you stand

Research, positioning and a clear story your whole team can repeat.

Discover Brand Strategy

Brand Identity

Look like yourself

Logo, type, colour and motion rules built to work on every screen.

Discover Brand Identity

Brand Guidelines

Keep it consistent

A living guide with files, examples and do and do not pages.

Discover Brand Guidelines
Agency services

Flip cards for an agency services page

A branding agency lists three services on dark cards, each with a line icon and a large title. On hover a card turns to the left in 0.8 seconds. The back has two lines of text and a Discover link.

Hover a card

Set Flip Box Type to Left, Height to 300 px and Link Type to Button. Style the Flip Box backgrounds in dark grey.

HaldenProductPricingDocs
One platform

Payments, hosting and help in one place

Various Payment Gateways

Take every payment

Cards, wallets and bank transfers in 40 currencies, settled daily.

Discover Various Payment Gateways

Premium Cloud Management

Scale without pages

Servers that grow with traffic, with backups every hour.

Discover Premium Cloud Management

Customer Support Platform

Answer in minutes

Chat, email and calls in one inbox, with replies your team can reuse.

Discover Customer Support Platform
Product features

An Elementor flip box 3D with floating icons

A software company shows what its platform does. The cards turn left, and the icon, title and text float a little in front of the card while it turns.

Hover a card

Set Flip Box Type to Left and turn on 3D Depth. Set the icon size in Front Icon.

Halden WorkProductTeamsPricing
Built for teams

Plan, track and ship together

Team collaboration, the simple way

Threads, mentions and files in one shared space.

Talk where the work is

Comment on tasks and files, mention a teammate, and keep every decision in one thread.

Projects and task management

Boards and timelines that show who does what.

See every deadline

Boards, lists and timelines that update as people tick things off.

Centralize your workflows

Calendar, drive and chat, connected.

One home for the week

Connect your calendar, drive and chat, and stop switching between six tabs.

Feature grid for a SaaS

A flip box link: the whole card is clickable

A team app lists its main features in three tall cards with a round coloured icon. Each card flips upward, and a click anywhere on the card opens the feature page.

Hover a card, then click it

Set Flip Box Type to Up, Height to 350 px and Link Type to Whole Box. Style the icon in Front Icon.

Arolax AcademyCoursesMentorsPricing
Motion design course

Learn at your own pace

Key Features

Twelve short modules

From timing and easing to full brand animations, one skill at a time.

Discover Key Features

Completely Online

Learn from anywhere

Watch, pause and practise on your own schedule, with weekly live reviews.

Discover Completely Online

Template Collection

Start from real files

Forty project files you can open, study and reuse in client work.

Discover Template Collection
Course highlights

Elementor flip box zoom effect on a course page

A motion design school describes its course in three cards. Nothing turns. The back fades in and grows from 75% to full size in half a second.

Hover a card

Set Flip Box Type to Zoom In and keep 3D Depth off. Set the icon size in Front Icon.

Northlight StudioToolsRentalsContact
In the studio

Tools for every stage of the film

Artificial Tools

Smart rough cuts

Auto transcripts and scene search, so the edit starts on day one.

Sound Record

Clean location sound

Booms, lavaliers and a recorder kit, checked before every shoot.

Creative Canvas

Plan every frame

Shared storyboards and shot lists the whole crew can open.

Studio tools

The front shrinks away to show the back

A film studio presents its tools. On hover the front shrinks to 75% and fades out, which uncovers the back underneath. Each card is one link.

Hover a card

Set Flip Box Type to Zoom Out and Link Type to Whole Box.

Maison FormeProjectsCourseJournal
Home design course

Plan a room the way we do

Modular Plans

Rooms in blocks

Lay out any room with a simple grid that fits real furniture sizes.

Discover Modular Plans

Studio Visits

Coffee at the studio

Join a monthly visit in Lyon to see materials and samples up close.

Discover Studio Visits

Room Templates

Twenty room plans

Living rooms, kitchens and bedrooms, ready to adapt to your space.

Discover Room Templates
Course page

An Elementor flip box fade effect

A home design course on a dark page. The back simply fades in over the front. It is the quietest of the seven effects, so the cards stay calm.

Hover a card

Set Flip Box Type to Fade In. Style the back button in the Button section.

Sahara FilmsFilmsServicesContact
Campaign services

From idea to final cut

Branding

Branding

Title design, colour and a look that runs through trailer, poster and social.

Strategy

Strategy

Release plans and audience research for each festival and platform.

Thinking

Thinking

Concept workshops with the director before a single frame is shot.

Campaign services

A flip box animation with 3D depth to the right

A film studio lists three campaign services on square cards with bold cream icons. The cards turn to the right, and the back repeats the title above the text.

Hover a card

Set Flip Box Type to Right, turn on 3D Depth and set Link Type to Whole Box.

Halden RepairRepairsPricesBook
Same-day repairs

Bring it in, pick it up tonight

Phone Repair

Phone Repair

Screens, batteries and charging ports, most done within two hours.

Tablets/iPad Repair

Tablets/iPad Repair

Cracked glass, buttons and speakers for all common tablets.

Computer Repair

Computer Repair

Laptop and desktop fixes, data rescue and clean installs.

Repair price list

Flip cards that turn downward

A repair shop uses wide cards with a device icon on a white tile. Each card flips downward to a white back with the same icon, the service name and what it covers.

Hover a card

Set Flip Box Type to Down and style the white Back Background in the Flip Box style section.

Features

Key features of Flip Box

What the widget does, with the panel setting behind each feature.

Seven effects

Set the Flip Box Type to flip left, right, up or down. The Elementor flip box zoom and fade effects are zoom in, zoom out and fade in. Each Elementor flip box hover effect runs on hover.

3D depth

Turn on 3D Depth for an Elementor flip box 3D look: the content floats in front of the card while it turns.

Front and back content

Fill in the Elementor flip box front and back. Each side takes an icon or image, a Title with its HTML tag, and content from the text editor.

A button on the back

For an Elementor flip box with button, add a call to action in the Button section, with text, link, icon, icon position and a hover style.

Whole box or button link

Use Link Type for an Elementor flip box link: the entire card clickable, or only the button.

Height you control

Set a fixed Height per device so a row of flip boxes lines up.

Separate front and back styles

Front Background and Back Background take colours or gradients, with padding, border, shadow and radius.

Icon, title and content styling

Style the Front Icon and Back Icon (colour, background, size, padding, border) and the Title & Content of each side, so the flip card matches the rest of your page.

Step by step

How to add a flip box in Elementor

Five steps. The bold names are the labels in the Elementor panel.

  1. Install Animation Addons Pro, then turn on Flip Box in Animation Addons → Elements.

  2. In Elementor, search the panel for Flip Box and drag it onto the page.

  3. Fill in the front and back in the Flip Box section: icon or image, Title and content.

  4. In Settings, pick the Flip Box Type, turn on 3D Depth if you like, and set Height and Link Type.

  5. Add the back Button, style both sides in the Style tab, and hover the box in preview to check the flip.

Get Animation Addons Pro Part of Animation Addons Pro · Works with Elementor Free
FAQ

Questions about Flip Box

How to make a flip card in Elementor?

Add the Flip Box widget, fill in the front and back, and pick a Flip Box Type. The Elementor flip card hover effect turns the card over when a visitor hovers it, with no code.

Which flip box hover effects are there?

Seven: flip to the left, right, up or down, zoom in, zoom out and fade in. The flips take 0.8 seconds; zoom and fade take 0.5 seconds.

What does 3D Depth do?

It lifts the content of both sides away from the card, so the icon and text seem to float in front of it while the card turns.

Can I add a button or link to a flip box?

Yes. Set Link Type to the whole box and the card becomes one link. Or keep a button on the back and link only that. Both work in an Elementor flip box with button or link.

Does the flip work on phones?

The flip runs on hover. Phone browsers apply the hover state when a card is tapped, so a tap shows the back. Keep the back text short for small screens.

Can I show an image instead of an icon?

Yes. Each side can show an icon from your icon library or an uploaded image, above the title.

Do I need Elementor Pro for Flip Box?

No. Flip Box works with Elementor Free. It is part of Animation Addons Pro, not Elementor Pro. It is a flip box addon for Elementor, so it sits next to the other widgets in the panel.

Does it work in Elementor 4?

Yes. It is a classic widget, so Elementor 4 lists it with the legacy widgets. For the new editor there is also the free Atomic Flip Box.

Is there a free Elementor flip box alternative?

Yes. The Atomic Flip Box is free and made for the Elementor 4 editor. Use this Pro Flip Box when you build with classic widgets and want 3D depth and seven effects.

How do I animate a flip box in Elementor?

Pick a Flip Box Type. The Elementor flip box animation runs on hover: a 0.8 second turn for the four flips, and a 0.5 second zoom or fade for the other three.

Animation Addons Pro · Elementor 4

Turn cards over, show more

Flip boxes with seven effects and 3D depth, built and styled in Elementor.

Get Animation Addons Pro Try it free

Halloween deal40% off every Pro planEnds 5 Nov

  • 15-day money-back guarantee
  • Rated 4.6 / 5 on WordPress.org
  • No Elementor Pro needed
  • Elementor 3 & 4 in one license