The Flip Box widget by Atomic Addons shows a box with two sides. The front has an icon or image, a title and a description; when a visitor points at the box or clicks it, the box turns to show the back, with its own title, description and a button. You choose from seven effects, such as a 3D flip, a slide or a fade. This guide covers adding the widget, filling both sides and setting up the flip.
Enable the Flip Box Widget
Flip Box is a Free widget and works with the free Atomic Addons plugin. Switch it on from the plugin dashboard:
- 1
Go to WordPress Dashboard → Atomic Addons.
- 2
Click the Widgets tab.
- 3
Search for Flip Box. You can also open the Creative category.
- 4
Turn the Flip Box widget on.
- 5
Click Save Settings.
Add the Flip Box Widget
- 1
Open the page in Elementor (Edit with Elementor).
- 2
In the widget panel, search for Flip Box. The widget sits in the Atomic Addons category.
- 3
Drag it into the page and set it up with the controls below.
- 4
Click Publish (or Update).
Front
Open the widget and go to Content → Front. Its Content tab fills the front side:
- 1
Icon Type: None, Image or Icon (the default), shown above the title.
- 2
Choose Image: With Image: the picture to show, and an Image Resolution (Thumbnail by default).
- 3
Icon: With Icon: the icon to show, a heart by default.
- 4
View: With Icon: Default shows the icon alone, Stacked on a filled shape and Framed inside an outline.
- 5
Shape: With Stacked or Framed: Circle (the default) or Square.
- 6
Title: The front's title, “This is the heading” by default.
- 7
Description: The text under the title, a placeholder sentence by default.
- 8
Title HTML Tag: The title's markup: H1 to H6, div, span or p. H3 by default.
The Background tab sets the front's Background: a color, a gradient or an image. When you pick an image, Background Overlay appears: a color laid over the image, so the text stays readable. Use a see-through color for it.
Title, description, image and link fields accept dynamic tags, on both sides.
Back
Content → Back fills the side that appears after the flip. Its Content tab has:
- 1
Title: The back's title, “This is the heading” by default.
- 2
Description: The text under the title.
- 3
Button Text: The button's text, “Click Here” by default. Clear it to show no button.
- 4
Link: Where the button leads. Without a link, the button shows but can't be clicked.
- 5
Apply Link On: With a link: Button Only (the default) or Whole Box, which makes the entire back side clickable.
- 6
Size: With button text: Extra Small to Extra Large, Small by default.
- 7
Title HTML Tag: The title's markup, H3 by default.
The back's Background tab works like the front's, with its own Background Overlay.
Settings
Content → Settings sets the box's size and how it flips:
- 1
Height: The box's height, in px or vh, per screen size. 280px by default.
- 2
Border Radius: Rounds the corners of both sides.
- 3
Flip Effect: Flip (the default) turns the box over. Slide slides the back in over the front, Push pushes the front out as the back comes in, Zoom In and Zoom Out grow or shrink the front away, Fade crossfades the sides and Slide Overflow moves the back up or down over the front.
- 4
Flip Direction: With Flip, Slide or Push: Left (the default), Right, Up or Down. With Slide Overflow, a second Flip Direction offers Up (the default) or Down.
- 5
3D Depth: With Flip: lifts the text off the box during the turn for a 3D look. On by default.
- 6
Easing type: Under Transition: the pace of the movement. Default slows down at the end; Circ, Cubic, Expo, Quad, Quart and Quint start fast and slow down by different amounts.
- 7
Duration: How long the flip takes, 0.1 to 5 seconds. 0.6 seconds when empty.
- 8
Trigger Type: Hover (the default) flips the box while the pointer is over it. Click flips it on a click and back on the next one.
With the Click trigger, keyboard users can reach the box with Tab and flip it with Enter or Space. With either trigger, tabbing to the back's button turns the box so the button is visible.
Style the Flip Box
Everything below is on the Style tab. Sections that belong to a feature you turned off are hidden.
- Front — padding, text Alignment and Vertical Position (top, middle or bottom), then the icon (spacing, colors, size, padding, rotation, border), the image (spacing, size, opacity, border, radius), and the title and description (spacing, color, typography).
- Back — the same padding, alignment and position settings, and the back's title and description.
- Button — with button text: color, background, shadow, border, radius, padding and typography in Normal and Hover tabs, plus a hover Animation.
Can't find what you need?
Our support team can help with setup questions and anything the docs don't cover yet.