Point culminant du plugin Divi : Module Divi Carousel

DIVI Carousel Module est un plugin tiers pour Divi et Extra qui ajoute un curseur de carrousel avancé au Divi Builder. Vous avez le contrôle de presque tout dans le module pour créer à peu près tout type de carrousel dont vous avez besoin pour votre site Divi ou Extra. Dans cet article, nous examinerons le module Divi Carousel et verrons ce qu'il peut faire et à quel point il est facile à utiliser.

Installation et activation du module carrousel Divi

Téléchargez et activez le plugin comme d'habitude. Un nouvel élément de menu est ajouté au tableau de bord appelé DiviGear. Allez dans ce menu et ajoutez votre clé de licence.

Module Divi Carousel dans le Divi Builder

Un nouveau module est ajouté au Divi Builder appelé Divi Carousel.

Le module comprend une zone pour ajouter de nouveaux éléments. L'onglet Contenu contient les paramètres du curseur, qui vous permettent de choisir le nombre de diapositives à afficher en fonction de l'appareil utilisé par l'utilisateur, d'activer plusieurs diapositives, de définir la durée de transition, etc. Activer la diapositive centrale, la boucle, la lecture automatique, la navigation par flèche et la navigation par points . Définissez l'espacement des éléments, activez la même hauteur et l'alignement vertical. Les paramètres avancés vous permettent de choisir l'effet du curseur.

L'onglet Conception comprend des paramètres pour la superposition, l'image (largeur), la bordure de l'image, le titre et le corps du texte, la couleur, l'espacement et la bordure. Cela inclut les personnalisations des couleurs pour la navigation par flèche et par point.

L'onglet Avancé contient tous les champs CSS auxquels vous vous attendez, ainsi que des paramètres de visibilité et de transition. Il ajoute des champs CSS pour le titre, le contenu, l'image et le bouton.

Les paramètres des éléments du carrousel comprennent également les trois onglets. Ces paramètres remplacent tout ce qui est défini dans les paramètres du module principal. L'onglet Contenu comporte une zone pour le contenu principal, le titre et le lien de l'image, les paramètres des boutons, les paramètres de l'image et l'arrière-plan.

L'onglet Conception comprend des paramètres pour le texte du titre, le style de contenu (corps du texte), le bouton, l'espacement et l'ombre de la zone. Ce sont les paramètres de conception standard que vous verriez dans la plupart des modules Divi. L'onglet Avancé est les paramètres de base trouvés dans la plupart des modules.

Pour les paramètres d'image, vous pouvez utiliser des images ou des icônes.

Ajoutez autant de diapositives que vous le souhaitez. Les diapositives s'affichent côte à côte en fonction du nombre que vous avez défini pour l'affichage. Celui-ci est configuré pour en afficher quatre. Bien sûr, vous pouvez les faire glisser et les déposer dans l'ordre de votre choix.

Dans celui-ci, j'ai ajusté l'espacement des éléments à 100. La principale différence qui apparaît dans mon exemple est le texte. Il affiche désormais moins de mots par ligne.

Celui-ci utilise la navigation par flèche. Je l'ai configuré pour qu'il s'affiche à l'extérieur de la diapositive. J'ai défini l'espacement des éléments sur 1. C'est plus évident si vous utilisez des couleurs d'arrière-plan.

J'ai configuré celui-ci pour afficher deux diapositives. Il affiche la navigation par points.

Voici un aperçu des paramètres avancés. J'ai réglé l'effet de curseur sur Coverflow. Cela ouvre une option de rotation et d'ombre. Cette fonctionnalité montre ce qui distingue vraiment le module d'un curseur standard. Il s'agit des paramètres par défaut.

Maintenant, j'ai réglé la rotation sur 100. Les diapositives sont encore plus inclinées en 3D vers le côté gauche, loin de l'écran.

Voici la même rotation mais sans l'ombre Coverflow.

Exemples de modules Divi Carrousel

L'une de mes utilisations préférées d'un carrousel est d'afficher les logos de clients ou de produits. Pour cet exemple, j'ai ajouté le module à la page portfolio de la page de destination du développeur d'applications. Je l'ai configuré pour afficher 3 logos d'entreprise, pour boucler le défilement et pour jouer automatiquement afin que le visiteur n'ait pas besoin de les parcourir.

Cela fonctionne également pour montrer les projets sur lesquels vous avez travaillé. Pour celui-ci, j'ai ajouté plusieurs projets avec des boutons pour que le visiteur puisse voir le projet. J'ai changé la couleur du texte du bouton en blanc et ajouté une ombre de boîte au bouton. J'ai rendu les flèches blanches et réglé l'opacité de leur arrière-plan sur presque transparent.

Ici, j'ai ajouté un arrière-plan à la diapositive, l'ai rendue semi-transparente et j'ai ajouté une ombre de boîte. L'espacement comprend le bouton, l'image et le remplissage du contenu. J'ai ajouté un espacement au bouton et à l'image.

Celui-ci utilise l'effet de curseur Overflow. Il s'agit des paramètres par défaut.

Pour celui-ci, je l'ai réglé pour centrer la diapositive. Lorsqu'il est utilisé avec les paramètres de débordement, il centre la diapositive du milieu et incline les diapositives des deux côtés pour se faire face. Il est configuré pour afficher quatre diapositives.

Celui-ci est configuré pour afficher 3 diapositives. J'ai réglé la rotation sur 80.

Celui-ci est configuré pour afficher 6 diapositives. La rotation est définie par défaut (50).

Celui-ci montre 6 diapositives sans la diapositive centrale ou le débordement activé.

