Cómo crear un carrusel de imágenes verticales en WordPress usando Elementor

Muneeb Tutoriales de WordPress Jan 21, 2022

Una presentación de diapositivas de fotos o información que los espectadores pueden elegir presionando un botón que los mueve hacia adelante o hacia atrás en la presentación de diapositivas se conoce como carrusel de imágenes. Ilumina la apariencia general de su sitio web y ayuda a promocionar los servicios esenciales.

Las fotos atractivas pueden atraer nuevos visitantes a su sitio atrayendo su atención de inmediato. Este tutorial le mostrará cómo utilizar Elementor para crear un carrusel de imágenes verticales en WordPress.

Cómo crear un carrusel de imágenes verticales de Elementor

Cree primero una imagen adecuada para su Elementor Vertical Smooth Carousel. Necesitarás una imagen que ya contenga todas tus fotografías. Usando Crello , un programa similar a Canva, puede hacer uno, pero cualquier software de edición de imágenes debería ser suficiente.

Por supuesto, esto tiene el inconveniente de no ser dinámico, y puede ser un inconveniente cuando solo se deben cambiar algunas de las fotos. Sin embargo, proporciona varios beneficios. Produce un carrusel solo de CSS sin requisitos de JS. La animación es muy fluida, con muy poca utilización de la CPU. En pocas palabras, es increíblemente efectivo, aunque un poco inconveniente.

Create Amazing Websites

Con el mejor generador de páginas gratuito Elementor

Empezar ahora

Luego, asigne a su columna la columna de nombre vertical como una clase.
Establezca el Espacio de widgets para esa columna en 0 en la configuración de Columna y diseño .

Add an image element to that column and choose the picture you made. Agregue un elemento de imagen a esa columna y elija la imagen que hizo. Assign the class carousel vertical to the picture element . Asigne el carrusel de clase vertical al elemento de imagen .

Haga todo exactamente como lo quiere, luego reprodúzcalo. En esa columna, necesitará dos de ellos, cada uno con parámetros idénticos. Y luego, puede continuar usando el código CSS que se proporciona a continuación. Puede utilizar este código en cualquier lugar para realizar los cambios.

.carouselvertical {
    animation: 10s linear 0s infinite normal none running vloop;
}

.verticalcolumn 

Hay comentarios considerables con el código para permitirle comprender lo suficiente y realizar los cambios donde sea necesario. Con este código, puede crear con éxito un carrusel vertical de Elementor .

Los 5 mejores complementos de carrusel de imágenes

1. Publicar carrusel para Elementor

Post Carousel For Elementor de iThemelandCo es un complemento adicional de Elementor que le permite crear carruseles de medios increíblemente creativos con sus diseños de carrusel listos para usar. El complemento se integra perfectamente con Elementor y ofrece 19 diseños preconstruidos. Estos diseños son totalmente personalizables y se pueden personalizar fácilmente según sus necesidades utilizando el mecanismo de arrastrar y soltar de Elementor.

Carrusel de productos para Elementor

Product Carousel For Elementor es otro complemento de Elementor diseñado explícitamente para que las tiendas de comercio electrónico muestren sus productos en un carrusel. El complemento ofrece controles de carrusel 12+ como Reproducción automática, Deslizar para desplazarse, Pausa al pasar el mouse, etc. El complemento responde muy bien en todo tipo de dispositivos y puede crear tantos carruseles como desee. Además, es un complemento 100% multilenguaje, lo que significa que funcionará incluso si su sitio web está traducido a otro idioma.

3. Carrusel rápido para Elementor

Fast Carousel For Elementor es un complemento de Elementor que afirma ser lo suficientemente rápido como para crear un carrusel para usted en un minuto. Tan impresionante como suena, también ofrece diferentes tipos de galerías, así como más de diez estilos únicos. El complemento está equipado con más de cinco controles de carrusel además de ofrecer opciones de color personalizadas con cada carrusel. Para una solución rápida, esta podría ser su mejor opción para un carrusel de imágenes.

Esperamos que este tutorial le haya resultado útil para mejorar su sitio web. Asegúrate de unirte a nosotros en Facebook y Twitter para seguir recibiendo tutoriales que hacen que tu experiencia con WordPress sea fácil y divertida.

Divi WordPress Theme