Conclusiones clave
- El widget gratuito Image Gallery de Elementor no tiene barra de filtro. La lista de control son imágenes, columnas, espacios, subtítulos, enlaces y cajas de luz.
- Dos rutas le brindan pestañas de categorías: el widget Galería de Elementor, que está en la lista Pro, o un widget complementario en una instalación gratuita de Elementor.
- Con el Galería de imágenes filtrables de complementos maestros la categoría proviene de una etiqueta de filtro que escribe en cada elemento, por lo que una imagen puede ubicarse en varias categorías.
- Mostrar Filter Nav y Mostrar pestaña de filtro “Todos” están activados de forma predeterminada y el texto de todas las pestañas es editable.
- Cuando las pestañas no aparecen, la causa casi siempre es una etiqueta de filtro vacía, mostrar navegación del filtro desactivado o un caché de página que sirve el marcado anterior.
Una galería filtrable es una cuadrícula con una fila de botones de categoría encima. Haga clic en Retratos y los retratos permanecen mientras todo lo demás desaparece de la vista. Son los portafolios de diseño, catálogos de productos y conjuntos de fotografías a los que se puede acceder, porque desplazarse más allá de cuarenta imágenes para encontrar un tipo de trabajo no es idea de nadie de pasar un buen rato.
Elementor puede hacer esto, pero no en el widget gratuito Image Gallery. Esta guía cubre ambas rutas: lo que ofrece Elementor y cómo crear lo mismo en una instalación gratuita de Elementor con un complemento.
Tabla de contenidos
Lo que Elementor te ofrece listo para usar
Abra el panel de widgets en una instalación gratuita de Elementor, busque galería y obtendrá el widget de Galería de imágenes. Su lista de control es Agregar imágenes, resolución de imágenes, columnas, título, enlace, caja de luz, pedido y un control deslizante de espaciado en la pestaña Estilo. Las columnas van del 1 al 10 y comienzan en 4, Caption ofrece el título adjunto o nada, y Link envía la imagen al archivo multimedia, a la página adjunta o a ninguna parte. Eso te da una cuadrícula con una caja de luz. No hay barra de filtro, ni mampostería ni título por imagen.
Elementor tiene un segundo widget de galería, llamado Gallery, y ese es Pro. Contiene las opciones de diseño y la barra de filtro. Una barra de filtro del propio Elementor significa una licencia Pro.
Ruta 1: el widget Elementor Gallery (Pro)
Si ya pagas por Elementor Pro, comienza aquí, porque es un complemento menos. El widget Galería contiene varias galerías dentro de un widget y le da a cada una un nombre, y esos nombres se convierten en la barra de filtro.
- Arrastre el widget de Galería a la página.
- Cambie el tipo de uno a varios. Single es el valor predeterminado y no tiene barra de filtro.
- Agregue una galería por categoría en el repetidor Galerías y complete el campo Título, porque ese texto se convierte en la pestaña.
- Elija un diseño: cuadrícula, justificado o mampostería. Grid y Masonry usan el control de columnas, que comienza en 4 en el escritorio, 2 en la tableta y 1 en el móvil. Justified utiliza la altura de la fila en su lugar.
- Deje encendido el interruptor de filtro “Todo” y cámbielo por el nombre en Etiqueta de filtro “Todo” si “Todo” es demasiado vago.
La compensación es cómo se almacenan las categorías. Cada imagen pertenece a la galería en la que la colocó, por lo que una imagen que pertenece a dos categorías debe agregarse dos veces. La ruta adicional a continuación lo maneja con un campo de texto.
Ruta 2: el widget Master Addons, paso a paso
Esta ruta funciona con una instalación gratuita de Elementor. Instale complementos maestros, asegúrese de que el widget Filtrable Image Gallery esté habilitado en la lista de widgets del complemento y luego siga estos pasos.
Paso 1: agrega el widget y tus imágenes
Busque Galería de imágenes filtrables en el panel Elementor y arrástrela hacia adentro. Las imágenes se agregan un elemento a la vez en el repetidor de contenido de la galería en lugar de en un solo selector de medios, que es lo que hace posibles los campos por elemento.
Las columnas toman un número del 1 al 6 y el valor predeterminado es 3. Una cosa que debes saber antes de planificar un diseño: este control no responde, por lo que se aplica el mismo número de columnas en todos los tamaños de pantalla. La cuadrícula en sí todavía se vuelve a fundir en pantallas estrechas, pero no se pueden configurar cuatro columnas en el escritorio y dos en la tableta desde el panel.
Paso 2: proporcione a cada artículo una etiqueta de filtro
Abra una fila repetidora y obtendrá los campos que construyen la tarjeta: la imagen, un título, un subtítulo, una cinta, el comportamiento de ventana emergente o enlace, dos botones con sus propias URL y la etiqueta de filtro.
Escriba el nombre de la categoría exactamente como desea que se lea en el botón, porque la pestaña está construida a partir de este texto. Separe varias categorías con comas cuando un elemento pertenece a más de una, que es la parte que la ruta Pro no puede hacer sin duplicar la imagen.
Paso 3: encienda la barra de filtro y nombre la pestaña Todo
Abra la sección Configuración. Mostrar navegación del filtro y Mostrar pestaña de filtro “Todos” están activados de forma predeterminada, y el texto de todas las categorías establece lo que dice el primer botón. “Todos los proyectos”, “Comprar todo” y “Menú completo” se leen mejor que un “Todo” simple.
Paso 4: compruébalo en la parte frontal
Guarde y vea la página. La barra de filtro se representa encima de la cuadrícula, la pestaña Todo está activa y al hacer clic en una categoría se ocultan todos los elementos sin esa etiqueta.
Las configuraciones que cambian el comportamiento del filtro
| Configuración | Dónde | Lo que hace |
|---|---|---|
| Etiqueta de filtro | Cada elemento repetidor | Crea las pestañas. Coma separada para varias categorías. |
| Mostrar filtro Nav | Ajustes | Oculta toda la barra cuando está apagado, que es como se obtiene una cuadrícula simple. |
| Mostrar “Todos” pestaña Filtro | Ajustes | Elimina la primera pestaña si desea que los visitantes elijan una categoría de inmediato. |
| Texto de todas las categorías | Ajustes | Cambia el nombre de la pestaña Todo. |
| Relación de aspecto de la imagen | Ajustes | Recorta cada carta a la misma altura. Off mantiene las proporciones propias de cada imagen. |
| Canalón | Ajustes | Espacio entre tarjetas. Responsivo, 0 a 40px, 10 de forma predeterminada. |
| Columnas | Contenido | 1 a 6, un valor para cada tamaño de pantalla. |
| Tipo de superposición | Configuración de superposición | Al flotar, siempre, nunca, o escóndete al flotar. |
| Ventana emergente o enlaces | Cada elemento repetidor | Abre la imagen en una caja de luz o envía la tarjeta a una URL. |
Dos cosas que el widget no tiene, por lo que puedes planificar en torno a ellas: no hay botón de carga más ni paginación, por lo que cada elemento se carga con la página y no hay un cuadro de búsqueda. Para un portafolio de cuarenta imágenes que está bien en un host decente, pero un archivo de doscientas imágenes quiere dividirse entre páginas.
¿Las pestañas de filtro no se muestran? Comprueba estas cuatro cosas
Cuatro cosas causan esto y las dos primeras explican la mayor parte.
- Una etiqueta de filtro vacía. Un elemento sin etiqueta nunca se une a una categoría, y si ningún elemento tiene una, no hay nada desde qué crear pestañas.
- Mostrar Filter Nav desactivado. De forma predeterminada está activado, por lo que suele ser la edición anterior de alguien.
- Una página almacenada en caché. Los cachés de páginas y las CDN sirven el marcado antes de agregar las etiquetas, así que borre el caché y vuelva a cargar con una actualización completa.
- Etiquetas que se diferencian por un carácter. “Retratos” y “retratos” con un espacio final son dos categorías, por lo que obtienes dos pestañas que contienen la mitad del conjunto cada una.
Si aparecen las pestañas pero al hacer clic en una no se hace nada, el script de filtrado no se ha ejecutado. Eso apunta a un error de JavaScript de otro complemento en la misma página, o a un optimizador de scripts que pospone el archivo. Desactive la combinación de JS para esa página y pruebe nuevamente.
Preguntas frecuentes
¿elementor tiene una galería filtrable?
No en la versión gratuita. El widget gratuito Image Gallery es una cuadrícula con una caja de luz. El widget Elementor's Gallery, que puede mostrar varias galerías con nombre con una barra de filtro, está en su lista Pro.
¿Puede una imagen ubicarse en dos categorías?
Sí, con la ruta del complemento. Coloque ambos nombres de categorías en el campo Etiqueta de filtro, separados por una coma, y el elemento se muestra en ambas pestañas.
¿Puedo cambiar lo que dice el botón Todo?
Sí. El texto de todas las categorías en la sección Configuración lo establece, por lo que puede usar “Todo el trabajo”, “Comprar todo” o cualquier otra cosa que se ajuste a la página.
¿la galería tiene carga más o paginación?
No. Cada elemento se representa con la página. Mantenga los conjuntos en un tamaño que se cargue cómodamente o divida un archivo grande en varias páginas.
¿Funcionará la galería en dispositivos móviles?
Sí, la cuadrícula se vuelve a fluir y los botones de filtro se envuelven. Recuerde que el valor de las columnas se aplica a cada tamaño de pantalla, así que elija un número que aún se lea bien en un teléfono.
Pensamientos finales
En Elementor Pro, el widget Galería te lleva allí y no instalas nada. En una instalación gratuita, lo hace un widget complementario y el campo Etiqueta de filtro tiene el borde para cualquiera cuyo trabajo se encuentre en más de una categoría.
Cualquiera que sea la ruta que tomes, pasa el tiempo en los nombres de las categorías. Cuatro categorías claras cortan la cuadrícula hasta el lugar al que vino el visitante; nueve vagos simplemente mueven el problema a la barra de filtro.
Lectura relacionada
