Flip Boxes Element

Animated Flip Boxes Grab Your Viewer’s Attention

Animated & Responsive

Animated flip boxes are simply awesome. We’ve never met anyone who doesn’t love these bad boys. They are great for grabbing the user’s attention, and for 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!

Content Stands 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.

Something Beautiful

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

Buy Avada Now

Color Control

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

Use Font Awesome Icons

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.

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 Display on Desktop

Mobile Visibility Setting

Only Display on Tablet

Mobile Visibility Setting

Only Display on Mobile

Mobile Visibility Setting

Display Everywhere

Mobile Visibility Setting

Advanced Options Network

Theme Options are global, Page Options are individual. This setup gives you amazing creative flexibility that becomes indespensible when you start creating your site. Having the option to freely choose how individual pages are styled is an incredible freedom.

#1 Selling Theme Of All Time

550,000+

Individuals & Businesses Trust Avada

BUY AVADA NOW!

Documentation & Videos

We have a wide range of support material to suit your learning style. Our documentation is extensive and growing. There are almost 500 documents, where you can search and read about almost any aspect of Avada. Prefer to watch? We have a growing library of HD video tutorials covering the basics and much, much more. Like to engage? Submit a support ticket, join our Community Forum, or engage with other users on the community run Facebook Avada Users Group.

Documentation

Start Searching

Video Tutorials

Start Watching

Need Support?

Start Engaging

Customize Elements Globally Or Individually

Elements can be controlled globally inside of the Fusion Theme Options, or individually per Element by changing the options for each once added to a page or post. Individual Element options will always override the global theme options. This flexibility gives you the ultimate freedom to style Elements and content that is unique and will stand out from the rest of the site.

General

  • Number of Columns – Set the number of columns, Range from 1 to 6.
  • Flip Effect – Set the effect of the flip. Choose from Default, Classic, 3D.
  • Flip Direction – Choose the direction of the flip effect: Default, Flip Left, Flip Right, Flip Up, Flip Down.
  • Flip Duration – Set the length of time the Effect takes.

  • Equal Heights – Set the Flip Boxes to have an equal height.
  • Icon – Choose an icon from the Font Awesome library.
  • Icon Color – Set the color of the Icon.
  • Icon Circle Background Color – Set the Background Color of the Icon Circle.

  • Icon Circle Border Color – Set the Background Color of the Icon Circle Border.

  • Flip Icon – Choose whether to flip the icon. Options are None, Horizontal, Vertical.
  • Rotate Icon – Choose to rotate the icon by 90, 180, 270 or None.
  • Spinning Icon – Set the Icon to Spin.
  • Icon Image – Select or Upload an Icon Image.

  • Element Visibility – Choose to show or hide the element on small, medium or large screens.

  • CSS Class – Add a class to the wrapping HTML element.

  • CSS ID – Add an ID to the wrapping HTML element.

Children

  • Add Content Box – Add a new Flip Box
  • Flip Box Controls – Choose to Edit, Duplicate or Remove Flip Box.

General

  • Flip Direction – Choose the direction of the flip effect: Default, Flip Left, Flip Right, Flip Up, Flip Down.
  • Flip Box Frontside Heading– Set the Heading for the front of the flip box.
  • Flip Box Backside Heading – Set the Heading for the back of the flip box.

  • Flip Box Frontside Content – Set the Content for the front of the flip box.

  • Flip Box Backside Content – Set the Content for the back of the flip box.
  • Icon – Choose an icon from the Font Awesome library*.
  • Icon Selected – Provides advanced configuration: Icon Color, Icon Circle, Flip Icon, Rotate Icon, Spinning Icon.
  • Icon Image – Set a custom icon image.

Design

  • Background Color Frontside – Set the Background Color for the front of the flip box.
  • Background Image Frontside– Set the Background Image for the front of the flip box.
  • Heading Color Frontside– Set the Heading Color for the front of the flip box.
  • Text Color Frontside– Set the Content Color for the front of the flip box.
  • Background Color Backside – Set the Background Color for the back of the flip box.

  • Background Image Backside – Set the Background Image for the back of the flip box.

  • Heading Color Backside – Set the Heading Color for the back of the flip box.

  • Text Color Backside – Set the Content Color for the back of the flip box.

  • Border Size – Set the size of the Border.
  • Border Color – Set the Color of the Border.
  • Border Radius – Set the Border Radius.

Animation

  • Animation Type – Select the type of animation: None, Bounce, Fade, Flash, Rubberband, Shake, Slide, Zoom.
  • Direction of Animation – Can be one of these values: Top, RIght, Bottom, Left, Static.
  • Speed of Animation – Accepts a numerical value from .1, which is the slowest, to 1, which is the fastest.
  • Offset Animation – Controls when the animation should start.