Hosting WordPress Webempresa

Agregar efecto de transición continua en Carrusel de imágenes en Elementor

por | Sep 21, 2022 | Aprender WordPress

Agregar efecto de transición continua en Carrusel de imagenes en Elementor

Si bien en Elementor tenemos una gran variedad de módulos disponibles y solo contando en su versión gratuita, entre ellos encontramos el carrusel de imágenes convencional.

A continuación, vamos a revisar las opciones que nos presenta el modulo de carrusel de imágenes y vamos a agregarle algunos estilos CSS de WordPress interesantes pero bastante simples que le otorgaran un efecto bastante peculiar.

  Creando el Carrusel en Elementor


Para nuestro ejemplo vamos a crear una nueva sección y en ella vamos a incluir el modulo “Carrusel de Imágenes de Elementor”.

Carrusel de Imágenes de Elementor

Una vez agregado a nuestra sección recién creada vamos a agregar unas cuantas imágenes donde todas ellas se recomiendan que tengan tamaños iguales.

añadir imágenes al carrusel de Imágenes de Elementor

Al agregar las imágenes tengamos presente que cada imagen tiene unas características descriptivas y en base a ellas podemos mostrar esta información, hablamos específicamente del Titulo, Leyenda y Descripción de la imagen.

Cualquiera de estos tres apartados podremos hacerlos visibles y mostrarlos debajo de cada respectiva imagen pero al momento de ser cargadas en el carrusel esta información puede ser agregada, como también dicha información puede ser modificada desde la biblioteca de medios de WordPress.

añadir campos a carrusel de Imágenes de Elementor

  Opciones de Contenido


Ya con nuestras imágenes agregadas e identificadas vamos a repasar todas las opciones que tenemos disponibles en el modulo de carrusel de imágenes.

  • Tamaño de la imagen: Podremos definir por medio de un selector los tamaños estándar que se le pueden aplicar a las imágenes, además de una opción “Personalizado” lo que permite que aparezcan dos campos extras para colocar un ancho y un alto especifico
  • Diapositivas a Mostrar: Determina el número de imágenes que serán mostradas en un primer vistazo, por ejemplo de tres en tres o de cuatro en cuatro
  • Diapositivas a desplazar: El numero de imágenes que van a mostrarse al usar la paginación o la navegación del carrusel, por defecto se reproducen las imágenes de una a una pero este valor puede cambiarse
  • Estirar la imagen: Considerando la opción de tamaño de la imagen si la proporción no se adapta del todo o las imágenes varían en tamaño, esta opción hace que todas las imágenes tomen un aspecto homogéneo para todas
  • Navegación: Un selector que nos permite escoger si deseamos que aparezcan flechas, puntos, ambos o ninguno de ellos, además si es seleccionada una opción que tenga “Flechas” serán mostradas dos opciones extra que nos permitirán cambiar los iconos correspondientes a las flechas en uso
  • Enlace: Un selector que nos presenta 2 tipos de enlace que le podemos definir a nuestras imágenes, “Archivo de medios” lo que nos permite hacer que cada imagen se despliegue en cada de luz “Lightbox” y “URL personalizada” donde se despliega un campo en el que podemos colocar un enlace sin embargo dicho enlace se aplica a todas las diapositivas por lo que no es tan funcional como parece
  • Leyenda: ¿Recuerdas lo que habíamos repasado con respecto a las características descriptivas que tiene una imagen? es en este selector donde podremos escoger si deseamos mostrar el titulo, la descripción o la leyenda de la imagen
Recordemos que todas las opciones de Elementor que contienen un icono de una pantalla a su lado, significa que podremos adaptar la opción configurada acorde a una resolución en especifica, ya sea vista en escritorio, tableta o móvil

opciones del carrusel de Imágenes de Elementor

  Opciones Adicionales de Contenido


