How to Create Flip Cards with Any Module in Divi Without a Plugin

Flip Cards are a fun way for users to interact with your website. Not only does it provide a cool flip animation, it also allows you to offer additional information in one concise location. In this tutorial, I’m going to show you how to turn Divi Modules into flip cards without using a plugin! With this method, you will be able to use one Divi module as the front of a card and another Divi module as the back of a card. You can even design each module (front and back) however you like using the divi builder. The functionality is accomplished through just a few snippets of CSS (no jquery).
Read more: www.elegantthe...

[@anaochoa_m]

I tried this, but in my case I don't see the Column CSS Any idea why?

[@Sheknowsdigital]

Hi I went through all steps just to learn at the end that you changed the functionality and this doesn't work anymore. I have the latest version, added a row and added a class to each column, nothing happens. Please advice. Thanks!

[@florianmartel4470]

Hello, this tutorial is very interesting but it does not work or more because the column class id fields do not appear in my version how to do?

[@melissawarrior5415]

I just found the tutorial for the flip box using elementor it is much easier and easy to resize. So I will probably use this 1 since elementor suppose to work in Divi theme templates. This is still a good tutorial. Thank You.

[@AlannaBirmingham]

This has been unbelievably frustrating for me. I have tried this at least 6 times and it doesn't work for me. Even with the new information on where to find the column CSS classes.

[@pattyartt]

To everyone telling it doesn't work - Divi have changed the columns management. So you need to first edit row, and after click on gear to edit certain column.

[@PaulHooper]

This is excellent Mac, it really shows just how flexible Divi really is and how it can be used for fully bespoke websites. Thanks :-)

[@elegantthemes]

You're welcome Paul :)

[@lyndondallas8523]

this seems different now. Doesn't appear to be working for me. Am I missing a step? Did I need to do something in animations or hover. Also I did not see a space for CSS column class there was only one space.

[@ma.belengonzalez8323]

I cant get the column css class part.. so i cant finish the flip box.... any suggest?

[@zejulien1]

Same here

[@arthurvalvi]

Do you have the latest version? If so, you must enter the row and in the row you go to the configuration of each column, in the latest versions the way of handling the columns has changed. ;)

[@Sheknowsdigital]

@@arthurvalvi I tried and it doesn't seem to work really frustrating as you go through all this process to learn at the end that something was changed and it just doesn't work

[@Sheknowsdigital]

@@arthurvalvi Hi I went through all steps just to learn at the end that you changed the functionality and this doesn't work anymore. I have the latest version, added a row and added a class to each column, nothing happens. Please advice. Thanks!

[@joostvanherpen3138]

i have the same problem

[@rennee33]

To make it work in divi latest version (4.14. 3) the row is de green box and inside of this settings you'll see Column Structure option. Para hacerlo funcionar en la ultima versión de divi (4.14.3) la fila es la caja verde, dentro de las configuraciones de esta veras las opciones de la colmna.

[@koleman1075]

Hey quick question, so i followed this very well, analized all my code and made sure it was the exact same, however whenever i hover over my front side card it spazzes out as it tries to flip the card. Any help would be appreciated! I believe it has to do with when it flips there is a fraction i am not hovering because of the flip animation.

[@melspedito-jovial6589]

Hi it's a really useful video! I have one question what CSS modification should I do if I want to click on the flip cards rather than hover on? thanks

[@mohitpatel713]

got any reply?

[@UdelRSA]

We went through all the steps but the part at 5:19, only "CSS Class" is appearing, no options for Columns. How to we resolve this?

[@marioalejandre2307]

Go to column configuration and set css class there. You'll need to get into the row configuration and you'll see a single column, did i make myself clear? Sorry for my english

[@tanerbayram8154]

@@marioalejandre2307 thank you very much dude! It was very clear, it works! :D

[@VitalityLabDE]

It is a really helpful video, but I do not have the colum css (5:55 min) anyone can help?

[@penandalex]

