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
Guide

Flip Box Free

How to set up and style the Flip Box widget in Elementor.

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.

Part of: Bright Addons (free).

See the widget page and live demo

Set it up

  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.

Content options

Front

Option What it does
Icon The icon shown above the front title. Clear it to show no icon.
Title The heading on the front side.
Description The text under the front title.

Back

Option What it does
Title The heading on the back side.
Description The text under the back title.
Button Text The label of the button on the back.
Link Where the button goes. It supports dynamic tags.

Settings

Option What it does
Effect Flip rotates the card to its back. Fade fades the back in over the front.
Direction The way the card turns: left, right, up or down. Shown for the Flip effect.
Height The height of the box, per device, in px or vh.
Animation Speed (ms) How long the flip or fade takes, from 100 to 3000 milliseconds.
Bright Addons Pro

Like this free widget? Get 80 more with Pro

Pro adds 80 widgets, 10 extensions, a Theme Builder and 32 dynamic tags, and keeps every free widget. From $18 a year, with a 14-day money-back guarantee.

See plans and pricing Compare Free and Pro

Style options

These sections are in the Style tab.

  • Front

    background (color, image or gradient), overlay color, padding, alignment, title color, typography and spacing, description color and typography, and icon color and size.

  • Back

    background (color, image or gradient), overlay color, padding, alignment, title color, typography and spacing, and description color and typography.

  • Box

    border radius of both sides.

  • Button

    typography, normal and hover colors for text, background and border, border width, border radius and padding.

Tips

  • The button appears only when both Button Text and a Link URL are filled in.

  • The box has a fixed height, so keep the text on both sides short enough to fit, or raise the Height.

  • Both titles are printed as H3 headings. There is no tag option for them.

  • The back shows on hover or when the box receives keyboard focus. Check how it behaves on your touch devices before relying on it for key content.

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.

Need more help?

Check the troubleshooting guide, or contact support with the page address and what you expected to happen.

Troubleshooting guide
All guides