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.
Ce 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.
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.
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.
Widgets et extensions d'éléments tendance
Construisez des sites Web sophistiqués en moins de temps.
Glassmorphisme
Extras de conteneurs
Modèles
Duplicateur de messages/pages
