Flip Boxes Element

Last Update: February 14, 2023

The Flip Boxes Element is great for grabbing the user’s attention and adding some interaction with your content. Flip Boxes have fully customizable content on the front and back side. They are fully integrated with the Font Awesome icon set and icon options like spin, rotate, flip. You can put a title on the front and backside, add buttons to your content, and the box height will extend based on the amount of content you use.

In Avada 5.9, we added a number of new effects and controls, including new flip effects, flip direction and duration, equal heights control, and the ability for background images. Read below for more details on this very graphic element, and watch the video for a visual overview.

For privacy reasons YouTube needs your permission to be loaded.
I Accept

How To Use The Flip Boxes Element

The Flip Boxes Element allows you to add cool, double sided boxes that “flip” when you mouse over them, anywhere in your content. There are both Parent Options, which affect the whole series of flip boxes, and child options for each Flip Box. This element has a number of parent options, and this is the place to start. Make sure to view the Flip Boxes Element Demo page here, to fully appreciate the different layouts and options on offer.

Move down the Parent Options, deciding how to style the Flip Boxes. Note that the first option is Number of Columns. This element can be inserted into any size column, and by choosing how many columns to display will determine how many Flip Boxes are displayed across the column width. If there are more items than the number of columns chosen, the remaining items will display on a new row below the first. If there are fewer item than the number of columns chosen, the full width of the column will not be used. You can choose a global icon here, or you can choose them individually, in the child item options. Configure the remaining parent options, keeping in mind, these are global options that will affect all flip boxes.

Once you have set all your Parent Options, you add Child Items on the left. Click the pen icon to edit the existing item. The Child Item Options Panel appears. Note that you can override a large number of global options here, customizing the individual flip boxes. You will see content and styling options for both the front side and back side of the boxes. Go through and configure one flip box at a time.

You can then duplicate existing, or create new, flip boxes by clicking on the Clone Item icon, or the + Flip Box button respectively.

Read below for a detailed description of all element options.

Element Options

Note: The Default setting will use the global settings assigned for this element in the Options > Avada Builder Elements > Flip Boxes section. Also, please note that the displayed options screens below show ALL the available options for the element. If you have Avada’s Option Network Dependencies turned on, you will only see options relevant to your selections, and so the options screen may look somewhat different.

Flip Box Options

General

HeadingDescription
Flip DirectionSet the direction in which the boxes should flip. Leave empty for value set in parent options. If that is also empty, the Global Options value of Flip Right will be used.
Flip Box Frontside HeadingAdd a heading for the frontside of the flip box.
Flip Box Backside HeadingAdd a heading for the backside of the flip box.
Flip Box Frontside ContentAdd content for the frontside of the flip box.
Flip Box Backside ContentAdd content for the backside of the flip box.
IconClick an icon to select, click again to deselect.
Icon ColorControls the color of the icon. Leave empty for value set in parent options. If that is also empty, the Global Options value of Dark will be used. Reset to default.Using default value.
Icon CircleChoose to use a circled background on the icon.
Icon Circle Background ColorControls the color of the circle. Leave empty for value set in parent options. If that is also empty, the Global Options value of White will be used. Reset to default.Using default value.
Icon Circle Border ColorControls the color of the circle border. Leave empty for value set in parent options. If that is also empty, the Global Options value of White will be used. Reset to default.Using default value.
Flip IconChoose to flip the icon.
Rotate IconChoose to rotate the icon.
Spinning IconChoose to let the icon spin.
Icon ImageTo upload your own icon image, deselect the icon above and then upload your icon image.
Icon Image Max WidthSet the icon image max width. Leave empty for value set in parent option. Set to -1 to use image's native width. In pixels, ex: 35.

Design

HeadingDescription
Background Color FrontsideControls the background color of the frontside. IMPORTANT: Flip boxes must have background colors to work correctly in all browsers. Leave empty for default value of Light Gray. Reset to default.Using default value.
Background Image FrontsideUpload an image to display in the background of the frontside.
Heading Color FrontsideControls the heading color of the frontside. Leave empty for default value of Dark. Reset to default.Using default value.
Text Color FrontsideControls the text color of the frontside. Leave empty for default value of Gray. Reset to default.Using default value.
Background Color BacksideControls the background color of the backside. IMPORTANT: Flip boxes must have background colors to work correctly in all browsers. Leave empty for default value of Avada Green. Reset to default.Using default value.
Background Image BacksideUpload an image to display in the background of the backside.
Heading Color BacksideControls the heading color of the backside. Leave empty for default value of White. Reset to default.Using default value.
Text Color BacksideControls the text color of the backside. Leave empty for default value of White. Reset to default.Using default value.
Border SizeIn pixels. Default currently set to 1. Reset to default.Using default value.
Border ColorControls the border color. Leave empty for default value of Dark.
Border RadiusControls the flip box border radius. In pixels (px), ex: 1px, or "round". Leave empty for default value of 4px.

Extras

HeadingDescription
Animation TypeSelect the type of animation to use on the element.
Direction of AnimationSelect the incoming direction for the animation.
Animation ColorSelect the color of the animation
Speed of AnimationType in speed of animation in seconds (0.1 - 5).
Animation DelaySelect the delay time after the animation starts(0 - 5).
Offset of AnimationControls when the animation should start. Default currently set to Top Of Element Hits Bottom Of Viewport.

Flip Boxes Options

General

HeadingDescription
Number of ColumnsSet the number of columns per row.
Flip EffectSet the flip effect for the boxes. Default currently set to Classic.
Flip DirectionSet the direction in which the boxes should flip. Default currently set to Flip Right.
Flip DurationSet the speed at which the boxes flip. Default currently set to 0.4. Reset to default.Using default value.
Equal HeightsSet to yes to display flip boxes to equal heights. Default currently set to No.
Front Title SizeChoose HTML tag of the title heading, either div or the heading tag, h1-h6.
Front Title TypographyControls the title typography
Back Title SizeChoose HTML tag of the title heading, either div or the heading tag, h1-h6.
Back Title TypographyControls the title typography
IconClick an icon to select, click again to deselect.
Icon ColorControls the color of the icon. Leave empty for default value of Dark. Reset to default.Using default value.
Icon CircleChoose to use a circled background on the icon.
Icon Circle Background ColorControls the color of the circle. Leave empty for default value of White. Reset to default.Using default value.
Icon Circle Border ColorControls the color of the circle border. Leave empty for default value of White. Reset to default.Using default value.
Flip IconChoose to flip the icon.
Rotate IconChoose to rotate the icon.
Spinning IconChoose to let the icon spin.
Icon ImageTo upload your own icon image, deselect the icon above and then upload your icon image.
Icon Image Max WidthSet the icon image max width. Leave empty to use image's native width. In pixels, ex: 35.
MarginEnter values including any valid CSS unit, ex: 4%.
Element VisibilityChoose to show or hide the element on small, medium or large screens. You can choose more than one at a time. Each of the 3 sizes has a custom width setting on the Responsive tab in the Global Options.
CSS ClassAdd a class to the wrapping HTML element.
CSS IDAdd an ID to the wrapping HTML element.

children

HeadingDescription
Dynamic Content