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

[@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?

[@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.

[@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

[@ma.belengonzalez8323]

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

[@JBXL1000]

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

[@ΚΩΝΣΤΑΝΤΙΝΟΣΠΑΠΑΜΑΡΓΑΡΙΤΗΣ]

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.

[@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 :)

[@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.

[@VitalityFlowDe]

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.

[@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.

[@losbrowndogs]

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

[@pietou.j]

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

[@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.

[@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.

[@janienreeves2813]

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

[@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.

[@ThepurrrBlog]

Great tutorial! Needed this.

[@elegantthemes]

Thanks

[@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 ..

[@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/

[@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.

[@jondavies5680]

Doesn't work in IE11 - any ideas?

[@kokopelli-world]

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

[@jacelyncortes3868]

Anyone know how to correctly resize the cards?

[@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.

[@MarcosAlexandreReis-u5c]

Excellent!!!

[@minimaxdigital5356]

Why don't working for mobile view?

[@vamshichoula8248]

How to create virtual vising card using divi in wordpress.

[@theeverleinhour9616]

it makes my cards flip backwards

[@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.

[@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.