Point culminant du plugin Divi: Module de carrousel de produits Divi

Divi Product Carousel Module est un plugin tiers pour Divi qui affiche les produits WooCommerce dans un curseur de carrousel. Construisez un carrousel de produits et placez-le dans n'importe quelle mise en page Divi. Vous pouvez les styliser et choisir plusieurs options de mise en page et d'affichage. Dans cet article, nous allons examiner le module carrousel de produits Divi, voir ses fonctionnalités et voir à quel point il est facile à utiliser.

Le module carrousel de produits Divi est disponible sur le site Web du développeur et sur les places de marché Divi.

Module de carrousel de produits Divi

Une fois que vous avez téléchargé et activé le plugin, accédez à DiviGear dans le menu du tableau de bord et activez votre licence. Si vous avez plusieurs plugins de ce développeur, vous devrez sélectionner l'onglet du plugin.

Un nouveau module est ajouté au Divi Builder appelé Product Carousel. Il comprend une icône violette pour se démarquer de la foule.

Les paramètres incluent les onglets Contenu, Conception et Avancé. L'onglet Contenu contient des paramètres pour le contenu WooCommerce. Choisissez le type de produit parmi les catégories récentes, vedettes, en vente, les plus vendues, les mieux notées ou de produits dans la liste déroulante. Entrez un nombre pour le nombre de produits que vous souhaitez afficher. Choisissez l'ordre de tri en fonction de la popularité, de l'évaluation, de la date ou du prix. Vous pouvez également activer le bouton Ajouter au panier et la description. Montrez la description complète ou un extrait.

Les paramètres du carrousel vous permettent de choisir le nombre de colonnes en fonction de l'appareil utilisé. Il comprend également des diapositives multiples (permettez-lui de glisser selon le nombre de diapositives à l'écran ou désactivez-le pour faire glisser une diapositive à la fois), l'espacement des éléments, la durée de transition, le centre, la boucle, la lecture automatique, la navigation par points et flèches, l'alignement et effet de glissement. Les autres paramètres incluent le lien et l'arrière-plan. Il est intéressant que vous puissiez utiliser les points et les flèches ensemble. Vous pouvez placer les points à droite, au milieu ou à gauche en bas de la diapositive.

L'onglet Conception comprend des paramètres pour la superposition, le titre, le prix, la description, le badge de vente, le bouton Ajouter au panier, la révision, la flèche, les points, l'image, le survol, l'espacement, la bordure et l'ombre de la boîte. D'autres paramètres sont ajoutés en fonction des sélections que vous choisissez. Chacun de ces paramètres est étendu.

L'onglet Avancé inclut les fonctionnalités CSS, visibilité et transitions attendues. Le CSS personnalisé comprend des champs pour le produit, l'image, le titre, le prix, la flèche du badge de vente précédente, la flèche suivante et les points. Cela vous donne beaucoup de contrôle avec CSS.

Paramètres du module de carrousel de produits Divi

Vous pouvez déplacer les titres et les prix vers le haut ou le bas. Dans cet exemple, j'ai déplacé les deux vers le haut et j'ai changé leur taille et leur couleur. J'ai stylisé le badge de vente en changeant la couleur d'arrière-plan et la taille de la police. J'ai également coiffé les points inactifs et actifs.

Voici à quoi cela ressemble à l'avant. J'ai également ajouté une superposition et le bouton Ajouter au panier apparaît au survol. Vous pouvez styliser ce bouton à la fois pour le survol de superposition et le survol du bouton.

Dans celui-ci, j'ai sélectionné 6 colonnes, déplacé tout le texte vers le bas, ajusté les couleurs du texte et ajouté de l'opacité au bouton Ajouter au panier. J'ai laissé l'opacité du survol par défaut, donc le bouton est solide si vous survolez le bouton lui-même.

Pour celui-ci, j'ai défini la mise en page sur 4 colonnes. J'ai ajouté des flèches et changé les couleurs des flèches et des points. J'ai également ajouté un arrière-plan au titre, au prix et à la description, et j'ai changé tout le texte en blanc. Afin de bien aligner le texte dans la boîte, j'ai ajouté du remplissage de contenu. Il comprend également un rembourrage de contenu pour le haut (au cas où vous placeriez le titre ou le prix au-dessus de l'image).

Voici à quoi cela ressemble à l'avant. La flèche à droite est plus claire pour indiquer qu'elle se trouve à la fin des produits qu'elle peut afficher. Si je le mets en boucle, ce sera la couleur normale.

Voici à quoi cela ressemble avec Débordement sélectionné. Il fournit un bel effet de carte 3D. Vous pouvez ajuster la quantité de rotation et activer l'ombre de diapositive.

Dans cet exemple, j'ai donné aux cartes une ombre de boîte et ajusté le flou. J'ai également changé les flèches en cercle et ajusté les couleurs.

Voici à quoi cela ressemble sur le front-end avec Center Slide activé. Il s'agit de la disposition à 4 colonnes. Il s'affiche différemment lorsque vous sélectionnez Centrer la diapositive.

Il s'agit de la disposition à 5 colonnes utilisant les mêmes paramètres que l'exemple ci-dessus.

Le carrousel de produits s'intègre bien dans les mises en page Divi. Dans cet exemple, j'ai remplacé le module de boutique Divi par le module de carrousel de produits Divi et je l'ai stylisé pour qu'il corresponde à la mise en page.

