Una cuadrícula de imágenes simple no brinda a los visitantes forma de navegar por tema. El Galería de imágenes filtrables widget adentro Complementos maestros para Elementor soluciona eso. Agrega filtros de categorías, superposiciones flotantes, cintas y enlaces de caja de luz a una galería estándar, para que pueda crear una cartera filtrable o una exhibición de productos sin escribir ningún código.
Así es como funciona cada pestaña y configuración, para que puedas configurar una Galería filtrable Elementor sin adivinar qué hacen los alternadores.
Qué hace el widget Filtrable Image Gallery #
El widget muestra una cuadrícula de imágenes y permite a los visitantes filtrarlas por categoría. Cada elemento de la galería admite un título, subtítulo, cinta, ícono flotante y dos botones de acción. El diseño, el espaciado, la animación superpuesta y la tipografía se controlan desde el panel Elementor, por lo que el mismo widget funciona para portafolios, lookbooks de comercio electrónico, galerías de viajes y paredes fotográficas de equipos.
Antes de empezar #
- WordPress con Elementor instalado y activo.
- Complementos maestros para Elementor instalado y activo. ¿Necesita ayuda? Ver el guía de instalación.
- Imágenes agrupadas en categorías por las que desea que los visitantes filtren.
Cómo agregar el widget Elementor Filtrable Gallery #
Abra el editor Elementor y busque Galería filtrable en el panel Elementos, o desplácese hacia abajo hasta la sección Addones maestros. Arrastre el widget a su página. Se carga con elementos de galería de marcador de posición, por lo que tiene algo en pantalla con lo que trabajar inmediatamente.
Cree su galería en la pestaña Contenido #
El Contenido la pestaña es donde agrega imágenes, asigna categorías de filtro y configura cintas y enlaces.
Contenidos de la galería #
El Contenidos de la galería la sección es un repetidor. Cada elemento representa una tarjeta de imagen. Hacer clic Agregar artículo para crear más tarjetas, o utilice el duplicado y elimine iconos para administrarlas.
Cada elemento tiene los mismos campos:
- Etiqueta de filtro: la categoría que utilizan los visitantes para filtrar. Ejemplos: Tecnología, Naturaleza, Arquitectura.
- Imágenes: haga clic para abrir el selector de medios y seleccionar las imágenes de esta tarjeta. Puedes seleccionar varios a la vez.
- Título: el encabezado principal que se muestra debajo o encima de la imagen.
- Subtitul: una línea más pequeña debajo del título.
- Mostrar cinta?: alternar para agregar una esquina o una insignia en línea.
- Cinta: el texto de la insignia, como Popular o Nuevo.
- Popup sau Links?: elija si la tarjeta abre una ventana emergente de Lightbox o se vincula a una URL.
- Botón Uno Texto / URL: etiqueta y destino del primer botón de acción.
- Botón dos Texto / URL: etiqueta y destino del segundo botón de acción.
Resolución de imágenes y columnas #
Debajo del repetidor, configure el Resolución de imagen WordPress debe servir y el número de Columnas. Seis columnas te dan miniaturas pequeñas; baje a tres cuando desee tarjetas más grandes con títulos legibles. Elija una resolución cercana al tamaño real de visualización; de lo contrario, estará cargando imágenes de tamaño completo en tarjetas pequeñas y la página pagará por ello.
Ajustes #
El Ajustes la sección controla el comportamiento general de la galería.
- Mostrar filtro Nav?: muestra los botones de filtro de categoría encima de la cuadrícula.
- Mostrar pestaña de filtro “Todos”: agrega un botón Todo para que los visitantes puedan restablecer el filtro.
- Texto de todas las categorías: la etiqueta del botón de reinicio, normalmente Todos.
- Mostrar información sobre herramientas?: habilita la información sobre herramientas en los botones de filtro.
- Relación de aspecto de la imagen: fuerza una proporción consistente en cada imagen.
- Canalul: el espacio entre elementos de la cuadrícula.
- Masonería: cambia la cuadrícula a un diseño de mampostería para alturas de imagen desiguales.
- Scale de flotare: hace un ligero zoom en la imagen al pasar el cursor.
- Valoarea scalei: cuánto se acerca la imagen, como 1.1.
- Efecto de inclinación: agrega una inclinación 3D que sigue al cursor.
Configuración de superposición #
El Configuración de superposición la sección decide qué aparece cuando un visitante pasa el cursor sobre un artículo.
- ¿Mostrar título?: muestra el título del artículo al pasar el cursor.
- Mostrar subtítulo?: muestra el subtítulo al pasar el cursor.
- Mostrar categoría?: muestra la etiqueta de categoría de filtro.
- Iconul de flotare?: agregue un ícono que aparezca al pasar el cursor, como una lupa o un símbolo de enlace.
- Tip superponibil: elija cuándo aparece la superposición. On Hover es el más común.
- Subtítulo: alterna el área de subtítulos debajo de la imagen.
- Direcția de flotare: permite efectos de desplazamiento direccional.
Estiliza la galería en la pestaña Estilo #
El Estilo tab cubre el contenedor de la tarjeta, la imagen, la superposición y los botones.
Estilo del artículo #
Estilo del artículo controla el envoltorio de tarjetas. Establezca aquí el relleno, el margen, el tipo de borde, el ancho del borde, el color del borde y el radio del borde. Un borde delgado con un radio pequeño es una forma rápida de separar las tarjetas de un fondo claro.
Estilo de imagen #
Estilo de imagen diseña la imagen en sí y su estado de vuelo estacionario.
- Estilo de imagen: elija el aspecto predeterminado o una superposición flotante.
- Color de superposición flotante: el tinte que cubre la imagen al flotar.
- Estilo de título: color y tipografía del título del artículo.
- Estilo de subtítulos de subtítulos: color y tipografía del subtítulo.
- Estilo de icono: tamaño y color del icono para el icono flotante.
Superposición #
El Superposición la sección selecciona la animación flotante. Las opciones incluyen Desvanecerse, Deslizarse desde la izquierda, Deslizarse desde arriba, Máscara desde abajo, Girar hacia adentro, Acercarse y Ampliar. Fade In es el valor predeterminado seguro; las variantes de diapositiva y rotación llaman más la atención sobre sí mismas, lo que puede desear o no en un portafolio.
Estilo de botones uno y dos #
Estilee los botones de acción por separado. Cada botón tiene estados Normal y Hover con controles para tipografía, relleno, color de texto, color de fondo, borde, radio de borde y sombra de cuadro.
Vea el resultado en vivo #
Publique o obtenga una vista previa de la página para ver la galería final. Los visitantes pueden pasar el cursor sobre un elemento para ver la superposición, el título y el ícono, o hacer clic para abrir la caja de luz o el enlace. Si habilitó la navegación del filtro, también pueden hacer clic en los botones de categoría para mostrar solo imágenes coincidentes.
Una cosa que debes comprobar: si los botones de filtro no responden en la página en vivo pero funcionan bien en el editor, probablemente tu complemento de optimización o almacenamiento en caché esté aplazando o combinando el JavaScript de la galería. Excluya los scripts de complementos maestros de la optimización de JS y borre el caché.
Casos de uso comunes #
- Paginile de portafolio: deje que los clientes filtren por marca, diseño web o fotografía.
- Catalogări de produs: agrupe los artículos por categoría, color o colección.
- Galerías de viajes o inmobiliarias: filtrar por ubicación o tipo de propiedad.
- Álbumes de equipos o eventos: organiza fotos por departamento o sesión.
Consejos para una mejor galería filtrable #
- Utilice tamaños de imagen consistentes. Mantiene la rejilla limpia, especialmente cuando la mampostería está apagada.
- Mantenga las etiquetas de los filtros cortas. Una o dos palabras encajan mejor en la barra de filtro.
- Habilite la relación de aspecto de la imagen si sus imágenes fuente tienen diferentes dimensiones.
- Elija un fuerte efecto flotante en lugar de apilar escala, inclinación y una superposición ocupada.
- Comprima las imágenes antes de cargarlas. Una galería llena de fotografías sin comprimir es una de las causas más comunes de una página lenta.
Vídeotutorial #
Si desea ver el widget Filtrable Gallery en acción, este video recorre la configuración completa, desde agregar elementos de galería a la cuadrícula filtrada en la página en vivo:
Preguntas frecuentes #
¿cómo creo una galería filtrable en Elementor?
Instale complementos maestros para Elementor, agregue el widget Galería filtrable, cree elementos de galería, asigne una etiqueta de filtro a cada elemento y habilite Mostrar navegación de filtro en la sección Configuración. Luego, los visitantes pueden hacer clic en los botones de categoría para filtrar la cuadrícula.
¿la galería filtrable de complementos maestros es gratuita?
La versión gratuita de Master Addons incluye un gran conjunto de widgets. Consulta el página de precios para ver si Filtrable Gallery está en el plan gratuito o necesita Pro.
¿Puedo agregar una caja de luz a las imágenes de la galería?
Sí. Configure la opción Ventana emergente o Enlaces en Ventana emergente para cada elemento de la galería. Luego, los visitantes pueden hacer clic en una imagen para abrirla en una caja de luz.
¿el widget admite diseño de mampostería?
Sí. Active el interruptor Masonry en la sección Configuración para mostrar imágenes en un diseño estilo Pinterest con alturas desiguales.
¿Puedo agregar una cinta o insignia a los artículos de la galería?
Sí. Active Mostrar cinta en el elemento de la galería e ingrese el texto de la cinta, como Popular o Venta. La cinta aparece en la tarjeta de imagen.
Envolviendo #
Los complementos maestros Galería de imágenes filtrables widget convierte una cuadrícula de imágenes estáticas en una galería basada en categorías que los visitantes pueden explorar. La navegación por filtro, las superposiciones flotantes, las cintas y la compatibilidad con Lightbox están integradas, por lo que no necesitará un complemento de galería separado para la mayoría de los proyectos.
Para obtener más herramientas de imagen, explore Widget de imagen avanzada, Carrusel de imágenes, y Control deslizante de galería. También puedes leer nuestro resumen de Complementos de galería filtrables de Elementor o navega por completo Widgets y extensiones de complementos maestros colección.
