Principaux points à retenir
- Le widget gratuit Image Gallery d'Elementor n'a pas de barre de filtrage La liste de contrôle est composée d'images, de colonnes, de lacunes, de légendes, de liens et de lightbox.
- Deux itinéraires vous donnent des onglets de catégorie : Widget Galerie d'Elementor, qui est sur la liste Pro, ou un widget addon sur une installation gratuite d'Elementor.
- Avec le Galerie d'images filtrables Master Addons la catégorie provient d'une étiquette de filtre que vous tapez sur chaque élément, donc une image peut se situer dans plusieurs catégories.
- Afficher Filter Nav et Afficher les“All” Filter Tab sont tous deux activés par défaut et le texte de l'onglet Tout est modifiable.
- Lorsque les onglets n'apparaissent pas, la cause est presque toujours une étiquette de filtre vide, Afficher le filtre Nav désactivé ou un cache de page desservant l'ancien balisage.
Une galerie filtrable est une grille avec une rangée de boutons de catégorie au-dessus. Cliquez sur Portraits et les portraits restent tandis que tout le reste disparaît. Ce sont les portefeuilles de mise en page, les catalogues de produits et les ensembles de photos qui s'adressent, car faire défiler quarante images pour trouver un type de travail n'est l'idée que personne ne se fait d'un bon moment.
Elementor peut le faire, mais pas dans le widget gratuit Image Gallery Ce guide couvre les deux itinéraires : ce qu'Elementor lui-même offre, et comment construire la même chose sur un Elementor gratuit installer avec un addon.
Table des matières
Ce que Elementor vous donne hors de la boîte
Ouvrez le panneau du widget sur une installation gratuite d'Elementor, recherchez la galerie et vous obtenez le widget Galerie d'images Sa liste de contrôle est Ajouter des images, Résolution d'image, Colonnes, Légende, Lien, Boîte à lumière, Commandez et un curseur d'espacement dans l'onglet Style Les colonnes vont de 1 à 10 et commencent à 4, Légende offre la légende de la pièce jointe ou rien, et Lien envoie l'image au fichier multimédia, à la page de pièce jointe ou nulle part Cela vous donne une grille avec une boîte à lumière Il n'y a pas de barre de filtre, pas de maçonnerie et pas de titre par image.
Elementor dispose d'un deuxième widget de galerie, appelé Gallery, et celui-là est Pro. Il contient les options de mise en page et la barre de filtre. Une barre de filtre d'Elementor signifie elle-même une licence Pro.
Route 1 : le widget Elementor Gallery (Pro)
Si vous payez déjà pour Elementor Pro, commencez ici, car c'est un plugin de moins Le widget Galerie contient plusieurs galeries dans un widget et donne à chacune un nom, et ces noms deviennent la barre de filtre.
- Faites glisser le widget Galerie sur la page.
- Type de commutateur de Single à Multiple. Single est la barre de filtre par défaut et elle n'a pas de barre de filtre.
- Ajoutez une galerie par catégorie dans le répéteur Galeries et remplissez le champ Titre, car ce texte devient l'onglet.
- Choisissez une mise en page : grille, justifié ou maçonnerie. La grille et la maçonnerie utilisent le contrôle Colonnes, qui commence à 4 sur le bureau, 2 sur la tablette et 1 sur mobile. Justified utilise plutôt la hauteur de rangée.
- Laissez le commutateur de filtre “All” activé et renommez-le dans l'étiquette de filtre “All” si “All” est trop vague.
Le compromis est la façon dont les catégories sont stockées Chaque image appartient à la galerie dans laquelle vous l'avez déposée, donc une image qui appartient à deux catégories doit être ajoutée deux fois La route d'addon ci-dessous gère cela avec un champ de texte à la place.
Route 2 : le widget Master Addons, étape par étape
Cet itinéraire fonctionne sur une installation gratuite d'Elementor Installez Master Addons, assurez-vous que le widget Filtrable Image Gallery est activé dans la liste des widgets du plugin, puis procédez comme suit.
Étape 1 : ajoutez le widget et vos images
Recherchez la galerie d'images filtrables dans le panneau Élémenteur et faites-la glisser. Les images sont ajoutées un élément à la fois dans le répéteur de contenu de la galerie plutôt que dans un seul sélecteur de médias, ce qui rend les champs par élément possibles.
Columns prend un nombre de 1 à 6 et la valeur par défaut est 3. une chose à savoir avant de planifier une mise en page : ce contrôle n'est pas réactif, donc le même nombre de colonnes s'applique sur chaque taille d'écran La grille elle-même reflue toujours sur les écrans étroits, mais vous ne pouvez pas définir quatre colonnes sur le bureau et deux sur la tablette à partir du panneau.
Étape 2 : donnez à chaque élément une étiquette de filtre
Ouvrez une ligne de répéteur et vous obtenez les champs qui construisent la carte : l'image, un titre, un sous-titre, un ruban, le comportement de popup ou de lien, deux boutons avec leurs propres URL et l'étiquette de filtre.
Tapez le nom de la catégorie exactement comme vous voulez qu'il lise sur le bouton, car l'onglet est construit à partir de ce texte Séparez plusieurs catégories par des virgules lorsqu'un élément appartient à plus d'un, qui est la partie que la route Pro ne peut pas faire sans dupliquer l'image.
Étape 3 : activez la barre de filtrage et nommez l'onglet Tout
Ouvrez la section Paramètres Afficher le filtre Nav et Afficher les“All” Filter Tab sont tous deux activés par défaut, et All Categories Text définit ce que dit le premier bouton. “Tous les projets”, “Shop all” et “Full menu” tous lus mieux qu'une simple “All”.
Étape 4 : vérifiez-le sur l'avant
Enregistrer et afficher la page La barre de filtre effectue un rendu au-dessus de la grille, l'onglet Tout est actif et cliquer sur une catégorie masque chaque élément sans cette étiquette.
Les paramètres qui modifient le comportement du filtre
| Réglage | Où | Ce qu'il fait |
|---|---|---|
| Étiquette du filtre | Chaque élément répéteur | Construit les onglets. virgule séparée pour plusieurs catégories. |
| Afficher le filtre Nav | Paramètres | Cache toute la barre lorsqu'elle est éteinte, c'est ainsi que vous obtenez une grille simple. |
| Afficher l'onglet de filtre“All” | Paramètres | Supprime le premier onglet si vous souhaitez que les visiteurs choisissent immédiatement une catégorie. |
| Toutes les catégories Texte | Paramètres | Renomme l'onglet Tout. |
| Rapport d'aspect d'image | Paramètres | Recadre chaque carte à la même hauteur Off garde les proportions propres de chaque image. |
| Gouttière | Paramètres | Espace entre les cartes. Réactif, 0 à 40 px, 10 par défaut. |
| Colonnes | Contenu | 1 à 6, une valeur pour chaque taille d'écran. |
| Type de superposition | Paramètre de superposition | En vol stationnaire, toujours, jamais, ou se cacher en vol stationnaire. |
| Popup ou liens | Chaque élément répéteur | Ouvre l'image dans une lightbox, ou envoie la carte à une URL. |
Deux choses que le widget n'a pas, donc vous pouvez planifier autour d'eux : il n'y a pas de bouton de chargement plus et pas de pagination, donc chaque élément se charge avec la page, et il n'y a pas de champ de recherche Pour un portfolio de quarante images qui est bien sur un hôte décent, mais une archive de deux cents images veut se diviser en pages.
Onglet de filtrage ne s'affichant pas ? vérifiez ces quatre choses
Quatre choses sont à l’origine de cela, et les deux premières en représentent la majeure partie.
- Une étiquette de filtre vide Un élément sans étiquette ne rejoint jamais une catégorie, et si aucun élément n'en possède, il n'y a rien à partir duquel construire des onglets.
- Afficher le filtre Nav désactivé. Il est par défaut activé, il s'agit donc généralement de la modification précédente de quelqu'un.
- Une page mise en cache. Les caches de page et les CDN servent le balisage avant que vous n'ajoutiez les étiquettes, alors effacez le cache et rechargez avec un rafraîchissement dur.
- Les étiquettes qui diffèrent d'un caractère.“Portraits” et “portraits ” avec un espace de fin sont deux catégories, vous obtenez donc deux onglets contenant chacun la moitié de l'ensemble.
Si les onglets apparaissent mais que cliquer sur un ne fait rien, le script de filtrage ne s'est pas exécuté Cela pointe vers une erreur JavaScript d'un autre plugin sur la même page, ou un optimiseur de script reportant le fichier. Désactivez la combinaison JS pour cette page et testez à nouveau.
Questions fréquemment posées
Elementor a-t-il une galerie filtrable ?
Pas dans la version gratuite Le widget gratuit Image Gallery est une grille avec une lightbox Le widget Elementor's Gallery, qui peut montrer plusieurs galeries nommées avec une barre de filtrage, est sur sa liste Pro.
Une image peut-elle se situer en deux catégories ?
Oui, avec la route des addons Mettez les deux noms de catégories dans le champ Étiquette de filtre, séparés par une virgule, et l'élément s'affiche sous les deux onglets.
Puis-je modifier ce que dit le bouton Tous ?
Oui. Toutes les catégories Le texte de la section Paramètres le définit, afin que vous puissiez utiliser “All work”, “Shop all” ou tout ce qui correspond à la page.
La galerie a-t-elle plus de charge ou de pagination ?
Non. Chaque élément se rend avec la page Gardez les ensembles à une taille qui se charge confortablement, ou divisez une grande archive sur plusieurs pages.
La galerie travaillera-t-elle sur mobile ?
Oui, la grille se reflue et les boutons de filtrage s'enroulent N'oubliez pas que la valeur Colonnes s'applique à chaque taille d'écran, choisissez donc un numéro qui se lit toujours bien sur un téléphone.
Réflexions finales
Sur Elementor Pro, le widget Galerie vous y amène et vous n'installez rien Sur une installation gratuite, un widget addon le fait, et le champ Étiquette de filtre a l'avantage pour toute personne dont le travail entre dans plus d'une catégorie.
Quel que soit l'itinéraire que vous empruntez, passez du temps sur les noms des catégories Quatre catégories claires réduisent la grille à ce que le visiteur est venu chercher ; neuf vagues déplacent simplement le problème dans la barre de filtre.
Lecture connexe
