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 Divi 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.
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.
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.
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.
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.
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.
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.
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.
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
i would be really nice when/if you supplied the json files for download