Elementor

Cómo hacer un carrusel de imágenes en Elementor

Cómo hacer un carrusel de imágenes en Elementor

Tabla de contenidos

¿Qué es el widget de Carrusel de imágenes en Elementor?

El widget de Carrusel de imágenes en Elementor te permite mostrar varias imágenes en forma de presentación de diapositivas. Puedes añadir tus imágenes y cambiar la velocidad con la que pasan, poner efectos de animación y elegir cómo se navega entre ellas, entre otras opciones.

¿Cómo usar el Widget de Carrusel de imágenes en Elementor?

Paso 1. Añade el Widget al lienzo

Widget Carrusel de imágenes
Widget Carrusel de imágenes

Haz clic en el Widget de Carrusel de imágenes, luego arrástralo y suéltalo dentro del lienzo.

Paso 2. Añade imágenes al carrusel

Carrusel de imágenes
Carrusel de imágenes

En la pestaña Contenido > Carrusel de imágenes > haz clic en el icono ➕ para elegir y añadir imágenes al carrusel.

Una vez seleccionadas las imágenes que quieres añadir al carrusel, 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 3. 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.

Paso 4. Elige el número de imágenes

Diapositivas a mostrar
Diapositivas a mostrar

Elige en el campo Diapositivas a mostrar cuántas imágenes se verán al mismo tiempo en pantalla. Puedes elegir desde 1 hasta 10 imágenes.

Paso 5. Elige el número de imágenes a desplazar

Diapositivas a desplazar
Diapositivas a desplazar

Elige en el campo Diapositivas a desplazar cuántas imágenes cambiarán cada vez que presiones sobre las fechas.

Paso 6. Estira las imágenes

Estirar imagen
Estirar imagen

Usa el campo Estiramiento de imagen si quieres que las imágenes se estiren para ajustarse al carrusel.

Paso 7. Añade flechas y puntos para la navegación

Navegación Flechas y Puntos
Navegación Flechas y Puntos

En el campo Navegación puedes elegir cómo navegar entre las imágenes. Puedes usar Fechas, Puntos, Ambos o  Ninguno.

Si eliges Flechas, puedes usar el icono por defecto o uno personalizado.

Para añadir un icono de la Bilbioteca de iconos, haz click en el botón de estrella y reemplaza la flecha por el icono que más te guste.

Si prefieres un icono personalizado, haz click en botón Subir SVG para reemplzar la flecha por un archivo SVG.

Paso 8. Añade un enlace

Usa el campo Enlace para añadir la opción de hacer clic en tu imagen. Puedes elegir entre: Ninguno, Archivo de medios y URL personalizada.

Enlace
Enlace
  • Si eliges “Archivos de medios” tienes la opción de abrir la imagen en un Lightbox. Selecciona Sí o No para activar esta función.
URL personalizada
URL personalizada
  • Si eliges “URL personalizada” haz clic en el icono de ajustes (⚙️) para configurar el enlace. Ahora tienes la opción de abrir en enlace en una nueva pestaña o añadir la etiqueta “nofollow”. Además, puedes añadir atributos personalizados al enlace. Para hacerlo, separa las claves de los valores usando el carácter ‘|’ (barra vertical) y separa los pares de valores-clave con una coma.

Paso 9. Añade una leyenda

Leyenda
Leyenda

Usa el campo Leyenda para elegir entre: Ninguno, Título, Leyenda o Descipción.

Paso 10. Revisa las Opciones adiciones

Opciones adicionales
Opciones adicionales

En la pestaña Contenido > Opciones adicionales > revisa los siguientes ajustes para mejorar el carrusel de imágenes.

  • Carga diferida: Activa la opción carga diferida para cargar las imágenes solo cuando estén a punto de mostrarse. Esta característica ayuda a mejorar la velocidad de carga de la página.
  • Auto-reproducir: Activa esta opción para que las imágenes se desplacen automáticamente.
  • Pausar al pasar el cursor: Esta opción pausa la reproducción automática de imágenes cuando pasas el cursor sobre el carrusel.
  • Pausar al interactuar: Esta opción pausa la reproducción automática de imágenes cuando interactuas con el carrusel.
  • Velocidad de auto-iniciado: Escribe en milisegundos la velocidad a la que cambian las imágenes durante la reproducción automática. 1000 milisegundos equivalen a un segundo.
  • Bucle-infinito: Activa esta opción para que las imágenes estén continuamente en movimieno.
  • Velocidad de la animación: Usa este ajuste para determinar la velocidad a la que se desplazan las imágenes en el carrusel.
  • Dirección: Cambia la dirección en las que se desplazan las imágenes del carrusel.

Paso 11. Edita el estilo de la navegación

Estilo de la navegación
Estilo de la navegación

En la pestaña Estilo > Navegación> personaliza la apariencia de las flechas de navegación.

  • Posición: Elige la posición de las flechas dentro o fuera de la galería.
  • Tamaño: Usa el control deslizante para cambiar el tamaño de las flechas.
  • Color: Elige un color para las flechas.

En la pestaña Estilo > Paginación (Puntos) > personaliza la apariencia de los puntos.

  • Posición: Elige la posición de los puntos dentro o fuera de la galería.
  • Tamaño: Usa el control deslizante para cambiar el tamaño de los puntos.
  • Color: Elige un color para los puntos.
  • Color activo: Elige un color para el punto que indica la paginación de las imágenes.

Paso 12. Edita el estilo de la imagen

Estilo de la imagen
Estilo de la imagen
  • Alineación vertical: Alinea la imagen hacia arriba, al centro o abajo.
  • Espaciado: Usa el campo Personalizado para activar la opción Espaciado personalizado.
  • Espaciado personalizado: Usa el control deslizante para determinar la cantidad de espacio entre las imágenes de la galería.
  • Tipo de borde: Selecciona un Tipo de borde entre: ninguno, continuo, doble, punteado, discontinuo o acanalado.
  • Radio de borde: Redondea los bordes de la imagen aumentando el radio del borde.

Paso 13. Edita el estilo de la leyenda

Estilo de la leyenda
Estilo de la leyenda

Personaliza la alineación, el color de texto, la tipografía, la sombra de texto y el espaciado con respecto a la imagen.

Escrito por:

Richi Pérez

Richi Pérez

09/05/2024

Tutoriales de WordPress y diseño

Sigue aprendiendo

Tutoriales de WordPress y Elementor para conocer todos los recursos disponibles

¿Cuál es el color del signo de Aries? Signo: Aries Color: Rojo Planeta: Marte Gema/metal: Rubí Razón: Marte...

¿Qué es el widget de Ancla de menú en Elementor? El Widget de Ancla de menú en Elementor te...

¿Qué es el widget de HTML en Elementor? El Widget de HTML en Elementor te permite incrustar código...