Comment construire un curseur complet personnalisé avec Divi 5 (téléchargement gratuit)

L'une des dernières versions de Divi 5 présente le module de carrousel de groupe, une fonctionnalité pour créer des curseurs et des carrousels personnalisés et engageants pour votre site WordPress. Vous pouvez facilement présenter votre portefeuille, vos produits, un héros immersif ou un curseur plein écran, et apporter la conception de votre site à de nouveaux sommets.

Dans cet article, nous fournirons un guide étape par étape pour créer un curseur complet à l'aide du module de carrousel de groupe. Plongeons-nous!

Comprendre le module de carrousel de groupe

Le module de carrousel de groupe est un ajout polyvalent à Divi 5, vous permettant de créer des curseurs et des carrousels dynamiques.

Contrairement aux modules traditionnels, il prend en charge une large gamme de mises en page, des simples carrousels d'image aux curseurs complexes et post-basés alimentés par le constructeur de boucle. Cette flexibilité le rend parfait pour présenter du contenu comme des portefeuilles, des témoignages ou des galeries de produits de manière convaincante.

Caractéristiques clés du module de carrousel de groupe

Le module de carrousel de groupe brille avec des fonctionnalités robustes. Il prend en charge les boucles de contenu dynamiques, vous permettant de retirer directement des publications, des pages ou des types de messages personnalisés dans votre curseur à l'aide du constructeur de boucle.

Le module vous permet également d'utiliser n'importe quel module Divi pour construire de beaux curseurs engageants à l'aide de lignes imbriquées et de groupes de modules. Vous pouvez personnaliser la navigation avec des flèches et des points de pagination, personnaliser leur position, leur couleur et d'autres styles pour correspondre à votre site.

Les options de lecture automatique, les vitesses réglables et les fonctionnalités de pause sur le maintien offrent une expérience accrocheuse à vos visiteurs, en vous assurant qu'ils restent sur votre site plus longtemps. De plus, le module est entièrement personnalisable, vous permettant de créer des dispositions en plein écran et FullWidth, ce qui le rend idéal pour les sections de héros, de service ou de fonctionnalités sur votre site Web.

Comment construire un curseur plein écran avec le module de carrousel de groupe Divi 5

Dans ce tutoriel, nous vous montrerons comment utiliser le module de carrousel de groupe pour créer un curseur plein écran pour vos prochains sites Web Divi 5. À la fin, vous aurez les compétences pour construire des curseurs captivants pour encourager vos visiteurs à agir.

Étape 1: Configuration d'une nouvelle page

Créez une nouvelle page, ajoutez un titre et cliquez sur Utiliser Divi Builder pour commencer.

Lorsque le constructeur visuel s'ouvre, choisissez Build à partir de zéro sous les options de création de votre page .

Survolez la section de votre nouvelle page pour révéler l' icône des paramètres . Cliquez dessus pour révéler les paramètres de la section.

Accédez à l' onglet Design . Cliquez sur le menu déroulant de mise en page . Sous Justifier le contenu , sélectionnez Centre . Dans le champ Align Items , sélectionnez Centre . Cela permettra au contenu de notre section d'être centré horizontalement et verticalement.

Ensuite, nous allons ajuster les paramètres d'espacement de la section. Développez le menu déroulant d' espacement . Réglez la marge sur 0px , en haut et en bas. Sous -rembourrage , réglez le haut et le bas sur 0px .

Avec les paramètres de la section en place, cliquez sur l' icône Green + pour ajouter une nouvelle ligne.

Sélectionnez la ligne de colonne unique sous des colonnes égales .

Ensuite, ajoutez le module de carrousel de groupe à la ligne.

Avant d'ajouter du contenu, nous devons configurer le module de carrousel de ligne et de groupe avec Flexbox et les commandes d'espacement.

Étape 2: Configurer les paramètres de ligne

La création d'un curseur complet nous oblige à régler la ligne et le module de carrousel de groupe à 100% de largeur . Cliquez sur l' icône Calques pour ajuster facilement les sections. Ceci est crucial lorsque vous travaillez avec des sections et des lignes FullWidth, surtout lorsque le rembourrage et la marge ont été définis sur 0. Il est plus facile de voir la structure de mise en page de votre page

Dans la vue des calques, cliquez pour sélectionner la ligne à une seule colonne qui abrite le module de carrousel de groupe. Accédez aux paramètres de conception. Dans le menu déroulant de mise en page, ajustez l' écart horizontal à 0 .

Définissez également les éléments d'alignement pour centrer la ligne.

Réglez la largeur et la largeur maximale dans l'onglet de dimensionnement à 100%.

Dans l'onglet Espacement , définissez la marge supérieure et inférieure et le rembourrage sur 0px .

Étape 3: Configurer les paramètres du carrousel de groupe

Ensuite, nous allons configurer les paramètres du carrousel de groupe. Développez le menu déroulant des paramètres du carrousel dans l'onglet Contenu. Vous pouvez activer la rotation automatique sur, choisir la vitesse de rotation automatique au paramètre par défaut de 2000 ms et activer la pause sur le plan de survol .

Dans l' onglet Elements , désactivez la navigation sur les points et les flèches Afficher les flèches activées. Vous pouvez également choisir une icône personnalisée pour les flèches gauche et droite.

Cliquez pour développer l' onglet Flèches dans l'onglet Design. Attribuez #ffffff comme couleur de flèche , laissez la taille de la flèche au défaut de 48px par défaut et laissez la position de flèche définie à l'intérieur .

Développez l' onglet d'arrière-plan et attribuez # 000000 comme couleur d'arrière-plan .

Étape 4: Style le premier groupe

Nous pouvons ajouter du contenu à la première diapositive avec les paramètres de section, de ligne et de carrousel de groupe en place. Cliquez sur l' onglet Contenu dans le module de carrousel de groupe et cliquez sur l' icône Paramètres du groupe.

Développez le menu déroulant d'arrière-plan et sélectionnez l'onglet Gradient .

Cliquez sur le premier curseur de gradient pour attribuer une nouvelle couleur. Entrez # EFB648 dans le champ de couleur .

Ensuite, cliquez sur le curseur du 2e gradient et attribuez # F28F52 comme couleur.

Dans le champ de type gradient , sélectionnez circulaire .

Ensuite, accédez à l' onglet Design . Développez l' onglet Espacement et attribuez un rembourrage à 5% en haut et en bas du groupe.

Étape 5: Ajouter du contenu au premier groupe

Maintenant que les paramètres de notre groupe sont configurés, nous pouvons commencer à ajouter du contenu au groupe. Cliquez sur l' icône Black + pour ajouter un module.

Lorsque le module d'insertion ou la boîte de dialogue Row apparaît, cliquez sur l'onglet nouvelle ligne . Dans la section des colonnes égales , sélectionnez la ligne de colonne unique .

Ajouter un module d'en-tête

Sélectionnez et insérez le module d'en-tête .

Développez le menu déroulant de texte et entrez le jus d'orange comme titre .

Accédez à l' onglet Design . Développez le menu déroulant de texte de titre . Sélectionnez H1 comme niveau d'en-tête , utilisez Bebas Neue comme police d'en-tête , définissez le style de police d'en-tête en majuscule , l' alignement du texte de titre au centre , la couleur du texte de titre sur #FFFFFF et la taille du texte de titre à 20EM .

Utilisez les commandes réactives de Divi 5 pour ajuster la taille du texte de titre à 15em sur tablette et 8EM sur mobile.

Ajouter une nouvelle ligne

Ensuite, nous allons ajouter une nouvelle ligne sous la ligne à une seule colonne contenant le module d'en-tête. Cliquez sur l' icône Black + pour ajouter un nouveau module.

