Comment exposer une grille d'images de section de héros secret dans Divi

Rifat Divi Tutorials Jun 27, 2021

Les sections Hero sont toujours considérées comme un excellent outil pour attirer l'attention des visiteurs. En outre, cela a inconsciemment donné le ton au site Web dans leur esprit. Donc, avoir une section de héros créatifs est une bénédiction pour l'entreprise. Divi est un merveilleux générateur de thèmes et de pages WordPress et il offre de nombreuses opportunités pour rendre la section héros de votre site Web magnifique. Plus tôt, nous avons vu comment concevoir une section de héros collante sur le défilement et aujourd'hui, nous verrons comment concevoir une section de héros où il y aura une grille d'images secrète qui se dévoilera lors du défilement. Cela semble excitant, non?

Passons directement au didacticiel.

Pic furtif

Ce sera le design que nous allons créer aujourd'hui et ce sera complètement responsive.

Vue du bureau

Vue mobile

Conception de la section des héros

Ouvrez une nouvelle page à partir de votre tableau de bord WordPress. Nommez-le comme vous le souhaitez et ouvrez-le avec Divi builder.

Créer des sites Web incroyables

Avec le meilleur constructeur de page Elementor

Commencer Maintenant

Ajout : Nouvelle section

Couleur de l'arrière plan

Nous allons ajouter une couleur de fond à notre section initiale. Ouvrez les paramètres de la section et ajoutez la couleur d'arrière-plan.

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

Espacement

Passez maintenant à l'onglet Conception de la section et effectuez quelques ajustements dans le rembourrage inférieur, car cela nous donnera plus d'espace pour une meilleure expérience de défilement.

  • Rembourrage inférieur : 120vh

Ajout : rang un

Structure des colonnes

Nous allons maintenant ajouter une nouvelle ligne à la section préparée. Suivez la structure de colonne indiquée.

Dimensionnement

Maintenant, avant d'ajouter d'autres modules, ouvrez le paramètre de ligne et modifiez les valeurs suivantes dans l'onglet Conception.

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

Espacement

Ajoutez maintenant de la marge en haut.

  • Marge supérieure : ordinateur de bureau : 10vh, tablette et téléphone : 5vh

Indice Z

Afin de maintenir notre séquence de conception, nous devons garder cette ligne sous la deuxième ligne. C'est pourquoi nous allons ajouter quelques valeurs d'index Z.

  • Indice Z : 10

Tous les paramètres de colonne

Comme nous en avons terminé avec les paramètres de la première ligne, ouvrez maintenant les paramètres pour chaque colonne et apportez les modifications expliquées ci-dessous.

Élément principal CSS

Ce code CSS est uniquement destiné aux appareils mobiles. Assurez-vous de les ajouter à chaque colonne individuellement.

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

Paramètres de la colonne 2

Indice Z

Ensuite, ouvrez les paramètres de la colonne 2 et ajoutez-y la valeur d'index Z. Cela amènera la colonne sur la suivante.

  • Indice Z : 12

Ajout : Module d'image à la colonne 1

Télécharger une image

Nous allons maintenant ajouter un module d'image à la colonne 1 et télécharger une image de notre choix.

Espacement

Depuis l'onglet conception du module et modifiez les paramètres d'espacement.

  • Marge inférieure : Tablette et téléphone : 10px
  • Marge de droite : Tablette et téléphone : 2%

Cloner le module d'image et remplir les colonnes restantes

Comme nous venons de terminer les paramètres du module, dupliquons trois fois le module entier et plaçons-le sur les colonnes restantes.

Maintenant, changez les images du reste des colonnes.

Modifier les paramètres d'espacement pour les images 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 : 10px
  • Marge de gauche : Tablette et téléphone : 2%
  • Marge droite : /

Ajout : deuxième rangée

Structure des colonnes

Ajoutez maintenant une nouvelle ligne à notre section principale.

Fond dégradé

Nous allons maintenant appliquer un fond dégradé à cette ligne nouvellement créée. Alors, ouvrez le paramètre et appliquez l'arrière-plan

  • 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, ajoutez un peu de rembourrage en haut et en bas.

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

Positionner

Maintenant que nous voulons placer la deuxième ligne sur la première, nous devons définir les paramètres de position en conséquence.

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

Ajout : module de texte à la colonne

Ajouter du contenu H1

Ajoutez maintenant un module de texte et du contenu de votre choix à la colonne.

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 : ordinateur de bureau : 120 pixels, tablette : 60 pixels et téléphone : 40 pixels
  • Espacement des lettres d'en-tête : ordinateur de bureau : -3px, tablette et téléphone : 0px
  • Ombre du texte de l'en-tête : sélectionnez : troisième option et couleur de l'ombre du texte de l'en-tête : rgba(0,0,0,0.4)

Dimensionnement

Ajustez maintenant l'alignement du module et la largeur maximale à partir des paramètres de dimensionnement.

  • Largeur maximale : 1070px
  • Alignement du module : Centre

Ajout : ; Module de boutons

Ajouter une copie

Le dernier module que nous ajouterons dans cette ligne est un module utton. Écrivez quelque chose selon votre besoin.

Alignement des boutons

Depuis 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 : 20 pixels, tablette : 16 pixels et 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

Ajoutez des valeurs de remplissage à partir des paramètres d'espacement.

  • Rembourrage supérieur : ordinateur de bureau et tablette : 20 pixels, téléphone : 15 pixels.
  • Rembourrage inférieur : ordinateur de bureau et tablette : 20 pixels, téléphone : 15 pixels.
  • 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.

Paramètres collants sur la section Hero

Paramètres collants de la première rangée

Maintenant, notre conception est terminée et il est temps de se concentrer sur les paramètres collants. Les paramètres collants suivants seront appliqués sur la première ligne, alors ouvrez les paramètres de la première ligne.

  • 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 %

Module d'image un paramètre collant

Espacement

Dans les paramètres du module d'image, accédez à l'onglet conception et ajoutez un espacement collant.

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

Transition

Augmentez également la durée de transition.

  • Durée de transition : 700 ms

Réglage du module d'image deux collant

Espacement

A partir des paramètres du module image 2, effectuez également quelques ajustements sur l'espacement.

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

Transition

Augmentez la durée de transition ici aussi.

  • Durée de transition : 1000 ms

Espacement collant du module d'image trois

Espacement

Maintenant, pour le troisième module d'image, utilisez les valeurs d'espacement suivantes :

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

Transition

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

  • Durée de transition : 700 ms

Espacement collant du module d'image quatre

Espacement

Ouvrez maintenant le dernier module d'image et effectuez les modifications.

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

Transition

Terminez maintenant le travail d'aujourd'hui en augmentant la durée de transition pour le quatrième module d'image.

  • Durée de transition : 1000 ms

Et nous avons terminé ! Enregistrez et quittez la page pour voir le résultat de notre conception d'aujourd'hui.

Aspect final

Voici donc notre design d'aujourd'hui. L'arrière-plan dégradé de la deuxième rangée monte en faisant défiler et les images de la première rangée apparaissent au fur et à mesure que nous définissons les valeurs. De cette façon, il semble plus interactif.

Vue du bureau

Vue mobile

Conclusion

Dans le tutoriel d'aujourd'hui, nous avons essayé de vous montrer avec quelle créativité vous pouvez innover dans la section héros d'un site Web en utilisant les options persistantes de Divi . Nous espérons que vous trouverez le tutoriel utile. Vous pouvez partager la publication afin que d'autres puissent également en bénéficier. Merci d'avoir lu ce post.