How to add a flip box, fill the front and back sides with content, choose one of six flip effects, and style the icon, image, text, button and both boxes.

How to add the Divi Advanced 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 Divi Advanced 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 flip box layout, the front and back content, the icons or images and the backgrounds. Link, Background and Element Label are the standard Divi options.

Flip box layout

• Select Layout: Choose how the back side appears: Flip, Zoom, Slide, 3D Cube, Grow or Cover.
• Flip Direction (Flip): Choose the flip direction: Top, Bottom, Left, Right, Diagonal Left, Diagonal Right, Diagonal Left Inverted or Diagonal Right Inverted.
• 3D Depth Effect (Flip): Turn this on to add a 3D depth effect to the flip.
• Shake on Flip (Flip): Turn this on to add a shake effect when the box flips.
• Flip Style (Zoom): Choose how the back side enters: Fade, Zoom In or Zoom Out.
• Entrance Direction (Slide, 3D Cube, Grow, Cover): Choose the direction the back side comes in from: Top, Bottom, Left or Right.
• Flip Speed (in ms): Set the speed of the effect in milliseconds.

Flip box content

Switch between Front Content and Back Content.

• Title: The title shown on the front or the back side.
• Content: The text shown on the front or the back side.

Flip box elements

Switch between Front Content and Back Content.

• Use Icon on Front / Use Icon on Back: Turn this on to show an icon instead of an image.
• Front Icon / Back Icon: Choose the icon to display on that side.
• Front Image / Back Image: Upload the image to display on that side (when the icon is off).
• Front Image Alt Text / Back Image Alt Text: Define the HTML ALT text for the image.
• Display Button on Back: Turn this on to show a button on the back side.
• Back Button Text: Enter the button text.
• Back Button Url: Enter the destination URL of the button.
• Url Opens in New Window: Choose whether the button link opens In The Same Window or In The New Tab.

Flip box background

Switch between Front and Back to set the background color, gradient or image of each side.

Design tab settings

The Design tab lets you style the front and the back side separately.

Front icon styles

This group is called Front Icon Styles when the front uses an icon, and Front Image Styles when it uses an image. For an icon: Icon Placement (Top, Left or Right), Icon Color, Use Icon Font Size and Style Icon (Icon Shape, Shape Background and Display Shape Border). For an image: Image Placement, Image Alignment, image size and image border.

Back image styles

The same options for the back side. It is called Back Image Styles when the back uses an image (shown here), and Back Icon Styles when it uses an icon.

Front text style

Font, size, color and other text options for the front side. Use the General, Front Title and Front Content tabs.

Back text style

Font, size, color and other text options for the back side. Use the General, Back Title and Back Content tabs.

Back button

The standard Divi button options for the back button (appears when Display Button on Back is on).

Front box style

Front Content Alignment (Top, Center or Bottom), and the border and box shadow of the front side.

Back box style

Back Content Alignment (Top, Center or Bottom), and the border and box shadow of the back side.

Sizing

Content width and the minimum height of the flip box, plus the standard Divi sizing options.

Animation

Icon/Image Animation: the direction of the animation when the icon or image loads (Top To Bottom, Left To Right, Right To Left, Bottom To Top or No Animation), plus the standard Divi animation options.

Other design settings

Spacing, Border, Box Shadow, Filters and Transform are 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.