Comment changer de style sur le défilement sans mouvement à l'aide des options collantes de Divi

Si vous recherchez un style de conception épuré lors de la création d'un nouveau site Web, vous souhaiterez probablement trouver un moyen d'ajouter une dimension supplémentaire à votre site Web. Ce tutoriel sera tout à ce sujet. Nous allons vous montrer comment utiliser les options collantes de Divi pour changer les styles collants sans mouvement. Plus précisément, cela signifie que dès que les visiteurs passent devant une certaine partie de votre page, les styles de cette partie changeront mais les éléments resteront en place. Ce type d'effet est entièrement focalisé sur le comportement de l'utilisateur. Le changement de styles collants ne se produit que lorsque les gens le défilent, ce qui donne un beau résultat. Dans ce tutoriel, nous allons vous montrer étape par étape comment y arriver. Une fois que vous aurez compris l'approche, vous pourrez l'utiliser dans n'importe quel type de conception que vous construisez ! Vous pourrez également télécharger le fichier JSON gratuitement.

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 !

1. Créer une structure d'élément

Ajouter une nouvelle section

Visibilité

Commencez par ajouter une nouvelle section à la page sur laquelle vous travaillez. Ouvrez les paramètres de la section et masquez les débordements dans l'onglet avancé. Cela aidera à s'assurer qu'aucune barre de défilement horizontale n'apparaît.

• Débordement horizontal : masqué
• Débordement vertical : caché

Ajouter une nouvelle ligne

Structure des colonnes

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

Dimensionnement

Sans ajouter de modules, ouvrez les paramètres de ligne et modifiez les paramètres de dimensionnement en conséquence :

• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 1
• Égaliser les hauteurs de colonne : Oui
• Largeur : 100 %
• Largeur maximale : 2580px

Espacement

Supprimez ensuite tous les rembourrages supérieur et inférieur par défaut.

• Rembourrage supérieur : 0px
• Rembourrage inférieur : 0px

Paramètres de la colonne 1

Espacement

Ensuite, ouvrez les paramètres de la colonne 1 et appliquez des valeurs de remplissage personnalisées sur différentes tailles d'écran.

• Rembourrage supérieur :
  • Bureau : 200px
  • Tablette : 100 pixels
  • Téléphone : 80px
• Rembourrage inférieur :
  • Bureau : 200px
  • Tablette : 100 pixels
  • Téléphone : 80px

Indice Z

Augmentez également l'index z de cette colonne. Plus tard dans le didacticiel, nous créerons un chevauchement horizontal entre les colonnes 1 et 2. Nous augmentons l'index z pour garantir que les modules de la colonne 1 restent au-dessus des modules de la colonne 2.

• Indice Z : 11

Paramètres de la colonne 2

Couleur de l'arrière plan

Ensuite, nous allons ajouter une couleur d'arrière-plan à la colonne 2.

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

Espacement

Nous utiliserons également des valeurs de remplissage personnalisées sur différentes tailles d'écran.

• Rembourrage supérieur :
  • Bureau : 200px
  • Tablette : 150px
  • Téléphone : 100 pixels
• Rembourrage inférieur :
  • Bureau : 200px
  • Tablette : 150px
  • Téléphone : 100 pixels

Paramètres de la colonne 3

Espacement

Enfin, nous ajouterons également des valeurs de remplissage personnalisées à la colonne 3.

• Rembourrage supérieur :
  • Bureau : 200px
  • Tablette : 100 pixels
  • Téléphone : 50px
• Rembourrage inférieur :
  • Bureau : 200px
  • Tablette : 100 pixels
  • Téléphone : 50px
• Rembourrage gauche : 8%
• Rembourrage droit : 8 %

Ajouter un module de texte à la colonne 1

Ajouter une copie

Il est temps d'ajouter des modules, en commençant par un module de texte dans la colonne 1. Ajoutez un numéro à la zone de contenu.

Couleur de l'arrière plan

Modifiez ensuite la couleur d'arrière-plan.

• Couleur de fond : #efefef

Paramètres de texte

Passez à l'onglet Conception et modifiez les paramètres de texte en conséquence :

• Police du texte : Montserrat
• Couleur du texte : #ffffff
• Taille du texte : 100 pixels
• Hauteur de la ligne de texte : 1 em
• Alignement du texte : Centre

Dimensionnement

Modifiez ensuite la largeur.

• Largeur : 150px

Espacement

Ensuite, ajoutez un rembourrage haut et bas personnalisé.

• Rembourrage supérieur : 20 px
• Rembourrage inférieur : 20px

Position

Repositionnez également le module.

• Position : Absolu
• Emplacement : En bas à droite
• Décalage horizontal : -5%

Ajouter un module de texte à la colonne 2

Ajouter une copie H3 et H4

Passons à la deuxième colonne. Là, nous ajouterons un module de texte avec une copie H3 et H4.

Paramètres de texte

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

• Alignement du texte : Centre
• Couleur du texte : foncé

Paramètres de texte H3

Ensuite, modifiez les paramètres de texte H3.

