6 motifs de bordure uniques pour vos images de module de galerie Divi
Publié: 2019-02-28Le module Divi Gallery est l'endroit idéal pour présenter une galerie d'images sur votre site Web. Par défaut, le module de galerie affichera vos images dans une disposition en grille sans trop de style, ce qui est idéal pour conserver les images comme élément de conception principal. Cependant, si vous cherchez à faire preuve d'un peu de créativité, vous pouvez encadrer vos images avec différents motifs de bordure pour vous aider à faire ressortir votre galerie d'images. Le module Galerie rend ce processus assez facile à faire et les résultats peuvent vous surprendre.
Dans ce tutoriel, je vais vous montrer comment créer des bordures uniques pour vos galeries d'images à l'aide du module Divi Gallery.
Commençons!
Aperçu
#1 Galerie d'images Polaroid
Commencer la conception de bâtiments #1
#2 Conception de grille propre
Commencer la conception de bâtiments #2
#3 Image de fond personnalisée derrière toute la galerie
Commencer la conception de bâtiments #3
#4 Image d'arrière-plan personnalisée derrière chaque élément de la galerie
Commencer la conception du bâtiment #4
#5 Combo d'ombre et de bordure de boîte
Commencer la conception du bâtiment #5
#6 Conception de bordure de bande de film
Commencer la conception du bâtiment #6
Ce dont vous avez besoin pour commencer
Abonnez-vous à notre chaîne Youtube
Pour ce tutoriel, vous aurez besoin du thème Divi installé et actif. Vous aurez également besoin de 12 images ajoutées à votre médiathèque pour être utilisées pour la construction de la galerie d'images. Pour un module de galerie Divi utilisant une disposition en grille, la taille de vos images doit être d'environ 1500px par 800px si vous prévoyez que vos images s'ouvrent en affichage lightbox afin qu'elles remplissent bien l'écran sur la plupart des ordinateurs de bureau.
Configuration de votre nouvelle page
Pour commencer, vous devrez créer une nouvelle page, donner un titre à votre page et déployer le Divi Builder. Sélectionnez l'option « Créer à partir de zéro », puis publiez votre page. Cliquez ensuite pour construire sur le front-end.
Enregistrer un modèle de module Divi Gallery
Puisque nous allons concevoir 5 styles de bordure différents pour le module Divi Gallery, il serait utile d'avoir un modèle de module de galerie de base enregistré dans notre bibliothèque afin que nous n'ayons pas à recommencer à zéro chaque fois que nous concevons une nouvelle galerie .
Créez une nouvelle section avec une ligne à une colonne, puis ajoutez le module Galerie à la ligne.
Divi remplira le module de galerie avec quelques images de votre galerie multimédia dans un affichage en grille comme le suivant :
Dans les paramètres du module de galerie, cliquez sur l'icône grise plus pour ajouter 12 images à la galerie. J'utilise des images de la mise en page de la galerie du restaurant.
Mettez ensuite à jour les paramètres du module Divi Gallery comme suit :
Nombre d'images : 12
Afficher le titre et la légende : NON
Afficher la pagination : NON
Cela fonctionnera comme un bon modèle pour l'avenir. Pour enregistrer le module Galerie dans votre bibliothèque Divi, cliquez sur l'icône Enregistrer dans la bibliothèque dans le menu gris du module lorsque vous survolez le module. Nommez ensuite le modèle « Modèle de module de galerie » et enregistrez-le dans la bibliothèque.
Lorsque vous souhaitez ajouter le module de galerie enregistré à votre page, il vous suffit de cliquer pour ajouter un nouveau module comme d'habitude. Sélectionnez ensuite l'onglet Ajouter à partir de la bibliothèque dans la fenêtre contextuelle et cliquez sur le module de galerie portant le nom « Modèle de module de galerie ».
C'est ça. Passons maintenant à ces conceptions de bordure!
#1 Galerie d'images Polaroid
Cette prochaine conception est une bordure populaire pour les images qui ressemblent à une image polaroïd. Il s'agit d'une mise en page particulièrement utile si vous souhaitez afficher les titres de vos images.
Voici comment procéder.
Paramètres de section
Créez une nouvelle section régulière avec une ligne à une colonne. Ajoutez ensuite le modèle de module Divi Gallery enregistré à partir de la bibliothèque (expliqué ci-dessus). Avant de modifier le module Galerie, ouvrez les paramètres de la section et ajoutez une couleur d'arrière-plan grise pour que nos bordures blanches apparaissent un peu.
Contexte : #dddddd
Paramètres de ligne
Mettez ensuite à jour les paramètres de ligne avec les éléments suivants :
Largeur de gouttière : 1
Cela supprimera l'espacement des marges par défaut entre les images. Nous ajouterons notre propre espacement personnalisé plus tard.
Paramètres du module de galerie
Ouvrez les paramètres du module Galerie et mettez à jour les éléments suivants :
Afficher le titre et la légende : OUI
Poids de la police du titre : gras
Style de police du titre : TT
Alignement du texte du titre : Centre
Hauteur de la ligne de titre : 2 em
Largeur de la bordure supérieure de l'image : 10px
Couleur de la bordure supérieure de l'image : #ffffff
Largeur de la bordure gauche de l'image : 10px
Couleur de la bordure gauche de l'image : #ffffff
Largeur de la bordure droite de l'image : 10px
Couleur de la bordure droite de l'image : #ffffff
Pour créer un espacement entre nos images, ajoutez la bordure suivante aux éléments de la galerie :
Largeur de la bordure : 10 px
Couleur de la bordure : #dddddd (correspond à la couleur de l'arrière-plan de la section)
Pour colorer la partie inférieure de notre conception de bordure polaroïd, nous devons ajouter un fond blanc au module.
Couleur d'arrière-plan : #ffffff
Résultat final
Voici le résultat final de la conception de la bordure polaroïd.
#2 Conception de grille propre
Si vous recherchez un style de grille simple et propre pour vos images, cette conception de bordure est une bonne option. Il est bien équilibré et agréable pour les yeux.
Voici comment procéder.
Créez une nouvelle section régulière avec une ligne à une colonne. Ajoutez ensuite le modèle de module Divi Gallery enregistré à partir de la bibliothèque (expliqué ci-dessus).
Paramètres de ligne
Avant de modifier le module Galerie, ouvrez les paramètres de la section et mettez à jour les éléments suivants :
Largeur de gouttière : 1
Rembourrage personnalisé : 0px en haut, 0px en bas
Largeur de la bordure : 10 px
Couleur de la bordure : #dddddd
Cette bordure de ligne est nécessaire pour faire correspondre l'espacement extérieur de notre galerie avec l'espacement entre les images.
Paramètres du module de galerie
Ouvrez maintenant les paramètres du module de galerie et ajoutez une bordure aux éléments de votre galerie et aux images de votre galerie en mettant à jour les éléments suivants :
Largeur de la bordure de l'image : 20 pixels
Couleur de la bordure de l'image : #ffffff
Largeur de la bordure : 10 px
Couleur de la bordure : transparente (ceci est important pour afficher la couleur de fond)
Ajoutez maintenant une couleur d'arrière-plan au module de galerie pour terminer la conception.
Couleur d'arrière-plan : #dddddd (correspond à la couleur de la bordure de la ligne)
Étant donné que la bordure de votre élément de galerie est transparente, elle hérite de la couleur de l'arrière-plan.
Conception finale
Modification des couleurs de bordure en modifiant la couleur d'arrière-plan
Si vous voulez jouer avec différentes couleurs de bordure, vous pouvez mettre à jour la couleur d'arrière-plan comme vous le souhaitez. Mais, vous devrez retirer la bordure de ligne et ajouter l'espacement suivant au module :
Rembourrage personnalisé : 10 pixels en haut, 10 pixels en bas, 10 pixels à gauche, 10 pixels à droite
Vous pouvez maintenant ajuster la couleur d'arrière-plan à votre guise :
#3 Image de fond personnalisée derrière toute la galerie
Cette conception vous permet d'utiliser une image d'arrière-plan pour servir en quelque sorte d'arrière-plan de texture pour les bordures de vos images. C'est un bon moyen de rendre chaque bordure d'image unique car elle montre une zone spécifique de l'image d'arrière-plan du module. La configuration est très similaire à la Clean Grid Design ci-dessus.
Voici comment procéder.
Créez une nouvelle section régulière avec une ligne à une colonne. Ajoutez ensuite le modèle de module Divi Gallery enregistré à partir de la bibliothèque (expliqué ci-dessus).
Paramètres de ligne
Avant de modifier le module Galerie, ouvrez les paramètres de la section et mettez à jour les éléments suivants :
Largeur de gouttière : 1
Rembourrage personnalisé : 0px en haut, 0px en bas
Paramètres du module de galerie
Mettez maintenant à jour les paramètres du module Galerie comme suit :
Image d'arrière-plan : [ajouter une image] (vous ne pourrez pas encore la voir)
Couleur d'arrière-plan : #dddddd (cela ne s'affiche que si vous utilisez une image d'arrière-plan png avec transparence)
Largeur de la bordure de l'image : 10px
Couleur de la bordure de l'image : #ffffff
Largeur de la bordure (pour le module): 10px
Couleur de la bordure : #ffffff
Ajoutez ensuite le CSS personnalisé suivant à l'élément de la galerie :
padding: 3%;
Cela crée la séparation entre les éléments de la galerie pour compléter la conception.
Résultat final
#4 Image d'arrière-plan personnalisée derrière chaque élément de la galerie
Cette conception vous permet d'utiliser une image d'arrière-plan pour servir de bordure pour chacun des éléments de la galerie individuellement. Vous pouvez créer n'importe quelle image personnalisée de votre choix ou utiliser l'une des images d'arrière-plan incluses dans nos mises en page prédéfinies. J'en utilise un de la mise en page de la page de destination Meetup.
Voici comment procéder.
Créez une nouvelle section régulière avec une ligne à une colonne. Ajoutez ensuite le modèle de module Divi Gallery enregistré à partir de la bibliothèque (expliqué ci-dessus).
Paramètres de ligne
Avant de modifier le module Galerie, ouvrez les paramètres de la section et mettez à jour les éléments suivants :
Faire cette ligne pleine largeur : OUI
Largeur de gouttière : 2
Paramètres du module de galerie
Mettez maintenant à jour les paramètres du module Galerie comme suit :
Largeur de la bordure de l'image : 10px
Couleur de la bordure de l'image : #ffffff
Ajoutez ensuite le CSS personnalisé suivant à l'élément de la galerie :
padding: 30px; background-image: url(""); background-size: contain; background-repeat: no-repeat; background-position: right;
Ensuite, vous devrez télécharger l'image d'arrière-plan personnalisée que vous souhaitez placer derrière chacun des éléments de votre galerie. Pour cet exemple, j'utilise une image de l'un de nos packs de mise en page prédéfinis. Une fois l'image téléchargée dans la galerie WordPress Media, copiez l'URL de l'image dans votre presse-papiers.
Maintenant, revenez en arrière et ouvrez les paramètres du module de galerie et collez l'URL dans le CSS personnalisé où il est écrit "insérer l'URL de l'image ici". Assurez-vous de garder l'URL à l'intérieur des citations.
Résultat final
Voici le résultat final.
#5 Combo d'ombre et de bordure de boîte
Les ombres de boîte sont idéales pour donner à votre galerie une touche personnalisée. Vous pouvez utiliser des ombres de boîte sur les images du module de galerie Divi pour créer une conception de grille brisée qui encadre les images d'une manière unique. Vous pouvez également combiner l'ombre de la boîte avec des motifs de bordure pour toutes sortes de possibilités.
Voici comment procéder.
Créez une nouvelle section régulière avec une ligne à une colonne. Ajoutez ensuite le modèle de module Divi Gallery enregistré à partir de la bibliothèque (expliqué ci-dessus).
Ajouter une bordure d'image et une ombre de boîte
Ouvrez les paramètres de la Galerie et mettez à jour les éléments suivants :
Largeur de la bordure de l'image : 10px
Couleur de la bordure de l'image : #ffffff
Image Box Shadow : voir capture d'écran
Position horizontale de l'ombre de la boîte : -30 px
Position verticale de l'ombre de la boîte : -30 px
Force de propagation de l'ombre de la boîte: -10px
Couleur de l'ombre : #e08474
Ajouter la bordure de l'élément de la galerie
La conception de l'ombre de la boîte a l'air bien telle qu'elle est maintenant. Mais, vous pouvez également ajouter une bordure supplémentaire pour votre élément de galerie en mettant à jour les éléments suivants :
Largeur de la bordure droite : 7px
Couleur de la bordure droite : #dddddd
Style de bordure droite : en pointillé
Largeur de la bordure inférieure : 7px
Couleur de la bordure inférieure : #dddddd
Style de bordure inférieure : pointillé
J'ai ajouté un style de bordure en pointillé juste pour vous rappeler les différents styles disponibles. N'hésitez pas à utiliser d'autres styles (comme solide ou en pointillé).
Paramètres de ligne
Pour donner plus d'espace à votre conception, ouvrez les paramètres de ligne et mettez à jour les éléments suivants :
Faire la ligne pleine largeur : OUI
Conception finale
Voici la conception finale.
# 6: Conception de bordure de bande de film
Pour ce dernier design, j'ai pensé vous montrer quelque chose d'un peu plus unique. Cette conception utilise un style de bordure en pointillés uniquement sur les côtés droit et gauche des éléments de la galerie, qui divise chaque colonne d'images d'une manière qui ressemble à des bandes de film.
Voici comment procéder.
Créez une nouvelle section régulière avec une ligne à une colonne. Ajoutez ensuite le modèle de module Divi Gallery enregistré à partir de la bibliothèque (expliqué ci-dessus).
Paramètres de ligne
Avant de modifier le module Galerie, ouvrez les paramètres de ligne et modifiez la largeur de la gouttière sur 1.
Largeur de gouttière : 1
Cela éliminera l'espacement des marges par défaut entre vos images.
Paramètres du module de galerie
Ensuite, ouvrez les paramètres de la Galerie et mettez à jour les éléments suivants :
Ajouter des bordures d'image en pointillés
Largeur de la bordure droite de l'image : 8 px
Couleur de la bordure droite de l'image : #dddddd
Style de bordure droite de l'image : en pointillé
Largeur de la bordure gauche de l'image : 8 px
Couleur de la bordure gauche de l'image : #dddddd
Style de bordure gauche de l'image : en pointillé
Ajouter une bordure d'élément de galerie pour l'espacement
Largeur de la bordure gauche : 20 px
Couleur de la bordure gauche : #ffffff
Largeur de la bordure droite : 20 px
Couleur de la bordure droite : #ffffff
Ajouter une ombre à la zone d'image
Image Box Shadow : voir capture d'écran
Force du flou de l'ombre de la boîte : 0px
Force de propagation de l'ombre de la boîte: -10px
Couleur de l'ombre : #222222
Ajouter une couleur d'arrière-plan
Couleur d'arrière-plan : #222222
Ajoutez ensuite le CSS personnalisé suivant à l'élément de la galerie :
padding: 5px 10px;
Le résultat final
Vérifiez maintenant le résultat.
Dernières pensées
J'espère que ces six exemples de conception de bordures vous inspireront pour créer des bordures personnalisées pour vos images lors de l'utilisation du module Divi Gallery. Une fois que vous maîtrisez les paramètres disponibles avec le module Divi Gallery, il suffit d'un peu de créativité. Amusez-vous donc à explorer vos propres options de conception avec différentes images, couleurs et espacements.
J'ai hâte de vous entendre dans les commentaires.
À votre santé!