Comment construire une liste interactive sur le défilement avec les options collantes de Divi

Les options persistantes de Divi vous permettent d'ajouter sans effort des interactions aux pages que vous créez et concevez. Si vous cherchez un moyen de mentionner plusieurs éléments sans simplement créer une liste statique, vous apprécierez ce didacticiel. Aujourd'hui, nous vous montrons comment créer une liste interactive sur défilement à l'aide des options persistantes de Divi. Au fur et à mesure que les gens font défiler la section, différents éléments sont ajoutés à la liste sur la gauche. Cela permet de garder une vue d'ensemble. Vous pourrez également télécharger le fichier JSON gratuit !

Allons-y.

Aperçu

Avant de plonger dans le didacticiel, jetons un coup d'œil rapide au résultat sur différentes tailles d'écran.

Bureau

Mobile

Téléchargez la mise en page GRATUITEMENT

Pour mettre la main sur la mise en page gratuite, vous devrez d'abord la télécharger à l'aide du bouton ci-dessous. Pour accéder au téléchargement, vous devrez vous inscrire à notre liste de diffusion Divi Daily en utilisant le formulaire ci-dessous. En tant que nouvel abonné, vous recevrez chaque lundi encore plus de bienfaits Divi et un pack Divi Layout gratuit ! Si vous êtes déjà sur la liste, entrez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger. Vous ne serez pas « réinscrit » ni ne recevrez d'e-mails supplémentaires.

Télécharger les fichiers

Télécharger gratuitement

Rejoignez la newsletter Divi et nous vous enverrons par e-mail une copie du pack ultime de mise en page de la page de destination Divi, ainsi que des tonnes d'autres ressources, trucs et astuces Divi incroyables et gratuits. Suivez-le et vous serez un maître Divi en un rien de temps. Si vous êtes déjà abonné, saisissez 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 enregistré avec succès. Veuillez vérifier votre adresse e-mail pour confirmer votre abonnement et accéder aux packs de mise en page Divi hebdomadaires gratuits !

Créer une structure d'élément

Ajouter une nouvelle section

Couleur de l'arrière plan

Commencez par ajouter une nouvelle section à la page sur laquelle vous travaillez. Ajoutez une couleur d'arrière-plan à la section.

• Couleur d'arrière-plan : #f2f2f2

Ajouter une rangée

Structure des colonnes

Continuez en ajoutant une nouvelle ligne en utilisant la structure de colonnes suivante :

Dimensionnement

Sans ajouter encore de modules, ouvrez les paramètres de ligne et modifiez les paramètres de dimensionnement comme suit :

• Largeur : 100 %
• Largeur maximale : 100 %

Colonne 1 Couleur d'arrière-plan

Ensuite, ouvrez les paramètres de la colonne 1 et ajoutez une couleur d'arrière-plan.

• Couleur d'arrière-plan : #f2f2f2

Espacement de la colonne 1

Modifiez ensuite les paramètres d'espacement de la colonne.

• Rembourrage supérieur :
  • Tablette : 20px
  • Téléphone : 20px
• Rembourrage inférieur :
  • Tablette : 20px
  • Téléphone : 20px
• Rembourrage gauche : 3%
• Rembourrage droit : 3%

Indice Z de la colonne 1

Et augmentez l'index z de la colonne dans l'onglet avancé.

• Indice Z : 12

Ajouter le module de texte n° 1 à la colonne 1

Ajouter du contenu

Il est temps d'ajouter des modules, en commençant par un premier module de texte dans la colonne 1. Ajoutez du contenu de votre choix.

Paramètres de texte

Passez à l'onglet de conception du module et modifiez les paramètres de texte comme suit :

• Police du texte : affichage Playfair
• Poids de la police de texte : gras
• Style de police de texte : italique
• Couleur du texte : #bfbfbf
• Taille du texte:
  • Ordinateur de bureau : 2vw
  • Tablette : 5vw
  • Téléphone : 8vw
• Hauteur de la ligne de texte : 1 em

Ajouter le module de texte n° 2 à la colonne 2

Ajouter du contenu H3

Ajoutez un autre module de texte à la colonne avec du contenu H3 de votre choix.

Paramètres de texte H3

Passez à l'onglet de conception du module et modifiez les paramètres de texte H3 comme suit :

• Police de l'en-tête 3 : affichage Playfair
• Titre 3 Poids de la police : gras
• Titre 3 Couleur du texte : #000000
• Titre 3 Taille du texte :
  • Ordinateur de bureau : 3vw
  • Tablette : 10vw
  • Téléphone : 12vw

Espacement

Ajoutez ensuite une marge supérieure et inférieure personnalisée.

• Marge supérieure : 2vh
• Marge inférieure : 2vh

Échelle de transformation

Ensuite, appliquez certains paramètres d'échelle de transformation personnalisés.

• Les deux : 300 %

Transformer Traduire

Et complétez les paramètres du module en appliquant les paramètres de traduction de transformation suivants :

• Bas : 30 %

Ajouter un module diviseur à la colonne 1

Visibilité