Además de las opciones convencionales tenemos un apartado de opciones adicionales, vamos a revisarlas.

  • Carga Diferida: Al activar esta opción habilitamos el lazy load en WordPress
  • Auto-reproducir: Hacer que el carrusel se reproduzca por si mismo
  • Pausar al pasar el cursor: Habilitar de si el usuario coloca el cursor sobre el carrusel la reproducción se detenga
  • Pausar al interactuar: Habilitar de si el usuario hace algún gesto o clic sobre el carrusel la reproducción se detenga
  • Velocidad de auto-iniciado: Corresponde a la velocidad de la reproducción automática en milisegundos
  • Bucle infinito: Habilita que el carrusel al llegar al final de sus diapositivas se repita de forma ininterrumpida
  • Velocidad de la animación: Corresponde a la velocidad de la animación entre diapositivas en milisegundos
  • Dirección: Podemos decidir si la reproducción del carrusel será desde la derecha o desde la izquierda

opciones avanzadas de carrusel de Imágenes de Elementor

  Opciones de Estilo


Desde la pestaña “Estilos” en el modulo de carrusel de imágenes tenemos las siguientes opciones las cuales se dividen en apartados de Navegación, Imagen y Leyenda, vamos a revisarlos.

Navegación

Estas opciones nos permiten personalizar los aspectos estéticos de las flechas y la paginación, desde su posición si es fuera o dentro del contenedor del carrusel, su tamaño y colores en estado normal y activos.

personalizar carrusel de Imágenes de Elementor

Imagen

Las siguientes opciones nos permiten darle algunas características extras a cada imagen desde un borde solido y el espaciado entre cada imagen, además de poder definir la alineación vertical considerando que las imágenes varían en altura, esto da la sensación de que se ajustan correctamente pese a esta diferencia de tamaños.

características del carrusel de Imágenes

Leyenda

Por ultimo desde las siguientes opciones podemos darle estilos al apartado de la leyenda la cual puede ser el titulo o la descripción según se haya configurado en las opciones de contenido antes vistas, podremos disponer de la alineación del texto (izquierda, derecha, centrado o justificado), el color, la tipografía además de poder agregarle una sombra para resaltar el texto.

estilos del carrusel de Imágenes de Elementor

  Aplicando el efecto de transición continua en Elementor


Ya con nuestro carrusel creado y configurado a nuestro gusto aun falta lo mas importante, el efecto de transición continua, el cual lo vamos a obtener con dos pasos muy sencillos.

El primer paso ya lo hemos reflejado en las opciones avanzadas de contenido, donde la velocidad de auto-iniciado vamos a colocarla en cero

velocidad de reproducción

El segundo paso es agregar un pequeño código de CSS el cual podemos añadirlo desde las opciones por defecto de WordPress Apariencia-> Personalizar-> CSS adicional o podemos utilizar un plugin super ligero que habilita una opción de edición de CSS desde nuestro escritorio. En lo particular a mí me parece más practico y bastante útil sobre todo para aquellos temas que no traen la opción de CSS personalizado integrado directamente.

Simple Custom CSS Plugin

Sea cual sea el método de tu preferencia para añadir los estilos vamos a hacer uso del siguiente código:


.swiper-wrapper{
  -webkit-transition-timing-function: linear !important;
  transition-timing-function: linear !important; 
}

Una vez guardado los cambios podremos visitar la pagina donde hemos incluido el modulo de carrusel de imágenes de Elementor y ver el resultado final, en el caso del ejemplo ha quedado de la siguiente manera:

  Conclusiones


Como podemos apreciar el uso de los módulos de Elementor puede extenderse y adaptarse a lo que requerimos con solo algunos ajustes, y aplicando un poco de CSS para añadir ese toque diferenciador sin la necesidad de tener la versión pro o de instalar otros plugins con complementos extra.

Lo que hemos revisado si bien se aplica a Elementor también tenemos contenido de como crear carrusel de imágenes en Divi.

Recuerda que las imágenes son un elemento importante a nivel de SEO, por lo que optimizar las imágenes en WordPress es un aspecto básico que no podemos olvidar.

Si deseas conocer mas sobre cómo utilizar Elementor para la construcción de tus sitios web puedes consultar los cursos gratuitos que tenemos disponibles al respecto.

¿Te ha resultado útil este artículo?

Hosting WPFácil