¡Tu licencia Divi con un -20% de DescuentoOferta aquí

Como hacer un carrusel deslizable de productos en tu tienda con Divi

May 30, 2020 | Tutoriales para Divi

Al crear una página de destino para productos específicos, ya sea un nuevo lanzamiento o una venta para la que se está preparando, es muy probable que utilice el Módulo de compras en algún momento. El Módulo de Tienda de Divi le permite extraer productos dinámicamente del complemento WooCommerce y diseñar los productos utilizando las opciones integradas de Divi. Ahora, de manera predeterminada, el módulo de tienda viene con algunas estructuras de columnas que se traducen en dos columnas en tamaños de pantalla más pequeños. Esto significa que cuantos más productos elija mostrar, más desplazamiento vertical se requiere para llegar a la siguiente parte de su página de destino.

En el diseño web moderno, una técnica de uso frecuente para limitar el desplazamiento vertical y mostrar elementos basados ​​en las preferencias de sus visitantes es usar tarjetas magnéticas. En este tutorial, le mostraremos cómo convertir el Módulo Divi Shop en tarjetas dinámicas de deslizamiento de productos en tamaños de pantalla más pequeños sin usar un complemento. Comenzaremos preparando los diferentes elementos en nuestra sección de productos y usaremos una pequeña cantidad de código CSS para habilitar el efecto de deslizamiento. Esta es una excelente manera de mostrar una amplia gama de productos dentro de su página de destino sin abrumar a sus visitantes. ¡También podrás descargar el archivo JSON gratis!

Descargar el tutorial GRATIS

Para descargar el fichero JSON de este tutorial, será necesario descargarlo usando el botón de descarga, suscribiendose a nuestra lista de correo electrónico mediante el siguiente formulario. Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No se «volverá a suscribir» ni recibirá correos electrónicos adicionales.

Avance

Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado. Solo habilitamos las tarjetas magnéticas del producto en tabletas y dispositivos móviles. En el escritorio, mantenemos la estructura de columnas que determinamos dentro del Módulo de compras.

Móvil

tarjetas magnéticas de productos

Escritorio

tarjetas magnéticas de productos

1. Configurar WooCommerce y páginas de productos

Antes de entrar en la parte Divi de este tutorial, es importante tener el complemento WooCommerce instalado y activado en su sitio web. Si aún no lo ha hecho, agregue varios productos, dependiendo de cuántos productos desee mostrar en su Módulo de compras.

tarjetas magnéticas de productos

2. Crear nueva página y cargar diseño de página de destino de papelería

Crear nueva página

Una vez que tenga los productos en su lugar, agregue una nueva página dentro de su backend de WordPress. Dale un título a tu página, publica la página y habilita el Visual Builder de Divi.

tarjetas magnéticas de productos

tarjetas magnéticas de productos

Subir diseño de página de destino de papelería

Una vez dentro de su nueva página, navegue a sus diseños prefabricados y cargue el diseño de la página de destino de la tienda de papelería. Aunque estamos usando este diseño específico, puede usar cualquier otro diseño de su elección, siempre que agregue o ubique un módulo de tienda dentro de ese diseño.

tarjetas magnéticas de productos

3. Modificar la sección de la tienda

Localizar sección con módulo de compra

Si nos desplazamos hacia abajo en nuestra nueva página que hemos creado utilizando el diseño de la página de inicio de la tienda de papelería, encontraremos una sección con un módulo de tienda. Usaremos esta sección en los próximos pasos de este tutorial.

tarjetas magnéticas de productos

Configuración de fila

Tamaño receptivo

Comience abriendo la configuración de fila de la fila que contiene el Módulo Shop. Como se mencionó anteriormente, mantenemos el mismo diseño en el escritorio, solo habilitaremos las tarjetas magnéticas del producto en pantallas más pequeñas. Para crear una experiencia sin esfuerzo, permitiremos que la fila toque el lado izquierdo y derecho de nuestra pantalla cambiando el ancho en la configuración de tamaño.

  • Usar ancho de canal personalizado: 1
  • Ancho: 80% (escritorio), 100% (tableta y teléfono)

tarjetas magnéticas de productos

Visibilidad

También nos aseguraremos de que nada supere el contenedor de filas configurando la configuración de visibilidad como oculta.

  • Desbordamiento horizontal: oculto
  • Desbordamiento vertical: oculto

tarjetas magnéticas de productos

Comprar la configuración del módulo

Elija el recuento de productos y la estructura de columnas de escritorio de elección

Luego, abriremos la configuración de Comprar Módulo. Los cambios que hacemos en nuestro Código CSS (que agregaremos más adelante) dependen de la cantidad de productos que mostramos. Comenzaremos mostrándole cómo convertir un Módulo Shop con 8 productos en tarjetas magnéticas. Puede elegir cualquier diseño de columna de su elección para el escritorio.

  • Recuento de productos: 8
  • Diseño de columna: 4 columnas

tarjetas magnéticas de productos

Tamaño receptivo

Para aumentar el tamaño de nuestro módulo de tienda, modificaremos la configuración de tamaño en la pestaña de diseño. Observe que solo hacemos esto para tabletas y teléfonos.

  • Ancho: 100% (escritorio), 250% (tableta y teléfono)
  • Ancho máximo: 100% (escritorio), 250% (tableta y teléfono)

tarjetas magnéticas de productos

Clase CSS

También agregaremos una clase CSS a nuestro módulo de tienda. Más adelante, cuando agreguemos el código CSS, podremos transformar el Módulo Shop que solo lleva esta clase CSS. En otras palabras, si desea que aparezca otro Módulo Shop en un estado normal, omitir esta clase CSS le permitirá hacerlo.

  • Clase CSS: tarjetas de deslizamiento de producto

