Comment créer des cartes à rabat avec n'importe quel module dans Divi sans plugin

Les Flip Cards sont un moyen amusant pour les utilisateurs d'interagir avec votre site Web. Non seulement il fournit une animation flip sympa, mais il vous permet également d'offrir des informations supplémentaires dans un emplacement concis. Dans ce tutoriel, je vais vous montrer comment transformer des modules Divi en flip cards sans utiliser de plugin ! Avec cette méthode, vous pourrez utiliser un module Divi comme recto d'une carte et un autre module Divi comme verso d'une carte. Vous pouvez même concevoir chaque module (avant et arrière) comme bon vous semble en utilisant le constructeur Divi. La fonctionnalité est accomplie grâce à quelques extraits de CSS (pas de jquery).

Je pense que vous serez surpris de voir à quel point la construction de ces cartes peut être simple et amusante.

Plongeons dedans !

Pic furtif

Voici un aperçu de la conception que nous allons construire aujourd'hui.

Abonnez-vous à notre chaîne Youtube

Ce dont vous avez besoin pour ce tutoriel

Tout ce dont vous aurez besoin pour ce tutoriel, c'est Divi ! Aucun plugin nécessaire. Nous utiliserons également le pack de mise en page du développeur d'applications qui est GRATUIT et disponible dans Divi Builder.

L'idée de base expliquée

L'inspiration pour ce concept est en fait venue de cet exemple de base sur la façon de concevoir des cartes à rabat. Tout ce qu'il a fallu, c'est un peu de réingénierie pour attribuer les classes div aux lignes, colonnes et modules Divi, puis nettoyer un peu le CSS.

La mise en page Divi se compose d'une section régulière avec quatre rangées à une colonne. Dans chaque rangée, j'ai ajouté deux modules de présentation empilés les uns sur les autres (bien que n'importe quel module Divi fonctionnerait également). Le texte de présentation supérieur sert de devant de la carte flip et le texte de présentation inférieur sert de dos de la carte flip. En appliquant « display:flex » à la section, les lignes sont structurées horizontalement comme des colonnes. Cela permet d'aligner les cartes côte à côte en quatre colonnes.

Voici à quoi ressemble la configuration avant d'ajouter le CSS personnalisé.

Ensuite, j'ai ajouté le CSS personnalisé aux paramètres de page et ajouté les classes CSS correspondantes à chaque ligne, colonne et module.

C'est ça!

Créer des cartes Divi Flip à l'aide d'une mise en page prédéfinie

Ajout de la mise en page prédéfinie à votre page

Pour faire avancer les choses, allez-y et créez une nouvelle page, donnez-vous un titre à la page, puis cliquez pour utiliser le Divi Builder. Sélectionnez l'option « Choisir une mise en page prédéfinie ». Dans la fenêtre contextuelle Charger à partir de la bibliothèque, sélectionnez le pack de mise en page du développeur d'applications, puis cliquez sur pour utiliser la mise en page de la page de destination du développeur d'applications.

Une fois la mise en page chargée sur la page, publiez votre page, puis cliquez sur le bouton « Créer sur le front-end ». Vous êtes maintenant prêt à commencer à créer les Flip Cards.

Configuration de la section, des lignes et des modules

Sous la première section de la mise en page, ajoutez une nouvelle section régulière avec une ligne à une colonne. N'ajoutez pas encore de modules. Ouvrez les paramètres de ligne et mettez à jour les éléments suivants :

Marge personnalisée : 20 pixels en bas
Rembourrage personnalisé : 0px en haut, 0px en bas

Enregistrer les paramètres.

Ensuite, dupliquez la ligne trois fois afin d'avoir un total de quatre lignes dans la section.

Ouvrez maintenant les paramètres de la section et ajoutez le CSS personnalisé suivant à l'élément principal :

display:flex;

Cela modifie les lignes à afficher horizontalement, ce qui convertit essentiellement nos lignes en quatre colonnes même si techniquement, ce sont toujours des lignes Divi avec chacune une colonne.

Ajout des modules aux lignes

C'est là que notre mise en page prédéfinie est utile pour ce tutoriel. Nous utiliserons les quatre modules de présentation dans la section supérieure de la mise en page pour démarrer la conception de nos cartes à rabat. En utilisant les options du clic droit ou les raccourcis clavier ctrl+c et ctrl+v (windows) et cmd+c cmd+v (mac), copiez et collez les modules prédéfinis dans chacune des lignes que nous venons de créer. Assurez-vous que chaque ligne contient des versions en double du même module.

Votre section devrait maintenant ressembler à ceci.

Conception des modules de cartes à rabat avant et arrière

Les deux modules empilés dans chaque rangée seront utilisés comme recto et verso des flip cards. Le module supérieur de chaque rangée servira d'avant et le module inférieur servira d'arrière. Le design de la carte avant (module supérieur) étant déjà fait grâce à notre mise en page prédéfinie, il ne nous reste plus qu'à ajuster le design et le contenu de la carte arrière (module inférieur).

À l'aide de la fonction Divi multiselect, sélectionnez tous les modules du bas dans chaque rangée, puis ouvrez les paramètres des éléments pour personnaliser les quatre modules en même temps.

Nous pouvons maintenant mettre à jour les options de paramètres des éléments pour styliser la version arrière de nos cartes à rabat. Mettez à jour les paramètres de l'élément comme suit :

Contenu : « Ceci est une description. »
Couleur d'arrière-plan : #00a2fa
Couleur du texte : clair

Ajout de classes CSS et CSS personnalisées

Il est maintenant temps pour le CSS personnalisé qui nous donnera la fonctionnalité de carte à bascule. Ouvrez les paramètres de la page et ajoutez le CSS personnalisé suivant :

@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);
}
}

