Divi Supreme Masonry Gallery, présentez différemment vos images
Dans ce tutoriel Divi WordPress, je vous présente le module Masonry Gallery de Divi Supreme l’excellent plugin pour Divi. Ce plugin ajoute une cinquantaine de nouveaux modules au Divi Visual Builder d’Elegant Themes ce qui permet un design encore plus poussé du Thème Divi.
Si vous ne connaissez pas Divi Supreme, je vous invite à consulter cette page de mon blog où je passe en revue tous les modules et nouvelles extensions qu’apporte ce plugin Divi.
Le module Masonry Gallery que je vous présente ici, vous permet de disposer vos images en grille en utilisant un espace optimal sans avoir besoin de les recadrer. Quelle que soit l’orientation de vos images, en portrait ou en paysage, la galerie Divi Masonry les mettra toujours en valeur ! Une galerie d’images WordPress très originale.
Insertion du module Divi Supreme Masonry Gallery
Dans le tutoriel, je crée une nouvelle section, j’insère une rangée à une colonne et dans cette colonne, j’appelle le module Masonry Gallery. Ce module se comporte comme tout autre module Divi à insérer dans une colonne de rangée.
Vous remarquez au passage que les modules rajoutés par Divi Supreme ont un fond bleu ce qui les distingue des modules classiques de Divi.
Paramétrage du Contenu du module
La fenêtre de paramétrage du module s’ouvre.
Dans « Gallery », cliquer sur le [+] votre galerie est appelée.
Cocher les images que vous souhaiterez voir apparaitre dans votre « Masonry Gallery ». Pour obtenir un effet sympa, il est bien de mélanger des images au format portrait et paysage. Dès que vous aurez choisi vos images, la galerie sera automatiquement créée. Vous pouvez modifier l’agencement des images par simple « Glisser / Déposer ».
Dans « Settings » en dessous, vous avez plusieurs options :
- « Use overlay » : Cette option ajoute une couche sur l’image quand elle est survolée. Il est possible d’afficher sur cette couche : le titre le l’image, sa légende et sa description.
- « Use Lightbox » : Cette option vous permet d’afficher l’image en grand lorsqu’elle est cliquée (dans un popup), il est possible de faire défiler toutes les images en grand en cliquant sur les flèches des côtés.
- « Use Horizontal Order » : Cette option permet de respecter l’ordre horizontal présent en dessus dans l’option « Gallery »
- Use Zom On Hover : Cette option applique un léger zoom au survol de l’image
Dans « Lien » en dessous, vous pouvez ajouter un lien vers lequel pointera l’ensemble de la galerie. Nous ci nous présentons des plats, il serait possible de lier cette galerie vers la page « Recettes » du site. Il suffirait d’entrer ici l’adresse URL de la page souhaitée.
Paramétrage du Style du module
Dans l’onglet « Style » l’option « Grid Layout » va vous permettre de paramétrer 2 choses :
– Le nombre de colonnes de la galerie (Columns)
– L’espacement entre les images (Columns Gap)
Vous avez aussi l’option « Overlay Text » qui va vous permettre de modifier le style de l’affichage du texte : du titre, de la légende ou de la description de l’image qui apparaîtra sur la calque recouvrant l’image au survol de la souris.
Vous avez également l’option « Overlay » en dessous qui est intéressante et qui va vous permettre de styliser le calque recouvrant l’image en changeant sa couleur ou en lui apportant de la transparence.
D’autres options de Style sont présentent dans « Grid Items » qui vous permettront de styliser les images (ombre, bordure etc.)
Enfin, vérifier la vue de votre module sous les autres périphériques : téléphone / tablette et ajuster le Style si nécessaire (Taille du texte).
