LES BONS PLANS ALPA14

Divi Supreme : Galerie filtrable – Filterable Gallery

Alpa14 les tutoriels faciles !

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

Divi Supreme Pro
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.

Divi Supreme Pro
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.

Divi Supreme Pro
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
o2switch l'hébergeur d'excellence 100% français - -10%

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

Créer une boîte mail Pro chez o2switch

Créer une boîte mail Pro chez o2switch

Saviez-vous qu’il est possible de créer une adresse email professionnelle avec votre propre nom de domaine en seulement quelques minutes ? Dans cet article, nous allons vous montrer comment faire avec o2switch, un hébergeur 100 % français reconnu pour sa performance et sa simplicité.

lire plus
Vendre des ebooks et générer des revenus passifs

Vendre des ebooks et générer des revenus passifs

Vous rêvez de générer des revenus passifs, même pendant que vous dormez ? Dans cet article, je vais parcourir brièvement, étape par étape, comment vendre des ebooks facilement, sans compétences techniques particulières et avec un investissement minimal.

lire plus
Guide o2switch : Hébergement, cPanel, Installer WordPress

Guide o2switch : Hébergement, cPanel, Installer WordPress

Dans cet article, je vous parle d’hébergement web avec O2switch, un hébergeur 100 % français qui se distingue par son excellence et son engagement envers ses clients. Depuis plus de 15 ans, O2switch propose des services fiables et performants, le tout à des tarifs très raisonnables. Dans cet article, nous explorerons leurs deux offres principales, examinerons le cPanel, et vous montrerai comment installer facilement un site WordPress en quelques clics.

lire plus