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

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

Alpa14 les tutoriels faciles !

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 :

Créer un en-tête plein écran avec Divi

Créer un en-tête plein écran avec Divi

Dans ce tutoriel, je  vous montre étape par étape comment créer un en-tête plein écran époustouflant en utilisant le puissant Divi Visual Builder. Nous commencerons par trouver une image de qualité professionnelle sur Pixabay, puis nous l’optimiserons pour le web avec Photopea avant de plonger dans la conception de notre en-tête.

lire plus
Thème Divi : Personnaliser le header

Thème Divi : Personnaliser le header

Dans ce tutoriel vidéo, je vous montre comment personnaliser l’en-tête d’un site Divi.
Cet en-tête changera en scrollant, lorsque la page défile. Le logo, le menu et le fond du header changeront de couleur attirant ainsi davantage l’attention du visiteur.
Cet en-tête comprendra également un bouton d’appel à l’action incitant à davantage d’engagement.
Grâce au constructeur de thèmes (le thème Builder) du thème Divi, nous pouvons créer des en-têtes personnalisés au design poussé.

lire plus