Lo más destacado del complemento Divi: Módulo de carrusel de productos Divi

El módulo de carrusel de productos de Divi es un complemento de terceros para Divi que muestra los productos de WooCommerce dentro de un control deslizante de carrusel. Cree un carrusel de productos y colóquelo dentro de cualquier diseño Divi. Puede diseñarlos y elegir múltiples opciones de diseño y visualización. En este artículo, veremos el módulo de carrusel de productos Divi, veremos sus características y veremos qué tan fácil es de usar.

El módulo de carrusel de productos Divi está disponible en el sitio web del desarrollador y en los mercados de Divi.

Módulo de carrusel de productos Divi

Una vez que cargue y active el complemento, vaya a DiviGear en el menú del tablero y active su licencia. Si tiene varios complementos de este desarrollador, deberá seleccionar la pestaña del complemento.

Se agrega un nuevo módulo al Divi Builder llamado Product Carousel. Incluye un icono morado para que se destaque entre la multitud.

La configuración incluye las pestañas Contenido, Diseño y Avanzado. La pestaña Contenido tiene configuraciones para el contenido de WooCommerce. Elija el tipo de producto de reciente, destacado, rebajado, más vendido, mejor valorado o categoría de producto en el cuadro desplegable. Ingrese un número para el recuento de productos que desea mostrar. Elija el orden de clasificación por popularidad, calificación, fecha o precio. También puede habilitar el botón Agregar al carrito y la descripción. Muestre la descripción completa o un extracto.

La configuración del carrusel le permite elegir el número de columnas según el dispositivo utilizado. También incluye múltiples diapositivas (habilítelo para deslizarse por el número de diapositivas en la pantalla o deshabilítelo para deslizar una diapositiva a la vez), espaciado de elementos, duración de la transición, centro, bucle, reproducción automática, navegación por puntos y flechas, alineación y efecto de diapositiva. Otras configuraciones incluyen el enlace y el fondo. Es interesante que puedas usar los puntos y las flechas juntos. Puede colocar los puntos a la derecha, en el medio o a la izquierda en la parte inferior de la diapositiva.

La pestaña Diseño incluye configuraciones para la superposición, título, precio, descripción, insignia de venta, botón Agregar al carrito, reseña, flecha, puntos, imagen, desplazamiento, espaciado, borde y sombra de cuadro. Se agregan otras configuraciones según las selecciones que elija. Cada una de estas configuraciones es extensa.

La pestaña Avanzado incluye las características esperadas de CSS, visibilidad y transiciones. El CSS personalizado incluye campos para producto, imagen, título, precio, insignia de venta, flecha anterior, flecha siguiente y puntos. Esto le da mucho control con CSS.

Configuración del módulo de carrusel de productos Divi

Puede mover los títulos y precios al principio o al final. En este ejemplo, moví ambos a la parte superior y cambié su tamaño y color. Diseñé la insignia de oferta cambiando el color de fondo y el tamaño de fuente. También diseñé los puntos inactivos y activos.

Así es como se ve en la parte delantera. También agregué una superposición y el botón Agregar al carrito aparece al pasar el mouse. Puede diseñar este botón tanto para el desplazamiento de superposición como para el desplazamiento del botón.

En este, seleccioné 6 columnas, moví todo el texto a la parte inferior, ajusté los colores del texto y agregué algo de opacidad al botón Agregar al carrito. Dejé la opacidad de desplazamiento por defecto, por lo que el botón es sólido si se desplaza sobre el botón en sí.

Para este, configuré el diseño en 4 columnas. Agregué flechas y cambié los colores de las flechas y los puntos. También agregué un fondo al título, precio y descripción, y cambié todo el texto a blanco. Para alinear bien el texto dentro del cuadro, agregué algo de relleno de contenido. También incluye relleno de contenido para la parte superior (en caso de que coloques el título o el precio encima de la imagen).

Así es como se ve en la parte delantera. La flecha de la derecha es más clara para indicar que está al final de los productos que puede mostrar. Si lo configuro en bucle, sería el color normal.

Así es como se ve con Overflow seleccionado. Proporciona un bonito efecto de tarjeta 3D. Puede ajustar la cantidad de rotación y habilitar la sombra de la diapositiva.

En este ejemplo, le di a las cartas una sombra de caja y ajusté el desenfoque. También cambié las flechas a un círculo y ajusté los colores.

Así es como se ve en la parte frontal con Center Slide habilitado. Este es el diseño de 4 columnas. Se muestra de manera diferente cuando selecciona Diapositiva central.

Este es el diseño de 5 columnas que utiliza la misma configuración que en el ejemplo anterior.

El carrusel de productos encaja bien con los diseños de Divi. En este ejemplo, reemplacé el módulo de tienda Divi con el módulo de carrusel de productos Divi y lo diseñé para que coincida con el diseño.

En este, moví el título a la parte superior, agregué algo de relleno en la parte superior e inferior, y puse los títulos en semi-negrita. También cambié el color del botón Agregar al carrito para que coincida con el diseño.

