Andy Hooke posted a great article on B3 Multi Media on how to make flip boxes on the Divi theme.

Flip box effects are one of the most requested Divi features.  But unfortunately Elegant Theme’s still haven’t added them as a module to use within the builder. Luckily for us though, they’re fairly simple to create with a little bit of HTML and CSS, and in this tutorial we will show you how to do that in a few simple steps.

Sneak Peak
Here is a sneak peak of the module we will be building today.

View Demo →

  •  
  •  
  •  

  •  
  •  
  •  

Download Free Divi Sections .JSON file
You can follow this tutorial or download ready to use .json file with several sample sections that you can import to your Divi Library and use in no time! Subscribe to download free section →

 

1.  Create a section

Create a new section and add a row with 3 columns.

  •  
  •  
  •  
 

2.  Add text module and HTML

Add a text module, make sure you’re on the “Text” tab, then paste in the following html:

 

 

  •  
  •  
  •  
 

3.  Customise HTML

For the frontside: In the space marked [add image], replace with an image from the media library using Add Media button. Make sure the image is at least 400px wide.

For the backside: Look for the part of code which looks like this:

Then replace the following
– The text which says “Project Title” inside the h3 tag
– The description text directly below which starts with “A short…” inside the p tag

 

4.  Add in link (optional)

If you’d like to turn the flip card into a link, you can add in a module link to the text module.

  •  
  •  
  •  
 

5.  Choose which flip direction

You can choose 4 different directions for the flip: left, right, up, down.

Add the following class into the css class box in the advanced tab of the text module:

• Left: flip-card-rotate-left
• Right: flip-card-rotate-right
• Up: flip-card-rotate-up
• Down: flip-card-rotate-down

  •  
  •  
  •  
 

6.  Add in other boxes

Copy and paste the text module into the other two columns, then repeat step 3-4 to customise each flip card. Then save the layout.

  •  
  •  
  •  
 

7.  Add custom CSS

Add the code below into your child theme style.css (or the Custom CSS tab of your Divi Theme Options):

8

Save CSS

Save the CSS settings and you’re done!

View Demo→

Subscribe to download free sections →

  •  
  •  
  •  

Mobile Version

The mobile version of this layout is set to overlay the background text over the front image.

The reason being as there’s no text on the front, users might think it’s just an image and not think to click it, therefore missing the text on the back.

If you’d like to have the cards active on mobile though, it’s an easy fix. You just need to do the following:

1. Remove the media query from the CSS. The part you need to remove is highlighted below.
2. If you’re using a module link, remove it
3. Reply the “View project” text on the back with a link

And that’s it!

CSS to remove:

 

Pin It on Pinterest