Please enable the breadcrumb option to use this shortcode!

Les modules Divi > Le Module Galerie

Créé des galeries d'images où tu le souhaites dans ton site. Plusieurs présentations prédéfinies t'assurent un rendu esthétique optimal

Partager des images sur son site est souvent un moyen très efficace d’attirer rapidement l’attention de ses visiteurs et d’augmenter sa crédibilité auprès de ses clients. Le Module Galerie de Divi se présente sous forme de grille ou de diapos (slide) et peut accueillir un grand nombre d’images grâce à un système de pagination.

Diapo ou Grille ?
La présentation diapo présente une photo après l’autre :

La présentation grille affiche plusieurs images à la fois sous forme de vignettes. Quand le visiteur clique sur l’une d’elle, la photo s’agrandit.

Activer le Visual Builder
Pour créer et modifier le module Galerie directement sur le visuel de ton site, tu dois activer le visual builder. L’article Découvrir le Visual Builder t’explique comment faire.
Ajouter un Module Galerie
Les modules doivent se positionner à l’intérieur d’une rangée (cadre vert). 

Pour ajouter une rangée, clique sur le bouton + vert et choisis une colonne.

Pour en savoir plus, consulte les articles Comprendre les sections Divi et Comprendre les rangées Divi.

Pour ajouter un module, clique sur un bouton + gris présent à l’intérieur des rangées.

Une petite fenêtre s’ouvre avec un menu sous forme de cartes.

Les modules sont rangés par ordre alphabétique : Fais défiler le menu vers le bas jusqu’à ton choix ou utilise la barre de recherche tout en haut de la fenêtre de module.

Sélectionne le module Galerie.

La configuration du Module

La configuration des modules Divi se présente sous la forme de trois onglets :

  • Contenu
    Tu indiques ici quels sont les textes et les images ou icones que tu vas utiliser pour ta galerie. Dans cette partie tu entres le contenu sans te soucier de son aspect.
  •  Style
    Tu donnes maintenant l’apparence de ton choix aux éléments que tu as entrés dans la partie Contenu.
  • Avancé
    Tu préfères coder ? Tu peux t’exprimer ici pour personnaliser le style du module en .css.
Onglet Contenu
Partie Images

Clique sur Mise à jour de la galerie et sélectionne toutes les images que tu souhaites afficher.

Divi propose deux possibilités pour sélectionner simplement tes images  :

Bibiothèque de Média, te permet de sélectionner des images que tu as déjà mises en ligne précedemment.

Envoyer des fichiers, te permet de charger des images depuis ton ordinateur et de les stocker dans ton site.

Pour en savoir plus, reporte-toi à l’article insérer une image qui explore ces trois possibilités en détail.

Indique le Nombres d’images que tu souhaites voir apparaître sur chaque page. Si le nombre d’images de la galerie est supérieur au nombre d’image à afficher, divi affichera automatiquement une pagination pour que le visiteur puisse voir l’intégralité de ta galerie.

Si tu indiques 6, cela signifie que tes images vont s’afficher 6 par 6 en mode grille.

Cette option n’est utile que si tu souhaites afficher tes images en mode grille. Elle disparaitra si tu optes pour le mode diapo dans l’onglet style (Le mode diapo affiche chaque image individuellement en grand format l’une derrière l’autre.)

Partie éléments

Indique ici si tu souhaites que le titre et la légende de ton image apparaissent en dessous de celle-ci.

Tu peux modifier le titre et la légende de chaque image en retournant dans images > mise à jour de la galerie et en cliquant sur l’image que tu souhaites éditer.

Fais glisser le curseur pour indiquer à Divi si tu souhaites ou non conserver la pagination en mode grille. Si tu n’affiches pas la pagination, seules les premières images de ta bibliothèque seront visibles.

Partie étiquette admin

L’étiquette permet de se répérer si tu travailles parfois avec le générateur divi sans utiliser le visuel.
Par défaut, toutes les étiquettes portent le nomde leur module (Texte, séparateur, image, personne …). Tu peux en modifier le nom pour te faciliter leur repérage, en te rendant en bas de l’onglet « Contenu » du module dont tu souhaites changer l’étiquette.

Onglet Style
Gagne du temps !

Si ton personnaliseur de thème est bien configuré, les polices et couleurs par défaut sont celles que tu as toi-même choisies. Tu n’auras donc pas grand chose à faire dans la l’onglet Style.

