Comment créer des chevauchements de modules sur le défilement avec les effets de défilement de Divi

L'utilisation de chevauchements dans votre conception a gagné en popularité au cours des dernières années. Cela donne à votre conception un aspect et une sensation plus abstraits. En même temps, cela vous aide à économiser de l'espace, ce qui limite le défilement vertical requis. À l'intérieur de Divi, il existe plusieurs façons d'ajouter sans effort des chevauchements aux modules. Vous pouvez également faire un effort supplémentaire et ajouter une interaction de défilement ! Dans le didacticiel Divi d'aujourd'hui, nous allons vous montrer comment créer de subtils chevauchements de modules lors du défilement à l'aide de la marge négative et de l'effet de défilement vertical de Divi. Le design que nous recréons comprend une belle superposition d'images et 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 GRATUITEMENT The Module Overlaps on Scroll Layout

Pour mettre la main sur le module gratuit de chevauchements sur mise en page de défilement, vous devrez d'abord le 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 !

Étapes générales

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 incluez des rembourrages haut et bas personnalisés.

• Rembourrage supérieur : 10 %
• Rembourrage inférieur : 10 %

Ajouter la ligne n° 1

Structure des colonnes

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

Espacement

Sans ajouter encore de modules, ouvrez les paramètres de ligne et ajoutez une marge inférieure aux paramètres d'espacement.

• Marge inférieure : 100px

Ajouter le module de texte n°1 à la colonne

Ajouter du contenu H2

Il est temps d'ajouter des modules, en commençant par un premier module de texte contenant du contenu H2 de votre choix.

En-tête 2 Paramètres de texte

Modifiez les paramètres de texte H2 du module comme suit :

• Police du titre 2 : Abril Fatface
• Titre 2 Taille du texte : 100 px (ordinateur de bureau), 70 px (tablette), 60 px (téléphone)

Ajouter un module diviseur à la colonne

Visibilité

Le prochain module dont nous avons besoin est un module diviseur. Assurez-vous que l'option « Afficher le diviseur » est activée.

• Afficher le diviseur : Oui

Ligne

Passez à l'onglet Conception et modifiez les paramètres de ligne comme suit :

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

Dimensionnement

Modifiez également les paramètres de dimensionnement.

• Poids du diviseur : 6px
• Largeur : 10 % (ordinateur de bureau), 20 % (tablette), 30 % (téléphone)

Ajouter le module de texte #2 à la colonne

Ajouter du contenu

Le dernier module dont nous avons besoin dans cette ligne est un autre module de texte avec un contenu de description.

Paramètres de texte

Modifiez les paramètres de texte du module en conséquence :

• Police du texte : Karla
• Taille du texte : 18px
• Hauteur de la ligne de texte : 2,2 em

Ajouter la ligne n° 2

Structure des colonnes

Passons à la ligne suivante, qui utilise la structure de colonnes suivante :

Dimensionnement

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 d'image à la colonne 1

Télécharger la superposition

Dans la colonne 1, le premier module dont nous avons besoin est un module Image. Téléchargez le fichier image de superposition que vous pouvez trouver dans le dossier de téléchargement que vous avez pu télécharger au début de cet article.

Image de fond

Ensuite, téléchargez une image de fond de votre choix.

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

Dimensionnement

Forcez ensuite la pleine largeur sur le module image.

• Forcer la pleine largeur : Oui

Ajouter un module de texte à la colonne 1

Ajouter du contenu H3 et description

Passons au module suivant, qui est un module de texte contenant du contenu H3 et une description de votre choix.

Couleur de l'arrière plan

Changez la couleur d'arrière-plan du module.

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

Paramètres de texte

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

• Police du texte : Karla
• Taille du texte : 18px
• Hauteur de la ligne de texte : 2,2 em
• Couleur du texte : clair

Paramètres de texte H3

Apportez également quelques modifications aux paramètres de texte H3.

• Police du titre 3 : Abril Fatface
• Titre 3 Poids de la police : gras
• Titre 3 Taille du texte : 50px

Dimensionnement

Ensuite, accédez aux paramètres de dimensionnement et modifiez la largeur sur différentes tailles d'écran.

• Largeur : 70 % (ordinateur de bureau), 80 % (tablette), 100 % (téléphone)
• Alignement du module : Centre

Espacement

Nous utilisons également des valeurs de marge et de remplissage personnalisées.

• Marge supérieure : -26%
• Rembourrage supérieur : 15 %
• Rembourrage inférieur : 15 %
• Rembourrage gauche : 10 %
• Rembourrage droit : 10 %

Effet de défilement de mouvement horizontal

Et nous allons compléter les paramètres du module en ajoutant un mouvement horizontal aux effets de défilement dans l'onglet avancé.

• Activer le mouvement vertical : Oui
• Décalage de départ : 4
• Décalage moyen : 4 (à 5 %)
• Décalage de fin : 0 (à 10 %)
• Déclencheur d'effet de mouvement : milieu de l'élément

Ajouter un module de bouton à la colonne 1

Ajouter une copie

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

Alignement

Ensuite, passez à l'onglet Conception et modifiez l'alignement des boutons.

• Alignement des boutons : Centre

Paramètres des boutons

Ensuite, nous allons styliser 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 : #333333
• Couleur d'arrière-plan du bouton : #ffffff
• Largeur de la bordure du bouton : 0px
• Rayon de la bordure du bouton : 1px

• Police des boutons : Karla
• Poids de la police du bouton : gras

Espacement

Et nous allons compléter les paramètres du module en ajoutant des valeurs de marge et de remplissage personnalisées aux paramètres d'espacement du module.

• Marge supérieure : -4%
• Rembourrage supérieur : 2%
• Rembourrage inférieur : 2%
• Rembourrage gauche : 7%
• Rembourrage droit : 7 %

Cloner les modules dans la colonne 1 et placer les doublons dans la colonne 2

Une fois que vous avez terminé les modules de la colonne 1, vous pouvez cloner tous les modules et placer les doublons dans la deuxième colonne de la ligne.

Modifier l'image d'arrière-plan et le contenu

Assurez-vous de modifier l'image d'arrière-plan et le contenu.

Cloner la ligne entière

Ensuite, clonez la ligne entière autant de fois que vous le souhaitez.

Modifier les images d'arrière-plan et le contenu

Modifiez également les images d'arrière-plan et le contenu ici et le tour est joué !

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 créer de subtils chevauchements de modules lors du défilement avec les nouveaux effets de défilement de Divi. Nous avons efficacement combiné la marge supérieure négative avec l'effet de défilement vertical intégré de Divi pour élever l'apparence générale de notre conception. Le design que nous avons recréé comprenait une belle superposition d'images 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.