Créer des Cartes Pivotantes avec Divi sur WordPress
Dans ce tutoriel, je vais vous montrer comment intégrer des cartes pivotantes sur un site WordPress en utilisant le thème Divi. Ces cartes permettent de présenter du contenu de manière interactive et élégante en affichant des informations recto-verso sur chaque carte. Parfait pour rendre vos pages plus engageantes ! Prêt à découvrir cet effet visuel ? Allons-y !
Pourquoi Utiliser des Cartes Pivotantes sur Votre Site ?
Les cartes pivotantes (ou « flip cards ») sont idéales pour :
- Présenter des informations de manière concise : Elles permettent de garder la page claire tout en donnant accès à des détails au besoin.
- Engager les visiteurs : Avec cet effet interactif, les utilisateurs peuvent explorer les informations en passant leur souris ou en touchant les cartes sur mobile.
Installer Divi et le Plugin Divi Supreme
Prérequis pour Utiliser Divi Supreme
Avant de commencer, assurez-vous d’avoir :
- Divi : le constructeur de pages WordPress.
- Divi Supreme : une extension offrant de nombreux modules supplémentaires pour enrichir vos créations avec Divi.
Installer Divi Supreme Lite (Gratuit)
- Dans le tableau de bord WordPress, allez dans Extensions > Ajouter.
- Recherchez Divi Supreme Lite et installez-le.
- Une fois l’installation terminée, cliquez sur Activer.
Astuce : Divi Supreme existe aussi en version Pro, offrant plus de 60 modules pour un design avancé. Avec le code promo Alpa 14, bénéficiez de 10 % de réduction sur Divi Supreme Pro.
Créer des Cartes Pivotantes avec Divi Supreme
Ajouter le Module Flipbox
- Dans Divi Builder, ouvrez la section où vous souhaitez ajouter les cartes.
- Insérez une nouvelle rangée à trois colonnes.
- Dans chaque colonne, ajoutez le module Supreme Flipbox (ajouté par Divi Supreme Lite).
Configurer le Recto de la Carte
- Ajoutez le texte principal de votre carte, comme le nom de l’ingrédient ou du produit que vous souhaitez présenter.
- Insérez une image en lien avec le contenu de la carte (ex. : photo de l’ingrédient).
- Personnalisez le style : modifiez la police, la taille du texte, et ajoutez un fond clair ou coloré selon vos préférences.
Configurer le Verso de la Carte
- Cliquez sur la flèche pour accéder au verso de la carte.
- Ajoutez le texte détaillé qui apparaîtra lorsque la carte pivote.
- Ajustez l’arrière-plan pour qu’il corresponde au style du recto.
Affiner le Design et l’Espace de la Carte
Pour rendre vos cartes plus esthétiques :
- Ajustez la hauteur et l’espacement des colonnes dans la section Style.
- Ajoutez des bordures arrondies et une ombre pour un effet de relief.
- Utilisez un fond transparent ou légèrement coloré pour des cartes au design naturel et agréable.
Cloner et Finaliser Vos Cartes Pivotantes
Une fois la première carte terminée :
- Clonez le module flipbox pour créer les autres cartes, en modifiant le texte et l’image de chaque ingrédient ou produit.
- Si vous avez besoin de plusieurs rangées, dupliquez la rangée entière.
Tester et Publier Vos Cartes Pivotantes
- Désactivez Divi Builder pour voir l’effet de pivotement en action.
- Passez la souris ou touchez chaque carte pour vérifier que l’effet de rotation fonctionne parfaitement.
- Enregistrez et publiez votre travail pour que les visiteurs puissent profiter de cet effet interactif.
En conclusion conclusion
Félicitations, vous savez maintenant comment créer des cartes pivotantes sur votre site WordPress avec Divi et Divi Supreme ! Ces cartes sont un excellent moyen de rendre vos pages plus attrayantes et de présenter des informations sans surcharger la mise en page.