Le dernier module dont nous avons besoin dans la colonne 1 est un module diviseur. Assurez-vous que l'option "Afficher le diviseur" est activée.

• Afficher le diviseur : Oui

Ligne

Passez à l'onglet de conception du module et modifiez les paramètres de ligne en conséquence :

• Couleur de la ligne : #000000
• Style de ligne : solide
• Position de la ligne : Haut

Dimensionnement

Modifiez également les paramètres de dimensionnement du module.

• Poids du diviseur : 4px
• Hauteur du diviseur : 4px

Ajouter un module d'image à la colonne 2

Laisser la zone d'image vide

Dans la colonne 2, le premier module que nous ajouterons est un module Image. Laissez la zone d'image vide.

Image de fond

Utilisez plutôt une image d'arrière-plan.

• Taille de l'image d'arrière-plan : couverture
• Position de l'image d'arrière-plan : Centre

Espacement

Et pour permettre à l'image d'arrière-plan d'apparaître, nous allons modifier les paramètres d'espacement comme suit :

• Marge supérieure:
  • Ordinateur de bureau : 15vh
  • Tablette et téléphone : 0vh
• Rembourrage supérieur : 33vh
• Rembourrage inférieur : 33vh

Ajouter un module de texte à la colonne 2

Ajouter du contenu

Le prochain et dernier module dont nous avons besoin est un module de texte sous le module d'image. Ajoutez du contenu de description de votre choix.

Paramètres de texte

Passez à l'onglet de conception du module et modifiez les paramètres de texte comme suit :

• Police du texte : cabine
• Couleur du texte : #000000
• Taille du texte:
  • Ordinateur de bureau : 1.2vw
  • Tablette : 2.3vw
  • Téléphone : 3.4vw
• Hauteur de la ligne de texte : 1,6 em

Espacement

Complétez les paramètres du module en modifiant les paramètres d'espacement du module en conséquence :

• Rembourrage gauche :
  • Tablette et téléphone : 5 %
• Rembourrage droit : 5 %

Appliquer des effets collants

Tourner la colonne #1 collante

Maintenant que tous les éléments sont en place, nous pouvons commencer à appliquer les paramètres collants. Ouvrez les paramètres de la colonne 1 et utilisez les paramètres persistants réactifs suivants dans l'onglet Avancé :

• Position collante : coller au sommet
• Limite collante inférieure
  • Bureau : Section
  • Tablette et téléphone : rangée
• Décalage des éléments collants environnants :
  • Bureau : Oui
  • Tablette et téléphone : non
• Transition par défaut et styles collants : oui

Module de texte n°1 dans la colonne n°1 : Paramètres persistants

Hauteur

Maintenant que la colonne 1 est devenue collante, nous pouvons commencer à appliquer des paramètres collants aux éléments à l'intérieur de cette colonne. Nous allons commencer par la hauteur du premier module de texte.

• Hauteur : 0px
• Hauteur collante: Auto

Opacité

Nous modifions également l'opacité.

• Opacité : 0%
• Opacité collante : 100 %

Module de texte n°2 dans la colonne n°1 : Paramètres persistants

Échelle de transformation

Ensuite, nous allons ouvrir le deuxième module de texte dans la colonne 1. Ramenez les valeurs d'échelle de transformation à « 100 % » dans un état collant.

• Collant les deux : 100 %

Transformer Traduire

Modifiez également les paramètres de traduction de la transformation collante.

• Fond collant : 0%

Transition

Et complétez les réglages du module en augmentant la durée de transition dans l'onglet avancé.

• Transition : 1000 ms

Module diviseur : paramètres collants

Largeur maximale

Enfin, nous allons également modifier la largeur maximale du module Divider.

• Largeur maximale : 0px
• Largeur maximale collante: 120px

Cloner la ligne deux fois

Une fois votre première ligne complétée, vous pouvez la cloner deux fois.

Modifier tout le contenu et les images

Assurez-vous de modifier tout le contenu et les images et vous avez terminé !

Aperçu

Maintenant que nous avons parcouru toutes les étapes, jetons un dernier coup d'œil au résultat sur différentes tailles d'écran.

Bureau

Mobile

Dernières pensées

Dans cet article, nous vous avons montré comment faire preuve de créativité avec les options persistantes de Divi. Plus précisément, nous vous avons montré comment créer une liste interactive sur défilement. Au fur et à mesure que les gens font défiler la conception de la section, différents éléments de votre liste sont rassemblés sur le côté gauche. Cela donne un aperçu structuré et vous aide à créer un design interactif. Vous pouvez utiliser cette approche pour tout type de liste que vous souhaitez partager sur vos pages ! Vous avez également pu télécharger le fichier JSON gratuitement. Si vous avez des questions ou des suggestions, n'hésitez pas à laisser un commentaire dans la section commentaires ci-dessous.

Si vous souhaitez en savoir plus sur Divi et obtenir plus de cadeaux Divi, assurez-vous de vous abonner à notre newsletter par e-mail et à notre chaîne YouTube afin que vous soyez toujours l'une des premières personnes à connaître et à tirer parti de ce contenu gratuit.