Étiquetage des coins d'image dans une superbe grille de galerie avec Divi

Vous cherchez un moyen unique et magnifique d'afficher des images dans une galerie sur votre site Web ? Si c'est le cas, nous sommes sûrs que vous allez adorer cet article. Nous allons vous montrer comment couper les coins d'image avec les modules de texte dans le cadre d'un beau design qui reste 100% réactif sur toutes les tailles d'écran. C'est un excellent moyen d'ajouter des étiquettes numérotées à vos images tout en conservant un superbe design. Vous pourrez également télécharger gratuitement le fichier JSON de l'exemple de conception.

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.

Téléchargez GRATUITEMENT la disposition de la section de la galerie

Pour mettre la main sur la mise en page gratuite de la section de la galerie, vous devrez d'abord la télécharger en utilisant le 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 !

Abonnez-vous à notre chaîne Youtube

Commençons à recréer

Ajouter une nouvelle section

Espacement

La première chose à faire est d'ajouter une nouvelle section à la page sur laquelle vous travaillez. Ouvrez les paramètres de la section et supprimez tous les rembourrages supérieur et inférieur par défaut.

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

Ajouter une nouvelle ligne

Structure des colonnes

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

Couleur de l'arrière plan

Ajoutez ensuite une couleur de fond blanc.

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

Dimensionnement

Passez aux paramètres de dimensionnement et supprimez tout espace entre les colonnes, la ligne et la section en appliquant les paramètres suivants :

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

Espacement

Continuez en supprimant tous les rembourrages supérieur et inférieur par défaut.

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

Colonne 1, 2, 3 & 4 Élément principal

Maintenant, pour nous assurer qu'une structure à 4 colonnes est conservée sur toutes les tailles d'écran, nous allons nous assurer que chacune des colonnes conserve sa largeur de 25 % en ajoutant la ligne de code CSS suivante à chaque élément principal de colonne individuellement :

width: 25% !important;

Ajouter un module d'image à la colonne 1

Télécharger une image 1:1

Il est temps de commencer à ajouter des modules ! Ajoutez un nouveau module Image à la première colonne et téléchargez une image carrée de votre choix (ou utilisez-en une que vous pouvez trouver dans le dossier zippé que vous avez pu télécharger au début de cet article).

Boite à lumière

Activez ensuite l'option lightbox dans les paramètres du lien.

• Ouvrir dans Lightbox : Oui

Dimensionnement

Pour nous assurer que l'image reste réactive sur toutes les tailles d'écran, nous allons également activer l'option "Forcer la pleine largeur".

• Forcer la pleine largeur : Oui

Filtres par défaut

Nous modifions également la luminosité.

• Luminosité : 50%

Filtres de survol

Et nous le ramènerons à « 100 % » en survol.

• Luminosité : 100 %

Indice Z par défaut

Passez aux paramètres de visibilité et assurez-vous que l'index Z reste « 0 » dans son état par défaut.

• Indice Z : 0

Hover Z Index

Mais, au survol, nous voulons qu'il chevauche le module de texte d'étiquette numéroté que nous ajouterons dans les étapes à venir. Pour ce faire, nous allons augmenter la valeur de l'index Z de survol.

• Indice Z : 100

Clone Image Module 3 fois et place dans les colonnes restantes

Une fois que vous avez terminé le module Image dans la colonne 1, vous pouvez le cloner trois fois. Placez les doublons dans les trois colonnes restantes de la ligne.

Changer d'image

Modifie les images dans les doublons.

Ajouter la marge supérieure au module Image dans la colonne 2

Et ajoutez une marge supérieure au module Image dans la deuxième colonne.

• Marge supérieure : 24,7 vw

Ajouter un module de texte sous le module d'image #1

Ajouter du contenu

Le prochain module dont nous avons besoin dans la colonne 1 est un module de texte. Ajoutez un numéro à la zone de contenu.

Couleur de l'arrière plan

Modifiez ensuite la couleur d'arrière-plan. Cette couleur doit correspondre à la couleur d'arrière-plan que vous avez attribuée à la ligne.

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

Paramètres de texte

Passez à l'onglet Conception et modifiez les paramètres du texte.

• Police du texte : Lora
• Alignement du texte : à droite
• Couleur du texte : #000000
• Taille du texte : 3vw
• Hauteur de la ligne de texte : 3vw

