Flip Boxes Element

24/09/2019

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 have 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.

Responsive

Avada's responsive framework ensures your content looks great on all screen sizes.

On All Screens

No matter the size of your screen or device, your site will look fantastic.

Buy Avada Now

Sliders

Avada includes four premium sliders that will make your content stand out!

Dynamic Content

Avada includes the Layer Slider, Revolution Slider, Fusion Slider and Elastic Slider.

Buy Avada Now

Elements

Avada offers incredible elements that allow you to create a beautiful site.

Create Beauty

Dozens of well designed shortcodes loaded with options gives you perfect freedom.

Buy Avada Now
View More Examples!

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.

Step 1 – Create a new page or post, or edit an existing one.

Step 2 – Select the container and column you would like to place the flip boxes into.

Step 3 – Click on the + Element button at the bottom of the column. Select Flip Boxes.

Step 4 – The options on the right hand side are Parent Options, and affect the whole series of flip boxes. 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.

Step 5 – 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.

Step 6 – 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.

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

Step 8 Once you have completed adding your flip boxes, click Save. You will be returned to the edit page. You can preview the page to view your flip boxes, and you can always edit the element again to make changes.

Read below for a detailed description of all element options.

Element Options

Location: The edit screen within each Element.

You can deploy as many individual Elements in pages and posts as you need, there is no limit. Within each of the Elements you will see a tab or tabs that house an array of options that make it possible for you to configure each Element independently, and greatly enhance your flexibility and creative options.

Note: The Default setting will use the global settings assigned for this element in your Theme Options > Fusion Builder Elements > Flip Boxes Element 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.

Parent Options

  • Number of Columns – Set the number of columns per row. Choose from 1 – 6 columns.

  • Flip Effect – Set the effect for the flip boxes. Choose from Default, Classic, or 3d.

  • Flip Direction – Set the direction in which the boxes should flip. Choose from Default, Flip Left, Flip Right, Flip Up, or Flip Down.

  • Flip Duration – Set the speed at which the boxes flip.

  • Equal Heights – Set to yes to display flip boxes to equal heights, regardless of content.

  • Icon – Global setting for all counter boxes, this can be overridden individually. Click an icon to select, click again to deselect.

  • Icon Color – Controls the color and opacity of the icon.

  • Icon Circle – Choose to use a circled background on the icon. Choose from Yes, or No.

  • Icon Circle Background Color – Controls the color of the circle.

  • Icon Circle Border Color – Controls the color of the circle border.

  • Flip Icon – Choose to flip the icon. Choose from None, Horizontal, or Vertical.

  • Rotate Icon – Choose to rotate the icon. Choose from 90, 180, 270 (degrees), or None.

  • Spinning Icon – Choose to let the icon spin.

  • Icon Image – To upload your own icon image, deselect the icon above and then upload your icon image.

  • Icon Image Max Width –Set the icon image max width. Leave empty to use image’s native width. In pixels, ex: 35.

  • Element Visibility – Allows you to control the element’s visibility. Choose one or more between Small Screen, Medium Screen, or Large Screen.

  • CSS Class – Add a custom class to the wrapping HTML element for further css customization.

  • CSS ID – Add a custom id to the wrapping HTML element for further css customization.

Add / Edit Settings

  • Add / Edit Items – This is where all your child element’s items are found. Each will be numbered to better keep track of how many you currently have. You can reorder elements by dragging them and dropping them into place.

  • Edit Item Icon – Allows you to edit an item.

  • Clone Item Icon – Allows you to clone an item. Cloned items will automatically be added to the bottom of the items list.

  • Delete Item Icon –  Allows you to delete an item.

  • Re-order Feature –  Allows you to drag and drop the item to your desired order to rearrange them.

  • Add New Flip Box Button –  Allows you to add a new Flip Box.

View The Options Screen

Child Options

