Comment faire glisser vers le bas pour révéler le titre et la légende de votre image de galerie avec Divi

Si vous créez un site Web où les images jouent un rôle central dans la conception, vous souhaiterez peut-être inclure une galerie à un moment donné. C'est là qu'intervient le module Divi Gallery. Il vous permet de sélectionner directement des images dans votre médiathèque et de les afficher dans une structure organisée. Par défaut, vous pouvez également afficher dynamiquement le titre et la légende de chaque image. Cependant, si vous cherchez à limiter la quantité de texte qui apparaît dans votre conception, vous pouvez faire glisser vers le bas pour révéler le titre et la légende d'une image lorsque vous la survolez. Dans ce tutoriel, nous allons vous montrer exactement comment faire cela. 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 !

https://youtu.be/p6Bh7wz3HMc

Abonnez-vous à notre chaîne Youtube

1. Téléchargez des images avec des titres et des légendes

Aller à la médiathèque

La première partie de ce didacticiel se concentre sur l'ajout d'images avec des titres et des légendes dans votre médiathèque. Pour y accéder, accédez à votre tableau de bord WordPress > Média > Bibliothèque.

Importer des images

Une fois là-bas, téléchargez les images que vous souhaitez inclure dans votre galerie.

Ajouter des titres et des légendes

Vous devrez ajouter un titre et une légende à chaque image individuellement. Pour un résultat optimal, essayez de conserver une longueur de texte similaire pour chaque image.

2. Créer un design avec Divi

Créer une nouvelle page ou ouvrir une page existante

Une fois vos images téléchargées, il est temps de construire le design dans Divi. Créez une nouvelle page ou ouvrez-en une nouvelle et activez le Visual Builder en haut.

Ajouter la section #1

Couleur de l'arrière plan

Ajoutez une nouvelle section à votre page et ouvrez les paramètres de la section. Appliquez la couleur d'arrière-plan suivante :

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

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, accédez à l'onglet conception et appliquez les marges supérieure et inférieure suivantes :

• Marge supérieure : 5 %
• Marge inférieure : 5 %

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 contenant du contenu H2.

Paramètres de texte H2

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

• Police de la rubrique 2 : Montserrat
• Titre 2 Taille du texte :
  • Ordinateur de bureau : 62 pixels
  • Tablette : 48px
  • Téléphone : 32 pixels
• Titre 2 Hauteur de ligne : 1,3 em

Dimensionnement

Modifiez également la largeur maximale du module sur différentes tailles d'écran.

• Largeur maximale:
  • Bureau : 500px
  • Tablette : 400px
  • Téléphone : 250px

Ajouter un module diviseur à la colonne 1

Visibilité

Le prochain et dernier module dont nous avons besoin dans la colonne 1 est un module diviseur. Assurez-vous que l'option "Afficher le diviseur" est activée.

• Afficher le diviseur : Oui

Ligne

Ensuite, passez à l'onglet Conception et modifiez la couleur de la ligne.

• Couleur de la ligne : #ffc000

Dimensionnement

Modifiez également les paramètres de dimensionnement du module.

• Poids du diviseur : 5px
• Largeur maximale : 100 pixels
• Hauteur : 5px

Ajouter un module de texte à la colonne 2

Ajouter du contenu

Dans la colonne 2, le seul module dont nous avons besoin est un module de texte avec un contenu de description.

Paramètres de texte

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

• Police du texte : Lato
• Hauteur de la ligne de texte : 2,2 em

Espacement

Appliquez également une marge supérieure.

• Marge supérieure : 50px

Ajouter la section #2

Ajoutez une autre section en dessous de la précédente.

Fond dégradé

Ouvrez les paramètres de la section et appliquez un arrière-plan dégradé.

• Couleur 1 : #ededed
• Couleur 2 : #ffffff
• Type de dégradé : Linéaire
• Position de départ : 20 %
• Position finale : 20 %

Espacement

Passez à l'onglet de conception de la section et supprimez tout le rembourrage supérieur et inférieur par défaut.

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

Ajouter la ligne n° 1

Structure des colonnes

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

Couleur de l'arrière plan

Sans ajouter encore de modules, ouvrez les paramètres de ligne et appliquez une couleur d'arrière-plan.

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

Dimensionnement

Passez ensuite aux paramètres de dimensionnement de la ligne et appliquez les modifications suivantes :

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

Espacement

Nous personnalisons également les valeurs de remplissage.

• Rembourrage supérieur : 150 px
• Rembourrage inférieur : 0px
• Rembourrage gauche : 5 %
• Rembourrage droit : 5 %

Ajouter un module de galerie à la colonne

