BLACK FRIDAY: 50% OFF all Pro plans
Pro from $18 a year or $60 lifetime, no code needed
Ends Cyber Monday, 30 Nov. Lock in the price today
Get 50% Off
Download free
Free widget

Flip Box Widget for Elementor Free

A card that turns over to show more on the back.

Download free Read the guide
Overview

What Flip Box does

Flip Box shows an icon, title and text on the front, then turns over on hover to show a second title, text and a button on the back. Use it for services, features or team facts where a short teaser leads to more detail.

Live demo

See it in action

Creative ideas

Hover to see how we bring them to life.

From idea to launch

Strategy, design and development under one roof, with a site you can edit yourself.

Get in touch
Features

What it can do

  • Front side with an icon, a title and a description.

  • Back side with a title, a description and a button with a link.

  • Two effects: Flip, which rotates the card, and Fade, which fades the back in.

  • Four flip directions: left, right, up and down.

  • Height per device in pixels or viewport height, and an animation speed in milliseconds.

  • Separate background for each side: color, image or gradient, with an overlay color.

  • Reacts to keyboard focus as well as hover, so the back can be reached without a mouse.

  • Shortens the animation for visitors who ask their device to reduce motion.

Use cases

When to use it

Service cards

Show the service name and icon on the front, and what is included plus a contact button on the back.

Feature highlights

Tease a feature with one line and explain it on the back.

Offers

Put the offer on the front and the terms with a button on the back.

Image teasers

Set a background image on the front and reveal the text on the back.

Setup

How to set it up

A few steps from adding the widget to a finished result.

Read the full guide

  1. Drag the Flip Box widget onto the page.

  2. In Front, pick an Icon and type the Title and Description.

  3. In Back, type the Title and Description, then set the Button Text and Link.

  4. In Settings, choose the Effect. For Flip, also choose the Direction.

  5. Set the Height and the Animation Speed (ms).

  6. Open the Style tab and set a background for the Front and Back sections.

  7. Hover over the box in the preview to check the back side.

FAQ

Questions and answers

Can I use an image on the front?

Yes. In the Style tab, the Front section has a background control that accepts an image, a color or a gradient. The Overlay Color helps text stay readable over it.

Can the box fade instead of flip?

Yes. Set Effect to Fade. The Direction option is hidden because it applies to the Flip effect only.

Why is my button missing?

The button needs both a Button Text and a Link URL. If either one is empty, it is not shown.

Can I change the flip speed?

Yes. Animation Speed (ms) accepts 100 to 3000. The default is 600.

Keep exploring

Related widgets

Feature List Free

A list of features with icons and a connector line.

Card Free

An image card with a badge, text and a button.

Advanced Divider Free

Separate sections with a styled line, text or icon.

Blockquote Free

Show a quote with its author, photo and source.
Free forever

Flip Box is free

It is one of 51 widgets in the free Bright Addons plugin. Each widget loads its code only on pages that use it.

Download free See Pro plans