Encuéntrelo en el mercado Divi
¡ Divi Carousel Module 2.0 está disponible en Divi Marketplace! Eso significa que ha pasado nuestra revisión y se ha encontrado que cumple con nuestros estándares de calidad. Puede visitar Divi Gear en el mercado para ver todos sus productos disponibles. Los productos comprados en Divi Marketplace vienen con uso ilimitado del sitio web y una garantía de devolución de dinero de 30 días (al igual que Divi).
Compra en el mercado Divi
DIVI Carousel Module es un complemento de terceros para Divi y Extra que agrega un control deslizante de carrusel avanzado a Divi Builder. Tiene el control de casi todo en el módulo para crear casi cualquier tipo de carrusel que necesite para su sitio web Divi o Extra . En este artículo, echaremos un vistazo a Divi Carousel Module y veremos lo que puede hacer y lo fácil que es de usar.
Instalación y activación del módulo Divi Carrusel
Cargue y active el complemento de forma normal. Se agrega un nuevo elemento de menú al tablero llamado DiviGear. Vaya a este menú y agregue su clave de licencia.
Módulo Carrusel Divi en Divi Builder
Se agrega un nuevo módulo a Divi Builder llamado Divi Carousel.
El módulo incluye un área para agregar nuevos elementos. La pestaña Contenido tiene la configuración del control deslizante, que le permite elegir cuántas diapositivas mostrar en función del dispositivo que esté usando el usuario, habilitar diapositivas múltiples, establecer la duración de la transición, etc. Habilitar diapositiva central, bucle, reproducción automática, navegación con flechas y navegación con puntos . Establezca el espaciado de los elementos, habilite la igualdad de altura y la alineación vertical. La configuración avanzada le permite elegir el efecto del control deslizante.
La pestaña Diseño incluye configuraciones para la superposición, la imagen (ancho), el borde de la imagen, el título y el cuerpo del texto, el color, el espaciado y el borde. Esto incluye personalizaciones de color para la navegación de flechas y puntos.
La pestaña Avanzado tiene todos los campos de CSS que esperaría, además de configuraciones para visibilidad y transición. Agrega campos CSS para el título, contenido, imagen y botón.
La configuración de elementos del carrusel también incluye las tres pestañas. Esta configuración anula todo lo que se establece en la configuración del módulo principal. La pestaña Contenido tiene un área para el contenido principal, el título y el enlace de la imagen, la configuración de los botones, la configuración de la imagen y el fondo.
La pestaña Diseño incluye configuraciones para el texto del título, el estilo del contenido (texto del cuerpo), el botón, el espaciado y la sombra del cuadro. Estas son las configuraciones de diseño estándar que vería en la mayoría de los módulos Divi. La pestaña Avanzado es la configuración básica que se encuentra en la mayoría de los módulos.
Para la configuración de la imagen, puede utilizar imágenes o iconos.
Agregue tantas diapositivas como desee. Las diapositivas se muestran una al lado de la otra según el número que haya configurado para mostrar. Este está configurado para mostrar cuatro. Por supuesto, puede arrastrarlos y soltarlos en el orden que desee.
En este, ajusté el espaciado de elementos a 100. La principal diferencia que se muestra en mi ejemplo es el texto. Ahora muestra menos palabras por línea.
Éste utiliza la navegación con flechas. Lo configuré para que se muestre en el exterior de la diapositiva. Establecí el espaciado de elementos en 1. Es más obvio si usa colores de fondo.
He configurado este para mostrar dos diapositivas. Está mostrando la navegación de puntos.
Aquí hay un vistazo a la configuración avanzada. Configuré el efecto del control deslizante en Coverflow. Esto abre una opción de rotación y sombra. Esta función muestra lo que realmente diferencia al módulo de un control deslizante estándar. Esta es la configuración predeterminada.
Ahora configuré la rotación en 100. Las diapositivas están inclinadas aún más en 3D hacia el lado izquierdo, lejos de la pantalla.
Aquí está la misma rotación pero sin la sombra de Coverflow.
Ejemplos de módulos de carrusel Divi
Uno de mis usos favoritos para un carrusel es mostrar logotipos de clientes o productos. Para este ejemplo, agregué el módulo a la página de cartera de la página de destino del desarrollador de aplicaciones. Lo configuré para que muestre los logotipos de 3 empresas, para que se desplace en bucle y se reproduzca automáticamente para que el visitante no tenga que navegar por ellos.
También funciona para mostrar proyectos en los que ha trabajado. Para este, he agregado varios proyectos con botones para que el visitante pueda ver el proyecto. Cambié el color del texto del botón a blanco y agregué una sombra de cuadro al botón. Hice las flechas blancas y ajusté la opacidad de su fondo a casi transparente.
Aquí, agregué un fondo a la diapositiva, lo hice semitransparente y agregué una sombra de cuadro. El espaciado incluye el botón, la imagen y el relleno de contenido. He agregado espacio al botón y la imagen.
Este usa el efecto deslizante Desbordamiento. Esta es la configuración predeterminada.
Para este, lo configuré para centrar la diapositiva. Cuando se usa con la configuración de desbordamiento, centra la diapositiva central e inclina las diapositivas en ambos lados para que queden frente a frente. Está configurado para mostrar cuatro diapositivas.
Este está configurado para mostrar 3 diapositivas. He configurado la Rotación en 80.
Este está configurado para mostrar 6 diapositivas. Rotar está configurado de forma predeterminada (50).
Esta muestra 6 diapositivas sin Center Slide o Overflow habilitado.
Este muestra 6 con Center Slide habilitado.
Para este ejemplo, estoy usando el módulo como control deslizante del menú de comida. Al agregar una imagen, texto y un botón, en realidad crea un control deslizante de anuncios publicitarios. Las imágenes se establecen en 100 de ancho. Agregué una superposición, un botón para comprar cada artículo (el botón lo lleva a la página del producto para el artículo) y navegación de puntos. He diseñado la superposición y el icono de superposición, así como los puntos para las diapositivas activas y no activas. Encaja perfectamente en el diseño de Coffee.
Para este, agregué navegación con flechas y lo diseñé para que coincida con los botones. Lo tengo para mostrar las flechas al pasar el mouse. Puede configurar las flechas dentro o fuera del control deslizante y cambiar su color. No puede cambiar su tamaño en la configuración del módulo.
Este usa el efecto Coverflow. Paso el cursor sobre la diapositiva izquierda para mostrar la superposición y las flechas.
Para esta, agregué un fondo y una sombra de cuadro a solo una de las diapositivas. Esto se puede usar para mostrar lo que está en oferta o resaltar la mejor oferta.
Para este, estoy usando solo íconos. Coloqué el módulo junto a un conjunto de módulos publicitarios y configuré 6 enlaces de redes sociales. Están diseñados para que coincidan con los anuncios publicitarios. Al hacer clic en el icono se abre la red social. Lo configuré para que se deslice cada segundo automáticamente.
Mostrar varias diapositivas corta parte de un ícono, lo que brinda una buena imagen a medida que se anima el control deslizante.
Para este ejemplo, quería crear un control deslizante de tabla de precios simple. Simplifiqué los precios del paquete de diseño del campo de golf.
Ahora he agregado la sombra del cuadro. Al principio, no pude lograr que la sombra vertical pasara por debajo de la diapositiva. Luego me di cuenta de que las diapositivas estaban tocando los lados del contenedor del módulo. Agregué relleno de módulo y luego pude agregar sombras de cuadro en todos los lados de las diapositivas.
También puede ajustar el botón, la imagen y el relleno de contenido para cada diapositiva individualmente. En este ejemplo, estoy ajustando el relleno para la diapositiva de la izquierda.
He agregado flechas y las he diseñado para que coincidan con los elementos del diseño.
Para este ejemplo, agregué imágenes, cambié la sombra del cuadro y agregué un poco más de relleno de contenido para que la sombra del cuadro se muestre completamente. También moví las flechas hacia el exterior de las diapositivas.
Ahora he añadido un botón. Ajusté los estilos de los botones, incluidos los colores, el radio del borde, el tamaño del texto y agregué una sombra de cuadro que coincide con las diapositivas.
Por supuesto, dado que el módulo incluye un área de contenido, puede agregar cualquier tipo de contenido que desee, incluidos los medios. He añadido imágenes que coinciden con el diseño. Todo el contenido se coloca bajo el título. Las imágenes se ven muy bien en esta ubicación.
Así es como se ve el módulo dentro del diseño del campo de golf. El diseño original tenía muchas características de precios. Usando el módulo Divi Carousel, todos los precios siguen ahí, pero se muestran en las diapositivas. Parece que pertenece a este diseño.
También funciona muy bien con Extra. En este ejemplo, configuré la página para que no muestre una barra lateral.
Así es como se ve con una barra lateral (aunque no he agregado ningún widget para la barra lateral, el tamaño es el mismo). Puede ver aquí que el módulo responde.
Precio del módulo de carrusel Divi
El módulo Divi Carousel está disponible en el sitio web del desarrollador . Hay dos opciones disponibles:
- Sitio único – $15
- Sitios ilimitados – $29
Documentación y soporte del módulo Divi Carousel
La documentación está disponible en el menú del panel de control de DiviGear. Seleccione la pestaña Documentación. Esto proporciona enlaces a un tutorial en video de 4 minutos en el canal DiviGear de YouTube. El soporte de tickets se proporciona a través de Freshdesk.
pensamientos finales
El módulo Divi Carrusel es una manera fácil de agregar un control deslizante de carrusel al Divi Builder. Es intuitivo y en realidad tiene más personalizaciones de las que esperaba. Hubo algunas ocasiones en las que no pude clonar una diapositiva correctamente, pero eso podría haber sido un problema por mi parte. Recuerde asignar a cada diapositiva una etiqueta de administrador o mostrarán el nombre del elemento dentro del módulo, lo que dificulta distinguirlas.
Me gusta que tenga imágenes, contenido y botones por separado. Esto le permite crear tarjetas, anuncios publicitarios, imágenes, texto, mostrar iconos o cualquier cosa que necesite mostrar en un control deslizante. Puede agregar una imagen en la parte superior del control deslizante y aún así poder agregar más al área de contenido.
Divi Carousel Module es un excelente control deslizante de carrusel. Está disponible en el sitio web del desarrollador y en los mercados de Divi.
Queremos escuchar de ti. ¿Has probado el módulo Divi Carrusel? Háganos saber lo que piensa al respecto en los comentarios a continuación.
Imagen destacada a través de Anatolir / shutterstock.com