The PBC Blog

Articles for Web Developers & Designers

Search more articles

How to make a Flipbox (Flip Card) with Divi

by | Nov 29, 2019

Horizontal FlipBox

Front Side

 

Horizontal FlipBox

Back Side

 

Vertical FlipBox

Front Side

 

Vertical FlipBox

Back Side

 

A Flipbox as you may intuit, is a box with content that flips over when users pass mouse over. It must content  two and only two differentiate encapsulated content (at leat on this tutorial), and each one will be used as a unique side of the box, the front and backside.

The next article it will cover how to do a Flipbox with Divi, using the third party plugin provided by us, Divi Enhancer on it’s free edition.

 

First Steps

To add the Flipbox module provided by Divi Enhancer, just follow the same steps you regular do when you add a Divi Module. Open the visual builder, wait until the load was finished and then click on the grey button. You will see all the custom Divi modules, but if you go down you will find the modules with a “DE” prefix. All this ones were added by Divi Enhancer. Click the one it says “Flipbox”.

Knowing The Divi FlipBox Module

Once you have inserted the module, you will have in front of you some settings like the image below.

This module use a nested structure, which means you must add  children modules inside the main one to display the box content. If you already familiarized with divi, you will notice this strucure is used by default modules like accordion, toggles and many more.

In easy words, the plus icon showed at top it will add a new item each time you click it, but with this module you must add two and only two items. This, because each item represents a flipbox side, being the first one the front side and the other one, the back side. If you add an extra item, the module won’t work properly and you will get an unexpected result.

Adding an Item to the FlipBox

The following applies to front and back side.

Click on the plus icon to add an item.

You will see similar settings to the main module. To be sure you are in the item settings, look at top of the modal.

The identifier field it has only the function of display the item name inside the main module. You can write front, back, or whatever you want to identify each item, but remember, the first item it will be displayed as front side in anycase, so if you write backside or any similar term on first item, it won’t transform the item in the backside of the divi flipbox.

The editor is where all the magic happens. All content must be inserted here.
For example, if you want to create a flipbox with an image of some person on front and some info about this person on back, you must add two items. In the first one, you must insert the image of the person using the media button and in the second one, all the info about this person.

to avoid aesthetic issues with the module, is highly recommended apply background of any kind to each item (flip box side), otherwise you will see through the current side the content of the other side. In case you will use the Divi Flipbox with images on both sides and each one has the same ratio, this won’t neccesary, because the images will cover the entire area preventing the transparency between sides.

Specific Flipbox Settings

 

This module supports only two specific settings. The direction and the speed of the flip over.

The speed fields represents the animation time tooks to turn from one side to the other one (in miliseconds) Lower numbers will cause faster speed transitions.

Stylizing the Flipbox and its Sides

 

Each flipbox side must be adjusted inside the proper item and not in the main module. For example, if you wants a bigger text size on the front side and some padding, you must open the front item (first item) and navigate to the design tab to adjust this parameters.

Some values of the main module, like the text color, will affect to the entire box, including the flipbox sides, but settings adjusted inside the item are dominating, so if you have red text on the main module and green one in the front item, the flipbox frontside text will be green and not red.

Divi Flipbox Json Example