Tout ce que vous devez savoir sur le module de carrousel de groupe Divi 5

L'un des derniers modules de Divi 5, le carrousel de groupe, est là pour faciliter la création de carrousels et d'animations visuellement étonnants pour votre site Web Divi. Cet ajout puissant permet aux concepteurs Web de créer des carrousels de site Web engageants sans avoir besoin de plugins tiers ou de CSS personnalisés. Que vous créiez un portefeuille élégant, un magasin de commerce électronique ou un blog, le module de carrousel de groupe débloque de nouveaux niveaux de créativité.

Dans cet article, nous couvrirons tout ce que vous devez savoir sur le module de carrousel de groupe, avec des exemples et un guide étape par étape sur la façon de l'utiliser. Plongeons-nous!

Qu'est-ce que le module de carrousel de groupe?

Le module de carrousel de groupe dans Divi 5 vous permet de créer des carrousels et des curseurs dynamiques et accrocheurs qui peuvent ajouter un peu de mouvement et d'interactivité à votre site Web. Que vous présentiez des pièces de portfolio, des membres de l'équipe ou des produits, ce module polyvalent vous permet de créer pratiquement n'importe quel type de carrousel, y compris des post-basés qui extraient le contenu dynamiquement.

Chaque diapositive est une toile vierge, vous permettant d'ajouter n'importe quel module Divi, ce qui en fait un excellent outil pour les conceptions créatives et fonctionnelles.

Caractéristiques clés

Le module de carrousel de groupe est construit sur les fondations optimisées de Divi 5, garantissant des temps de chargement rapides et des transitions en douceur. L'interface de glisser-déposer de Divi 5 vous permet d'ajouter facilement des modules aux curseurs, avec des commandes réactives aux dispositions affinées pour le bureau, la tablette et le mobile, tout en conservant des performances rapides.

Diapositives personnalisables

Le module de carrousel de groupe offre un contrôle complet sur le nombre de curseurs, leur contenu et les paramètres d'animation. Vous pouvez ajuster les transitions de diapositive, le calendrier et les options de navigation pour créer une expérience utilisateur transparente qui correspond à votre vision.

Contenu dynamique avec Builder Loop

Intégré avec le constructeur de boucle de Divi 5, le module prend en charge les carrousels dynamiques en fonction des publications, des termes ou des données utilisateur. Par exemple, vous pouvez créer un carrousel de témoignage à l'aide de types de publication personnalisés et de champs personnalisés avancés (ACF), tirant automatiquement des revues de clients ou des études de cas sans avoir besoin de mises à jour manuelles.

Flexibilité de conception

Vous pouvez tirer parti des paramètres de conception de Divi 5 pour construire des styles de carrousel uniques. Appliquez des transformations, des filtres, des ombres de boîte ou des effets de survol des diapositives, et personnalisez les modules individuels du groupe pour créer des diapositives visuellement attrayantes qui gardent vos visiteurs engagés.

Comment utiliser le module de carrousel de groupe

La mise en place d'un carrousel de groupe dans Divi 5 est intuitive et flexible. Commencez par ajouter une ligne à une seule colonne à la page. Ensuite, sélectionnez le module de carrousel de groupe dans le constructeur visuel et ajoutez-le à votre page.

Dans l'onglet Contenu , cliquez pour étendre le menu déroulant des paramètres du carrousel .

Activez la rotation automatique , le mode central et définissez les diapositives pour s'afficher sur 3 .

Activer la navigation DOT-DOT dans le menu déroulant Elements. Vous pouvez laisser des flèches Show activées ou le désactiver.

Attribuer un style au premier groupe

Avec nos paramètres de carrousel en place, nous pouvons ajouter notre premier groupe. Cliquez sur l'icône des paramètres de groupe pour afficher les paramètres.

Dans l' onglet Contenu , développez le menu déroulant d'arrière-plan . Cliquez sur l'onglet Image d'arrière-plan, puis cliquez sur + Ajouter une image d'arrière-plan pour ajouter une image au groupe.

Ensuite, accédez à l' onglet Design . Développez le menu déroulant de mise en page et définissez le contenu de justifier pour terminer .

Ensuite, développez le menu déroulant d'espacement et ajoutez une marge de 5% à gauche et à droite de notre groupe. Cela ajoutera de la salle de respiration entre les groupes du carrousel.

Réglez le rembourrage supérieur à 100%. Appliquez un rembourrage de 25px à gauche et à droite.

Ajouter du contenu au premier groupe

Nous pouvons porter notre attention sur l'ajout de contenu à notre groupe. Cliquez sur l' icône Black + et ajoutez un module de diviseur .

Accédez à l' onglet Design . Développez le menu déroulant de ligne et modifiez la couleur en #FFFFFF .

Ensuite, développez l'onglet de dimensionnement. Réglez le poids du diviseur sur 4px et la largeur à 15% .

Ensuite, ajoutez un module d'en-tête au groupe. Donnez un titre à la tête .

