Galerie d'images filtrables

Une grille d'images simple ne donne aux visiteurs aucun moyen de parcourir par sujet. Le Galerie d'images filtrables widget dans Modules complémentaires principaux pour Elementor corrige cela. Il ajoute des filtres de catégorie, des superpositions de vol stationnaires, des rubans et des liens de boîte à lumière à une galerie standard, afin que vous puissiez créer un portefeuille filtrable ou une vitrine de produits sans écrire de code.

Voici comment chaque onglet et paramètre fonctionne, afin que vous puissiez configurer un Galerie filtrable Elementor sans deviner ce que font les bascules.

Ce que fait le widget Galerie d'images filtrables #

Le widget affiche une grille d'images et permet aux visiteurs de les filtrer par catégorie Chaque élément de la galerie prend en charge un titre, un sous-titre, un ruban, une icône de survol et deux boutons d'action. La disposition, l'espacement, l'animation de superposition et la typographie sont tous contrôlés à partir du panneau Élémenteur, de sorte que le même widget fonctionne pour les portfolios, les lookbooks de commerce électronique, les galeries de voyage et les murs de photos d'équipe.

Avant de commencer #

• WordPress avec Élémenteur installé et actif.
• Modules complémentaires principaux pour Elementor installé et actif Besoin d'aide ? voir le guide d'installation.
• Images regroupées en catégories que vous souhaitez que les visiteurs filtrent.

Comment ajouter le widget Elementor Filterable Gallery #

Ouvrez l'éditeur Elementor et recherchez Galerie Filtrable dans le panneau Éléments, ou faites défiler vers le bas jusqu'à la section Addons principaux Faites glisser le widget sur votre page Il se charge avec les éléments de la galerie des espaces réservés, vous avez donc quelque chose à l'écran avec lequel travailler immédiatement.

Construisez votre galerie dans l'onglet Contenu #

Le Contenu tab est l'endroit où vous ajoutez des images, attribuez des catégories de filtres et configurez des rubans et des liens.

Contenu de la galerie #

Le Contenu de la galerie section est un répéteur Chaque élément représente une carte image Cliquez Ajouter un élément pour créer plus de cartes, ou utilisez les icônes dupliquées et supprimées pour les gérer.

Chaque élément a les mêmes champs :

• Étiquette du filtre : la catégorie que les visiteurs utilisent pour filtrer Exemples : Technologie, Nature, Architecture.
• Images: cliquez pour ouvrir le sélecteur de médias et sélectionnez les images de cette carte Vous pouvez en sélectionner plusieurs à la fois.
• Titre: le titre principal indiqué sous ou sur l'image.
• Sous-titre : une ligne plus petite sous le titre.
• Afficher le ruban?: basculer pour ajouter un badge de coin ou en ligne.
• Ruban: le texte du badge, tel que Populaire ou Nouveau.
• Popup ou liens?: choisissez si la carte ouvre une fenêtre contextuelle de la lightbox ou des liens vers une URL.
• Bouton un Texte/URL : étiquette et destination pour le premier bouton d'action.
• Bouton Deux Texte/URL : étiquette et destination du deuxième bouton d'action.

Résolution d'image et colonnes #

Sous le répéteur, définissez le Résolution d'image WordPress devrait servir et le nombre de Colonnes. Six colonnes vous donnent de petites vignettes ; passez à trois lorsque vous voulez des cartes plus grandes avec des titres lisibles Choisissez une résolution proche de la taille réelle de l'affichage, sinon vous chargez des images en taille réelle dans de petites cartes et la page paie pour cela.

Paramètres #

Le Paramètres section contrôle le comportement global de la galerie.

• Afficher le filtre Nav?: affiche les boutons de filtrage des catégories au-dessus de la grille.
• Afficher l'onglet de filtre“All” : ajoute un bouton Tout pour que les visiteurs puissent réinitialiser le filtre.
• Toutes les catégories Texte : l'étiquette du bouton de réinitialisation, généralement All.
• Afficher l'info-bulle?: active les info-bulles sur les boutons de filtrage.
• Rapport d'aspect de l'image : force un rapport cohérent sur chaque image.
• Gouttière: l'espace entre les éléments de la grille.
• Maçonnerie: commute la grille sur une disposition en maçonnerie pour des hauteurs d'image inégales.
• Échelle de survol : zoome légèrement l'image en vol stationnaire.
• Valeur d'échelle : combien l'image zoome, comme 1.1.
• Effet d'inclinaison : ajoute une inclinaison 3 D qui suit le curseur.

Paramètre de superposition #

Le Paramètre de superposition section décide de ce qui apparaît lorsqu'un visiteur survole un objet.

