Elementor

Cómo hacer una galería de imágenes con filtros en Elementor

Cómo hacer una galería de imágenes con filtros en Elementor

Tabla de contenidos

¿Qué es el widget de Galería en Elementor?

El Widget de Galería en Elementor te permite crear una galería de imágenes con filtros. Es muy útil si quieres organizar tu portfolio en diferentes categorías. Para galerías básicas es mejor usar el Widget de Galería básica.

¿Cómo usar el widget de Galería en Elementor?

Paso 1. Añade el Widget al lienzo

Widget Galería
Widget Galería

Haz clic en el Widget de Galería, luego arrástralo y suéltalo dentro del lienzo.

Paso 2. Elige un tipo de galería

Tipo de galería
Tipo de galería

En la pestaña Contenido > Ajustes >  Tipo > Elige la opción galería individual.

Paso 3. Añade imágenes

Ninguna imagen seleccionada
Ninguna imagen seleccionada

En la pestaña Contenido > Ajustes > Ninguna imagen seleccionada > haz clic en el icono ➕ para elegir y añadir imágenes a la galería.

Una vez seleccionadas las imágenes que quieres añadir a la galería, haz clic en el botón “Crear una nueva galería”.

Ahora, tienes la opción de añadir títulos a las imágenes. Una vez que hayas terminado de poner los títulos, haz clic en “Insertar galería”.

Paso 4. Elige un orden

Ordenar por
Ordenar por

En Ordenar por, elige entre predeterminado o aleatorio.

Paso 5. Mejora la velocidad de carga

Carga diferida
Carga diferida

Activa la opción de Carga diferida para mejorar la velocidad de carga de las imágenes.

Paso 6. Elige una disposición

Disposición
Disposición

Elige ente: Cuadrícula, Justificado o Muro.

  • Cuadrícula: esta opción te permite elegir la relación de aspecto.
  • Justificado: te permite limitar la altura de cada fila y se ajusta a diferentes anchos por imagen.
  • Muro: También conocida como Masonry, esta opción mantiene el mismo ancho de la imagen y se ajusta a diferentes alturas.

Paso 7. Elige el número de columnas

Columnas
Columnas

Elige cuántas columnas se mostrarán por fila, de 1 a 24. Esta opción no está disponible si eliges el Diseño justificado. 

Paso 8. Personaliza la altura de fila

Altura de fila
Altura de fila

Establece el alto de cada fila, en píxeles. Esta opción solo está disponible si eliges el Diseño justificado.

Paso 9. Controla el espacio entre imágenes

Espaciado
Espaciado

Usa el control deslizante para elegir la cantidad de espacio que dejas entre cada imagen en una misma fila.

Paso 10. Edita el Enlace de la galería

Enlace
Enlace

Usa la opción Enlace para enlazar las imágenes de la galería. Puedes elegir entre: Archivo de medios, Página de adjunto o Ninguno.

Recuerda que para que funcione correctamente la Caja de luz, debes elegir la opción Archivos multimedia.

Paso 11. Añade una Caja de luz

Caja de luz
Caja de luz

Activa la opción Caja de luz para mostrar las fotos en un Lightbox.

Paso 12. Elige una Resolución de imagen

Resolución de la imagen
Resolución de la imagen

Edita el campo Resolución de imagen para ajustar su tamaño. Puedes usar las imágenes creadas por WordPress, la imagen a tamaño completo o escribir un tamaño personalizado.

¿Cómo añadir una barra de filtro a la galería de imágenes en Elementor?

Paso 1. Elige el tipo de galería

Galería Múltiple
Galería Múltiple

En la pestaña Contenido > Ajustes > Tipo > elige galería múltiple.

Paso 2. Personaliza la barra de filtro

Barra de filtro
Barra de filtro
  • Filtro “Todos”: Activa esta opción para incluir en el filtro la palabra “Todos”.
  • Etiqueta del filtro “Todos”: Si has activado la opción “Todos” usa este campo para cambiar el nombre “Todos” por el que desees. Por ejemplo:
  • Puntero: Elige el efecto que se va a reproducir cuando pases el cursor por encima del enlace. Puedes elegir entre: Ninguno, subrayado, Raya superio, Línea doble, Encuadrado, Fondo y Texto.
  • Animación: Elige una animación para que se reproduzca cuando un usuario pase el cursor por encima.

Tanto si has elegido el Tipo de galería individual o múltiple, puedes configurar los ajustes de superposición.

Superposición
Superposición
  • Fondo: Activa esta opciones para activar la superposición al pasar el cursor sobre la imagen.
  • Título: Elige un tipo de metaatributo para el título que se muestra al pasar el cursor por encima de la imagen.
  • Descripción: Elige un tipo de metaatributo para la descripción que se muestra al pasar el cursor por encima de la imagen.

Escrito por:

Richi Pérez

Richi Pérez

07/06/2024

Tutoriales de WordPress y diseño

Sigue aprendiendo

Tutoriales de WordPress y Elementor para conocer todos los recursos disponibles

¿Por qué usar fuentes y colores globales en Elementor? Para unificar el aspecto de un sitio web, es...

¿Qué es el widget de Valoración en Elementor? El Widget de Valoración en Elementor te permite añadir valoraciones...

¿Qué es el widget de Indicador de avance en Elementor? El Widget de Indicador de avance en Elementor...