Comment créer des titres de section collante avec Divi

La façon dont vous concevez vos pages est le reflet direct de votre marque. C'est pourquoi à un moment donné de votre brainstorming de conception, vous souhaiterez peut-être rechercher et ajouter des éléments de conception uniques à votre site Web qui vous aideront à générer un modèle sur toutes les pages. Une façon unique de mettre en évidence l'identité de votre site Web consiste à utiliser des titres de section collante. Ces titres de section collante suivront le comportement de navigation de vos visiteurs en restant en haut de leur navigateur. Dans ce tutoriel, nous allons vous montrer comment créer des titres de section collante à l'aide des options collantes de Divi. Les titres des sections collantes seront moins soulignés une fois que vos visiteurs feront défiler, mais seront suffisamment visibles pour qu'ils reconnaissent la section dans laquelle ils se trouvent. 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 les 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 !

Abonnez-vous à notre chaîne Youtube

1. Créer une conception de section

Ajouter une nouvelle section

Espacement

Commencez par ajouter une nouvelle section à la page sur laquelle vous travaillez. Ouvrez les paramètres de la section et appliquez un rembourrage supérieur et inférieur.

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

Ajouter la ligne n° 1

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 :

• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 1
• Largeur : 100 %
• Largeur maximale : 100 %

Ajouter un module de texte à la colonne

Ajouter du contenu H2

Maintenant, ajoutez un module de texte à la colonne de la ligne et insérez du contenu H2 de votre choix.

Paramètres de texte H2

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

• Police de la rubrique 2 : Poppins
• Titre 2 Poids de la police : semi-gras
• En-tête 2 Alignement du texte : Centre
• Titre 2 Couleur du texte : #000000
• Titre 2 Taille du texte :
  • Ordinateur de bureau : 20 vw
  • Tablette et téléphone : 28 vw

Ajouter la ligne n° 2

Structure des colonnes

Ajoutez une autre ligne juste en dessous de la précédente en utilisant la structure de colonnes suivante :

Dimensionnement

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
• Largeur : 100 %
• Largeur maximale : 100 %

Ajouter un module de texte à la colonne 2

Ajouter du contenu

Ensuite, ajoutez un premier module de texte à la colonne 2 avec un contenu descriptif de votre choix.

Paramètres de texte

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

• Police de texte : Poppins
• Couleur du texte : #000000
• Taille du texte:
  • Ordinateur de bureau : 2vw
  • Tablette : 4vw
  • Téléphone : 5vw
• Espacement des lettres du texte : -0.1vw
• Hauteur de la ligne de texte : 1,6 em

Dimensionnement

Modifiez également les paramètres de dimensionnement sur différentes tailles d'écran.

• Largeur:
  • Ordinateur de bureau : 70 %
  • Tablette et téléphone : 90 %
• Alignement du module : Centre

Ajouter un module d'image à la colonne 2

Télécharger une image

Passons au module suivant, qui est un module Image. Téléchargez une image de votre choix.

Dimensionnement

Passez à l'onglet conception du module et forcez la pleine largeur sur l'image.

• Forcer la pleine largeur : Oui

Espacement

Ajoutez également une marge supérieure.

• Marge supérieure : 100 pixels

Ajouter un module de bouton à la colonne 2

Ajouter une copie

Ensuite, nous avons un module de boutons. Ajoutez une copie de votre choix.

Paramètres des boutons

Modifiez les paramètres des boutons du module en conséquence :

• Utiliser des styles personnalisés pour le bouton : Oui
• Taille du texte du bouton :
  • Ordinateur de bureau : 1.5vw
  • Tablette : 2.5vw
  • Téléphone : 3.5vw
• Couleur du texte du bouton : #ffffff
• Couleur d'arrière-plan du bouton : #f6223e
• Largeur de la bordure du bouton : 0px
• Rayon de la bordure du bouton : 0px

• Police des boutons : Poppins
• Afficher l'icône du bouton : Oui
• Emplacement de l'icône du bouton : à gauche
• Afficher uniquement l'icône au survol pour le bouton : non

Espacement

Et complétez les paramètres du module en ajoutant des valeurs de remplissage personnalisées sur différentes tailles d'écran.

• Rembourrage supérieur :
  • Ordinateur de bureau et tablette : 3%
  • Téléphone : 5%
• Rembourrage inférieur :
  • Ordinateur de bureau et tablette : 3%
  • Téléphone : 5%
• Rembourrage gauche :
  • Ordinateur de bureau : 5vw
  • Tablette : 8vw
  • Téléphone : 12vw
• Rembourrage droit :
  • Ordinateur de bureau : 5vw
  • Tablette : 8vw
  • Téléphone : 12vw