Passez à l' onglet Design . Sous le texte de la tête , définissez le niveau d'en-tête sur H2 (ou tout autre en-tête que vous souhaitez) , sélectionnez Inter pour la police de cap , choisissez Light for the Font Weight, #FFFFFF pour la couleur du texte de cap et 2EM pour la taille du texte de cap .

Avant de duplication de notre groupe, revenons à l'onglet de conception et ajustez l' espace vertical à 10px. Cela éliminera tout espace vertical inutile entre les modules.

Ajout de groupes supplémentaires

Maintenant que notre premier groupe est conçu, nous pouvons copier le groupe stylé et simplement échanger notre contenu (image et titre d'arrière-plan) pour le carrousel. Dupliquez le groupe huit fois, et nous aurons neuf diapositives au total.

Après avoir dupliqué le groupe, votre carrousel de groupe devrait ressembler à ceci.

Bien que nous soyons ici, c'est une bonne idée de donner à chaque groupe un nom unique afin qu'ils soient plus faciles à identifier. Cliquez sur l'icône des paramètres du premier groupe et faites défiler vers le bas vers l'étiquette d'administration . Nommez le groupe Grèce.

Cliquez sur le 2e groupe dans le carrousel. Développez l' onglet d'arrière-plan et remplacez l'image par une nouvelle.

Dans l' onglet Contenu , n'oubliez pas d'ajouter un nom au champ d'étiquette d'administration . Ensuite, modifiez le titre du module d'en-tête vers le Maine .

Répétez les étapes avec tous les groupes supplémentaires. Une fois terminé, votre carrousel devrait ressembler à ceci. Pendant que dans le constructeur visuel, vous pouvez utiliser les points de navigation pour faire défiler le carrousel pour vous assurer que vous n'avez manqué aucune étape.

Comme vous pouvez le voir, le texte de certaines de nos diapositives est quelque peu difficile à lire. Nous pouvons corriger cela dans l'onglet Design au niveau du carrousel sans avoir à modifier chaque élément de groupe individuellement.

Personnalisation des groupes et des groupes actifs

Dans le module de carrousel de groupe, vous pouvez styliser des groupes actifs et inactifs. La clé est que le module de carrousel de groupe lui-même sert de toile vierge et que vous appliquez un style aux groupes de modules. Cela permet un niveau élevé de personnalisation, vous permettant de créer des dispositions et des effets uniques.

Maintenant que nous avons créé un carrousel de groupe, dirigez-vous vers l' onglet Design dans les paramètres du carrousel principal.

Développez le menu déroulant des groupes . Cet onglet contrôle les paramètres de conception des groupes de modules contenus dans le carrousel de groupe. Tous les paramètres que vous appliquez ici seront appliqués aux modules de groupe inactifs .

Développez l' onglet d'arrière-plan . Nous appliquerons un dégradé léger aux onglets inactifs pour nous assurer que le texte est lisible. Réglez le premier arrêt de gradient sur # 000000 avec une opacité de 0% . Ajustez légèrement le curseur vers la droite. Activez le gradient de place au-dessus de la bascule de l'image d'arrière-plan .

Réglez le 2e arrêt de dégradé sur # 000000 avec une opacité de 40% .

Activez le gradient de place au-dessus de la bascule de l'image d'arrière-plan .

Ensuite, localisez l' onglet Filtres . Nous réduirons la saturation dans les groupes inactifs pour donner aux images de fond un effet noir et blanc. Localisez le curseur saturé et réglez-le sur 0 .

Ensuite, développez le menu déroulant des groupes actifs et cliquez sur l'onglet d'arrière-plan . Appliquez les mêmes paramètres de dégradé que ci-dessus.

Assurez-vous d' activer le gradient de lieu au-dessus de la bascule de l'image d'arrière-plan .

Développez le menu déroulant des filtres dans des groupes actifs et ajustez le curseur de saturation à 75% . Cela ne colorera que l'élément de carrousel actif, permettant aux utilisateurs d'identifier la diapositive active dans le carrousel.

Personnaliser la mise en page réactive

Maintenant que notre carrousel de groupe est prêt pour les ordinateurs de bureau, nous utiliserons les points d'arrêt réactifs personnalisables de Divi 5 pour styliser la version mobile de notre carrousel. Par défaut, Divi 5 permet trois points d'arrêt. Vous pouvez utiliser les sept points d'arrêt disponibles si vous souhaitez plus de contrôle sur différentes tailles de périphériques. Cliquez sur le menu Ellipsis au milieu de la barre supérieure dans le constructeur visuel.

Activez les points d'arrêt que vous souhaitez et cliquez sur Enregistrer pour continuer.

Cliquez sur le point d'arrêt de la tablette pour afficher à quoi ressemblera la mise en page sur les tablettes. Faites défiler vers le bas vers les paramètres du carrousel et ajustez les diapositives pour afficher à 1 . Cela s'appliquera également à tous les points d'arrêt plus petits, comme le téléphone et le téléphone .

Enfin, cliquez sur le bouton Aperçu en haut à gauche de l'écran pour afficher votre carrousel de groupe dans un nouvel onglet.

Une fois terminé, votre carrousel de groupe doit ressembler à la vidéo ci-dessous.

C'est ça! La construction d'un carrousel de groupe dans Divi 5 est simple et offre des résultats incroyables.

Intégration avec le constructeur de boucle de Divi 5

Le constructeur de boucle de Divi 5 est une fonctionnalité puissante qui peut transformer le module de groupe en affichage de contenu dynamique. Cette fonctionnalité permet aux concepteurs de créer des carrousels automatisés dynamiques qui tirent le contenu directement à partir de WordPress, de transformer le contenu statique en affichages de produits, archives de catégorie ou carrousels membre d'équipe en quelques clics.

En intégrant Loop Builder au carrousel de groupe, Divi 5 autorise les utilisateurs à élaborer des carrousels sophistiqués et axés sur le contenu avec un travail manuel minimal, ce qui en fait une fonctionnalité exceptionnelle pour la conception Web dynamique.

Le constructeur de boucle permet au carrousel de groupe de se dérouler dynamiquement via des publications, des termes ou des données utilisateur, créant des carrousels qui reflètent automatiquement le dernier contenu de votre site. Étant donné que le constructeur Loop tire directement des données de votre base de données WordPress, vous pouvez facilement présenter des articles de blog, des catégories de produits ou des profils d'utilisateurs.

Par exemple, vous pouvez créer un carrousel de blog à l'aide d'un type de post ou d'un curseur de catégorie de produit à l'aide de termes WooCommerce, ce qui rend le module incroyablement polyvalent pour les besoins de contenu dynamique.

Exemples du monde réel du module de carrousel de groupe

La flexibilité du module de carrousel de groupe le rend adapté à divers cas d'utilisation. Voici quelques exemples du monde réel pour montrer ce qui est possible.

Curseur sur personnalité pleine largeur / plein écran

Dans cet exemple, nous avons créé un curseur pleine largeur / plein écran pour comporter des shakes pour un magasin de crème glacée. Nous définissons le carrousel pour afficher une diapositive à la fois, chacune contenant une image d'arrière-plan, deux titres et un bouton d'appel à l'action. Nous avons également défini l'animation pour passer à la diapositive suivante après un retard de 3 secondes. Vous pouvez réaliser ce look en définissant le carrousel de groupe et la section à 100VH.

Vitrine des membres de l'équipe

Lorsque vous souhaitez comporter des membres de l'équipe sur votre site Web, l'utilisation du module de carrousel de groupe est un excellent moyen de le faire. Dans cet exemple, nous avons configuré une disposition à 3 colonnes dans notre carrousel. Chaque diapositive comprend une tête de tête, un nom, un rôle et des liens de médias sociaux à l'aide du module Social Follow de Divi. Réglez le carrousel pour faire défiler une diapositive à la fois pour un look propre et professionnel.

Catégories présente

Le module du carrousel de groupe Divi 5 fonctionne parfaitement avec le constructeur de boucle. Cela vous permet de créer des curseurs engageants qui présentent les catégories de produits de votre site Web. Chaque diapositive tire dynamiquement le nom de la catégorie et l'image en vedette, ce qui en fait un excellent moyen de présenter vos produits. Dans cet exemple, nous utilisons les effets de filtre pour

Témoignages

Le module de carrousel de groupe est également idéal pour créer un curseur de témoignage. Vous pouvez facilement présenter vos meilleures avis clients, vos témoignages clients, etc. Grâce au module de carrousel de groupe, vous n'êtes plus limité aux colonnes statiques ou aux plugins externes.

Télécharger les fichiers

Télécharger gratuitement

Rejoignez la newsletter Divi et nous vous enverrons une copie du pack de mise en page Ultimate Divi Laying, plus d'autres ressources, astuces et astuces DiviM et gratuits. Suivez et vous serez un maître divi en un rien de temps. Si vous êtes déjà abonné, tapez simplement votre adresse e-mail ci-dessous et cliquez sur Télécharger pour accéder au pack de mise en page.

TÉLÉCHARGER

Vous vous êtes abonné avec succès. Veuillez vérifier votre adresse e-mail pour confirmer votre abonnement et accéder à des packs de mise en page de Divi Gratuit!

Déverrouiller les possibilités créatives avec le module de carrousel de Divi 5

Le module de carrousel Group de Divi 5 est un ajout puissant qui débloque de nouvelles possibilités pour créer des sites Web Divi dynamiques. De la création de curseurs de produits engageants aux témoignages, ce module facilite l'ajout de contenu interactif à vos sites Divi.

Maintenant que le fond de teint remanié de Divi 5 a ouvert la voie à plus de fonctionnalités, c'est le moment idéal pour plonger! Avez-vous déjà essayé le module de carrousel de groupe? Faites-nous savoir dans les commentaires ci-dessous.