Cliquez sur l'onglet New Row . Sous les colonnes de décalage , choisissez l'option 1/4 + 1/2 + 1/4.

Dans l' onglet Design , développez l' onglet de dimensionnement et entrez 70% pour la largeur et la largeur maximale . Réglez l' alignement sur le centre .

Ajouter un module d'en-tête

Sélectionnez le module d'en-tête et ajoutez-le à la première colonne .

Donnez à la rubrique un titre et dirigez-vous vers l' onglet Design . Développez le menu déroulant de texte de titre . Sélectionnez H2 pour le niveau d'en-tête , Bebas Neue comme police de cap , majuscule en tant que style de police de cap , #FFFFFS en tant que couleur de texte de titre et 6EM comme taille de texte de titre .

Utilisez les commandes réactives de Divi pour ajuster la taille du texte de titre à 4EM .

Ajouter un module de texte

Ajoutez un module de texte sous la rubrique dans la première colonne. Entrez du texte du corps et passez à l' onglet Design . Sélectionnez Poppins comme police de texte , définissez la couleur du texte sur #FFFFFF et la taille du texte sur 16px .

Ajouter un module de bouton

Ajoutez un module de bouton sous le module de texte dans la première colonne. Attribuez du texte au bouton dans l'onglet Contenu et échangez-vous à l'onglet Conception. Développez le menu déroulant des bouton et activez les styles personnalisés pour le bouton . Développez ensuite le menu d'arrière-plan des bouton . Dans l'onglet Couleur d'arrière-plan , ajoutez # 528BF2 comme couleur du bouton.

Utilisez les commandes de survol de Divi 5 pour attribuer # 6A7C9D comme couleur de survol du bouton.

Passez à la vue de bureau. Développez l'onglet déroulante de la bordure des boutons . Ajoutez 100px sous le rayon de la bordure du bouton et définissez la largeur de la bordure du bouton sur 0px .

Développez le menu déroulant du texte du bouton . Attribuez des poppins en tant que police bouton , #FFFFF comme couleur de texte du bouton et 16px comme taille du texte du bouton .

Développez les paramètres de l'icône du bouton et désactivez la bascule de l'icône du bouton Afficher .

Enfin, développez le menu déroulant d'espacement . Ajoutez un rembourrage 15px en haut et en bas et 35px à gauche et à droite.

Ajouter un module d'image

Placez un module d'image dans la deuxième colonne. Lorsque les paramètres apparaissent, survolez le champ d'image pour révéler les paramètres. Cliquez sur l'icône des paramètres pour charger la bibliothèque multimédia et télécharger une image sur le module.

Ensuite, nous allons ajouter une interaction à l'image pour créer un effet de souris. Accédez à l'onglet avancé . Développez le menu Interactions pour révéler ses paramètres. Cliquez sur le bouton Interaction Ajouter .

Sélectionnez Mouse Entrez lorsque les options apparaissent.

Entrez l'inclinaison de l'image dans le champ d'étiquette d'administration , sélectionnez la souris Entrez comme événement de déclenchement, le mouvement du miroir de la souris comme action d'effet, sélectionnez l'image comme module cible, inclinez comme type de mouvement et 15 pour la sensibilité. Enfin, cliquez sur le bouton Enregistrer l'interaction pour activer l'interaction.

Ajouter un module de compteurs de barres

Cliquez pour ajouter le module Bar Compters dans la 3e colonne. Dans l'onglet Contenu. Dans l'onglet Elements , désactivez le pourcentage d'affichage .

Ensuite, développez l'onglet d'arrière-plan. Ajoutez #ffffff comme couleur d'arrière-plan.

Échangez dans l' onglet Design et développez le menu déroulant de la barre . Dans le champ de couleur d'arrière-plan de la barre , ajoutez # 528BF2 comme couleur.