Pour configurer tes polices et couleurs par défaut, lis l’article sur le personnaliseur de thème.

Modèle

Par défaut, les galeries s’affichent sous forme de grille (plusieurs images sur chaque ligne). Tu peux ici opter pour l’affichage en mode diapo (une image à la fois).
Au sein de l’option modèle, tu as aussi le choix de l’orientation des vignettes (mode paysage ou mode portrait)

Superposition : Quand une image de la galerie est survolée, une icône apparait pour inviter l’utilisateur à l’agrandir. Tu peux choisir ici une icône et configurer sa couleur et celle du fond au survol.

Texte

Modifie l’apparence de ton titre rapidement pour garantir sa bonne lisibilité.

Sur un fond foncé, choisis un texte « clair ». Sur un fond clair, choisis un texte « foncé ». 

Titre Texte et Légende Texte

Modifie ici l’apparence du titre et des légendes de tes images si tu as choisi de les rendre visibles. Si tu as choisi de ne pas les rendre apparents (dans l’onglet contenu > éléments), inutile de configurer cette option.

La police par défaut utilisée par Divi pour tous tes textes est la police Open Sans ou celle que tu as paramétré dans ton personnaliseur de thème.

Tu peux dans cette option choisir une apparence spécifique pour les textes de ce module. Des dizaines de polices issues de Google Font sont disponibles dans le menu déroulant. Tu peux également déterminer les couleurs de tes textes et les mettre en gras, en italique ou en majuscules.

 

Bordure

Encadre ton module si tu le désires en sélectionnant une couleur et une épaisseur de bordure.

Dimensionnement 

Donne une largeur maximale à ton module.

Espacement 

Définis les marges internes et externes pour ton module. Tu peux aussi spécifier les marges à appliquer pour chaque appareil (ordinateur, mobile, tablette).

Animation

Utile si tu souhaites que ton module ne soit pas fixe sur ta page mais apparaisse subrepticement avec un effet (à utiliser avec beaucoup de modération).

Onglet Avancé
  • Parties Css (Id et classes Css, Personnalier Css) : Tu préféres coder ? Tu peux t’exprimer ici pour personnaliser le style du module en utilisant le langage .css.
  • Visibilité : Si ton module n’est pas adapté pour la vue ordinateur, mobile ou tablette, tu peux le désactiver sur un ou plusieurs de ces appareils. Coche les appareils où le module n’apparaitra PAS.

Sauvegarder tes changements

r

N'oublie pas de cliquer sur "Sauvegarder les changements" pour "enregistrer les modifications" apportées sur le visual builder.

Le bouton "Sauvegarder les changements" se trouve tout en bas de ta page. Il est représenté par une bulle violette comportant trois petits points. Clique sur la bulle violette en bas au centre de ta page. En se dépliant elle découvre le bouton "Sauvegarder" sur lequel il faut cliquer.

Offre à la une

Offre Divi

  • + Licence Divi
  • + Mises à jour automatiques

60€ au lieu de 89€

Site clé en mains

GAGNE DU TEMPS

Une équipe d'experts met ton site sur les rails et te forme à l'utilisation de Divi

Newsletter

0 commentaires

Soumettre un commentaire

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

Autres ressources « Modules DIVI »

Insérer une image

Insérer une image

Télécharge une image dans ta bibliothèque de médias directement depuis tes options divi, tes modules ou tes sections pour illustrer ton thème

Ajouter le logo

Ajouter le logo

Divi te permet de placer facilement ton logo sur ton site en modifiant les options du thème

Ajouter son Favicon

Ajouter son Favicon

Ajoute un favicon qui sera reconnu par tous les navigateurs sans entrer dans le code

Effectuer les Mises à Jour Divi

Effectuer les Mises à Jour Divi

Effectue les mises à jour Divi

Le thème Divi se répand à toute vitesse. Il convient aussi bien aux débutants qu'aux développeurs et leurs clients. Toi aussi rejoins-nous !

Modules de contenu

Utilisateurs

Polices d'écriture pré-installées

Contacte Nous

En cochant la case ci-dessus tu affirmes avoir pris connaissance de notre politique de confidentialité. Tu peux demander la suppression de tes données à tout moment en suivant la procédure et en nous contactant à l’adresse hello+rgpd@bee-too-bee.com.