fbpx

Découvrez les bons plans & les réductions Alpa14

Anniversaire DIVI -20% Cliquez !

Jour(s)

:

Heure(s)

:

Minute(s)

:

Seconde(s)

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

Catégories

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é par les articles suivants :

Ajouter une bannière WordPress « Hero Image » optimisée ⏱️

Ajouter une bannière WordPress « Hero Image » optimisée ⏱️

Dans ce tutoriel Divi WordPress, je vous montre où trouver une image de qualité gratuite pour un usage commercial, je vous montre également comment la choisir et l’optimiser au bon format. Je vous apprends ensuite comment designer ce bandeau large « Hero Image » grâce au Divi Visual Builder du thème Divi de la société Elegant Themes.

lire plus
Tutoriel Divi : Inverser les colonnes selon la vue

Tutoriel Divi : Inverser les colonnes selon la vue

En vue ordinateur un site web peut avoir un design avantageux mais peut être moins en vue mobile du fait des colonnes d’une rangée qui passent les unes sous les autres.
On peut alors se trouver avec une suite d’éléments non souhaitée avec par exemple 2 textes ou 2 images à la suite.

lire plus
Un menu hamburger ? en vue ordinateur : site WordPress Divi

Un menu hamburger ? en vue ordinateur : site WordPress Divi

Sur Internet, le terme de “hamburger menu” désigne un menu de navigation utilisé sur les sites mobiles par souci  de gain de place et d’ergonomie, la largeur de l’écran étant restreinte pour conserver un menu classique. Sur ces périphériques mobiles, on masque alors le menu derrière un bouton à 3 petits traits ressemblant à un hamburger.

lire plus