General Tab

  • Flip Direction – Set the direction in which the boxes should flip. Leave empty for the value set in parent options. If that is also empty, the Theme Options default value will be used.

  • Flip Box Frontside Heading – Add a heading for the frontside of the flip box.

  • Flip Box Backside Heading – Add a heading for the backside of the flip box.

  • Flip Box Frontside Content – Add content for the frontside of the flip box.

  • Flip Box Backside Content – Add content for the backside of the flip box.

  • Icon – Click an icon to select, click again to deselect.

  • Icon Color – Controls the color of the icon. Leave empty for value set in parent options. If that is also empty, the Theme Options value will be used.

  • Icon Circle – Choose to use a circled background on the icon.

  • Icon Circle Background Color – Controls the color of the circle. Leave empty for value set in parent options. If that is also empty, the Theme Options value will be used.

  • Icon Circle Border Color – Controls the color of the circle border. Leave empty for value set in parent options. If that is also empty, the Theme Options value will be used.

  • Flip Icon – Choose to flip the icon. Choose from Default, None, Horizontal, or Vertical.

  • Rotate Icon – Choose to rotate the icon. Choose from 90, 180, 270 (degrees), or None.

  • Spinning Icon – Choose to let the icon spin.

  • Icon Image – To upload your own icon image, deselect the icon above and then upload your icon image.

  • Icon Image Width – If using an icon image, specify the image width in pixels but do not add px, ex: 35.

  • Icon Image Height – If using an icon image, specify the image height in pixels but do not add px, ex: 35.

View The Options Screen

Design Tab

  • Background Color Frontside – Controls the background color of the front side. IMPORTANT: Flip boxes must have background colors to work correctly in all browsers.

  • Background Image Frontside – Upload an image to display in the background of the front side.

  • Heading Color Frontside – Controls the heading color of the frontside.

  • Text Color Frontside – Controls the text color of the frontside.

  • Background Color Backside – Controls the background color of the backside. IMPORTANT: Flip boxes must have background colors to work correctly in all browsers.

  • Background Image Backside – Upload an image to display in the background of the back side.

  • Heading Color Backside – Controls the heading color of the backside.

  • Text Color Backside – Controls the text color of the backside.

  • Border Size – In pixels. From 0 to 50px.

  • Border Color – Controls the border color.

  • Border Radius – Controls the flip box border radius. In pixels (px), ex: 1px, or “round”.

View The Options Screen

Animation Tab

  • Animation Type – Controls the column’s animation type. Choose between None, Bounce, Fade, Flash, Rubberband, Shake, Slide, or Zoom.

  • Direction of Animation – Controls the direction of animation on the column. Choose between Top, Right, Bottom, Left, or Static.

  • Speed of Animation – Controls the speed of animation on the column. Choose between 0.1 to 1.

  • Offset of Animation – Controls when the animation will start. Choose between Default, Top of element hits bottom of viewport, Top of element hits middle of viewport, or Bottom of element enters viewport.

View The Options Screen

Global Options

Location: WordPress Dashboard > Avada > Theme Options > Fusion Builder Elements > Flip Boxes Element

The Avada Advanced Options Network gives you amazing flexibility with additional Global Element Options that allows you to control individual Element default settings.

  • Flip Effect – Set the effect for the flip boxes. Choose from Classic, or 3d.

  • Flip Direction – Set the direction in which the boxes should flip. Choose from Flip Left, Flip Right, Flip Up, or Flip Down.

  • Flip Duration – Set the speed at which the boxes flip. In seconds.

  • Equal Heights – Set to yes to display flip boxes to equal heights. Choose from Yes, or No.

  • Flip Box Background Color Frontside – Controls the color of the frontside background.

  • Flip Box Heading Color Frontside – Controls the color of the frontside heading.

  • Flip Box Text Color Frontside – Controls the color of the frontside text.

  • Flip Box Background Color Backside – Controls the color of the backside background.

  • Flip Box Heading Color Backside – Controls the color of the backside heading.

  • Flip Box Text Color Backside – Controls the color of the backside text.

  • Flip Box Border Size – Controls the border size of the flip box background. In pixels.

  • Flip Box Border Color – Controls the border color of flip box background.

  • Flip Box Border Radius – Controls the border radius of the flip box background. Enter value including any valid CSS unit, ex: 4px.

View The Options Screen

Flip Boxes Element Parameters

Copy to Clipboard