Développez le menu déroulant du texte de titre . Dans le champ de police de titre , sélectionnez Bebas Neue . Sélectionnez #ffffff comme couleur de texte de titre et 22px comme taille de texte de titre .

Passez à l'onglet Contenu. Cette fois, cliquez sur l'icône des paramètres pour le premier élément de compteur de barre.

Entrez le texte dans le champ de titre et définissez le champ en pourcentage sur 75 .

Cliquez pour revenir à l'onglet Contenu principal du module Bar Compters.

Maintenant que nos paramètres de conception sont définis, vous pouvez facilement copier le premier élément de compteur de bar pour préserver les paramètres.

Dupliquez l'élément de compteur de barre et modifiez le titre et le pourcentage des paramètres souhaités.

Étape 6: Ajouter des animations

Pour rendre le groupe plus immersif, nous ajouterons des effets d'animation. Tout d'abord, nous allons ajouter un effet de zoom à notre rubrique principale. Cliquez pour sélectionner la rubrique principale du groupe. Accédez à l'onglet Design et faites défiler vers le bas pour étendre l'onglet Animation. Sélectionnez Zoom pour l'animation. Laissez tous les paramètres tels quels.

Ensuite, cliquez pour agrandir la 2ème ligne (ligne à trois colonnes). Cliquez dans les paramètres de la première colonne.

Cliquez sur l'onglet Conception et faites défiler vers le bas pour révéler l'onglet Animation. Choisissez la diapositive pour le style d'animation et le droit pour la direction d'animation. Laissez tous les autres paramètres tels quels.

Cliquez sur l'onglet Contenu principal de la ligne. Cette fois, sélectionnez la 3ème colonne. Accédez à l'onglet Design, développez l'onglet Animation et choisissez la diapositive> à gauche pour l'animation. Laissez les autres paramètres à leurs valeurs par défaut.

Étape 7: lignes qui se chevauchent

Pour ajouter un peu de flair supplémentaire à la disposition, nous allons ajuster la marge de la 2ème ligne pour créer un effet de chevauchement. Cela pousse la ligne vers le haut, lui permettant de chevaucher la tête principale pour un bel effet. Sélectionnez la 2ème ligne dans la disposition et accédez à l'onglet Design. Développez l'onglet Espacement pour révéler les paramètres. Dans la marge supérieure, définissez la valeur à -8%.

Ensuite, nous appliquerons une valeur d'index Z pour placer la 2ème ligne au-dessus du 1er. Accédez à l'onglet Avancé, développez les paramètres de position et appliquez 999999 au champ d'index Z.

Lorsque vous prévisualisez le curseur, vous verrez que la 2ème ligne a été poussée pour chevaucher légèrement la 1ère ligne, créant un bel effet de chevauchement.

Étape 8: Testez la réactivité

Avant de copier le premier groupe, c'est une bonne idée de tester la réactivité de la mise en page. Utilisez des points d'arrêt réactifs personnalisables de Divi 5 pour effectuer des ajustements.

Dans Divi 5, il y a maintenant 7 points d'arrêt au lieu de Divi 4's 3. Vous pouvez utiliser ces points d'arrêt pour vous assurer que votre disposition est incroyable sur n'importe quelle taille d'écran. Naviguez dans les points d'arrêt et effectuez les ajustements nécessaires avant de copier le premier groupe.

L'une des meilleures nouvelles fonctionnalités de Divi 5 est la possibilité de modifier l'ordre des colonnes pour les appareils mobiles. C'est un excellent moyen de garder la conception fonctionnelle et efficace sur toutes les tailles d'écran. Dans la vue mobile, sélectionnez la 2ème colonne de la 2ème ligne de notre disposition (ligne à 3 colonnes).

Dans l' onglet Contenu , développez l' onglet Ordre . De là, définissez l' ordre d'affichage sur -1 . Cela placera la colonne avec l'image en haut, permettant à l'image de recouvrir l'en-tête comme sur les vues de bureau et de tablette.

