Sélectionner une page


Trouvez-le sur le Divi Marketplace

Module carrousel Divi 2.0 est disponible sur le Divi Marketplace! Cela signifie qu’il a passé notre test et répond à nos normes de qualité. Vous pouvez visiter Équipement Divi sur le marché pour voir tous les produits disponibles. Les produits achetés sur Divi Marketplace sont livrés avec une utilisation illimitée du site Web et une garantie de remboursement de 30 jours (tout comme Divi).

Achat sur la marketplace Divi

Module carrousel DIVI est un plugin tiers pour Divi et Extra qui ajoute un curseur de carrousel avancé au Divi Builder. Vous contrôlez presque tout dans le module pour créer presque tous les types de carrousel dont vous pourriez avoir besoin pour votre site Web Divi ou Extra. Dans cet article, nous allons jeter un œil au module Divi Carousel et voir ce qu’il peut faire et à quel point il est facile à utiliser.

Installation et activation du module carrousel Divi

Téléchargez le plugin comme d’habitude et activez-le. Un nouvel élément de menu appelé DiviGear est ajouté au tableau de bord. Accédez à ce menu et ajoutez votre clé de licence.

Module carrousel Divi dans Divi Builder

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

Le module contient 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 que vous utilisez, d’activer les diapositives multiples, de définir la durée de transition, etc. Activer la diapositive du milieu, la boucle, la lecture automatique, la navigation par flèches, etc. sur la navigation de point. Définissez la distance de l’objet, 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 contient 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 réglages de couleur pour la navigation par flèche et par point.

L’onglet Avancé contient tous les champs CSS attendus, ainsi que les paramètres de visibilité et de transition. Des champs CSS pour le titre, le contenu, l’image et le bouton sont ajoutés.

Les paramètres des éléments de carrousel contiennent également les trois onglets. Ces paramètres écrasent tout ce qui est spécifié dans les paramètres du module principal. L’onglet Contenu contient une zone pour le contenu principal, le titre et le lien de l’image, les paramètres du bouton, les paramètres de l’image et l’arrière-plan.

L’onglet Conception contient les paramètres du texte du titre, du style de contenu (corps du texte), du bouton, de l’espacement et de l’ombre du champ. Ce sont les paramètres de conception par défaut qui apparaissent dans la plupart des modules Divi. L’onglet Avancé contient les paramètres de base de la plupart des modules.

Vous pouvez utiliser des images ou des symboles pour les paramètres d’image.

Ajoutez autant de diapositives que vous le souhaitez. Les diapositives sont affichées côte à côte en fonction du nombre que vous avez défini pour l’affichage. Ceci est réglé pour afficher quatre. Bien sûr, vous pouvez les faire glisser et les déposer dans l’ordre de votre choix.

Dans ce cas, j’ai ajusté l’espacement des éléments à 100. La principale différence montrée dans mon exemple est le texte. Moins de mots par ligne sont désormais affichés.

Cela utilise la navigation par flèches. Je l’ai configuré pour qu’il apparaisse à l’extérieur de la diapositive. J’ai réglé la distance de l’objet sur 1. C’est plus évident lorsque vous utilisez des couleurs d’arrière-plan.

J’ai configuré cela pour afficher deux diapositives. Il montre la navigation de point.

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 fonction montre ce qui distingue vraiment le module d’un curseur standard. Ce sont les paramètres par défaut.

Maintenant, j’ai mis la rotation à 100. Les diapositives sont inclinées encore plus en 3D vers la gauche de l’écran.

Voici la même torsion, mais sans l’ombre de couverture.

Exemples de modules carrousel Divi

L’une de mes utilisations préférées d’un carrousel est d’afficher les logos des clients ou des produits. Dans 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, répéter le défilement et le lire automatiquement pour que le visiteur n’ait pas à le parcourir.

Cela fonctionne également pour montrer les projets sur lesquels vous avez travaillé. Dans ce cas, 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 défini l’opacité de leur arrière-plan sur presque transparent.

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

Cela utilise l’effet de curseur de débordement. Ce sont les paramètres par défaut.

Dans ce cas, je l’ai réglé pour centrer la diapositive. Lorsqu’il est utilisé avec les paramètres de débordement, il centrera la diapositive du milieu et orientera les diapositives de chaque côté afin qu’elles soient face à face. Quatre diapositives s’affichent.

Ceci est réglé pour que 3 diapositives soient affichées. J’ai mis la rotation à 80.