Celui-ci en montre 6 avec Center Slide activé.

Pour cet exemple, j'utilise le module comme curseur de menu alimentaire. En ajoutant une image, du texte et un bouton, il crée en fait un curseur de textes de présentation. Les images ont une largeur de 100. J'ai ajouté une superposition, un bouton pour acheter chaque article (le bouton vous amène à la page produit de l'article) et une navigation par points. J'ai stylisé la superposition et l'icône de superposition ainsi que les points pour les diapositives actives et non actives. Il s'intègre parfaitement dans la mise en page du café.

Pour celui-ci, j'ai ajouté la navigation par flèche et l'ai stylisée pour qu'elle corresponde aux boutons. Je l'ai pour montrer les flèches en vol stationnaire. Vous pouvez placer les flèches à l'intérieur ou à l'extérieur du curseur et changer leur couleur. Vous ne pouvez pas modifier leur taille dans les paramètres du module.

Celui-ci utilise l'effet Coverflow. Je survole la diapositive de gauche pour afficher la superposition et les flèches.

Pour celui-ci, j'ai ajouté un arrière-plan et une ombre de boîte à une seule des diapositives. Cela peut être utilisé pour montrer ce qui est en vente ou mettre en évidence la meilleure offre.

Pour celui-ci, je n'utilise que des icônes. J'ai placé le module à côté d'un ensemble de modules de présentation et mis en place 6 liens de médias sociaux. Ils sont conçus pour correspondre aux textes de présentation. Cliquer sur l'icône ouvre le réseau social. Je l'ai configuré pour qu'il glisse automatiquement toutes les secondes.

L'affichage de plusieurs diapositives coupe une partie d'une icône, ce qui donne un bon visuel lorsque le curseur s'anime.

Pour cet exemple, je voulais créer un simple curseur de tableau de prix. J'ai simplifié les prix du pack de mise en page du parcours de golf.

Maintenant, j'ai ajouté une ombre de boîte. Au début, je n'arrivais pas à faire passer l'ombre verticale sous la diapositive. Puis j'ai réalisé que les diapositives touchaient les côtés du conteneur du module. J'ai ajouté un rembourrage de module et j'ai pu ensuite ajouter des ombres de boîte sur tous les côtés des diapositives.

Vous pouvez également ajuster le remplissage des boutons, des images et du contenu pour chaque diapositive individuellement. Dans cet exemple, j'ajuste le rembourrage pour la diapositive de gauche.

J'ai ajouté des flèches et les ai stylisées pour qu'elles correspondent aux éléments de la mise en page.

Pour cet exemple, j'ai ajouté des images, modifié l'ombre de la boîte et ajouté un peu plus de remplissage de contenu pour que l'ombre de la boîte s'affiche pleinement. J'ai également déplacé les flèches vers l'extérieur des diapositives.

Maintenant, j'ai ajouté un bouton. J'ai ajusté les styles de boutons, y compris les couleurs, le rayon de la bordure, la taille du texte et ajouté une ombre de boîte qui correspond aux diapositives.

Bien sûr, puisque le module comprend une zone de contenu, vous pouvez ajouter tout type de contenu que vous souhaitez, y compris des médias. J'ai ajouté des images qui correspondent à la mise en page. Tout le contenu est placé sous le titre. Les images sont superbes à cet endroit.

Voici à quoi ressemble le module dans la disposition du terrain de golf. La mise en page d'origine comportait de nombreuses caractéristiques de tarification. En utilisant le module Divi Carousel, tous les prix sont toujours là, mais ils sont affichés dans les diapositives. On dirait qu'il appartient à cette mise en page.

Cela fonctionne également très bien avec Extra. Dans cet exemple, j'ai configuré la page pour qu'elle n'affiche pas de barre latérale.

Voici à quoi cela ressemble avec une barre latérale (bien que je n'aie ajouté aucun widget pour la barre latérale, la taille est la même). Vous pouvez voir ici que le module est responsive.

Prix ​​du module carrousel Divi

Le module Divi Carousel est disponible sur le site Web du développeur. Deux options sont disponibles :

• Site unique – 15 $
• Sites illimités – 29 $

Documentation et support du module carrousel Divi

La documentation est disponible dans le menu du tableau de bord DiviGear. Sélectionnez l'onglet Documentation. Cela fournit des liens vers une procédure vidéo de 4 minutes sur la chaîne YouTube de DiviGear. La prise en charge des tickets est fournie via Freshdesk.

Mettre fin aux pensées

Le module Divi Carousel est un moyen facile d'ajouter un curseur de carrousel au Divi Builder. C'est intuitif et a en fait plus de personnalisations que ce à quoi je m'attendais. Il y a eu quelques fois où je n'ai pas pu cloner une diapositive correctement, mais cela a peut-être été un problème de mon côté. N'oubliez pas de donner à chaque diapositive une étiquette d'administrateur ou elles afficheront le nom de l'élément dans le module, ce qui les rend difficiles à distinguer.

J'aime le fait qu'il y ait des images, du contenu et des boutons séparément. Cela vous permet de créer des cartes, des présentations, des images, du texte, des icônes d'affichage ou tout ce que vous devez afficher dans un curseur. Vous pouvez ajouter une image en haut du curseur et toujours pouvoir en ajouter d'autres à la zone de contenu.

Divi Carousel Module est un excellent curseur de carrousel. Il est disponible sur le site Web du développeur et sur les places de marché Divi.

Nous voulons de vos nouvelles. Avez-vous essayé le module Divi Carousel ? Faites-nous savoir ce que vous en pensez dans les commentaires ci-dessous.

Image en vedette via Anatolir / shutterstock.com