How to Create a Divi Flip Box

by | Jun 2, 2020

How to Create a Divi Flip Box

Divi flip box or flip cards are a fun and interactive way to communicate with your website visitors. You can give your visitors more information when they hover on one of these cards.

In this tutorial, I will create 3 flip cards. Each with a different animation. You can see a live demo of each flip card right here. Hover over them to see it in action.

I will be building these flip cards with the plugin Divi Supreme. This is a premium third-party plugin with 40+ modules.

I have created more tutorials and a complete review for Divi Supreme, you can check them out here:

The developers of Divi Supreme provided me a special 10% discount coupon for my readers. You can use coupon code MH10 at checkout.

Get Divi Supreme

Get 10% Off With Coupon Code MH10

I Have A Special Discount For You

Get 10% Off With Coupon Code MH10

Flip Box #1 Flip Effect

The first flip box is one with a flip effect. You can set the direction of the flip and change the content to your likings.

Divi flip box

Step 1: Place the Supreme Flipbox Module

I start with a section and a row with 3 columns. In each column I place the Supreme Flipbox.

Divi flip box module

Step 2 First flip card settings

Add 2 New Items. the top one is the one that will be visible and the bottom one is the one when the card is flipped over.

Divi flip card

Open the first flip card (top one) and use the following settings.

Content tab

Title

  • Give your card a title
Background

  • Add a background image
  • Go to the gradient background tab and use for both color options: rgba(0,0,0,0.5)
  • Switch the “Place Gradient Above Background Image” to Yes

Design tab

Title Text

  • Title Font: Source sans pro
  • Title Font Weight: Light
  • Title Font Style: Uppercase
  • Title Text Alignment: Center
  • Title Text Color: #ffffff
  • Title Text Size: 26px

Spacing

  • Padding: top 125, bottom 125, left 50, right 50

Step 3 Second flip card settings

Open the second flip card (bottom one) and use the following settings.

Content tab

Button

  • Button text: fill in read more
  • Button URL: fill in your URL
  • Switch the “Place Gradient Above Background Image” to Yes
Background

  • Add a background image
  • Go to the gradient background tab and use for both color options: rgba(0,0,0,0.5)
  • Switch the “Place Gradient Above Background Image” to Yes

Design tab

Button

  • Use Custom Styles For Button: Yes
  • Button Text Size: 16px
  • Button Text Color: #ffffff
  • Button Background Color: #e02b20
  • Button Border Width: 0px
  • Button Border Radius: 0px
  • Show Button Icon: No
Spacing

  • Padding: top 125, bottom 125, left 50, right 50

Flip Box #2 Zoom Effect

I am using here a row with a 2 column structure 1/3 and 2/3. Place in the first column the Supreme flip box module.

Divi flip box

Add 2 New Items. the top one is the one that will be visible and the bottom one is the one when the card is flipped over.

Divi flip box zoom

Step 1 General module settings

Design tab

Sizing

  • Height: 350px
Animation

  • Flip type: Zoom in

Step 2 First flip card settings

Content tab

Text

  • Title: Add your title

Background

  • Add a background image
  • Go to the gradient background tab and use for the first color box: rgba(11,7,109,0.87) and for the second rgba(43,135,218,0.87).
  • Switch the “Place Gradient Above Background Image” to Yes

Design tab

Spacing

  • Padding: top 200, left 35, right 35

Step 3 Second flip card settings

Content tab

Text

  • Content: Add your text

Image

  • Upload an image

Background

  • Add a background image
  • Go to the gradient background tab and use for both color options: rgba(255,255,255,0.96)
  • Switch the “Place Gradient Above Background Image” to Yes

Design tab

Body Text

  • Body Font Weight: Light
  • Body Text Alignment: Center
  • Body Text Color: #ffffff
  • Body Text Size: 16px

Button

  • Use Custom Styles For Button: Yes
  • Button Text Size: 14px
  • Button Text Color: #ffffff
  • Button Background Color: #000000
  • Button Border Radius: 30px
  • Button Border Width: 0px
  • Button Border Radius: 0px
  • Show Button Icon: No

Spacing

  • Padding: top 50, bottom: 50, left 35, right 35

Flip Box #3 Slide-in Effect

The last flip card I have for you is my favorite one. It’s not really a flip card but more a slide-in on hover.

I am using here a row with a 2 column structure. Place in each column the Supreme flip box module.

Divi flip box slide-in

Step 1 Row settings

Open the row and place a background image in each column.

Step 2 General module settings

Design tab

Sizing

  • Height: 350px

Animation

  • Flip box type: Slide
  • Flip box slide effect: Slide right

Open the Divi Supreme Flipbox module and add 2 new items.

Flip card with slide-in effect

Step 3 First flip card settings

Content tab

No settings needed.

Step 4 Second flip card settings

Content tab

Text

  • Title: Add your title
  • Content: Add your content

Button

  • Button Text: Add your button text
  • Button URL: Add your button URL

Design tab

Sizing

  • Width (desktop): 50%
  • Width (tablet and mobile): auto

Button

  • Use Custom Styles For Button: Yes
  • Button Text Size: 14px
  • Button Text Color: #ffffff
  • Button Background Color: #082d8c
  • Show Button Icon: No

Spacing

  • Padding: left 50, right 50

1 Comment

  1. Nordie

    i would be really nice when/if you supplied the json files for download

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

10 Shares
Share9
Tweet
Pin1
Buffer