Dimensionnement

Nous réduisons également la largeur du module.

• Largeur: 7vw

Espacement

Créez ensuite de l'espace pour le module dans les paramètres d'espacement.

• Rembourrage supérieur : 0.5vw
• Rembourrage inférieur : 2.5vw
• Rembourrage droit : 0.9vw

Indice Z

Et augmentez l'indice Z.

• Indice Z : 99

Cloner le module de texte 3 fois

Une fois que vous avez terminé les étapes générales du module de texte, vous pouvez le cloner trois fois.

Positionnement

Positionnez les doublons en conséquence :

Personnaliser les modules de texte

Module de texte #1

Marge supérieure négative

Il est temps de commencer à personnaliser les différents modules de texte en fonction de leur position ! Ouvrez le module de texte dans la colonne 1 et ajoutez une marge supérieure négative.

• Marge supérieure : -5.9vw

Boîte ombre

Nous ajoutons également une ombre de boîte en utilisant les paramètres suivants :

• Position horizontale de l'ombre de la boîte : 7vw
• Position verticale de l'ombre de la boîte : 5.9vw
• Force de propagation de l'ombre de la boîte : 0px
• Couleur de l'ombre : rgba(35,50,255,0.94)

Module de texte #2

Modifier la numérotation

Continuez en ouvrant le module de texte dans la deuxième colonne et modifiez le numéro.

Alignement du texte

Modifiez également l'alignement du texte.

• Alignement du texte : à gauche

Alignement des modules

Et modifiez l'alignement du module dans les paramètres de dimensionnement.

• Alignement du module : à droite

Espacement

Passez aux paramètres d'espacement et ajoutez une marge supérieure négative. Ajoutez également le rembourrage à gauche au lieu du côté droit.

• Marge supérieure : -6vw
• Rembourrage gauche : 0.9vw

Boîte ombre

Complétez la conception du module de texte en ajoutant une ombre de boîte.

• Position horizontale de l'ombre de la boîte : 7vw
• Position verticale de l'ombre de la boîte : -6vw
• Force de propagation de l'ombre de la boîte : 0px
• Couleur de l'ombre : #ededed

Module de texte #3

Modifier la numérotation

Passons au module de texte dans la colonne 3 ! Modifiez le numéro dans la zone de contenu.

Marge supérieure négative

Passez à l'onglet Conception et ajoutez une marge supérieure négative.

• Marge supérieure : -6vw

Boîte ombre

Utilisez également une ombre de boîte.

• Position horizontale de l'ombre de la boîte : -7vw
• Position verticale de l'ombre de la boîte : -6vw
• Force de propagation de l'ombre de la boîte : 0px
• Couleur de l'ombre : # ff2323

Module de texte n° 4

Modifier la numérotation

Passons au prochain et dernier module de texte. Modifiez également le numéro ici.

Alignement du texte

Ensuite, modifiez l'alignement du texte.

• Alignement du texte : à gauche

Alignement des modules

Modifiez également l'alignement du module dans les paramètres de dimensionnement.

• Alignement du module : à droite

Changer l'espacement

Modifiez ensuite les paramètres d'espacement.

• Marge supérieure : 24,7 vw
• Marge inférieure : -6vw
• Rembourrage gauche : 0.9vw

Boîte ombre

Et complétez la conception du module de texte en ajoutant une ombre de boîte avec les paramètres suivants :

• Position horizontale de l'ombre de la boîte : -7vw
• Position verticale de l'ombre de la boîte : -5.9vw
• Force de propagation de l'ombre de la boîte : 0px
• Couleur de l'ombre : # 000000

Cloner la ligne entière

Une fois que vous avez terminé la ligne, vous pouvez la cloner autant de fois que vous le souhaitez, en fonction du nombre d'images que vous souhaitez afficher.

Changer la numérotation et les images

Assurez-vous de changer toutes les images et les numéros et vous avez terminé !

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.

Dernières pensées

Dans cet article, nous vous avons montré comment créer une belle galerie avec des coins d'image étiquetés. C'est une façon unique de présenter vos images d'une manière esthétiquement attrayante. Vous avez également pu télécharger le fichier JSON au début du tutoriel. Si vous avez des questions ou des suggestions, assurez-vous de 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.