Comment créer une belle section de héros en collision avec des colonnes sur Scroll avec Divi

Les effets de défilement de Divi apportent une tonne de nouvelles possibilités de conception aux sites Web que vous créez. Les interactions subtiles que vous choisissez d'ajouter peuvent vraiment aider à améliorer l'apparence générale de votre site Web. Tout devient encore meilleur dès que vous synchronisez les effets de défilement. Dans ce didacticiel, nous allons spécifiquement gérer la création d'une belle section de héros de collision de colonnes sur le défilement. La conception de la section héros fusionne deux colonnes différentes sur le défilement, ce qui à son tour aide à mettre en valeur la copie. Vous pourrez également télécharger le fichier JSON gratuitement !

Allons-y.

Aperçu

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

Bureau

Mobile

Téléchargez GRATUITEMENT la disposition de la section des héros en collision avec les colonnes

Pour mettre la main sur la disposition gratuite de la section des héros en collision de colonnes, vous devez 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 !

Recréer la disposition de la section de la section Hero

Ajouter une nouvelle section

Couleur de l'arrière plan

Commencez par ajouter une nouvelle section à la page sur laquelle vous travaillez. Ouvrez les paramètres de la section et modifiez la couleur d'arrière-plan.

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

Espacement

Supprimez également le rembourrage supérieur et inférieur par défaut de toutes les sections.

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

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 encore 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 : 100 %

Espacement

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

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

Débordements

Et masquer les débordements de la rangée.

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

Paramètres de la colonne 1

Espacement

Ensuite, ouvrez les paramètres de la colonne 1 et ajoutez des valeurs de remplissage personnalisées.

• Rembourrage supérieur : 15vw
• Rembourrage inférieur : 10vw
• Rembourrage gauche : 5vw
• Rembourrage droit : 5vw

Indice Z

Augmentez également l'index z de la colonne.

• Indice Z : 12

Paramètres de la colonne 2

Image de fond

Continuez en ouvrant les paramètres de la colonne 2 et 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
• Répétition de l'image d'arrière-plan : aucune répétition
• Mélange de l'image d'arrière-plan : normal

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

Ajouter du contenu H1

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

Paramètres de texte H1

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

• Police d'en-tête : Des ombres à la lumière
• Poids de la police d'en-tête : gras
• Couleur du texte de l'en-tête : #000000
• Taille du texte du titre : 6vw (ordinateur de bureau), 11vw (tablette), 13vw (téléphone)
• Espacement des lettres d'en-tête : -2px
• Hauteur de la ligne de cap : 1,2 em

Espacement

Ajoutez également une marge supérieure.

• Marge supérieure : 10vw

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

Ajouter du contenu

Insérez un autre module de texte avec un contenu de description de votre choix.

Paramètres de texte

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

• Police de texte : Open Sans
• Couleur du texte : #1e1e1e
• Taille du texte : 0.9vw (ordinateur de bureau), 1.9vw (tablette), 3vw (téléphone)
• Hauteur de la ligne de texte : 2,4 em

Espacement

Et ajoutez des valeurs de marge personnalisées sur différentes tailles d'écran.

• Marge supérieure : 4vw (ordinateur de bureau), 8vw (tablette), 12vw (téléphone)
• Marge inférieure : 4vw (ordinateur de bureau), 8vw (tablette), 12vw (téléphone)

Ajouter un module de bouton à la colonne 1

Ajouter une copie

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

Paramètres des boutons

Modifiez les paramètres des boutons du module comme suit :

• Utiliser des styles personnalisés pour le bouton : Oui
• Taille du texte du bouton : 1vw (ordinateur de bureau), 2vw (tablette), 3vw (téléphone)
• Couleur du texte du bouton : #ffffff
• Couleur d'arrière-plan du bouton : #000000
• Largeur de la bordure du bouton : 0px
• Rayon de la bordure du bouton : 100 pixels

• Police des boutons : Open Sans

Espacement

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