Para este, ajusté los bordes de las diapositivas y las imágenes para crear esquinas redondeadas. Seguí adelante e hice círculos con las imágenes. También agregué una sombra de caja.

Se ve excelente dentro del diseño. Sin embargo, oculta la mayor parte de la insignia de venta. Probablemente haya una forma de evitar eso con CSS.

Este usa Overflow con el diseño de 3 columnas.

Para este, eliminé el borde de la imagen pero mantuve el borde de las diapositivas. Agregué una sombra de caja y ajusté su fuerza y ​​posición.

También muestra la calificación de estrellas de las reseñas al pasar el mouse. Coloca la calificación junto al botón Agregar al carrito. Los une con una animación genial. Ésta es la configuración predeterminada. Puede diseñar los colores del fondo y las estrellas.

En este, he diseñado las calificaciones para que coincidan con los elementos del diseño.

Para este, moví el precio a la parte superior y el título a la parte inferior. Agregué una descripción y una superposición. Moví la navegación de puntos a la derecha. Tuve que agregar algo de relleno para que la sombra del cuadro se mostrara en los lados. Sin el acolchado, coloca el producto en el borde del espacio del módulo.

Demostraciones del módulo de carrusel de productos Divi

Actualmente hay 13 demostraciones descargables en el sitio web del desarrollador. Estos son diseños que puede cargar en la biblioteca Divi y usar con cualquier diseño Divi. Todos incluyen estilo para el módulo Divi Product Carousel y algunos incluyen otros módulos y fondos con estilo. Estos son buenos para obtener un punto de partida con los diseños de carrusel de productos y para mostrar algunas de las cosas que se pueden hacer con el módulo. Veamos algunos de ellos.

Este coloca los títulos en la parte superior, los estilos en la parte superior e inferior para que coincidan, agrega flechas en un círculo fuera de las imágenes e incluye puntos. También tiene un borde inferior para resaltar las diapositivas. Me gustan los colores llamativos. La parte superior e inferior tienen un poco de transparencia para que se vean los patrones de fondo. Este diseño incluye un módulo de texto con estilo para el título.

Varios de los diseños incluyen otros módulos con estilo. Este usa un diseño de dos columnas para agregar una llamada a la acción usando módulos de texto y botones.

Así es como se ve desde el frente. Incluye un borde, títulos en la parte superior y dos colores para el botón Agregar al carrito. Las flechas se muestran dentro de las imágenes del módulo.

Este incluye un fondo verde y diapositivas con estilo a juego. El botón Agregar al carrito es de color verde claro cuando se desplaza sobre el producto y luego de color verde oscuro cuando se desplaza sobre el botón. Incluye un módulo de texto con estilo para el título.

Este incluye un estilo azul para las insignias de venta, flechas redondas fuera de las imágenes y el botón Agregar al carrito. Agrega un pequeño borde a las diapositivas. Muestra las diapositivas con el efecto Overflow.

Este también muestra productos con el efecto Overflow. También usa azul para las flechas y el botón Agregar al carrito. El título se mueve a la parte superior. La superposición es blanca con una alta opacidad y la insignia de venta es roja.

Este incluye un fondo con estilo y agrega un borde, un botón con estilo Agregar al carrito, una insignia de venta y flechas en un círculo. La superposición es blanca. Coloca el precio en la parte superior y todos los demás datos en la parte inferior.

Precio y documentación del módulo de carrusel de productos Divi

Hay dos opciones de compra para el módulo de carrusel de productos Divi:

• Sitio único - $ 19
• Sitios ilimitados - $ 39

Está disponible en el sitio web del desarrollador y en los mercados.

La documentación es proporcionada por un video de YouTube que lo guía a través de las funciones. Encontrará un enlace a él en el menú DiviGear en el tablero. Si tiene más de un producto DiviGear, seleccione la pestaña del producto y luego seleccione Documentación.

Pensamientos finales

Divi Product Carousel es fácil de usar y es ideal para hacer que sus productos se destaquen. Incluso si no desea mostrarlos como un control deslizante, tiene muchas opciones de estilo y presentación de productos para que valga la pena considerarlo. No trabajé tan bien con Extra. Me encantaría ver el soporte Extra ya que ya tiene muchas funciones de WooCommerce y es una gran plataforma para construir tiendas WooCommerce.

Me gusta que tenga demos descargables. Incluyen los fondos y el estilo del módulo. Estos son excelentes para darle un punto de partida o despertar su imaginación para presentar sus productos WooCommerce dentro de sus diseños Divi.

Si está interesado en presentar sus productos WooCommerce en un carrusel, o simplemente en tener algunas opciones de diseño más, vale la pena echarle un vistazo al módulo Divi Product Carousel. Está disponible en el sitio web del desarrollador y en los mercados de Divi.

Queremos escuchar de ti. ¿Ha probado el módulo de carrusel de productos Divi? Háganos saber lo que piensa al respecto en los comentarios.

Imagen destacada Letters-Shmetters / shutterstock.com