Flip Boxes Element

Animated flip boxes are simply awesome. We’ve never met anyone who doesn’t love these bad boys. They are great for grabbing the users attention and adding some interaction with your content. Avada’s 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. Customize background images on the front and back side, the flip effect, the flip direction, the flip duration, the border size, the border radius and have full control over the front and backside colors. Oh yeah, and you can animate them with CSS3 goodness.

Fully Responsive

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

Perfect For All Sizes

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

Buy Avada Now

Premium Sliders

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

Make Your Content Stand Out

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

Buy Avada Now

Amazing Elements

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

Build Something Beautiful

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

Buy Avada Now

Control Color

Flip boxes allow you to control the color of the backgrounds, title text, body text, icons, icon circles and borders. Set colors individually in the shortcode, or globally in our theme options panel. Take control of your colors with ease.

Control Your Colors

Control all the colors of each element you see.

Control Your Colors

From backgrounds to text colors to borders. Take control.

Control Your Colors

Control all the colors of each element you see.

Control Your Colors

From backgrounds to text colors to borders. Take control.

Control Your Colors

Control all the colors of each element you see.

Control Your Colors

From backgrounds to text colors to borders. Take control.

Background Images

Flip boxes allow you to set background images to use on either side of your Flip Boxes. These add an extra element of depth to your designs and the already awesome Flip Box Element.

Background Images

Set & Control Your Background Images

Reverse Background Images

Set & Control Your Background Images

Background Images

Set & Control Your Background Images

Reverse Background Images

Set & Control Your Background Images

Flip Effects

Flip boxes allow you to choose which flip effect you want to utilize that best matches your design style. We offer two types, Classic and 3D.

Classic Flip

Control the flip effect you'd like.

Classic Flip Backside

This is the back of the classic flip effect of the Flip Boxes Element.

3D Flip Effect

Control the flip effect you'd like.

3d Flip Backside

This is the back of the 3D flip effect of the Flip Boxes Element.

Direction Control

You can control the direction of the flip of your Flip Box Element. You can choose from Up, Down, Left and Right to vary your approach to design.

Up

Box Flips Up

Up

Box Flips Up

Down

Box Flips Down

Down

Box Flips Down

Left

Box Flips Left

Left

Box Flips Left

Right

Box Flips Right

Right

Box Flips Right

Duration Control

You can control the duration of the animation on your Flip Box Effects.

Less Duration

Duration Set to 0.4

A Quicker Flip Effect

This is a faster flip effect duration.

More Duration

Duration Set to 2.0

A Slower Flip Effect

This is a slower flip effect duration.

Icon Heaven

Font Awesome Icons are tightly integrate into the flip boxes along with multiple options; icon color, circle color and border, circle show or hide, icon flip, rotate, spin and animate.

Control your icons

Font Awesome Icon integration is perfect.

Control your icons

Change just about every aspect of the icon and circle that contains it. Take Control.

Control your icons

Font Awesome Icon integration is perfect.

Control your icons

Change just about every aspect of the icon and circle that contains it. Take Control.

Control your icons

Font Awesome Icon integration is perfect.

Control your icons

Change just about every aspect of the icon and circle that contains it. Take Control.

Control your icons

Font Awesome Icon integration is perfect.

Control your icons

Change just about every aspect of the icon and circle that contains it. Take Control.

Images Love Flip Boxes

Images can be used in place of icons.

A Whole New Look

Instead of using icons, you can choose to use images. This opens up a whole new look for the flip boxes and gives you more creative freedom in creating layouts.

Images Love Flip Boxes

Images can be used in place of icons.

A Whole New Look

Instead of using icons, you can choose to use images. This opens up a whole new look for the flip boxes and gives you more creative freedom in creating layouts.

Border Control

Flip boxes allow you to use borders and set the border width, color and radius. You can even set the border properties individually per box to make one box stand out from the others with featured content. Take control of your borders.

Control Your Borders

Control the border size, color and radius.

Control Your Borders

From backgrounds to text colors to borders. Take control.

Control Your Borders

Control the border size, color and radius.

Control Your Borders

From backgrounds to text colors to borders. Take control.

Control Your Borders

Control the border size, color and radius.

Control Your Borders

From backgrounds to text colors to borders. Take control.

Button Control

Flip Box buttons now have the option to either span full width or remain default.

Control Button Span

Choose between span full width or default option.

Control Button Span

Choose between span full width or default option.

Span Default

Control Button Span

Choose between span full width or default option.

Control Button Span

Choose between span full width or default option.

Span Full Width

More Options

The Flip Box Element now contains even more customization options than ever to enhance your page designs.

Mobile Visibility Settings

Our mobile visibility system gives you full control over what displays based on 3 customizable screen sizes. Every Fusion Builder Element has these settings and they allow you to show or hide elements on various screen sizes. In addition, you can choose what those screen sizes are! This gives you maximum control to set the exact point when an element should show or hide. Resize the page to see the elements appear or disappear based on what we set.

Only Show on Desktop

Only Show on Tablet

Only Show on Mobile

Complete Set of Options

Every option and description included with the flip box shortcode is listed below.

  • columns – Choose from 1 – 6. Sets the number of columns per row.

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

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

  • 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

    tags.

Join The 500,000+ Satisfied Avada Users!

BUY AVADA NOW!