Comment empiler des lignes sur le défilement avec les options collantes de Divi

Depuis que les options persistantes de Divi sont sorties, nous vous avons montré comment utiliser les différentes fonctionnalités tout au long de la création de votre site Web, en particulier à l'intérieur des en-têtes. Mais il existe de nombreuses façons d'utiliser les options persistantes pour améliorer l'expérience utilisateur que les gens ont sur votre site Web et faire briller votre site Web. Dans le tutoriel d'aujourd'hui, par exemple, nous allons vous montrer comment empiler des lignes lors du défilement avec les options persistantes de Divi. Dès qu'une rangée touche le haut de votre fenêtre, elle commence à descendre en dessous de la rangée suivante, ce qui donne un effet d'empilement magnifique. Nous recréerons le design à partir de zéro et vous pourrez également télécharger gratuitement le fichier JSON de la section !

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 The Row Stacking Layout GRATUITEMENT

Pour mettre la main sur la disposition d'empilement de rangées 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 un concept de première ligne

Ajouter une nouvelle section

Espacement

Dans la première partie de ce didacticiel, nous allons commencer à poser les bases de notre première rangée. Une fois que nous avons terminé de styliser les éléments de la première ligne, nous pouvons les réutiliser entièrement pour créer l'effet d'empilement de lignes. Ajoutez une nouvelle section à la page sur laquelle vous travaillez. Ouvrez les paramètres de la section et appliquez des valeurs de remplissage personnalisées sur différentes tailles d'écran.

• Rembourrage supérieur :
  • Bureau : 100 pixels
  • Tablette : 40 pixels
  • Téléphone : 25px
• Rembourrage inférieur :
  • Bureau : 100 pixels
  • Tablette : 40 pixels
  • Téléphone : 25px

Ajouter une nouvelle ligne

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 appliquez les paramètres de dimensionnement suivants :

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

Espacement

Ensuite, supprimez 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

Couleur de l'arrière plan

Ensuite, ouvrez les paramètres de la colonne 1 et appliquez une couleur de fond de votre choix.

• Couleur de fond : #2b343b

Image de fond

Utilisez également une image de fond. Si vous souhaitez utiliser ceux qui sont affichés tout au long de ce didacticiel, téléchargez le dossier zippé au début du didacticiel et téléchargez les images d'arrière-plan dans votre médiathèque.

• Taille de l'image d'arrière-plan : Ajuster

Espacement

Passez à l'onglet de conception de la colonne et appliquez ensuite les valeurs de remplissage suivantes sur différentes tailles d'écran :

• Rembourrage supérieur :
  • Ordinateur de bureau : 25 %
  • Tablette : 40 %
  • Téléphone : 50 %
• Rembourrage inférieur :
  • Ordinateur de bureau : 25 %
  • Tablette : 40 %
  • Téléphone : 50 %
• Rembourrage gauche : 5 %
• Rembourrage droit : 5 %

Paramètres de la colonne 2

Couleur de l'arrière plan

Ensuite, ouvrez la deuxième colonne et utilisez-y également une couleur d'arrière-plan.

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

Espacement

Avec quelques valeurs de remplissage personnalisées.

• Rembourrage supérieur : 13 %
• Rembourrage inférieur : 13 %
• Rembourrage gauche : 8%
• Rembourrage droit : 8 %

Boîte ombre

Et une ombre de boîte.

• Position verticale de l'ombre de la boîte : 20px
• Force de flou d'ombre de boîte : 50px
• Couleur de l'ombre : rgba(0,0,0,0.14)

Ajouter un module de texte à la colonne 1

Ajouter du contenu H2

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

Paramètres de texte H2

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

• Police de titre 2 : Alata
• Poids de la police de l'en-tête 2 : gras
• En-tête 2 Alignement du texte : Centre
• Titre 2 Couleur du texte : #ffffff
• Titre 2 Taille du texte :
  • Bureau : 200px
  • Tablette : 150px
  • Téléphone : 100 pixels
• Espacement des lettres de l'en-tête 2 : -1px

Position

Repositionnez également le module dans l'onglet avancé.

• Position : Absolu
• Emplacement : en haut à gauche
• Décalage vertical : 2%
• Décalage horizontal : 2%

Ajouter un module de bouton à la colonne 1

Ajouter une copie

Le prochain et dernier module dont nous avons besoin dans la colonne 1 est un module de bouton. Ajoutez une copie de votre choix.

Paramètres des boutons

Passez à l'onglet de conception du module et stylisez le bouton en conséquence :

