fbpx
Divi Module Galerie : Bien présenter les images d’un site

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 ! 😊

Licence Divi
Code Promo Divi Supreme
.

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.

Divi module Galerie
Divi Module Galerie

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.

MalerLite
Espacement des colonnes

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.

Titre de section dynamique

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 ! 😊

 

MalerLite
Titre de section dynamique
Licence Divi
Thinkific one month free

Vous serez peut-être intéressé aussi par…

Les bons plans Alpa14 😉

👉 Divi : Le meilleur WebBuilder WordPress, -20% sur votre licence !
👉 Divi Supreme : Décuplez la puissance de Divi, 49 nouveaux modules de qualité, -10% avec le code promo « Alpa14 »
👉 Presto Player
: Le meilleur lecteur vidéo pour votre site WordPress !
👉 Wondershare Filmora X : Le montage vidéo facile, faites jouer votre imagination !
👉 ThriveCArt : Offre spéciale, paiement en 1X. Placez des paniers où vous voulez et déployez des tunnels de vente en quelques clics !
👉 Bunny.net : Hébergez vos vidéos sur une plateforme performante aux tarifs hyper compétitifs !
👉 LearnDash : Le meilleur plugin LMS, commencez dès aujourd’hui à créer et à vendre vos cours sur votre site WordPress !
👉 Canva : Collaborez et créez d’incroyables designs Gratuitement
👉 Thinkific : Créez & vendez vos formations, 1 mois gratuit en formule Pro
👉 O2switch : l’hébergeur de qualité (5€/mois en illimité avec nom de domaine)
👉 Inleed : l’hébergeur suédois performant et de qualité 

👉 Semrush : la meilleure boîte à outils SEO, 14 jours gratuits
👉 MailerLite : L’email marketing simple et efficace, formule gratuite + 30 jours gratuits toutes options
👉 duoLogo : Réalisez un logo pro, formule gratuite
👉 Invideo : Créez des vidéos marketing, -25% sur toutes les offres
👉 Private Internet Access
: Un VPN de qualité, protégez votre connexion Internet

👁️ Pour une totale transparence, les liens de ce site sont des liens affiliés, en les utilisant, vous m’offrez une commission sur la vente et votre geste sympa compensera les nombreuses heures de travail à concevoir ces tutoriels. Merci ! 🙂🙏.
Veuillez noter que jamais vous ne paierez plus cher que directement sur le site de l’éditeur. Voire parfois bien moins cher 👍.

0 Comments

Submit a Comment

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *