fbpx

Divi Supreme Masonry Gallery, une galerie photos originale

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 également intéressé par ces articles …

        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
        10 extensions Chrome pour améliorer la productivité

        10 extensions Chrome pour améliorer la productivité

        Dans cette vidéo, je vous présente 10 extensions pour le navigateur Chrome afin d’améliorer votre confort, votre rapidité et donc votre productivité lorsque vous surfez sur Internet. Il existe ne nombreuses extensions Chrome, et il peut être difficile de trouver celles qui vont réellement améliorer votre productivité.

        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
        Offrez-moi un café! Merci :)