Étape 9: Duplication des groupes

Une fois que nous avons tout carré, nous pouvons facilement copier le premier groupe et modifier le gradient de fond, le texte et l'image sans répéter toutes les étapes. Dans l'onglet Contenu du groupe de carrousel principal, cliquez pour dupliquer le premier groupe.

Avant de copier, affectez une étiquette d'administration au groupe pour faciliter l'identification.

À partir de là, modifiez le titre, échangez l'image et attribuez un nouveau gradient d'arrière-plan au groupe. Utilisez # FC6A3C pour le premier curseur de gradient et # C52F00 pour la seconde.

Vous voudrez également modifier le bouton et les couleurs de compteur de barre en # 3DFCCA et # C52F00 en survol.

Nous devrons également ajuster le calendrier d'animation pour le 2e groupe. Cela garantit que les animations ne se chargeront pas pour les autres diapositives tant que le curseur progresse. Dans le module d'en-tête principal, accédez à l' onglet Design , développez le menu d'animation et définissez le retard d'animation à 2000 ms .

Faites de même pour la ligne à 3 colonnes. Dans les première et troisième colonnes , définissez le retard d'animation à 2000 ms .

Modifications du troisième groupe

Pour le 3ème groupe, utilisez # 71B953 et # 617A56 pour le dégradé de fond .

Pour le bouton et les modules de compteurs de bar , utilisez # BA54B3 et # 654F64 pour la couleur de survol.

Vous devrez également modifier le retard d'animation sur le module d'en-tête et les premières et troisième colonnes de la 2ème ligne à 4000ms .

Modifications au quatrième groupe

Pour le gradient d'arrière-plan , utilisez # AD52B7 et # AD52B7 .

Utilisez # 83B853 et # 83B853 pour les modules de comptoir et de bouton de barre.

Enfin, définissez le délai d'animation à 6000 ms sur la rubrique principale du groupe, ainsi que les première et troisième colonnes de la ligne à 3 colonnes.

Étape 10: Aperçu et enregistrer le curseur

La dernière étape consiste à enregistrer la mise en page et à le prévisualiser pour s'assurer qu'aucune étape n'a été manquée. Dans le constructeur visuel, cliquez sur le bouton Enregistrer dans le coin supérieur droit.

Cliquez sur le bouton Aperçu pour ouvrir la disposition dans un nouvel onglet.

Une fois terminé, votre curseur devrait ressembler à ceci:

C'est ça! Le module de carrousel de groupe est un nouvel ajout polyvalent à Divi 5. Il vous permet de créer des curseurs et des carrousels pour tout projet et propose des options de personnalisation illimitées.

Téléchargez la disposition du carrousel plein écran

Si vous souhaitez utiliser la mise en page que nous avons recréée dans ce post, vous pouvez y accéder via le formulaire ci-dessous. Une fois que vous avez téléchargé et dézippé le dossier, vous trouverez un fichier JSON. Accédez à votre bibliothèque Divi pour télécharger le fichier afin que vous puissiez accéder et l'utiliser pour toute page que vous créez.

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!

Construisez votre premier carrousel dans Divi 5 aujourd'hui

La création d'un curseur plein écran personnalisé avec le module de carrousel de groupe Divi 5 ouvre un monde de possibilités pour créer des expériences engageantes sur vos sites Web. Après les étapes de cet article, vous avez appris à utiliser les fonctionnalités du module, à partir d'options de personnalisation avancées comme les animations, les points d'arrêt réactifs et les effets interactifs. La flexibilité du module de carrousel de groupe vous permet de construire des diapositives pour tout ce que vous pouvez imaginer, tout en maintenant un look professionnel transparent sur toutes les tailles d'écran.

Téléchargez le dernier divi 5 public alpha, expérimentez le module de carrousel de groupe et faites-nous savoir ce que vous pensez dans les commentaires ou sur nos réseaux sociaux.