• Afficher le titre?: afficher le titre de l'article en vol stationnaire.
• Afficher le sous-titre?: afficher le sous-titre en vol stationnaire.
• Afficher la catégorie?: afficher l'étiquette de la catégorie de filtre.
• Icône de survol?: ajoutez une icône qui apparaît sur le vol stationnaire, comme une loupe ou un symbole de lien.
• Type de superposition : choisissez quand la superposition apparaît On Hover est la plus courante.
• Légende: basculez la zone de légende sous l'image.
• Direction du vol stationnaire : active les effets de survol directionnels.

Stylez la galerie dans l'onglet Style #

Le Style l'onglet couvre le conteneur de cartes, l'image, la superposition et les boutons.

Style d'article #

Style d'article contrôle l'emballage de la carte. Définissez ici le remplissage, la marge, le type de bordure, la largeur de bordure, la couleur de bordure et le rayon de bordure. Une fine bordure avec un petit rayon est un moyen rapide de séparer les cartes d'un fond clair.

Style d'image #

Style d'image stylise l'image elle-même et son état de vol stationnaire.

• Style d'image : choisissez la valeur par défaut ou un look overlay.
• Couleur de superposition du survol : la teinte qui recouvre l'image en vol stationnaire.
• Style de titre : couleur et typographie pour le titre de l'article.
• Style de sous-titre de légende : couleur et typographie pour le sous-titre.
• Style d'icône : taille et couleur de l'icône pour l'icône de survol.

Surcouche #

Le Surcouche la section sélectionne l'animation de survol Les options incluent Fade In, Slide From Left, Slide From Top, Mask From Bottom, Rotate In, Zoom In et Scale Up. Fade In est la valeur par défaut sûre ; les variantes slide et rotative attirent davantage l'attention sur elles-mêmes, ce que vous pouvez ou non vouloir sur un portfolio.

Bouton un et deux styles #

Stylez les boutons d'action séparément Chaque bouton a des états Normal et Hover avec des commandes pour la typographie, le remplissage, la couleur du texte, la couleur d'arrière-plan, la bordure, le rayon de bordure et l'ombre de la boîte.

Voir le résultat en direct #

Publier ou prévisualiser la page pour voir la galerie finale Les visiteurs peuvent survoler un élément pour voir la superposition, le titre et l'icône, ou cliquer pour ouvrir la boîte à lumière ou le lien Si vous avez activé le filtre de navigation, ils peuvent également cliquer sur les boutons de catégorie pour afficher uniquement les images correspondantes.

Une chose à vérifier : si les boutons de filtrage ne répondent pas sur la page en direct mais fonctionnent bien dans l'éditeur, votre plugin de mise en cache ou d'optimisation est probablement de différer ou de combiner le JavaScript de la galerie Exclure les scripts Master Addons de l'optimisation JS et effacer le cache.

Cas d'utilisation courants #

• Pages de portefeuille : laissez les clients filtrer par image de marque, conception Web ou photographie.
• Catalogues de produits : regroupez les articles par catégorie, couleur ou collection.
• Galeries de voyage ou immobilières : filtrer par emplacement ou type de propriété.
• Albums d'équipe ou d'événement : organiser les photos par département ou session.

Conseils pour une meilleure galerie filtrable #

• Utilisez des tailles d'image cohérentes. Il maintient la grille propre, surtout lorsque la maçonnerie est éteinte.
• Gardez les étiquettes des filtres courtes. Un ou deux mots correspondent le mieux à la barre de filtre.
• Activer le rapport d'aspect de l'image si vos images sources ont des dimensions différentes.
• Choisissez un effet de vol stationnaire puissant au lieu d'empiler l'échelle, l'inclinaison et une superposition chargée.
• Compresser les images avant de télécharger. Une galerie pleine de photos non compressées est l'une des causes les plus courantes d'une page lente.

Tutoriel Vidéo #

Si vous souhaitez voir le widget Filterable Gallery en action, cette vidéo parcourt la configuration complète, depuis l'ajout d'éléments de galerie à la grille filtrée sur la page en direct :

Foire aux questions #

Envelopper #

Les modules principaux Galerie d'images filtrables widget transforme une grille d'images statique en une galerie basée sur les catégories que les visiteurs peuvent réellement parcourir La navigation par filtre, les superpositions de vol stationnaire, les rubans et la prise en charge de la boîte à lumière sont tous intégrés, vous n'aurez donc pas besoin d'un plugin de galerie séparé pour la plupart des projets.

Pour plus d'outils d'image, explorez le Widget d'image avancé, Carrousel d'images, et Galerie Slider. Vous pouvez également lire notre résumé de Plugins de galerie filtrables Elementor ou parcourir le complet Widgets et extensions Master Addons collection.