tarjetas magnéticas de productos

Desbordamientos receptivos

Completaremos la configuración de la fila cambiando la configuración de visibilidad en diferentes tamaños de pantalla. Como puede observar en la configuración, solo queremos que el efecto de desplazamiento se produzca en tamaños de pantalla más pequeños.

  • Desbordamiento horizontal: oculto (escritorio), desplazamiento (tableta y teléfono)
  • Desbordamiento vertical: oculto

tarjetas magnéticas de productos

Agregue el módulo de código debajo del módulo de la tienda

Una vez que haya modificado el Módulo de compra, puede agregar un Módulo de código justo debajo de él.

tarjetas magnéticas de productos

Agregar código CSS al módulo

El siguiente código CSS convertirá automáticamente nuestro Módulo de la Tienda de 8 productos en tarjetas deslizantes de productos sensibles:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18 años
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<style>
 
@media all and (max-width: 980px) {
    
.product-swipe-cards ul.products {
display: grid !important;
grid-template-columns: repeat(8, 8.8%) !important;
grid-column-gap: 0.7%;
}
 
.product-swipe-cards .woocommerce ul.products::before {
content: none;
display: block;
}
   
.product-swipe-cards.et_pb_shop ul.products li.product {
width: 100% !important;
}
 
.product-swipe-cards .woocommerce {
width: 255% !important;
margin-left: 5%;
}
   
.product-swipe-cards::-webkit-scrollbar {
display: none;
}
   
.product-swipe-cards {
-ms-overflow-style: none;
}
 
}
 
</style>

tarjetas magnéticas de productos

Coincidencia de diferentes recuentos de productos

Ahora, si está buscando agregar menos (o más) productos en su módulo de tienda, el código cambia ligeramente en dos lugares. Estos dos lugares deben modificarse manualmente para que coincidan con el resultado deseado. Cambiemos el recuento de productos en nuestro Módulo de tienda a ‘4’, por ejemplo.

  • Recuento de productos: 4

tarjetas magnéticas de productos

Cuando volvamos a nuestro código, hay dos cambios que tendremos que hacer. Primero, tendremos que cambiar las columnas de la plantilla de cuadrícula. En lugar de 8, estamos usando 4 (el mismo número que nuestro recuento de productos). También estamos aumentando el tamaño en porcentaje que estos productos ocupan en nuestras tarjetas magnéticas (cuantos más productos, menos espacio).

01
grid-template-columns: repeat(4, 14%) !important;

Luego, también modificaremos el ancho del contenedor en el que se colocan los productos. Para 4 productos, esto equivale al 150%. Estos valores no se establecen en piedra, se logran jugando y encontrando una armonía entre las columnas de la plantilla de cuadrícula y el ancho del contenedor. Para encontrar el equilibrio correcto, cambie a la vista móvil dentro del Visual Builder y modifique los valores cuidadosamente mientras visualiza el resultado de estos cambios.

01
width: 150% !important;

tarjetas magnéticas de productos

Agregar ajuste de desplazamiento

Si desea llevar la experiencia del usuario un paso más allá en el diseño de la tarjeta magnética de su producto, también puede agregar el ajuste de desplazamiento. El ajuste de desplazamiento ayuda a sus visitantes a desplazarse al principio de un nuevo producto. Esto significa que su deslizamiento no tiene que ser exacto, el desplazamiento del desplazamiento se hará cargo en un punto y mostrará el ajuste de su posición dentro del mecanismo de desplazamiento horizontal. Para habilitar el ajuste de desplazamiento en las tarjetas deslizables de su producto, agregue una línea de código CSS a cada producto individualmente en el código CSS (consulte la pantalla de impresión a continuación).

01
scroll-snap-align: start

También habilitaremos el ajuste de desplazamiento en nuestro módulo de tienda agregando la siguiente línea de código CSS:

01
scroll-snap-type: x mandatory

tarjetas magnéticas de productos

Reutilice Shop Module para mostrar otras categorías

Clonar toda la fila una vez

Una vez que haya completado el primer conjunto de tarjetas deslizantes del producto, puede clonar toda la fila una vez.

tarjetas magnéticas de productos

Eliminar módulo de código en fila duplicada

Siempre que su Módulo de Tienda contenga la misma clase CSS que la anterior, un Módulo de Código funcionará. Continúe y elimine el Módulo de código en su fila duplicada.

tarjetas magnéticas de productos

Clonar fila duplicada tanto como se desee

¡Y clone la fila duplicada ahora tantas veces como sea necesario, dependiendo de cuántos juegos de tarjetas magnéticas de productos desee mostrar en su página de destino!

tarjetas magnéticas de productos

tarjetas magnéticas de productos

4. Guardar los cambios de página y ver los resultados en el dispositivo móvil

Asegúrese de que una vez que haya terminado de agregar las tarjetas deslizantes del producto, guarde su página antes de salir de Visual Builder y ¡listo!

tarjetas magnéticas de productos

Por Prunaestudio

Por Prunaestudio

Prunaestudio es un estudio de diseño web ubicado en Valencia (España). Estamos especializados en el diseño web basado en WordPress con la plantilla premium de Elegantthemes, Divi.

* Todos el contenido pertenece y se ha traducido del blog de Elegantthemes (Divi Resources)

Nuestras últimas entradas

¡20% de Descuento en Divi!

Sitios web y usuarios ilimitados

Únete a más de 700.000 clientes y obten acceso a Divi, Extra, Bloom, Monarch y mucho más. Impulsa a todo tu equipo y crea sitios web ilimitados con una licencia.

¡Ir al descuento!



You have Successfully Subscribed!

Pin It on Pinterest

Share This