Supreme Card Carousel : un carrousel dynamique et esthétique
Dans ce tutoriel, je vous guide étape par étape dans l’utilisation de ce module de Divi Supreme pour créer des carrousels attrayants et dynamiques sur votre site WordPress. Ce tutoriel est fait pour vous si vous souhaitez améliorer l’apparence et l’interaction de vos contenus!
Divi Supreme est l’extension ultime pour les utilisateurs de Divi et offre une gamme de 60 nouveaux modules puissants et 8 nouvelles extensions pour améliorer la conception et les fonctionnalités de votre site Web. Avec Divi Supreme, élevez vos présentations!
A noter que Divi Supreme est un plugin, une extension pour le Visual Builder de Divi. Pour que ce module Supreme Card Carousel fonctionne Divi doit donc être installé sur votre site WordPress.
Insérer le module Card Carouel
La première étape sera d’optimiser vos images, une largeur de 900 pixels est convenable et le format WebP vous offrira la meilleure optimisation.
Vous pouvez faire tout cela en ligne et gratuitement sur photopea.com un Photoshop Like assez puissant.
Ensuite, il vous suffira d’appeler le module Supreme Card Carousel comme tout autre module Divi. A noter qu’une fois Divi Supeme Pro installé les 60 nouveaux modules apparaîtront sur fond bleu pour les distinguer des modules Divi classiques.
Ajouter et paramétrer une nouvelle carte du carrousel
Pour ajouter une carte, cliquez sur le (+).
Aussitôt vous allez basculer sur le contenu de la carte elle-même.
Dans « Text », vous pouvez entrer le titre voire le sous-titre si necessaire.
Puis le texte lui-même qui appararaîtra sous l’image.
Dans « Image et badge », il est possible d’ajouter l’image de la carte mais aussi un badge qui viendra se positionner un surimpression sur l’image.
Dans « Lien », il sera possible d’ajouter un lien pour la carte entière mais aussi un lien spécial pour le badge.
Dans « bouton », vous pouvez ajouter le texte du bouton ainsi que son lien.
A noter que si vous ne renseignez pas une de ces options, l’élément n’apparaîtra pas, que ce soit le bouton, le badge ou autres.
Ajouter ensuite dans l’onglet style l’apparence souhaitée à votre carte.
Pour revenir à l’affichage principal afin d’ajouter d’autres cartes, cliquez sur la flèche en haut à gauche de la fenêtre paramètres.
Ajouter ensuite dans l’onglet style l’apparence souhaitée à votre carte.
Revenez ensuite en cliquant sur la flèche en haut à gauche de la fenêtre paramètres pour revenir sur l’affichage principal afin d’ajouter d’autres cartes. Vous pouvez cloner votre première carte pour aller plus vite si vous souhaitez conserver le même style (ce qui est souvent le cas).
Supreme Card Carousel : paramétrer le carrousel
Pour paramétrer le carrousel rendez-vous dans l’affichage principal et dans l’onglet « Contenu » à « Carousel Settings ».
Le carrousel peut être paramétré facilement et de nombreuses options sont disponibles.
Voici les principales.
Carousel Effect : cette option définit l’apparence du carrousel, vous avez le choix entre slide (glissé), Coverflow (effet 3d des cartes latérales), flip (une seule carte affichée se retourne pour laisser apparaître la suivante), cube (même effet, mais avec un effet cube lors de la rotation.)
Carousel direction : définit le sens dans lequel glisse le carousel (gauche/droite ou droite/gauche).
Slides to Show : définit le nombre de cartes visibles du carrousel.
Slides To Scroll : définit le nombre de cartes qui glissent lors de l’animation du carrousel.
Use Multiple Row : en activant cet interrupteur, vous pouvez créer un carrousel à plusieurs rangées qui glissent toutes en même temps.
Autoplay : active la rotation automatique du carrousel.
Autoplay Change Interval : définit l’interval de temps entre chaque rotation.
Autoplay only On Viewport : le carrousel s’active seulement à un certain % de la page visible scrolée.
Pause on hoover : au survol de la carte par le pointeur de la souris l’animation du carrousel s’arrête.
Infinite looping : la rotation du carrousel est continue, un carte disparaissant d’un côté réapparaitra de l’autre et ce à l’infini.
Equalize Card heights : égalise la hauteur des cartes (images)
Show Arrow : fait apparaitre une flèche à droite et une à gauche du carrousel pour faire tourner le carrousel manuellement.
Show Pagination : permet d’activer les points sous le carrrousel, indiquant le nombre de cartes.
