Créer une galerie simple et design avec le module Galerie de Divi
Dans ce court tuto WordPress Divi, je vous explique comment utiliser le module Galerie du Divi Visual Builder. Nous verrons comment le paramétrer pour obtenir une galerie simple, efficace au design épuré.
Bon visionnage à toutes et à tous ! ?
1) Insertion du module galerie et premiers réglages
Ajouter une nouvelle rangée à une colonne, puis appeler le module Galerie.
Dans l’onglet « Contenu » vous pouvez appeler les images souhaitées depuis votre médiathèque. Vous pouvez à cet endroit réorganiser l’ordre de vos image par simple « glissé/déposé ». Dans « Nombre d’images » vous pouvez choisir le nombre d’images à afficher (par défaut c’est 4), nous choisirons ici 8.
Ensuite toujours dans l’onglet « Contenu » en dessous dans « Éléments » vous pouvez d’afficher ou pas certains éléments à afficher ou pas comme la légende ou la pagination. Pour cet exercice, nous désactiverons tout. Sauvegarder pour le moment le travail réalisé sur ce module.
2) Réduction de l’espace entre les images de la galerie
Nous souhaitons maintenant supprimer l’espace entre les images. Pour cela, rendez-vous dans les paramètres de la rangée qui a accueilli le module Galerie. Aller dans l’onglet « Style » puis choisir l’option « Dimensionnement » et activer l’interrupteur « »Utilisation personnalisée Largeur de Gouttière ». Puis à « Espacement des colonnes » déplacer la tirette à gauche (valeur 1). Puis sauvegarder les réglages de la rangée.
3) Espacement des images grâce à la bordure
Nous allons cependant espacer très légèrement les images. Pour cela nous allons utiliser l’option « Bordure » des images ainsi nous pourrons avoir un contrôle beaucoup plus fin de ces espacements.
Retourner dans les paramètres du module Galerie. Dans l’onglet « Style » choisir l’option « Bordure ». Avec la tirette, ajouter une bordure fine de 2 pixels. Puis dans la couleur de la bordure, choisir « Transparent » afin que la bordure ait la même couleur que le fond de la galerie.
4) Couleur de superposition et changement de l’icône
Toujours dans l’onglet « Style » des paramètres du module, aller à l’option « Superposition » ici vous pouvez choisir la couleur de filtre sur l’image qui s’active au passage de la souris ainsi que l’icône et sa couleur. Quand vous choisissez une nouvelle couleur de fond de superposition, vous remarquez que la couleur est totalement opaque et masque entièrement l’image. Il est nécessaire à ce niveau d’ajouter de la transparence à la couleur, cliquer sur la pipette et avec tirette de droite, ajouter de la transparence.
Vous pouvez maintenant enregistrer vos modification des paramètres de ce module.
Enregistrez également la page. Félicitations, Vous pouvez sortir du Visual Builder pour constater le résultat de votre travail ! ?