Dans celui-ci, j'ai déplacé le titre vers le haut, ajouté un peu de rembourrage en haut et en bas et mis les titres en demi-gras. J'ai également changé la couleur du bouton Ajouter au panier pour correspondre à la mise en page.

Pour celui-ci, j'ai ajusté les bordures des diapositives et des images pour créer des coins arrondis. Je suis allé de l'avant et j'ai transformé les images en cercles. J'ai également ajouté une ombre de boîte.

Il semble excellent dans la mise en page. Il cache cependant la plupart des badges de vente. Il y a probablement un moyen de contourner cela avec CSS.

Celui-ci utilise Overflow avec la disposition à 3 colonnes.

Pour celui-ci, j'ai supprimé la bordure de l'image mais j'ai conservé la bordure des diapositives. J'ai ajouté une ombre de boîte et ajusté sa force et sa position.

Il montre également le nombre d'étoiles des critiques en survol. Il place la note à côté du bouton Ajouter au panier. Il les réunit avec une animation cool. Il s'agit des paramètres par défaut. Vous pouvez styliser les couleurs de l'arrière-plan et des étoiles.

Dans celui-ci, j'ai stylisé les notes pour qu'elles correspondent aux éléments de la mise en page.

Pour celui-ci, j'ai déplacé le prix vers le haut et le titre vers le bas. J'ai ajouté une description et une superposition. J'ai déplacé la navigation par points vers la droite. J'ai dû ajouter un peu de rembourrage pour que l'ombre de la boîte apparaisse sur les côtés. Sans rembourrage, il place le produit au bord de l'espace du module.

Démos du module de carrousel de produits Divi

Il y a actuellement 13 démos téléchargeables sur le site Web du développeur. Ce sont des mises en page que vous pouvez télécharger dans la bibliothèque Divi et utiliser avec n'importe quelle mise en page Divi. Tous incluent le style du module Divi Product Carousel et certains incluent d'autres modules et arrière-plans stylisés. Ceux-ci sont utiles pour obtenir un point de départ avec les conceptions de votre carrousel de produits et pour montrer certaines des choses qui peuvent être faites avec le module. Regardons quelques-uns d'entre eux.

Celui-ci place les titres en haut, les styles en haut et en bas pour correspondre, ajoute des flèches encerclées à l'extérieur des images et inclut des points. Il a également une bordure inférieure pour faire ressortir les diapositives. J'aime les couleurs vives. Le haut et le bas ont un peu de transparence pour que les motifs d'arrière-plan soient visibles. Cette mise en page comprend un module de texte stylisé pour le titre.

Plusieurs des mises en page incluent d'autres modules avec style. Celui-ci utilise une disposition à deux colonnes pour ajouter un appel à l'action à l'aide de modules de texte et de boutons.

Voici à quoi cela ressemble de l'avant. Il comprend une bordure, des titres en haut et deux couleurs pour le bouton Ajouter au panier. Les flèches apparaissent dans les images du module.

Celui-ci comprend un fond vert et des diapositives stylisées assorties. Le bouton Ajouter au panier est vert clair lorsque vous survolez le produit, puis vert foncé lorsque vous survolez le bouton. Il comprend un module de texte stylisé pour le titre.

Celui-ci comprend un style bleu pour les badges de vente, des flèches rondes à l'extérieur des images et le bouton Ajouter au panier. Il ajoute une petite bordure aux diapositives. Il affiche les diapositives avec l'effet Débordement.

Celui-ci affiche également des produits avec l'effet Overflow. Il utilise également le bleu pour les flèches et le bouton Ajouter au panier. Le titre est déplacé vers le haut. La superposition est blanche avec une opacité élevée et le badge de vente est rouge.

Celui-ci comprend un arrière-plan stylisé et ajoute une bordure, un bouton Ajouter au panier stylisé, un badge de vente et des flèches encerclées. La superposition est blanche. Il place le prix en haut et toutes les autres données en bas.

Prix ​​et documentation du module carrousel de produits Divi

Il existe deux options d'achat pour le module carrousel de produits Divi :

• Site unique – 19 $
• Sites illimités – 39 $

Il est disponible sur le site Web du développeur et sur les marchés.

La documentation est fournie par une vidéo YouTube qui vous guide à travers les fonctionnalités. Vous trouverez un lien vers celui-ci dans le menu DiviGear du tableau de bord. Si vous possédez plusieurs produits DiviGear, sélectionnez l'onglet du produit, puis sélectionnez Documentation.

Mettre fin aux pensées

Le carrousel de produits Divi est facile à utiliser et idéal pour faire ressortir vos produits. Même si vous ne souhaitez pas les afficher sous forme de curseur, il propose de nombreuses options de style et de présentation de produits pour qu'il soit intéressant d'en tenir compte. Je n'ai pas très bien travaillé avec Extra. J'aimerais voir Extra pris en charge car il possède déjà de nombreuses fonctionnalités WooCommerce et constitue une excellente plate-forme pour créer des magasins WooCommerce.

J'aime qu'il ait des démos téléchargeables. Ils incluent les arrière-plans et le style du module. Ceux-ci sont parfaits pour vous donner un point de départ ou stimuler votre imagination pour présenter vos produits WooCommerce dans vos mises en page Divi.

Si vous souhaitez présenter vos produits WooCommerce dans un carrousel, ou simplement avoir quelques options de conception supplémentaires, le module de carrousel de produits Divi vaut le détour. 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 carrousel de produits Divi ? Dites-nous ce que vous en pensez dans les commentaires.

Image en vedette Letters-Shmtters / shutterstock.com