WP DIVI - Effet Flip Cards Carte qui se retourne MODULE ET LIGNE

Citation de Sante Coaching le 17 juillet 2024, 12h22

Bonjour,

J'essaie de suivre ce magnifique tutoriel afin de simplement ajouter un module texte dans divi avec l'effet "flip card" = quand le visiteur du site clique sur le texte, le module texte se retourne et l'utilisateur voit le verso du module avec un autre texte.

Version video de 9':

https://youtu.be/hNa2yjW7fmU?feature=shared

Version texte détaillée :

https://www.elegantthemes.com/blog/divi-resources/how-to-create-flip-cards-with-any-module-in-divi-without-a-plugin

J'ai fait tout ce qu'il y a dans le tuto a la lettre.

SAUF A LA TOUTE FIN DU TUTO :

DANS MON THEME DIVI, DANS PARAMETRES AVANCES DE LA LIGNE (CADRE VERT) QUI CONTIENT LES MODULES, DANS CSS ID & CLASSES, J'AI UNIQUEMENT LES OPTIONS "CSS CLASS" ET NON "ID CSS DE COLONNE" EN PLUS.

Cf a 5'54 du tuto :

/ CF IMAGE JOINTE

J'ai donc bien ajouté la classe ID :

"flip-box-row" dans "CSS CLASS"

Mais pas :

"flip-box-column" dans "ID CSS DE COLONNE" puisque je n'ai pas l'option.

Le resultat final ne fonctionne pas.

 

Je ne sais pas si c'est dû au fait de ne pas avoir mis le code css specifique au colonnes (car en realité je n'ai pas de colonnes, il s'agit de lignes disposees cote a cote et non superposees les unes aux autres, comme indiquer à 1'35 dans la video, grace au code custom css de section display:flex;").

Ou si c'est dû à autre chose.

Sur un forum, il est dis que les mises a jour de Divi on enlevé des options au theme.
Il est dit aussi qu'on peut ajouter du code css dans l'option "PERSONNALISER CSS" des PARAMETRES AVANCES des MODULES/LIGNES...
Sauf que je ne sais pas coder.
Je me suis juste contenté de recopier les codes css du tuto.
Et quand j'entre par exemple dans "CUSTOM CSS" puis "MAIN ELEMENT" le code css de colonnes "flip-box-column" que je ne peux pas inscrire dans "ID CSS DE COLONNE" (car je n'ai pas l'option), ca ne fonctionne pas, car il faut écrire le code sous une autre forme à cet endroit, j'ai donc essayer "flip-box: column;" j'obtien l'erreur "unknown property" = en gros ça n'existe pas :

  / CF IMAGE JOINTE

 

Je ne sais pas quoi faire.

 

Pouvez vous m'aider svp ?

Je sais qu'il existe des extensions WP/DIVI specifiques mais le but ici est de ne pas surcharger le site.

Merci de votre aide

Quentin

 

N.B. :

J'ai bien rentré les codes "flip-card-front" et "flip-card-back" dans les MODULES comme dans video et tout marche bien à ce stade...

J'ai bien rentré le long code dans MAIN ELEMENT du CUSTOM CSS de la PAGE :

@media (min-width:981px){
.flip-box-row {
background-color: transparent;
width: 250px;
height: 250px;
-webkit-perspective: 1000px;
perspective: 1000px;
}

.flip-box-column {
position: relative;
width:100%;
height: 100%;
-webkit-transition: transform 0.8s;
transition: transform 0.8s;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}

.flip-box-row:hover .flip-box-column {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}

.flip-box-front, .flip-box-back{
position: absolute;
width:100%;
height: 100%;
-webkit-transform: translate3d(0,0,0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}

.flip-box-back {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
}