Ceci est réglé pour que 6 diapositives soient affichées. La rotation est définie par défaut (50).

Cela montre 6 feuilles sans une feuille intermédiaire activée ou un trop-plein.

Cela montre 6 avec un film central activé.

Dans cet exemple, j’utilise le module comme curseur pour le menu des aliments. L’ajout d’une image, d’un texte et d’un bouton crée en fait un curseur 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 point. J’ai conçu l’icône de superposition et de superposition ainsi que les points pour les diapositives actives et inactives. Il s’intègre parfaitement dans la disposition du café.

Dans ce cas, j’ai ajouté la navigation par flèches et l’ai adaptée aux boutons. Je l’ai eu pour montrer les flèches en planant. Vous pouvez ajuster 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.

Cela utilise l’effet de couverture. Je passe la souris sur la diapositive de gauche pour voir la superposition et les flèches.

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

Dans ce cas, je n’utilise que des symboles. J’ai placé le module à côté d’un certain nombre de modules de présentation et mis en place 6 liens de médias sociaux. Ils sont conçus pour correspondre au texte de présentation. Cliquez sur l’icône pour ouvrir le réseau social. Je l’ai configuré pour qu’il glisse automatiquement toutes les secondes.

L’affichage de plusieurs diapositives coupera une partie d’une icône, ce qui donnera une bonne représentation visuelle lors de l’animation du curseur.

Dans cet exemple, je voulais créer un simple curseur pour le tableau des prix. J’ai simplifié les prix du pack d’aménagement de parcours de golf.

Maintenant, j’ai ajouté Box Shadow. Au début, je ne pouvais pas obtenir l’ombre verticale sous la feuille. Ensuite, j’ai trouvé les diapositives touchant les côtés du conteneur du module. J’ai ajouté un rembourrage de module, puis j’ai pu ajouter des ombres de boîte de tous les côtés des diapositives.

Vous pouvez également personnaliser le remplissage des boutons, des images et du contenu pour chaque diapositive individuellement. Dans cet exemple, je règle le rembourrage de la feuille à gauche.

J’ai ajouté des flèches et les ai conçues pour correspondre aux éléments de la mise en page.

Dans cet exemple, j’ai ajouté des images, changé l’ombre de la boîte et ajouté un peu plus de contenu pour que l’ombre de la boîte apparaisse 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 bouton, y compris les couleurs, le rayon de la bordure, la taille du texte et ajouté une ombre de champ pour correspondre aux diapositives.

Bien entendu, puisque le module contient une zone de contenu, vous pouvez ajouter tout type de contenu, y compris les médias. J’ai ajouté des images qui correspondent à la mise en page. Tout le contenu est placé sous le titre. Les images ont fière allure dans cet endroit.

Voici à quoi ressemble le module dans l’agencement du parcours de golf. La mise en page originale avait de nombreuses caractéristiques de prix. Lors de l’utilisation du module carrousel Divi, tous les prix sont toujours là, mais sont indiqués sur les diapositives. On dirait qu’il appartient à cette mise en page.


Cela fonctionne bien avec Extra aussi. Dans cet exemple, j’ai défini 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’ai pas ajouté de widgets pour la barre latérale, la taille est la même). Vous pouvez voir ici que le module répond.

Prix ​​du module carrousel Divi

Le module carrousel Divi est disponible à partir de Site Web du développeur. Il existe deux options:

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

Documentation et support du module carrousel Divi

La documentation est disponible dans le menu du tableau de bord DiviGear. Choisissez l’onglet Documentation. Voici des liens vers un didacticiel vidéo de 4 minutes sur la chaîne YouTube de DiviGear. Le support des tickets est fourni par Freshdesk.

Arrêtez de penser

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 correctement une diapositive, mais cela aurait pu être un problème pour moi. N’oubliez pas de donner à chaque diapositive une étiquette d’administrateur, sinon le nom de l’élément apparaîtra dans le module, ce qui rendra difficile de les distinguer.

J’aime le fait qu’il comporte 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 dans le curseur en haut et en ajouter encore plus à la zone de contenu.

Le module Divi Carousel est un excellent curseur de carrousel. Il est disponible à partir de Site Web du développeur et sur les marketplaces Divi.

Nous voulons de vos nouvelles. Avez-vous essayé Divi Carousel Module? Dites-nous ce que vous pensez dans les commentaires ci-dessous.

Image sélectionnée via Anatolir / shutterstock.com





Source link

Recent Posts