fbpx

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

Divi Supreme : Galerie filtrable – Filterable Gallery

Catégories

Une galerie photos filtrable par catégories

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. De plus, grâce aux options fines de paramétrages disponibles de ce nouveau module Divi, vous pourrez apporter un design très évolué à cette galerie. Créer un site Internet professionnel n’aura jamais été aussi simple grâce aux modules supplémentaires de Divi Supreme Pro

Code Promo Divi Supreme
Licence Divi
.

Divi Supreme : Insertion du module Filterable Gallery

Pour insérer la galerie, créer une section, puis dans cette section une rangée à 1 colonne par exemple puis insérer le module en le recherchant dans la liste ou écrivant ses premières lettres (filt…) dans le champ de recherche.

A noter qu’une fois que Divi Supreme Pro est installé, la 60aine de nouveaux modules apparaissent en fond bleu pour les distinguer des autres modules de base du Divi Visual Builder.

Préparez et optimisez les images de votre galerie. Une largeur de 1024 Pixels est confortable et raisonnable. Pour redimensionner, recadrer et optimiser vos images, je vous recommande le site en ligne Photopea, il est relativement puissant et entièrement gratuit et ne nécessite pas d’inscription, ni d’installation.

Insérer le module Divi Supreme

Le format le mieux adapté pour cette galerie filtrable est le format JPG (J’ai pu noter que le format WebP n’était pas supporté par ce module.).

Puis dans les paramètres du module, (onglet Contenu), dans « General », ajouter les images en cliquant sur le plus. La médiathèque est appelée, faire la sélection souhaitée.

Code Promo Divi Supreme
Insérer les images de la galerie

Créer les catégories de la galerie filtrable

Sauvegardez les modifications du module puis enregistrez la page. Rendez-vous ensuite dans le menu WordPress à « Médias » puis choisissez le sous-menu « Catégories ». Sur cette page, vous pouvez créer les catégories souhaitées qui s’appliqueront ensuite automatiquement à la galerie filtrable de Divi Supreme.

Code Promo Divi Supreme
Licence Divi
Créer des catégories pour la galerie

Ajouter du texte à une image et l’assigner à une catégorie.

Nous le verrons un peu plus tard dans cet article, il est possible de faire apparaître du texte sous chaque image de la galerie ou dessus si l’option « Overlay » est activée.

Le texte pouvant apparaître avec chaque image sera le texte renseigné dans le champ « Titre » de l’image, dans le champ « Légende » ou dans le champ « Description ». Chaque texte pouvant être activé ou pas séparément.

Pour renseigner ce texte et assigner une image à une catégorie, cliquer sur chaque image de la galerie « Medias ».
Pour renseigner le texte complétez les champs 1,2 et 3.

Dans le champ 4, écrivez le nom de la catégorie où l’image sera assignée.

Veuillez noter dans le champ 5, il est possible d’ajouter une adresse URL spécifique à l’image et qui s’activera en cliquant dessus. Cette option peut-être très intéressante pour conduire le visiteur vers des pages internes ou externes au site.

 

Renseigner le texte des images de la galerie Divi Supreme

Paramétrage du Contenu du module Filterable Gallery

– Use Dynamic Images

Cette option permet de choisir la ou les catégories à afficher. Il suffit de cocher la ou les catégories souhaitées.

– Numbers of Colums

Vous pouvez choisir à cette endroit un affichage jusqu’à 6 colonnes.

– Image Sizes

Choisissez la taille d’image la mieux adaptée à la taille d’origine de votre image (recadrée ou pas).

– Column Gap et Row Gap

Vous pouvez à cette endroit définir l’espacement entre vos images de la galerie. L’espacement entre les colonnes et les rangées.

– Speed

Cette option définit en ms la vitesse de réorganisation des images de la galerie au clic sur le bouton d’une catégorie.

– Layout

C’est à cet endroit qu’il est possible de choisir entre un affichage « Card » des images qui permet d’afficher du texte sous l’image et un affichage « Overlay » qui permet d’afficher du texte « sur l’image » avec un filtre.

 

Store Builder Payhip
Formation WordPress

D’autres options intéressantes sont disponibles juste en dessous dans la partie « Elements ».

– Enable Filterable Gallery

Cette option permet d’activer ou pas le côté filtrable de la galerie.

– Show All Images Text

Il est possible à cet endroit de faire apparaître le bouton « All » qui affichent l’ensemble des images, toutes catégories confondues. Dans le champ, vous pouvez nommer ce bouton comme vous le souhaitez, »Toutes les images » par exemple.

– Show Tiltle / Caption / Description

C’est là que vous pourrez activer ou pas le texte renseigné pour chaque image à savoir le titre, la légende et la description.

– Use Lightbox

Cette option activée permettra au clic  de révéler l’image en grande taille avec un contour assombri.

– Pagination

Si le nombre d’images de la catégorie est supérieur à limite fixée d’image affichable à l’écran alors une pagination apparaîtra sous la galerie pour accéder aux autres pages.

 

Hostinger -10%
Vendez vos produits digitaux
Options : Contenu Elements

Paramétrage du Style du module Filterable Gallery

Ensuite dans l’onglet « Style » vous pouvez comme tout module Divi apporter un design fin à cette galerie. Libre à vous d’apporter votre touche personnelle ;).

Vous pouvez designer le texte du Titre (Title), la légende (Caption) et de la description (Description). A noter que si vous avez choisi un affichage « Card », il faudra ajouter dans le texte affichée de la marge interne (car le texte est trop proche du bord).

Une partie à bien designer pour un bel effet sera la partie « Category Tab » qui est celle des boutons catégories présents au dessus de la galerie.
Des réglages très fins vous sont proposés. Dans la vidéo, j’en donne un exemple.

 

 

 

Style du module Divi Supreme

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

Supreme AI Writer : Profitez de ChatGPT dans Divi !

Supreme AI Writer : Profitez de ChatGPT dans Divi !

Simplifiez et optimisez la rédaction des pages de votre site web WordPress Divi grâce à Supreme AI Writer. Ce plugin révolutionnaire offre une méthode puissante et intuitive pour créer des textes convaincants qui captent l’attention de votre audience et incitent à l’action souhaitée. Supreme AI Writer est entièrement intégré à Divi et présent dans chaque module, vous permettant de générer du contenu de haute qualité de manière rapide et précise. Grâce à la puissance de ChatGPT d’OpenAI, il est capable d’analyser des idées complexes et de fournir des résultats époustouflants en un temps record.

lire plus
Ajouter une barre de progression animée à Divi.

Ajouter une barre de progression animée à Divi.

Dans ce tutoriel, je vous montre comment utiliser le module Progress Bar pour Divi grâce à l’un des modules de Divi Supreme Pro, l’excellent Plugin pour le thème Divi d’Elegant Themes. Ce module intitulé « Progress Bar » vous permettra de créer des barres de progression animées sur votre site WordPress. Le module Progress Bar est une fonctionnalité utile qui permet aux visiteurs de votre site de suivre leur progression sur une page en affichant leur progression en pourcentage.

lire plus
Créer un blog WordPress Divi | Tutoriel pas à pas

Créer un blog WordPress Divi | Tutoriel pas à pas

Dans cette vidéo, je vous guide pas à pas dans la création d’un blog WordPress avec le thème Divi et le Visual Builder.
Si vous êtes à la recherche d’un moyen simple et rapide de créer un blog WordPress, cette vidéo est faite pour vous.

lire plus