Divi Flip Box

Content → Flip Elements → Front/Back

In this section, you can enable icons and images and put the text as well. You can also set alt text for SEO.

1. Icon Enable – enable or disable the icon feature for both the front and back parts of the flip box design.

Image Enable – enable or disable images for both front and back parts of the flip box. 

1. Heading Text – Include Heading text for the front and back parts of the flip box. 
2. Select Heading Tag – choose Heading Tag which will define the size of the heading text.

Content → Flip Elements

Content – write down the text for content. This is available for both the front and back parts of the flip box.

Content → Flip Elements → Back

You have exactly the same features as the Front but here, you can add a button as well.

Content → Front Background

1. Background Color – enable to add a background color to the front part of the flip box
2. Select Background Color – pick a background color for the front part of the flip box. You can choose manually using the pointer or you can paste the hex code to get the precise color required for the design.

Content → Back Background

1. Background Color – enable to add a background color to the back part of the flip box
2. Select Background Color – pick a background color for the back part of the flip box. You can choose manually using the pointer or you can paste the hex code to get the precise color required for the design.

Content → Button Background

Select a background color for the button. This will respond when the button is enabled for the flip box design.

Content tab → Image Mask

When you have the image field enabled from the Flip Elements toggle, the Image Mask feature for both Front and Back will allow you to select a shape in which you can mask the image. Image mask comes with various features in itself: 

1. Use Image Mask – enable to view the features of Image Mask. 
2. Select Shape – select a prebuilt shape to mask the image into.
3. Select Mask Size – there are two ways you can size the image within this field. It could either be to Contain the image or to Cover the image. 
4. Image Horizontal Position – this feature allows you to adjust the image’s horizontal positioning.
5. Image Vertical Position – adjust the slider to arrange the image’s vertical positioning.

Here’s a screenshot of a demo made with the Image Mask feature:

Design → Flip Box Effect

Add a variation to your Flip Box design layout with the 8 amazing flip box effects.

Design tab → Front Icon Settings/Back Icon Settings

Add rounded corners and stylize the borders! With the very simple settings provided here, you can achieve great design possibilities.

Design tab → Front Icon Settings/Back Icon Settings

Add rounded corners and stylize the borders! With the very simple settings provided here, you can achieve great design possibilities.

1. Rounded Corners – adjust the corners to achieve rounded corners
2. Border Styles – include a border to your design
3. Border Width – adjust the width of the borders using the slider
4. Border Color – select a color for the border

Design tab → Front Icon Settings/Back Icon Settings (continuation)

1. Border Style – select a premade style for the border
2. Box-shadow – select a boxed shadow for your design

Design tab → Icon

Stylize the icon you set up for both the front and back of the flip box.

1. Icon Color – Select a color for the icon
2. Icon Font Size – resize the icon for both the Front and Back of the flip box
3. Icon Alignment – position the icon using the icon alignment
4. Icon Background – pick a color for the background using the pointer or you can simply state the hex code and get the precise color you need. 

Design → Image (Front/Back)

Here we have some minimal image settings for you. Add a background color, adjust the size of the image, and finally, align the image.

1. Image Background Color – manually select a color for the background of the image using the pointer or you can simply state the hex code and get the exact color you require.  
2. Image Size – easily resize the image using the slider.
3. Image Alignment – this allows you to position the image either to the left, right, or center.

Design tab → Title Text → Body Text

Easy title text and body text stylization are provided for both the front and back parts of the flip box design.

1. Font – Select a font from the collection or use a custom font
2. Font Weight – this is where you define how you want your font to show either regular, italic, bold extra, or even extra light.
3. Font Style – Pick a style of font for both front and back
4. Text Alignment – align the text for both the front and back text
5. Text Color – manually select a color for the background of the text using the pointer or you can simply state the hex code and get the exact color you require.
6. Text Size – easily resize the text for both the front and back parts of the flip box
7. Letter Spacing – space out the letters using the slider for an easier read for the website visitors
8. Line Height – easily include gaps between the lines using the slider
9. Text Shadow – add text shadow to have the texts highlighted

Design tab → Button Settings

Edit the font, text color, stylize your text and adjust the alignment of the Button’s text.

1. Font – Select a font from the collection or use a custom font
2. Font Weight – this is where you define how you want your font to show either regular, italic, bold extra, or even extra light.
3. Font Style – Pick a style of font for both front and back
4. Text Alignment – align the text for both the front and back text
5. Text Color – manually select a color for the background of the text using the pointer or you can simply state the hex code and get the exact color you require.
6. Text Size – easily resize the text for both the front and back parts of the flip box
7. Letter Spacing – space out the letters using the slider for an easier read for the website visitors
8. Line Height – easily include gaps between the lines using the slider

1. Text Shadow – add a shadow to the text to have them pop out more so the readers can have an easier time when reading
2. Rounded Corners – adjust the four corners to add rounded corners
3. Border Styles – add a border to the flip box button.

1. Border Color – manually select a color for the button’s background using the pointer or you can simply state the hex code and get the exact color you require.
2. Border Style – select a style of the border from the collection
3. Button Box Shadow – add a box-shadow to the button