• Rembourrage supérieur : 1vw (ordinateur de bureau), 2vw (tablette), 3vw (téléphone)
• Rembourrage inférieur : 1vw (ordinateur de bureau), 2vw (tablette), 3vw (téléphone)
• Rembourrage gauche : 3vw (ordinateur de bureau), 5vw (tablette), 7vw (téléphone)
• Rembourrage droit : 3vw (ordinateur de bureau), 5vw (tablette), 7vw (téléphone)

Ajouter un module de texte à la colonne 2

Ajouter du contenu

Dans la deuxième colonne, le seul module dont nous aurons besoin est un module de texte. Entrez un contenu 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 : des ombres à la lumière
• Couleur du texte : rgba(0,0,0,0.25)
• Taille du texte : 9vw (ordinateur de bureau), 14vw (tablette et téléphone)
• Espacement des lettres du texte : -3px
• Hauteur de la ligne de texte : 1 em
• Alignement du texte : centre (bureau), gauche (tablette et téléphone)

Espacement

Ajoutez également des valeurs de remplissage personnalisées.

• Rembourrage supérieur : 5vw (ordinateur de bureau),
• Rembourrage inférieur : 60 vw (tablette et téléphone)
• Rembourrage gauche : 5vw (tablette et téléphone)

Appliquer des animations de défilement

Section

Mise à l'échelle vers le haut et vers le bas

Une fois tous vos modules en place, il est temps d'appliquer les effets de défilement ! Ouvrez d'abord les paramètres de la section et utilisez l'effet de mise à l'échelle suivant :

• Activer le Sclaing Up et Down
• Échelle de départ : 100 % (à 49 %)
• Mi-échelle :
  • Ordinateur de bureau : 70 % (à 100 %)
  • Tablette et téléphone : 100 % (à 100 %)
• Échelle de fin :
  • Ordinateur de bureau : 70 %
  • Tablette et téléphone : 100 %

Colonne 1

Mouvement horizontal

Continuez en ouvrant les paramètres de la colonne 1 et utilisez l'effet de mouvement horizontal suivant :

• Activer le mouvement horizontal : Oui
• Décalage de départ : 0
• Décalage moyen :
  • Ordinateur de bureau : 0 (à 65 %)
  • Tablette et téléphone : 0 (à 93 %)
• Décalage de fin :
  • Bureau : 6
  • Tablette et téléphone : 0

Mise à l'échelle vers le haut et vers le bas

Appliquez également un effet de mise à l'échelle vers le haut et vers le bas à la colonne.

• Activer la mise à l'échelle vers le haut et vers le bas : Oui
• Échelle de départ :
  • Ordinateur de bureau : 10 %
  • Tablette et téléphone : 100 %
• Mi-échelle :
  • Ordinateur de bureau : 90 %
  • Tablette et téléphone : 100 %
• Échelle finale : 100 %

Colonne 2

Mouvement horizontal

Ensuite, ouvrez les paramètres de la colonne 2 et utilisez les paramètres de mouvement horizontal suivants :

• Activer le mouvement horizontal : Oui
• Décalage de départ : 0
• Décalage moyen :
  • Ordinateur de bureau : 0 (à 53 %)
  • Tablette et téléphone : 0 (à 56 %)
• Décalage de fin :
  • Ordinateur de bureau : -6 (à 53 %)
  • Tablette et téléphone : 0 (à 100 %)

Entrée et sortie en fondu

Complétez les paramètres de colonne en ajoutant un effet de fondu entrant et sortant.

• Activer les fondus entrants et sortants : Oui
• Opacité de départ : 100 % (à 47 %)
• Opacité moyenne :
  • Ordinateur de bureau : 0 % (à 47 %)
  • Tablette et téléphone : 100 % (à 47 %)
• Mettre fin à l'opacité :
  • Ordinateur de bureau : 0 %
  • Tablette et téléphone : 100 %

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 utiliser de manière créative les effets de défilement de Divi pour créer une section de héros en collision avec les colonnes. Dès que les visiteurs défileront, les deux colonnes différentes et leurs éléments commenceront à fusionner. Ceci, à son tour, vous permettra de mettre encore plus l'accent sur la copie. 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.