How to create Flip Box Effect in Divi

Flip Box effect is a nice and interactive animation that can be applied to content boxes to make them more appealing and engaging. It’s a great way for showcasing products, services, events and actually anything we can imagine that requires an image and description. In this tutorial we will show you how to achieve that effect with a few lines of custom HTML and CSS.

Flip box effects are one of the most requested Divi features I see in the Facebook groups. 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:

Bonus: Flip Cards Module!

But what if you don’t want to touch any code, but still want to create flip cards using the Divi builder? Well, you’re in luck! B3’s Divi Flip Card plugin does just that!

Not only can you easily achieve the look from the tutorial above all within the Divi builder you’re familiar with, there’s also a whole load of additional features to make your flip cards even more stylish and unique.

Once you’ve bought the plugin, it’s as simple as installing it, then you’ll have access to the “Flip Card’ module in the builder and you can start creating your own flip cards today!

Let us know in the comments below if you liked this free module! Your feedback gives us motivation to create new products and freebies. And if you have any suggestions about what we could make for you next, let us know!
Andy Hooke

Andy Hooke

Andy is a self-taught web designer who now specialises in the Divi theme. He comes from a html & css coding background, and enjoys taking these skills to see how far he can customise Divi and create websites which don’t look like your standard Divi websites.

Create beautiful blurbs with Divi Flip Cards

Let’s celebrate! We have a sweet deal for you! You can get the best flip box plugin for Divi with a 10% discount! Use the coupon code DFC10 at checkout!

7 Comments

  1. Kathy Booker

    Love this and want to purchase, but could you provide some info on how this works with mobile? Since 50% of traffic is in that arena, that would cement my purchase decision. thx

    Reply
    • Maciej Ekstedt

      Hello Kathy! Thank you for your comment!
      The Divi Flip Cards works on mobiles. After user tap on the box, it animates to the back card. Good approach for make it even more mobile friendly is to place icon/link/button on the front card, so users know that there is something more. Hopefully this helps 🙂

      Reply
  2. Paolo

    Can I use that in a 6 columns module?

    Reply
    • Maciej Ekstedt

      Hi Paolo, yes, it will work with 6 columns layout!

      Reply
  3. petaqui

    Really cool effect! I have a doubt that I can’t figure it out
    Is there a way to set the height? In my case I have some cards with a vertical format. Using this effect crops the image to an square. Can that be changed?
    Thanks!

    Reply
  4. Victoria Calvin

    I’ve been trying forever to find a flip card code that will work, because my site is hosted through my university’s WordPress so plugins and such are really limited, but this worked perfectly! Took less than five minutes to set up and is very easy to customize and work with! Thank you so much!

    Reply
  5. Sam

    Is there any way to add a background image for both the front and back cards?

    Reply

Leave a Reply to Sam Cancel reply

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

Sign up to our newsletter list

Pin It on Pinterest

This site uses Cookies to improve your online experience. By continuing to use this site without changing your cookie preferences we will assume that you are agreeing to our use of cookies. For more information visit ourPrivacy Policy.
Understood