Divi Flip Box

Divi Flip Box module for Divi Builder is a dynamic and engaging way to present content with a flip animation effect. This module allows you to create interactive boxes that flip to reveal additional information when hovered over or clicked.

Live demo of the Flip Box module.

Content

Content tab of the Flip Box module.

Front Side

1. Content Alignment – Adjust the horizontal alignment of the content within the front side.
2. Content Vertical Alignment – Adjust the vertical alignment of the content within the flip box.
3. Padding – Control the padding inside the flip box front side to create space around the content.
4. Content Padding – Adjust the padding specifically for the content within the front side of the flip box, creating space around the text, images, or icons.
5. Background – Customize the background color of the flip box for both the front side.

Back Side

1. Content Alignment – Adjust the horizontal alignment of the content within the backside.
2. Content Vertical Alignment – Adjust the vertical alignment of the content within the backside of the flip box.
3. Padding – Control the padding inside the flip box’s back side to create space around the content.
4. Content Padding – Adjust the padding specifically for the content within the back side of the flip box, creating space around the text, images, or icons.
5. Background – Customize the background color of the flip box for both the back side.

Design

Design tab of the Flip Box module.

Front Side

Customize the design and layout of the front side of the flip box. This includes setting background colors, gradients, or images and adjusting the padding and borders.

Back Side

Customize the design and layout of the back side of the flip box. You can style the background, padding, borders, and overall appearance to match or contrast with the front side.

Front Media

Style and adjust the appearance of media elements, such as images or icons, on the front side of the flip box. You can set the size, alignment, and margins to ensure the media fits well within the design.

Front Texts

Customize the fonts, colors, and styles of the text on the front side of the flip box. Adjust font size, weight, line height, and letter spacing to make the text clear and visually appealing.

Back Texts

Customize the fonts, colors, and styles of the text on the back side of the flip box. Similar to the front texts, you can adjust font properties and ensure the text complements the overall design.

Button

Design and style the button on the back side of the flip box. Customize the button’s text, background color, border, and padding to make it stand out and encourage user interaction.