Parent Settings

  • columns – Choose from 1 – 6. Sets the number of columns per row.
  • flip_effect – Choose the flip effect. Choices are classic or 3d.

  • flip_direction – Set the direction in which the boxes should flip. Options are left, right, up, or down.

  • flip_duration – Set the speed at which the boxes should flip. Options are in seconds from 0.1 to 2.0.

  • equal_heights – Set to yes to display flip boxes to equal height, regardless of content. Options are yes, or no.

  • icon – A font awesome icon value. For example, fa-glass.
  • icon_color – Accepts a hexcode ( #000000 ). Sets the icon’s color.
  • circle – Choose from yes, or no. Show or hide the icon’s circular background.
  • circle_color – Accepts a hexcode ( #000000 ). Sets the icon’s background color.
  • circle_border_color – Accepts a hexcode ( #000000 ). Sets the icon background’s border color.
  • icon_flip – Choose from none, horizontal, or vertical. Set’s the icon’s flip direction.
  • icon_rotate – Choose from none, 90, 180, or 270. Sets the icon’s rotation angle.
  • icon_spin – Choose from yes, or no. This will enable or disable the icon’s spinning animation feature.
  • image – The URL path of your custom icon image. For example, http://www.sample.com/image.jpg. icon must not be set.
  • image_id – The ID of the image uploaded.

  • image_width – Accepts a numerical value. For example, 35. Set the custom image’s width in pixels.
  • image_height – Accepts a numerical value. For example, 35. Set the custom image’s height in pixels.
  • hide_on_mobile – Choose from small-visibility, medium-visibility or large-visibility. You can select more than one setting. This will show the element on the selected visibility options, and will hide them on the deselected ones.
  • class – Add a custom class to the wrapping HTML element for further css customization. Learn more here.

  • id – Add a custom id to the wrapping HTML element for further css customization. Learn more here.

Child Settings

  • title_front -The title of the front side of the flip box.
  • title_back – The title of the back side of the flip box.
  • text_front – The body text of the front side of the flip box.
  • background_color_front – Accepts a hexcode ( #000000 ). Sets the front side’s background color.
  • title_front_color – Accepts a hexcode ( #000000 ). Sets the front side’s title color.

  • text_front_color – Accepts a hexcode ( #000000 ). Sets the front side’s body color.
  • background_color_back – Accepts a hexcode ( #000000 ). Sets the back side’s background color.
  • title_back_color – Accepts a hexcode ( #000000 ). Sets the back side’s title color.
  • text_back_color – Accepts a hexcode ( #000000 ). Sets the back side’s text color.
  • border_size – Accepts a pixel value. For example, 4px. Sets the border’s size.
  • border_color – Accepts a hexcode ( #000000 ). Sets the border’s color.
  • border_radius – Accepts a pixel value. Example, 4px. Sets the border’s radius.
  • icon – A font awesome icon value. For example, fa-glass.
  • icon_color – Accepts a hexcode ( #000000 ). Sets the icon’s color.
  • circle – Choose from yes, or no. Show or hide the icon’s circular background.
  • circle_color – Accepts a hexcode ( #000000 ). Sets the icon’s background color.
  • circle_border_color – Accepts a hexcode ( #000000 ). Sets the icon background’s border color.
  • icon_flip – Choose from none, horizontal, or vertical. Set’s the icon’s flip direction.
  • icon_rotate – Choose from none, 90, 180, or 270. Sets the icon’s rotation angle.
  • icon_spin – Choose from yes, or no. This will enable or disable the icon’s spinning animation feature.
  • image – The URL path of your custom icon image. For example, http://www.sample.com/image.jpg. icon must not be set.
  • image_width – Accepts a numerical value. For example, 35. Set the custom image’s width in pixels.
  • image_height – Accepts a numerical value. For example, 35. Set the custom image’s height in pixels.
  • animation_type – Choose from none, bounce, fade, flash, rubberBand, shake, slide, or zoom. Sets the animation to use on the element.
  • animation_direction – Choose from down, right, left, up, or static. Sets the animation’s incoming direction.
  • animation_speed – Accepts a numerical value from .1 (fastest), to 1, (slowest).
  • animation_offset – Choose from default, top-into-view, top-mid-of-view, or bottom-in-view. Sets when the animation starts.
  • custom content – Insert the flipboxes’ backside content between the
    Copy to Clipboard

    tags.