Notez que les classes CSS ci-dessus sont nommées d'une manière qui devrait vous aider à comprendre ce que chacune fait. C'est également un indicateur utile pour savoir où nous devons ajouter ces classes CSS à nos éléments Divi. Par exemple, la classe « flip-box-row » est destinée à styliser chacune des quatre lignes ; par conséquent, chaque ligne doit avoir cette classe CSS.

Ajouter des classes CSS aux éléments Divi

À l'aide de Multiselect, sélectionnez les quatre modules supérieurs (cartes avant) dans chacune des rangées. Ajoutez ensuite la classe CSS suivante :

Classe CSS : flip-box-front

Ensuite, utilisez la sélection multiple pour sélectionner les quatre modules du bas (cartes arrière) dans chacune des lignes et ajoutez la classe CSS suivante à ces modules :

Classe CSS : flip-box-back

Enfin, utilisez multiselect pour sélectionner les quatre lignes et attribuez-leur les classes CSS suivantes :

Classe CSS : flip-box-row
Classe CSS de colonne : flip-box-column

Conception finale sur le bureau

Avec toutes nos classes CSS ajoutées, nos flip cards sont entièrement fonctionnelles. Découvrez la conception finale sur le bureau.

Personnalisation de la conception pour mobile

Dans le code CSS personnalisé que nous avons déjà ajouté aux paramètres de la page, il existe une requête multimédia qui limite la fonctionnalité de la carte flip au bureau uniquement. Cependant, nous devons toujours masquer les versions avant de nos cartes à rabat sur tablette et smartphone et nous assurer que nos lignes s'empilent bien lors de l'ajustement de la largeur du navigateur.

Pour masquer nos modules de présentation de carte avant, utilisez la sélection multiple pour sélectionner tous les modules supérieurs (cartes avant) dans chaque ligne (ce sera plus facile en mode d'affichage filaire car les choses bougeront dans le générateur de front-end) et mettez à jour les éléments suivants :

Désactiver sur : téléphone et smartphone

Ouvrez ensuite les paramètres de la section et ajoutez une ligne de CSS supplémentaire à l'élément principal en plus de celle ajoutée précédemment :

flex-wrap:wrap;

Cela garantira que les lignes s'empilent sur le mobile.

Voyons maintenant le design final sur tablette et smartphone.

Option bonus : cartes à bascule verticale !

Si vous voulez que vos cartes à rabat se retournent verticalement au lieu d'horizontalement, il vous suffit de changer deux lettres (littéralement) dans le CSS personnalisé. Ouvrez les paramètres de la page et localisez les deux endroits où "transform: rotateY(180deg)" est utilisé. Remplacez ensuite le « Y » par « X ». Si vous ne l'avez pas déjà deviné, cela modifie la rotation pour qu'elle tourne sur l'axe X au lieu de l'axe Y.

Des trucs plutôt cool ! Découvrez le résultat.

Dernières pensées

Vous n'avez pas besoin de recourir à un plugin pour créer de superbes Flip Cards dans Divi. Avec ce didacticiel, vous disposez d'un cadre pour créer d'innombrables conceptions et combinaisons de contenu de cartes à rabat. N'oubliez pas que vous pouvez choisir entre deux modules pour servir de recto et de verso de vos cartes. Alors n'hésitez pas à faire preuve de créativité !

J'espère que cela a été utile et j'ai hâte de vous entendre dans les commentaires ci-dessous.

À votre santé!