Sélectionnez les images téléchargées

Il est temps d'ajouter les images, à l'aide d'un module Galerie ! Sélectionnez les images que vous avez téléchargées dans votre médiathèque dans la première partie de ce didacticiel.

Éléments

L'effet de survol n'a de sens que sur le bureau. Sur les écrans de plus petite taille, il n'y a pas de survol et le toucher déclenchera un effet de visionneuse à la place. Pour cette raison, nous affichons uniquement le titre et la légende sur le bureau, et nous les désactivons sur des écrans de plus petite taille. Nous désactivons également la pagination. Vous pouvez trouver ces options dans les paramètres des éléments.

• Afficher le titre et la légende
  • Bureau : Oui
  • Tablette et téléphone : non
• Afficher la pagination : Non

Disposition

Passez à l'onglet de conception du module et modifiez ensuite la mise en page.

• Disposition : Grille
• Orientation des vignettes : Portrait

Recouvrir

Nous modifions également les paramètres de superposition.

• Couleur de l'icône de superposition : #ffffff
• Couleur d'arrière-plan de la superposition : rgba(0,0,0,0.25)

Paramètres de texte

Ensuite, nous allons changer la couleur du texte dans les paramètres du texte.

• Couleur du texte : clair

Paramètres du texte du titre

Ensuite, nous allons styliser le texte du titre.

• Titre Titre Niveau : H3
• Police du titre : Montserrat
• Taille du texte du titre : 20 px

Paramètres du texte de la légende

Nous modifions également les paramètres du texte de la légende.

• Police de la légende : Lato
• Couleur du texte de la légende : #efefef
• Espacement des lettres de la légende : 0,5 pixels
• Hauteur de la ligne de légende : 1,9 em

Élément de la galerie CSS

Ensuite, nous passerons à l'onglet avancé. Une fois là-bas, nous ajouterons les lignes de code CSS suivantes à la boîte CSS du titre de l'élément de la galerie :

padding-top: 20px;
padding-left: 7%;
padding-right: 7%;

Légende de l'élément de la galerie CSS

Et nous utiliserons ces lignes de code à l'intérieur de la boîte CSS de la légende de l'élément de la galerie :

padding-top: 20px;
padding-left: 7%;
padding-right: 7%;
padding-bottom: 20px;

3. Appliquer l'effet de révélation

Ajouter un identifiant CSS au module Galerie

Maintenant que notre conception est en place, nous pouvons nous concentrer sur quelques étapes nécessaires pour créer l'effet de révélation. La première chose que nous allons faire est d'ajouter un identifiant CSS à notre module Galerie.

• ID CSS : divi-gallery

Ajouter un module de code sous le module de galerie

Ensuite, nous ajouterons un module de code sous le module de galerie.

Ajouter des balises de style

Pour créer l'effet, nous allons utiliser du code CSS. Pour préparer notre module de code pour ce code, nous placerons des balises de style à l'intérieur de la zone de code.

Insérer du code CSS entre les balises de style

Et nous allons copier-coller les lignes de code CSS suivantes entre les balises de style :

#divi-gallery .et_pb_gallery_item h3, #divi-gallery .et_pb_gallery_item p {
visibility: hidden;
opacity: 0;
transform: translateY(-50px);
background-color: #FE7541;
margin-bottom: 0px !important;
margin-top: 0px !important;
}
  
#divi-gallery .et_pb_gallery_item h3, #divi-gallery .et_pb_gallery_item p, #divi-gallery .et_pb_gallery_image {
-webkit-transition: 300ms all cubic-bezier(.4,0,.2,1);
-moz-transition: 300ms all cubic-bezier(.4,0,.2,1);   
-o-transition: 300ms all cubic-bezier(.4,0,.2,1); 
-ms-transition: 300ms all cubic-bezier(.4,0,.2,1);   
transition: 300ms all cubic-bezier(.4,0,.2,1); 
}

#divi-gallery .et_pb_gallery_item:hover h3, #divi-gallery .et_pb_gallery_item:hover p {
visibility: visible;
opacity: 1;
transform: translateY(0);
}
  
#divi-gallery .et_pb_gallery_item:hover div {
transform: translateY(-10px);
}

C'est ça! Enregistrez vos paramètres de page et quittez Visual Builder pour afficher le résultat lorsque vous survolez l'un des éléments de la galerie.

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 le module Galerie intégré de Divi. Plus précisément, nous vous avons montré comment faire glisser vers le bas pour révéler le titre et la légende d'une image lorsque vous la survolez sur le bureau. Cela vous aide à conserver une conception visuelle sans afficher trop de texte à la fois. 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.