Ajouter un module de texte à la colonne 2

Ajouter du contenu de liste à puces

Le prochain et dernier module que nous ajouterons à cette colonne est un autre module de texte. Ajoutez les éléments de liste de votre choix à la zone de contenu.

Paramètres de texte

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

• Police de texte : Poppins
• Couleur du texte : #000000
• Taille du texte:
  • Ordinateur de bureau : 2vw
  • Tablette : 4vw
  • Téléphone : 5vw
• Espacement des lettres du texte : -0.1vw
• Hauteur de la ligne de texte : 1,6 em

Paramètres de texte de la liste ordonnée

Apportez également quelques modifications aux paramètres de texte de la liste ordonnée.

• Couleur du texte de la liste commandée : #ff2340
• Hauteur de la ligne de liste commandée : 1,6 em
• Type de style de liste ordonnée : supérieur-romain
• Position de style de liste ordonnée : à l'extérieur

Ajouter une couleur de texte noire aux éléments de liste individuellement dans la zone de contenu

Ensuite, nous allons redonner du noir aux éléments en accédant à la zone de contenu et en ajoutant manuellement une couleur de texte noire à chacun des éléments de la liste.

Dimensionnement

Ensuite, nous allons modifier les paramètres de dimensionnement sur différentes tailles d'écran.

• Largeur:
  • Ordinateur de bureau : 70 %
  • Tablette et téléphone : 90 %
• Alignement du module : Centre

Espacement

Nous appliquerons également des valeurs de marge et de remplissage personnalisées aux paramètres d'espacement du module.

• Marge supérieure : 50px
• Rembourrage gauche : 5 %
• Rembourrage droit : 5 %

2. Appliquer l'effet collant au titre de la section

Ajouter un effet collant à la ligne

Maintenant que nous avons mis en place les bases de notre conception, il est temps de réaliser l'effet que vous avez pu voir dans l'aperçu de cet article. Pour ce faire, nous allons rendre toute notre première ligne collante en ouvrant les paramètres de ligne, en accédant à l'onglet avancé et en appliquant les paramètres suivants :

• Position collante : coller au sommet
• Limite collante inférieure : section
• Décalage des éléments collants environnants : Oui
• Transition par défaut et styles persistants

Modifier l'index Z de la ligne

Pour nous assurer que la ligne collante reste en dessous de la deuxième ligne de notre conception, nous allons attribuer un indice az de « 1 » à notre ligne collante. Lors du défilement, vous verrez la ligne collante et son module de texte passer sous les modules de la deuxième ligne.

• Indice Z : 1

Ajouter le mode de fusion de la colonne 2 (ligne n° 2)

Cependant, comme vous avez pu le remarquer dans l'aperçu de cet article, le titre de la section collante est visible à tout moment. Pour obtenir cet effet, nous allons ajouter un module de mélange à la deuxième colonne de notre deuxième ligne. Cela aidera à mélanger la ligne collante et les modules de la deuxième rangée, tout en maintenant un faible indice z pour la ligne collante.

• Mode de fusion : multiplier

Modifier les paramètres de texte Sticky H2

Nous appliquerons également des styles collants à notre module de texte dans la ligne 1. Commencez par changer la couleur du texte H2 dans un état collant et appliquez également une ombre de texte personnalisée.

• Couleur du texte collant H2 : #ffffff
• Titre 2 Ombre de texte : deuxième option (voir l'écran d'impression ci-dessous)
• Titre 2 Couleur de l'ombre du texte :
  • Par défaut : rgba(0,0,0,0)
  • Collant : rgba(0,0,0,0.08)

Modifier l'espacement du module de texte collant

Nous allons également modifier la position du module en utilisant une marge gauche collante négative dans les paramètres d'espacement

• Marge gauche collante : -35%

Augmenter la durée de transition du module de texte

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

• Durée de transition : 500 ms

3. Section de réutilisation

Cloner la section

Maintenant que nous avons une section terminée, y compris le titre de la section collante, nous pouvons réutiliser la section entière autant de fois que nous le souhaitons en la clonant.

Modifier le contenu du titre

Assurez-vous de modifier le contenu du titre dans la première ligne.

Faire correspondre la taille du texte à la longueur des caractères

Selon le nombre de caractères de votre nouveau titre H2, vous souhaiterez peut-être ajuster la taille du texte de l'en-tête 2.

Modifier tous les autres contenus et images

Et bien sûr, vous devrez également modifier tous les autres contenus de la section en double. C'est ça!

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 des titres de section collante qui suivent vos visiteurs tout au long de la conception que vous créez. Cet effet donne à votre design une dimension supplémentaire et une transition transparente. 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.