Overview of the Flip Box module

This page shows you how to add the Flip Box module to your page and explains every setting in its Content, Design and Advanced tabs, with screenshots. The Flip Box module shows content on the front of a box and flips it over to reveal more content on the back when visitors hover. For more details, view the demo.

How to add the Flip Box module to your page

1. Open your page in the Divi Visual Builder.
2. Click the gray (+) icon inside a row to add a new module.
3. Search for DP Flip Box in the module search box.
4. Click the module to insert it. Its settings open on the right.

Content tab settings

The Content tab holds the module’s own settings, grouped in the toggles below. Link, Background and Element Label are the standard Divi options.

Flip Box Layout

• Select Layout: Choose the layout for Flip Box.
• Flip Direction: Choose the flip direction.
• 3D Depth Effect: Enable or disable 3D depth effect on flip.
• Shake On Flip: Enable or disable shake effect on flip.
• Flip Speed(In Ms): Define the flip speed in ms.

Flip Box Content

• Front Title: Enter the title for front side.
• Content: Enter the content for front side.

Flip Box Content (Back Content)

• Back Title: Enter the title for back side.
• Content: Enter the content for back side.

Flip Box Elements

• Use Icon: Choose whether an icon should be used on front side.
• Image: Upload an image to display on your front side.
• Alt Text: Define the HTML ALT text for the image.

Flip Box Elements (Back Elements)

• Use Icon: Choose whether an icon should be used on back side.
• Image: Upload an image to display on your back side.
• Alt Text: Define the HTML ALT text for the image.
• Display Button: Choose whether a button should be used on back side.

Flip Box Background

• Background: Adjust the background style of this element by customizing the background color, gradient, image, video, pattern and mask.
• Background Color

Design tab settings

The Design tab lets you style each part of the module:

• Front Text: styling options for the front text.
• Back Text: styling options for the back text.
• Front Image: styling options for the front image.
• Back Image: styling options for the back image.
• Front Side: styling options for the front side.
• Back Side: styling options for the back side.
• Sizing, Spacing, Border, Box Shadow, Filters, Transform, Animation: the standard Divi design options for the whole module.

Advanced tab settings

The Advanced tab has the standard Divi options: Attributes (add a CSS class or ID), CSS, HTML, Conditions, Interactions, Visibility, Transitions, Position and Scroll Effects.