Principaux points à retenir
- Les six exemples sont des pages de démonstration en direct construites avec le même widget, vous pouvez donc ouvrir chacune d'elles et cliquer vous-même sur les onglets.
- Chacun utilise quatre catégories plus un onglet Tous, qui maintient la barre sur une seule ligne sur un ordinateur portable.
- L'onglet Tout est renommé dans chaque conception : “Toutes les annonces”, “Full menu”, “Tous les travaux”, “Tous les projets”, “Shop all” et “Every destination”.
- Le nombre de colonnes va de deux pour les études de cas intérieurs à quatre pour le menu du restaurant et la grille des magasins.
- Deux des six boutons de mise sur chaque carte, deux utilisent une icône de survol qui ouvre l'image et deux n'utilisent aucun des deux.
Une galerie filtrable a l'air différente selon ce qu'elle contient Un menu de restaurant veut des cartes denses à quatre colonnes avec les prix, un studio d'intérieur veut deux grosses colonnes et un lien d'étude de cas, et un photographe veut que les photos portent tout.
Les six designs ci-dessous sont des pages de démonstration en direct sur lesquelles vous pouvez cliquer Chaque entrée note les catégories, le nombre de colonnes et les paramètres qui lui donnent son caractère, afin que vous puissiez copier la forme qui correspond à votre contenu.
Table des matières
Les six exemples en un coup d'œil
| Exemple | Catégories | Articles | Colonnes | Liens cartes |
|---|---|---|---|---|
| Annonces de propriétés | Appartements, Villas, Maisons de ville, Bureaux | 8 | 3 | Deux boutons |
| Menu restaurant | Petites assiettes, plats, desserts, cocktails | 8 | 4 | Icône de survol |
| Photographie de mariage | Cérémonie, Portraits, Réception, Détails | 9 | 3 | Icône de survol |
| Projets intérieurs | Résidentiel, Hôtellerie, Commerce de détail, Lieu de travail | 8 | 2 | Un bouton |
| Catalogue de produits | Sacs, Chaussures, Montres, Vêtements d'extérieur | 8 | 4 | Deux boutons |
| Destinations de voyage | Europe, Asie, Amériques, Afrique | 8 | 3 | Icône de survol |
Exemples de galerie filtrables
1. Annonces de propriétés
Huit annonces réparties dans quatre catégories, avec l'onglet Tous renommé en “Toutes les annonces” Chaque carte porte le nom de la propriété comme titre et la ligne de spécification comme sous-titre, donc “2 lit, 1 bain, 940 pieds carrés, 2 450 $/mo” se trouve sous la photo Deux boutons par carte gèrent les deux choses qu'un visiteur veut : des détails et une visualisation.
Le détail à copier est le ruban : un badge de coin indiquant Nouveau ou Prix Baisse sur deux des huit cartes attire l'œil sans toucher à la disposition.
2. Menu du restaurant
Quatre colonnes sur fond sombre, avec l'onglet Tous lisant “Full menu” Le nom du plat est le titre et le prix est le sous-titre, qui est toute la structure du menu dans deux champs Les cours deviennent le filtre, donc un visiteur qui ne veut que du dessert y arrive en un clic.
Quatre colonnes fonctionnent ici parce que les photos sont des cultures serrées de plats simples Une photographie de scène large à quatre colonnes serait illisible.
3. Photographie de mariage
Neuf images, quatre parties de la journée, et presque pas de texte L'onglet Tous indique “Tous les travaux” et les cartes utilisent une icône de survol plutôt que des boutons, donc un clic ouvre l'image au lieu de naviguer C'est le design à copier lorsque les photographies sont le produit.
Ce qui le fait fonctionner, c'est ce qu'il laisse de côté : pas de rubans, pas de boutons et pas de sous-titres en concurrence avec les images.
4. Projets intérieurs
Deux colonnes, donc chaque projet obtient un espace réel, avec la superposition définie pour afficher à tout moment plutôt que sur le vol stationnaire Un bouton par carte, lecture de “View case study” La barre de filtre est alignée à gauche plutôt que centrée, ce qui convient à la sensation éditoriale.
Deux colonnes est le choix qui mérite d'être copié pour un travail qui mérite un deuxième regard Huit projets à deux colonnes tiennent toujours dans un écran de défilement.
5. Catalogue de produits
Quatre colonnes, nom du produit comme titre, prix comme sous-titre, et deux boutons de lecture “Quick view” et “Ajouter au sac” L'onglet Tout indique “Shop all” Cela ressemble à une page boutique sans en être une : les cartes sont des images avec des liens plutôt que des produits, donc rien ne va dans un panier Pour un lookbook qui pointe vers un magasin, ça suffit.
Le motif à deux boutons est la partie utile : une action douce, une action ferme.
6. Destinations de voyage
Continents comme le filtre, avec l'onglet Tous renommé Every“ destination” L'échelle de vol stationnaire est définie plus haut que les autres démos, donc les cartes se lèvent plus sensiblement sous le curseur Les titres nomment le lieu et les sous-titres ajoutent le détail.
L'onglet All renommé fait ici un vrai travail“. Chaque destination” indique à un visiteur quel est l'ensemble ; “All” ne lui dit rien.
Ce que les six ont en commun
- Quatre catégories dans les six modèles Quatre onglets plus Tous tiennent sur une ligne sur un ordinateur portable et se enveloppent à deux sur un téléphone.
- L'onglet Tous est renommé à chaque fois, avec six étiquettes différentes et aucune n'est laissée par défaut.
- Titre en haut, détail en dessous, dans chaque conception qui utilise du texte.
- Le nombre de colonnes suit la photographie : les cultures serrées prennent quatre colonnes, les scènes et les pièces en prennent deux ou trois.
- Comportement en un clic par carte, soit des boutons, soit une icône de boîte à lumière, jamais les deux.
Construire l'un de ceux-ci
Chaque conception est le même widget avec des paramètres différents La build est : ajouter un élément par image, taper une Étiquette de filtre sur chacun pour créer les onglets, définir les colonnes, puis décider si les cartes recadrent à une hauteur uniforme avec le rapport d'aspect de l'image ou conserver leurs propres proportions Les titres, les sous-titres et le comportement de superposition sont en direct dans la section Paramètre de superposition, et les deux boutons sont assis sur chaque élément.
La procédure pas à pas complète est en comment créer une galerie filtrable dans Elementor(en), et le widget lui-même est le Galerie d'images filtrables.
Questions fréquemment posées
Puis-je importer ces exemples comme modèles ?
Ce sont des pages de démonstration plutôt que des kits importables La reconstruction d'une prend environ dix minutes, puisque la structure est une poignée de paramètres et vos propres images.
Combien de catégories une barre de filtre doit-elle avoir ?
Quatre est le motif sur les six modèles Au-delà de six, la barre s'enroule sur un ordinateur portable et commence à lire comme un deuxième menu.
Une image peut-elle apparaître sous deux onglets ?
Oui. Mettez les deux noms de catégorie dans le champ Étiquette de filtre, séparés par une virgule.
Les démos utilisent-elles de la maçonnerie ?
Non. Les six crop cards à une hauteur uniforme, c'est pourquoi les grilles semblent bien rangées La maçonnerie est un commutateur séparé pour les ensembles aux orientations mixtes.
L'exemple du magasin peut-il prendre des paiements ?
Non. C'est une galerie avec des boutons, donc les cartes renvoient partout où vous les pointez. Le paiement appartient à WooCommerce.
Réflexions finales
Six designs, un widget et quatre décisions entre eux : combien de colonnes, si les cartes recadrent, ce que font les boutons et comment s'appelle l'onglet Tout. Partez de l'exemple le plus proche de votre contenu et modifiez ces quatre.
Lecture connexe