• Utiliser des styles personnalisés pour le bouton : Oui
• Taille du texte du bouton : 20px
• Couleur du texte du bouton : #ffffff
• Couleur d'arrière-plan du bouton : #83a5bf
• Largeur de la bordure du bouton : 0px
• Rayon de la bordure du bouton : 1px
• Police des boutons : Alata

Espacement

Ajoutez ensuite des valeurs de remplissage personnalisées.

• Rembourrage supérieur : 20 px
• Rembourrage inférieur : 20px
• Remplissage gauche : 50px
• Rembourrage droit : 50 px

Position

Et repositionnez le module dans l'onglet avancé.

• Position : Absolu
• Emplacement : En bas à droite

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

Ajouter du contenu H3

Passons à la deuxième colonne. Ajoutez un premier module de texte avec du contenu H3 de votre choix.

Paramètres de texte H3

Passez à l'onglet conception du module et appliquez les styles de texte H3 suivants :

• Police de la rubrique 3 : Alata
• Titre 3 Poids de la police : gras
• Titre 3 Couleur du texte : #ffffff
• Titre 3 Taille du texte : 40 px

Ajouter le module diviseur à la colonne 2

Visibilité

Sous le premier module de texte, nous ajouterons un module de séparation. Assurez-vous que l'option "Afficher le diviseur" est activée.

• Afficher le diviseur : Oui

Paramètres de ligne

Passez à l'onglet de conception du module et modifiez la couleur de la ligne.

• Couleur de la ligne : #f3f0ee

Dimensionnement

Modifiez également les paramètres de dimensionnement.

• Poids du diviseur : 5px
• Largeur : 19%
• Hauteur : 5px

Espacement

Et complétez les paramètres du module en ajoutant une marge inférieure aux paramètres d'espacement.

• Marge inférieure : 20 %

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

Ajouter du contenu

Ajoutez un autre module de texte juste en dessous du module de séparation. Entrez un contenu de description de votre choix.

Paramètres de texte

Stylisez le texte du module en conséquence :

• Police du texte : Montserrat
• Couleur du texte : #ffffff
• Taille du texte:
  • Bureau : 15 pixels
  • Tablette et téléphone : 14 pixels
• Hauteur de la ligne de texte : 2 em

2. Transformez la ligne en élément d'empilement

Paramètres de ligne

Indice Z

Maintenant que notre première rangée est en place, il est temps d'appliquer les paramètres d'empilement des rangées persistantes. Nous appliquerons ces paramètres avant de cloner notre ligne pour une réutilisation afin que l'effet d'empilement se produise automatiquement. Ouvrez les paramètres de ligne, accédez à l'onglet avancé et appliquez un index z de 1. Cet index z nous aidera à nous assurer que chaque ligne suivante est placée au-dessus de la précédente.

• Indice Z : 1

Paramètres collants

Ensuite, nous allons accéder aux paramètres des effets de défilement et appliquer les paramètres persistants suivants :

• Position collante :
  • Bureau : coller au sommet
  • Tablette et téléphone : ne collez pas
• Limite collante inférieure : section
• Décalage par rapport aux éléments collants environnants : Non

3. Réutiliser la ligne d'empilement dans la même section

Cloner la ligne x3

Maintenant que nos options persistantes ont été appliquées, nous pouvons réutiliser la ligne entière autant de fois que nous le souhaitons.

Modifications générales

Changer tout Copier

Assurez-vous de changer la copie dans chaque duplicata

Changer les couleurs et les images d'arrière-plan de la colonne 1

Avec les couleurs et les images d'arrière-plan de la colonne 1.

• Duplicata 1 : #edc1b6
• Duplicata 2 : #efe7e2
• Duplicata 3 : #f7f6f4

Changer les couleurs d'arrière-plan de la colonne 2

Nous utilisons également des couleurs différentes pour la deuxième colonne de chaque ligne en double.

• Duplicata 1 : #ffd1c1
• Duplicata 2 : #fff8f2
• Duplicata 3 : #fffaf7

Changer les couleurs d'arrière-plan des boutons

Ensuite, nous allons modifier les couleurs d'arrière-plan des boutons dans chaque ligne en double.

• Duplicata 1 : #c18a7a
• Duplicata 2 : #bab5b2
• Duplicata 3 : #c98f7d

Modifications apportées aux lignes avec des couleurs d'arrière-plan claires

Changer les couleurs du texte

Et enfin, nous allons changer la couleur du texte pour chaque module de texte dans les lignes avec une couleur d'arrière-plan plus claire. C'est ça!

• Couleur du texte : #2b343b

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 dans la conception de votre page. Plus précisément, nous vous avons montré comment empiler des lignes pour créer un design et une expérience utilisateur attrayants. Nous avons recréé un bel exemple de conception à partir de zéro et 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.