Comment révéler une grille d'images sous-jacente dans votre héros avec les options collantes de Divi

Créer une section de héros qui attire l'attention de vos visiteurs peut donner le ton au reste du site Web. Si vous cherchez un moyen créatif d'utiliser les options persistantes de Divi pour vous aider à y arriver, vous adorerez ce tutoriel. Aujourd'hui, nous vous montrons comment révéler une grille d'images sous-jacente dans votre héros avec les options collantes de Divi. Nous incluons une transition très fluide de la valeur par défaut à la version persistante 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 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 un design de héros

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 ajoutez une couleur d'arrière-plan.

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

Espacement

Accédez à l'onglet de conception de la section et ajoutez un rembourrage inférieur. Ce rembourrage inférieur nous donnera suffisamment d'espace pour créer l'expérience de défilement.

• Rembourrage inférieur : 120vh

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, accédez à l'onglet Conception et modifiez les paramètres de dimensionnement comme suit :

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

Espacement

Ajoutez ensuite une marge supérieure réactive.

• Marge supérieure:
  • Ordinateur de bureau : 10vh
  • Tablette et téléphone : 5vh

Indice Z

Et pour nous assurer que cette ligne reste en dessous de la deuxième ligne que nous ajouterons à cette section, nous utiliserons plus tard un index az de 10 dans l'onglet avancé.

• Indice Z : 10

Tous les paramètres de colonne

Une fois les réglages généraux des lignes terminés, ouvrez chacune des colonnes individuellement.

Élément principal CSS

Dans chacune des colonnes, appliquez les lignes de code CSS suivantes à l'élément principal du téléphone :

Téléphone uniquement :

width: 50% !important;
margin: 0 !important;

Paramètres de la colonne 2

Ensuite, ouvrez les paramètres de la colonne 2.

Indice Z

Et augmentez l'indice Z à 12. Cela mettra cette colonne au-dessus de la troisième colonne.

• Indice Z : 12

Ajouter un module d'image à la colonne 1

Télécharger une image

Il est temps d'ajouter des modules, en commençant par un module d'image dans la colonne 1. Téléchargez une image de votre choix.

Espacement

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

• Marge inférieure :
  • Tablette et téléphone : 10 pixels
• Marge droite :
  • Tablette & Téléphone : 2%

Cloner le module d'image trois fois et placer les doublons dans les colonnes restantes

Une fois que vous avez terminé les paramètres du module, vous pouvez cloner le module entier trois fois et placer les doublons dans les colonnes restantes de la ligne.

Changer d'image

Assurez-vous de modifier l'image dans chaque module en double.

Modifier l'espacement des modules d'image #2 et #4

Ensuite, ouvrez les paramètres des modules image dans les colonnes 2 et 4 et appliquez-leur les valeurs d'espacement suivantes :

• Marge inférieure :
  • Tablette et téléphone : 10 pixels
• Marge de gauche:
  • Tablette & Téléphone : 2%
• Marge droite : /

Ajouter la ligne n° 2

Structure des colonnes

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

Fond dégradé

Ouvrez les paramètres de ligne et appliquez l'arrière-plan dégradé suivant :

• Couleur 1 : #111111
• Couleur 2: rgba(255,255,255,0)

Dimensionnement

Modifiez ensuite les paramètres de dimensionnement.

• Largeur : 100 %
• Largeur maximale : 2580px

Espacement

Ensuite, appliquez un peu de rembourrage en haut et en bas.

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

Position

Pour placer cette ligne au-dessus de la grille d'image, nous allons utiliser les paramètres de position en conséquence :

• Position : Absolu
• Emplacement : Centre supérieur
• Indice Z : 12

Ajouter un module de texte à la colonne

Ajouter du contenu H1

Ajoutez un premier module de texte à cette ligne en utilisant 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 de titre : Kumbh Sans
• Poids de la police d'en-tête : gras
• Style de police d'en-tête : majuscule
• Alignement du texte de l'en-tête : Centre
• Couleur du texte du titre : #ffdbaa
• Taille du texte de l'en-tête :
  • Bureau : 120px
  • Tablette : 60px
  • Téléphone : 40 pixels