Same problem over here :(

[@Essfre10]

same

[@georgekaramolegos]

Same here. Not really working

[@manonvilleneuve8337]

Same here

[@jaybradley8037]

Figured I'd share the solution, since I just had to figure it out tonight. The fields you are looking for are likely found by going to the column tab of the row settings instead, then clicking on the "gear" icon of each column. In the advanced tab, you will find "CSS Class" there. In this context, it applies to the column. Note you'll need to set each column's CSS Class individually.

[@traffickerdigital3602]

Hi Thanks for the tutorial, but I can't find the cathegory columns ccs Class? Any suggestions, please

[@arthurvalvi]

Do you have the latest version? If so, you must enter the row and in the row you go to the configuration of each column, in the latest versions the way of handling the columns has changed.

[@ConnectNepalTV]

I think this is not easy as elementor, sorry for this, but tutorial is good. There should be option flip box while we add from + sign.

[@user-vm3dr3ss2r]

Excellent!!!

[@user-zy1nj5rl5d]

It is a really helpful video, but I haven't the colum css at (5:55 min) anyone can help? I have the latest version of divi. And I can see it is a common issue...

[@puppyohgang.9827]

the column class id is within the individual column options on divi 4.

[@bryanveIoso]

same here.

[@danialbakhsheshi9064]

There is no Column CSS Class: flip-box-column!?? Can you please help?

[@pauljeambrun9088]

did you find a solution to this? I have the same issue ..

[@Steamboatagent]

Sort of working, except the front card is just flipping over and showing reverse and stacked on top of the back card....any suggestions?

[@marioalejandre2307]

same to me, anyone helps?

[@marioalejandre2307]

Okay i figured it out, it's already been a year i'm sorry. I'll let you know tho. I supose you used your own custom blurbs right? I just tried with those premade blurbs and it worked!! I don't know why yet.

[@losbrowndogs]

Great video. Will the code remain intact when I perform Divi theme updates? Thanks!

[@ThepurrrBlog]

Great tutorial! Needed this.

[@elegantthemes]

Thanks

[@pietou.j]

great ! How to do this on-click and not on hover ? Thks !

[@bryanveIoso]

Why I don't have column css id in my row settings?

[@elegantthemes]

Hi Bryan! 👋 It needs further investigation, so please, create a ticket with the Support Team: www.elegantthemes.com/members-area/

[@theeverleinhour9616]

it makes my cards flip backwards

[@jondavies5680]

Doesn't work in IE11 - any ideas?

[@michellejdia6226]

I cant find the column css class part either... :( Please give some advice or trick, if you can.

[@elegantthemes]

Hi Michelle! 👋 Go to the Row Settings > Column Settings > Advanced Tab > CSS Class and there you can find this option. Please, have a look at the screenshot: prnt.sc/1rmw77i

[@psytrancespirit]

@@elegantthemes Still no Column CSS Class even in the column settings ...

[@janienreeves2813]

Great video but where is all that custom CSS code you pasted?

[@minimaxdigital5356]

Why don't working for mobile view?

[@vamshichoula8248]

How to create virtual vising card using divi in wordpress.

[@jacelyncortes3868]

Anyone know how to correctly resize the cards?

[@kokopelliworld7633]

can you please advise what is the css code used?

[@elegantthemes]

Hi there! Please visit our blog for the CSS codes that were used on this video. 😊 www.elegantthemes.com/blog/divi-resources/how-to-create-flip-cards-with-any-module-in-divi-without-a-plugin

[@damianobaggio838]

Hi, Thank you so much for your help! I was successful in creating flashcards for desktop view. However, I noticed that your video explains how to have them on mobile as well but they don't flip on mobile. Is there a way to make them flip on mobile too? Thank you for any help you can give :)

[@wendycwilliams]

This tutorial deliberately turns OFF the flip function on mobile. So try removing the changes from the tutorial when Mak starts talking about mobile and see if that works.

[@paritoshpandya2598]

Change MAK university to CSS university.