fbpx

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

Divi Supreme Masonry Gallery, une galerie photos originale

Catégories

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.

Code Promo Divi Supreme
Licence Divi
.


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.

    Amelia booking plugin
    Modules Divi Supreme

    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 :

      1. « 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.
      2. « 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.
      3. « Use Horizontal Order » : Cette option permet de respecter l’ordre horizontal présent en dessus dans l’option « Gallery »
      4. 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.

      Code Promo Divi Supreme
      Licence Divi
      Thinkific one month free
      Insertion Module Masonry Gallery
      Masonry Gallery Settings

      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)

        Style
        Style
        Style

        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).

        vues mobiles
        MailerLite free-trial
        hébergeur web Hostinger

        Vous serez peut-être intéressé par les articles suivants :

        Divi Supreme : Galerie filtrable – Filterable Gallery

        Divi Supreme : Galerie filtrable – Filterable Gallery

        Filtrer une galerie d’images par catégories ? C’est possible grâce au module Filterable Gallery de Divi Supreme, l’excellent plugin pour le Visual Builder de Divi.
        Assignez les photos d’une galerie à certaines catégories et triez-les en 1 clic. Cette galerie photos filtrable c’est sûr, améliorera grandement le confort de navigation des visiteurs sur d’un site web WordPress Divi.

        lire plus
        Divi Supreme : les nouveautés du plugin Divi !

        Divi Supreme : les nouveautés du plugin Divi !

        De nouveaux modules pour le Divi Visual Builder d’Elegant Themes ? Oui, c’est possible ! Avec Divi Supreme poussez le design des pages de votre site WordPress Divi au maximum ! Avec Divi Supreme Pro ce n’est pas moins de 58 nouveaux modules et 8 nouvelles extensions que vous ajoutez à Divi.

        lire plus
        Divi Supreme : Content Timeline

        Divi Supreme : Content Timeline

        Divi Supreme Content Timeline : Une ligne de temps de contenu claire et engageante Dans ce tutoriel WordPress Divi, je vous présente le module Divi Supreme Content Timeline qui vous permet de créer facilement une chronologie de contenu pour...

        lire plus