• Police de l'en-tête 3 : affichage Playfair
• Titre 3 Alignement du texte : Centre
• Titre 3 Taille du texte :
  • Bureau : 90px
  • Tablette : 70 pixels
  • Téléphone : 60 pixels

Paramètres de texte H4

Stylisez également le texte H4.

• Police de la rubrique 4 : Montserrat
• Titre 4 Poids de la police : Léger

Dimensionnement

Ensuite, allez dans les paramètres de dimensionnement et appliquez une largeur « 100% ». Cela aidera à l'étape suivante, qui consiste à repositionner le module.

• Largeur : 100 %

Position

Complétez les paramètres du module en allant dans l'onglet avancé et en modifiant les paramètres de position comme suit :

• Position : Absolu
• Emplacement : En bas à gauche
• Décalage vertical : 20px

Ajouter un module de texte à la colonne 3

Ajouter du contenu H5 et paragraphe

Passons à la troisième colonne. Ajoutez un module de texte avec du contenu H5 et des paragraphes de votre choix.

Paramètres de texte

Passez à l'onglet conception du module et modifiez la police dans les paramètres de texte.

• Police du texte : Montserrat

Paramètres de texte H5

Stylisez également le texte H5.

• Police de la rubrique 5 : Montserrat
• Titre 5 Poids de la police : gras
• Titre 5 Taille du texte :
  • Ordinateur de bureau et tablette : 23 pixels
  • Téléphone : 18px

2. Changements clés pour créer un effet

Section

Supprimer le rembourrage de section

Maintenant que nous avons posé les bases de notre conception, nous pouvons commencer à créer l'effet de styles collants personnalisés que vous avez pu voir dans l'aperçu de cet article. La première étape pour obtenir cet effet est de s'assurer que les valeurs de remplissage supérieur et inférieur de votre section sont égales à zéro. Cela nous aidera à nous assurer que la section et la ligne commencent et se terminent au même point. Ceci est important lorsque nous ajoutons la position collante à notre rangée dans les étapes à venir. En fixant la limite au bas de la section, nous ne laissons aucune place à la ligne pour se déplacer. La ligne, cependant, deviendra collante pendant ces quelques secondes et mettra en évidence les styles collants modifiés dans notre conception.

• Rembourrage supérieur : 0px
• Rembourrage inférieur : 0px

Ligne

Tourner la ligne collante

Ouvrez les paramètres de ligne et rendez la ligne collante. Comme mentionné à l'étape précédente, il est important de s'assurer que la limite collante inférieure de notre ligne est la section. Comme il n'y a pas d'espace entre la fin de la rangée et la fin de la section, la rangée collante restera en place.

• Position collante : coller au sommet
• Décalage supérieur collant : 0px
• Limite collante inférieure : section
• Décalage des éléments collants environnants : Oui
• Transition par défaut et styles collants : oui

Couleur d'arrière-plan de la ligne collante

Il est temps de commencer à appliquer des styles collants à nos éléments ! Commencez par la couleur d'arrière-plan de la ligne.

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

Transition de ligne

Pour assurer une transition en douceur, nous allons augmenter la durée de transition dans l'onglet avancé de la ligne.

• Durée de transition : 500 ms
• Courbe de vitesse de transition : Facilité

Couleur d'arrière-plan de la colonne collante 2

Ensuite, nous allons changer la couleur de fond de la colonne collante 2.

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

Module de texte dans la colonne 1

Couleur de fond collante

Nous allons également changer la couleur d'arrière-plan du module de texte dans la colonne 1.

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

Couleur du texte collant

Avec la couleur du texte collant.

• Couleur du texte : #0a0a0a

Dimensionnement collant

Et nous allons augmenter la largeur du module dans les paramètres de dimensionnement.

• Largeur: 105%

Transition

Nous assurons une transition en douceur en modifiant la durée de transition du module dans l'onglet avancé.

• Durée de transition : 500 ms
• Courbe de vitesse de transition : Facilité

Module de texte dans la colonne 2

Couleur du texte collant

Ensuite, nous avons le module de texte dans la colonne 2. Nous allons changer la couleur du texte en clair dans un état collant.

• Couleur du texte : clair

Module de texte dans la colonne 3

Couleur du texte collant

Il en va de même pour le module de texte dans la colonne 3.

• Couleur du texte : clair

3. Cloner la section pour la réutilisation

Maintenant que nous avons terminé la première section, y compris l'effet de changement de style collant, nous pouvons réutiliser cette section autant de fois que nous le souhaitons en la clonant.

Changer tout Copier

Assurez-vous de modifier toutes les copies en double.

Ajouter une marge supérieure à la première section et une marge inférieure à la dernière section

Et enfin, nous ajouterons une marge supérieure à la première section et une marge inférieure à la dernière section. Cela nous aidera à éviter une transition immédiate avant que les gens ne commencent à faire défiler. C'est ça!

• Marge supérieure : 200px

• Marge inférieure : 200px

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 avons utilisé les options collantes de Divi pour modifier les styles collants sans ajouter de mouvement. Dès que les gens défilent devant une certaine partie de votre page, les styles du design changent, ce qui met en évidence cette partie spécifique de la page. 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.