• Espacement des lettres d'en-tête
  • Bureau : -3px
  • Tablette et téléphone : 0px
• Ombre de texte d'en-tête :
  • Sélectionnez : troisième option
  • Couleur de l'ombre du texte de l'en-tête : rgba(0,0,0,0.4)

Dimensionnement

Modifiez ensuite les paramètres de dimensionnement.

• Largeur maximale : 900 pixels
• Alignement du module : Centre

Ajouter un module de bouton à la colonne

Ajouter une copie

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

Alignement des boutons

Passez à l'onglet Conception et modifiez l'alignement des boutons.

• Alignement des boutons : Centre

Paramètres des boutons

Ensuite, stylisez le bouton.

• Utiliser des styles personnalisés pour le bouton : Oui
• Taille du texte du bouton :
  • Bureau : 20px
  • Tablette : 16px
  • Téléphone : 14 pixels
• Taille du texte du bouton : #111111
• Couleur d'arrière-plan du bouton : #ffffff
• Largeur de la bordure du bouton : 0px
• Rayon de la bordure du bouton : 100 pixels

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

Espacement

Et utilisez des valeurs de remplissage réactif dans les paramètres d'espacement.

• Rembourrage supérieur :
  • Ordinateur de bureau et tablette : 20 pixels
  • Téléphone : 15px
• Rembourrage inférieur :
  • Ordinateur de bureau et tablette : 20 pixels
  • Téléphone : 15px
• Rembourrage gauche :
  • Ordinateur de bureau et tablette : 50 pixels
  • Téléphone : 40 pixels
• Rembourrage droit :
  • Ordinateur de bureau et tablette : 50 pixels
  • Téléphone : 40 pixels

2. Appliquer les paramètres collants

Tourner la rangée n° 1 collante

Maintenant que nous avons tous les éléments en place, nous pouvons nous concentrer sur les paramètres collants. Ouvrez les paramètres de la première ligne et appliquez les paramètres persistants 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 collants : oui

Opacité collante

Ensuite, modifiez l'opacité dans les paramètres des filtres.

• Par défaut : 20 %
• Collant : 100 %

Paramètres collants du module image n°1

Espacement

Ensuite, ouvrez les paramètres du module Image dans la colonne 1. Passez à l'onglet Conception et ajoutez des marges collantes en haut et à droite.

• Marge supérieure collante : -20 %
• Marge collante de droite : -20 %

Transition

Augmentez également la durée de transition.

• Durée de transition : 700 ms

Espacement collant du module image #2

Espacement

Passez au module Image dans la colonne 2 et utilisez les paramètres d'espacement collant suivants :

• Marge supérieure collante : 20 %
• Marge gauche collante : -30%

Transition

Augmentez la durée de transition ici aussi.

• Durée de transition : 1000 ms

Module d'image #3 Espacement collant

Espacement

Ensuite, nous avons le module Image dans la colonne 3. Utilisez les valeurs d'espacement suivantes :

• Marge supérieure collante : -10 %
• Marge gauche collante : -25%
• Marge droite collante : -25%

Transition

Modifiez la durée de transition en conséquence :

• Durée de transition : 700 ms

Module image #4 Espacement collant

Espacement

Et enfin, ouvrez le module Image dans la colonne 4. Appliquez les valeurs d'espacement suivantes :

• Marge supérieure collante : -20 %
• Marge gauche collante : -30%

Transition

Complétez les paramètres du module, et ce tutoriel, en augmentant la durée de transition. C'est ça! Enregistrez et quittez la page pour voir le résultat.

• Durée de transition : 1000 ms

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 votre section héros dans Divi. Plus précisément, nous vous avons montré comment révéler une grille d'images au défilement à l'aide des sections collantes de Divi. 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.