Widget Galerie filtrable Elementor - Rendre les images filtrables
Une galerie statique montre des images Une galerie filtrable permet aux gens de trouver ce qui les intéresse Le widget Filterable Image Gallery donne à votre portfolio, catalogue de produits ou collection de photos une barre de catégorie en haut Les visiteurs cliquent sur un onglet, la grille filtre instantanément, et chaque élément peut porter un titre, un sous-titre et deux boutons stylisés pour “View Details” ou “Live Demo”.
Le widget est gratuit dans le plugin Master Addons et fonctionne sans Elementor Pro.
Voir les onglets du filtre en action
Cette grille est le widget lui-même, pas une capture d'écran Quatre catégories et un onglet Tous se trouvent au-dessus, et cliquer sur une catégorie masque chaque élément qui ne porte pas cette étiquette Chaque carte ici montre également un titre et un sous-titre tirés de ses propres champs.
- Toutes les annonces
- Appartements
- Villas
- Maisons de ville
- Bureaux
Loft de la rue Cove
2 lits · 1 bain · 940 sq ft 2 450 $/mo
Marina Point 8B
1 lit · 1 bain · 680 sq ft 1 890 $/mo
Villa Ridgeway
4 lits 3 bains · piscine 1,24 M$
Serre sur orme
3 lits · 2 bains · 2 100 sq ft 980 000 $
Rangée Bricklane 12
3 lits 2 salles de bain · garage 720 000 $
Cour des Aulnes 4
2 lits · 2 bains · jardin clos 645 000 $
Travaux portuaires, étage 3
4 200 pieds carrés · 38 bureaux 6 400 $/mo
Le studio Quay
1 800 pieds carrés · 16 bureaux 2 950 $/moCe que vous pouvez faire avec le widget de galerie filtrable
Filtrage de catégorie avec contrôle total
Activez la barre de filtrage et les visiteurs voient les boutons de catégorie au-dessus de la galerie :“All”, “Branding”, “Photography”, “Web Design”, quelles que soient les étiquettes que vous avez définies Renommez l'onglet “All”, alignez la barre à gauche, au centre ou à droite, et stylisez les onglets actifs avec des couleurs, des arrière-plans et des bordures séparés afin que les gens sachent toujours ce qu'ils ont sélectionné.
- Attribuer chaque image à une catégorie en utilisant le champ Étiquette de filtre. Comma-séparé pour plusieurs catégories.
- Le style à l'état actif fait ressortir l'onglet sélectionné des autres.
- La typographie et l'espacement sur la barre de filtre sont entièrement personnalisables.
Aménagement de la galerie et effets 3D
Choisissez le nombre de colonnes, activez Maçonnerie pour une grille échelonnée de style Pinterest, et contrôlez l'espacement avec les paramètres Gutter Ensuite calque sur les effets interactifs : Hover Scale fait agrandir les éléments sur la souris, et l'Effet d'inclinaison ajoute une perspective 3 D qui suit le curseur avec un éblouissement facultatif C'est le genre de détail qui fait qu'une galerie se sent considérée au lieu de par défaut.
- Disposition de maçonnerie pour des hauteurs d'image dynamiques et inégales.
- Inclinaison 3 D avec perspective, vitesse et intensité d'éblouissement réglables.
- Balance de vol stationnaire avec vitesse de transition configurable.
- Colonnes réactives qui s'empilent proprement sur mobile.
Superpositions de texte stylisées et doubles CTA
Chaque élément de la galerie peut afficher une étiquette de titre, de sous-titre et de catégorie, chacune avec une typographie et une couleur indépendantes. En vol stationnaire, une couleur superposée s'estompe et deux boutons apparaissent :“Details” et “Demo” (ou n'importe quel texte que vous écrivez).Les deux boutons ont des contrôles complets d'état Normal et Hover pour l'arrière-plan, la couleur du texte, la bordure, le rayon et l'ombre.
- Separate Style de titre, Style de sous-titre, et sections Style de catégorie.
- Deux boutons par article, chacun stylisé indépendamment.
- Survolez la taille et la couleur des icônes pour correspondre à votre marque.
- Couleur de superposition d'image avec transition douce.
- Vous voulez plus d'animations de survol sur des images uniques ? essayez le Effets de survol d'image Widget.
Construire un portefeuille filtrable dans Elementor
Le propre widget Portfolio d'Elementor a besoin de Pro. Cette grille fonctionne sur Master Addons, donc la barre de filtre fonctionne sur une installation gratuite d'Elementor Chaque élément porte un titre de projet, un sous-titre pour la catégorie ou l'année, et deux champs de boutons, c'est ainsi qu'une carte de portefeuille peut pointer sur le site en direct et l'étude de cas en même temps Les boutons ci-dessous vont à la page de démonstration.
- Tous projets
- Résidentiel
- Hospitalité
- Commerce de détail
- Lieu de travail
Maison Ashgrove
Résidence privée · Melbourne · 2025
Appartement Lime Wash
Rénovation complète · Lisbonne · 2025
L'hôtel Fenwick
Lobby et salon · Édimbourg · 2024
Maison d'hôtes Kellner
32 chambres · Vienne · 2024
Vaisseau phare du Studio Nine
Aménagement du commerce de détail · Copenhague · 2025
Marlow et pli
Concept store · Toronto · 2023
QG de Beacon Labs
1 400 m² de lieu de travail · Berlin · 2025
Partenaires Ardents
Bureau et salle de réunion · Dublin · 2024Galerie filtrable dans Elementor sans Pro
La Galerie d'images gratuite d'Elementor est une grille avec une boîte à lumière Toute la liste de contrôle est des images, des colonnes, un espace, une légende, un lien et une boîte à lumière, il n'y a donc pas de barre de filtre et pas de maçonnerie dans Elementor garde son widget Galerie plus riche sur la liste Pro, qui est l'endroit où une licence entre Ce widget ajoute la barre de filtre sur une installation gratuite d'Elementor.
| Caractéristique | Galerie d'images d'éléments (gratuit) | Galerie d'images filtrables Master Addons |
|---|---|---|
| Catégorie filtrer les onglets | Non | Oui, à partir d'une étiquette filtrante par article |
| onglet“All” | Non | Oui, avec votre propre étiquette |
| Maçonnerie | Non | Oui |
| Colonnes | Oui | Oui, 1 à 6 |
| Boîte lumineuse | Oui | Oui |
| Légendes | La légende de la pièce jointe | Un titre, sous-titre et catégorie que vous tapez par article |
| Boutons sur un article | Non | Deux, chacun avec sa propre URL |
| Insigne ruban | Non | Oui |
| Inclinaison 3 D en vol stationnaire | Non | Oui, avec éblouissement |
| Besoins d'Elementor Pro | Non | Non |
Ce que le widget fait et ne fait pas
Tout ce qui se trouve ci-dessous a été coché dans le panneau du widget La seconde moitié compte autant que la première : si vous avez besoin d'une pagination ou d'un champ de recherche, ce n'est pas le bon widget et il est préférable de le savoir maintenant.
| Réglage | Soutenu |
|---|---|
| Catégorie filtrer les onglets | Oui, une étiquette de filtre par élément, séparée par des virgules pour plus d'un |
| onglet“All” | Oui, et vous pouvez le renommer |
| Maçonnerie | Oui |
| Verrouillage du rapport hauteur/largeur de l'image | Oui |
| Colonnes | 1 à 6, une valeur pour chaque taille d'écran |
| Popup Lightbox | Oui |
| Liens au lieu du popup | Oui |
| Boutons par article | Deux, chacun avec sa propre URL |
| Insigne ruban | Oui, 12 préréglages plus un champ de réduction |
| Étiquette titre, sous-titre et catégorie | Oui, chacun avec sa propre typographie |
| Info-bulle sur un article | Oui |
| Surcouche | En vol stationnaire, toujours, jamais, ou se cacher en vol stationnaire |
| Inclinaison 3 D avec éblouissement | Oui |
| Animation d'entrée | Oui |
| Charger plus de bouton | Non |
| pagination | Non |
| Boîte de recherche | Non |
| Articles vidéo | Non |
| Postes ou produits comme source | Non, la galerie est un répéteur que vous remplissez |
Autres widgets d'image dans le même plugin : Effets de survol d'image pour les légendes qui apparaissent en vol stationnaire, Carrousel d'images pour une rangée coulissante, Galerie Slider pour un grand aperçu avec une bande miniature, Point d'accès de l'image pour les marqueurs sur une seule image, et Image avancée pour une image avec une légende et un lien.
Exemples de galerie filtrables et cas d'utilisation
- Portfolios : laissez les visiteurs filtrer par type de projet, image de marque, web, photographie, illustration.
- Catalogues de produits : onglets de catégories pour“All”, “New Arrivals”, “SaleSale”, “Best Sellers”.
- Menus du restaurant : filtre par “Starters”, “Mains”, “Desserts”, “Drinks”.
- Listes immobilières : “Apartments”, “Houses”, “Commercial”, “Land”.
- Photographie de mariage : “Ceremony”, Réception”, “Portraits”, “Détails”.
- Études de cas d'agence : filtre par secteur de clientèle ou type de service.
Comment créer une galerie filtrable dans Elementor
- Lâchez le widget. Dans Elementor, recherchez dans“Filterable Image Gallery” sous Master Addons et faites-le glisser dans votre section.
- Ajouter des éléments de galerie. Cliquez + Ajouter un élément pour chaque image Téléchargez l'image, écrivez un titre et un sous-titre, définissez l'étiquette du filtre (nom de la catégorie) et ajoutez du texte et des liens sur le bouton si nécessaire.
- Activer la barre de filtre. Activez Afficher le filtre Nav, définissez votre nombre de colonnes, choisissez Maçonnerie ou grille régulière et ajustez l'espacement des gouttières. Activer l’échelle de survol et l’effet d’inclinaison pour l’interactivité.
- Style tout. Dans l'onglet Style, concevez la barre de filtrage, les cartes d'éléments, les superpositions de texte, les boutons et les états de survol Publiez une fois terminé.
Foire aux questions pour la galerie d'images filtrables
Qu'est-ce que le widget Galerie d'images filtrables ?
Un widget Elementor autonome qui transforme n'importe quelle grille d'images en une galerie filtrée par catégorie Les visiteurs cliquent sur les onglets de filtre pour afficher uniquement les éléments pertinents Chaque élément peut afficher un titre, un sous-titre et deux boutons d'appel à l'action stylisés.
Le widget Galerie d'images filtrables est-il gratuit ?
Oui. Il est livré avec le plugin gratuit Master Addons, vous pouvez donc créer une galerie filtrable sans licence Elementor Pro ou Master Addons Pro. Vous pouvez ajouter autant d'éléments de galerie que nécessaire.
Comment puis-je attribuer des éléments aux catégories de filtres ?
Dans la section Contenu de la galerie pour chaque élément, recherchez le champ Étiquette du filtre et entrez le nom de la catégorie (“Technology”, “Branding”, “Photography”).Tous les éléments ayant le même groupe d'étiquettes sous un seul bouton de filtrage Comma-séparé pour attribuer un élément à plusieurs catégories.
Elementor a-t-il une galerie filtrable ?
La Galerie d'images gratuite d'Elementor est une grille simple, elle n'a donc pas de barre de filtre Le widget Galerie Elementor livré avec Pro est la route payante Ce widget ajoute les onglets de catégorie sur une installation gratuite d'Elementor.
Puis-je construire un portfolio avec ce widget ?
Oui. Chaque élément prend un titre de projet, un sous-titre pour la catégorie ou l'année et deux boutons avec leurs propres URL, afin qu'une carte puisse pointer vers le site en direct et vers l'étude de cas.
Les visiteurs peuvent-ils ouvrir des images dans une lightbox ?
Oui. Chaque bouton peut créer un lien vers une fenêtre contextuelle de la lightbox, une URL externe ou une page de votre site. Définissez la destination du lien par élément dans la section contenu de la galerie.
La galerie est-elle réactive sur mobile ?
Oui. Les colonnes s'empilent automatiquement, quatre colonnes deviennent deux ou une sur des écrans plus petits Les boutons de filtrage s'enroulent pour s'adapter Utilisez le mode réactif d'Elementor pour ajuster les tailles de gouttière et de police pour mobile spécifiquement.
En quoi est-ce différent d’un carrousel d’images ou d’un curseur de galerie classique ?
Un carrousel ou un curseur montre une image à la fois et les parcourt en vélo Une galerie filtrable montre tout à la fois et permet aux visiteurs de rétrécir la grille par catégorie Utilisez le Carrousel d'images pour les sections de héros et les rangées de logos, ou Galerie Slider (Pro) lorsque vous souhaitez une grande image avec des vignettes Utilisez une galerie filtrable pour les portfolios, catalogues et collections où la navigation est importante.
La galerie a-t-elle plus de charge ou de pagination ?
Non. Chaque élément du répéteur se charge avec la page, donc un portefeuille de 40 images est livré en même temps sur les 40. Divisez de très grands ensembles entre les pages ou gardez les fichiers image légers.
Pourquoi mes onglets de filtre ne s'affichent-ils pas ?
Trois choses à vérifier : Afficher le filtre Nav est activé dans l'onglet Paramètres, chaque élément a une étiquette de filtre et le cache de page a été effacé après votre modification. Un élément avec une étiquette vide ne rejoint jamais une catégorie.
Widgets et extensions d'éléments tendance
Construisez des sites Web sophistiqués en moins de temps.
Glassmorphisme
Extras de conteneurs
Modèles
![Modules principaux Extension de duplicateur de messages/pages pour le lien de ligne Elementor : MA Duplicator dans la liste des pages WordPress créant une ébauche de page de destination - [Dupliqué n° 128]](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
Duplicateur de messages/pages
