Conclusiones clave
- Los seis ejemplos son páginas de demostración en vivo creadas con el mismo widget, por lo que puedes abrir cada una y hacer clic en las pestañas tú mismo.
- Cada uno usa cuatro categorías más una pestaña Todo, que mantiene la barra en una sola línea en una computadora portátil.
- Se cambia el nombre de la pestaña Todo en cada diseño: “Todos los listados”, “Menú completo”, “Todo el trabajo”, “Todos los proyectos”, “Comprar todo” y “Cada destino”.
- Los recuentos de columnas van desde dos para estudios de casos de interiores hasta cuatro para el menú del restaurante y la cuadrícula de tiendas.
- Dos de los seis botones colocados en cada tarjeta, dos usan un ícono flotante que abre la imagen y dos no usan ninguno.
Una galería filtrable se ve diferente según lo que contenga. El menú de un restaurante quiere tarjetas densas de cuatro columnas con precios, un estudio de interiores quiere dos columnas grandes y un enlace de estudio de caso, y un fotógrafo quiere que las imágenes lleven todo.
Los seis diseños a continuación son páginas de demostración en vivo por las que puede hacer clic. Cada entrada anota las categorías, el recuento de columnas y las configuraciones que le dan su carácter, para que pueda copiar la forma que coincida con su contenido.
Tabla de contenidos
Los seis ejemplos de un vistazo
| Ejemplo | Categorías | Artículos | Columnas | Enlaces de tarjetas |
|---|---|---|---|---|
| Listados de propiedades | Apartamentos, Villas, Casas adosadas, Oficinas | 8 | 3 | Dos botones |
| Menú del restaurante | Platos Pequeños, Red, Postres, Cócteles | 8 | 4 | Icono flotante |
| Fotografía de boda | Ceremonia, Retratos, Recepción, Detalles | 9 | 3 | Icono flotante |
| Proyectos de interiores | Residencial, Hospitalidad, Comercio Minorista, Lugar de Trabajo | 8 | 2 | Un botón |
| Catálogo de productos | Bolsos, Calzado, Relojes, Ropa de abrigo | 8 | 4 | Dos botones |
| Destinos de viaje | Europa, Asia, América, África | 8 | 3 | Icono flotante |
Ejemplos de galería filtrables
1. Listados de propiedades
Ocho listados en cuatro categorías, y la pestaña Todos cambió de nombre a “Todos los listados”. Cada tarjeta lleva el nombre de la propiedad como título y la línea de especificación como subtítulo, por lo que “2 camas, 1 baño, 940 pies cuadrados, $2450/mes” se encuentra debajo de la foto. Dos botones por tarjeta manejan las dos cosas que un visitante desea: detalles y una visita.
El detalle que vale la pena copiar es la cinta: una insignia en la esquina que dice Nuevo o Caída de precio en dos de las ocho cartas llama la atención sin tocar el diseño.
2. Menú del restaurante
Cuatro columnas sobre un fondo oscuro, con la pestaña Todo leyendo “Menú completo”. El nombre del plato es el título y el precio es el subtítulo, que es toda la estructura del menú en dos campos. Los cursos se convierten en el filtro, por lo que un visitante que sólo quiere postre llega con un solo clic.
Aquí funcionan cuatro columnas porque las fotografías son cultivos apretados de platos individuales. La fotografía de escenas amplias en cuatro columnas sería ilegible.
3. Fotografía de boda
Nueve fotogramas, cuatro partes del día y casi ningún texto. La pestaña Todo dice “Todo funciona” y las tarjetas usan un ícono flotante en lugar de botones, por lo que un clic abre la imagen en lugar de alejarse. Este es el diseño para copiar cuando las fotografías son el producto.
Lo que lo hace funcionar es lo que omite: sin cintas, sin botones y sin subtítulos que compitan con las imágenes.
4. Proyectos de interiores
Dos columnas, por lo que cada proyecto obtiene espacio real, con la superposición configurada para mostrarse en todo momento en lugar de flotar. Un botón por tarjeta que dice “Ver estudio de caso”. La barra de filtro está alineada hacia la izquierda en lugar de centrada, lo que se adapta a la sensación editorial.
Dos columnas es la opción que vale la pena copiar para un trabajo que merece una segunda mirada. Ocho proyectos en dos columnas todavía caben en una pantalla de desplazamiento.
5. Catálogo de productos
Cuatro columnas, nombre del producto como título, precio como subtítulo y dos botones que dicen “Vista rápida” y “Agregar a la bolsa”. La pestaña Todo dice “Comprar todo”. Parece una página de tienda sin serlo: las tarjetas son imágenes con enlaces en lugar de productos, por lo que nada va en un carrito. Para un lookbook que apunta a una tienda, es suficiente.
El patrón de dos botones es la parte útil: una acción suave y otra firme.
6. Destinos de viaje
Continentes como filtro, con la pestaña Todos renombrada “Cada destino”. La escala flotante está configurada más alta que las otras demostraciones, por lo que las tarjetas se elevan más notablemente debajo del cursor. Los títulos nombran el lugar y los subtítulos agregan el detalle.
La pestaña Todo renombrada hace un trabajo real aquí. “Cada destino” le dice al visitante cuál es el conjunto; “Todo” no les dice nada.
Lo que los seis tienen en común
- Cuatro categorías en los seis diseños. Cuatro pestañas más Todo cabe en una línea de una computadora portátil y se ajusta a dos en un teléfono.
- Cada vez se cambia el nombre de la pestaña Todo, quedando seis etiquetas diferentes y ninguna predeterminada.
- Título arriba, detalle debajo, en cada diseño que utilice texto.
- El recuento de columnas sigue la fotografía: los cultivos apretados ocupan cuatro columnas, las escenas y las habitaciones ocupan dos o tres.
- Comportamiento de un clic por tarjeta, ya sea botones o un ícono de caja de luz, nunca ambos.
Construyendo uno de estos
Cada diseño es el mismo widget con diferentes configuraciones. La compilación es: agregar un elemento por imagen, escribir una etiqueta de filtro en cada uno para crear las pestañas, configurar columnas y luego decidir si las tarjetas recortan una altura uniforme con la relación de aspecto de la imagen o mantienen sus propias proporciones. Los títulos, subtítulos y el comportamiento de superposición se encuentran en la sección Configuración de superposición, y los dos botones se encuentran en cada elemento.
El tutorial completo está disponible cómo crear una galería filtrable en Elementor, y el widget en sí es el Galería de imágenes filtrables.
Preguntas frecuentes
¿Puedo importar estos ejemplos como plantillas?
Son páginas de demostración en lugar de kits importables. Reconstruir uno lleva unos diez minutos, ya que la estructura es un puñado de configuraciones y tus propias imágenes.
¿Cuántas categorías debe tener una barra de filtro?
Cuatro es el patrón en los seis diseños. A partir de las seis, la barra se envuelve en una computadora portátil y comienza a leerse como un segundo menú.
¿Puede aparecer una imagen debajo de dos pestañas?
Sí. Coloque ambos nombres de categorías en el campo Etiqueta de filtro, separados por una coma.
¿las demostraciones utilizan mampostería?
No. Las seis cartas de cultivo tienen una altura uniforme, por lo que las cuadrículas parecen ordenadas. La mampostería es un interruptor separado para conjuntos con orientaciones mixtas.
¿Puede el ejemplo de la tienda aceptar pagos?
No. Es una galería con botones, por lo que las tarjetas se vinculan dondequiera que las apuntes. El pago pertenece a WooCommerce.
Pensamientos finales
Seis diseños, un widget y cuatro decisiones entre ellos: cuántas columnas, si las tarjetas recortan, qué hacen los botones y cómo se llama la pestaña Todo. Comience desde el ejemplo más cercano a su contenido y cambie esos cuatro.
Lectura relacionada
