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 use el módulo de compras en algún momento. Divi y su módulo de tienda le permiten extraer productos dinámicamente del complemento WooCommerce y diseñar los productos utilizando las opciones integradas de Divi. Ahora, de forma 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 necesitará 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 en función de las preferencias de los visitantes es el uso de tarjetas magnéticas. En este tutorial, le mostraremos cómo convertir el módulo Divi Shop en tarjetas deslizantes dinámicas 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á descargar el archivo JSON de forma gratuita!
Hagámoslo.
Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado. Solo estamos habilitando 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 la tienda.
Móvil
Escritorio
Descargue el diseño de tarjetas magnéticas para productos GRATIS
Para poner sus manos en el diseño de tarjetas magnéticas de producto gratuito, primero deberá descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestro boletín utilizando el formulario a continuación. Como nuevo suscriptor, ¡recibirás aún más bondad Divi y un paquete Divi Layout gratis todos los lunes! Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No será «resuscrito» ni recibirá correos electrónicos adicionales.
Descárgalo gratis
Únase al boletín informativo de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de muchos otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguenos y serás un maestro Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.
You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!
1. Configurar WooCommerce y páginas de productos
Antes de ingresar a la parte Divi de este tutorial, es importante tener instalado y activado el complemento WooCommerce en su sitio web. Si aún no lo ha hecho, agregue varios productos, según la cantidad de productos que desee mostrar en su módulo de tienda.
2. Cree una nueva página y cargue el diseño de la 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. Asigne un título a su página, publíquela y habilite Visual Builder de Divi.
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 Stationery Shop. 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.
3. Modificar la sección de la tienda
Localizar sección con módulo de tienda
Si nos desplazamos hacia abajo en nuestra nueva página que hemos creado utilizando el diseño de la página de destino de la tienda de artículos de papelería, nos encontraremos con una sección con un módulo de tienda. Usaremos esta sección en los próximos pasos de este tutorial.
Configuración de fila
Tamaño receptivo
Comience abriendo la configuración de fila de la fila que contiene el módulo de tienda. Como se mencionó anteriormente, mantendremos el mismo diseño en el escritorio, solo habilitaremos las tarjetas magnéticas del producto en tamaños de pantalla más pequeños. 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ón personalizado: 1
- Ancho: 80 % (escritorio), 100 % (tableta y teléfono)
Visibilidad
También nos aseguraremos de que nada sobrepase el contenedor de filas configurando la configuración de visibilidad como oculta.
- Desbordamiento horizontal: oculto
- Desbordamiento vertical: oculto
Configuración del módulo de tienda
Elija el recuento de productos y la estructura de columnas de escritorio de su elección
Luego, abriremos la configuración del Módulo de Tienda. 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 de compras con 8 productos en tarjetas magnéticas de productos. Puede elegir cualquier diseño de columna de su elección para el escritorio.
- Cantidad de productos: 8
- Diseño de columna: 4 columnas
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 cómo solo estamos haciendo esto para tabletas y teléfonos.
- Ancho: 100 % (escritorio), 250 % (tableta y teléfono)
- Ancho máximo: 100 % (escritorio), 250 % (tableta y teléfono)
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 de la tienda que lleva solo esta clase CSS. En otras palabras, si desea que aparezca otro módulo de tienda en un estado normal, omitir esta clase CSS le permitirá hacerlo.
- Clase CSS: producto-swipe-cards
Desbordamientos receptivos
Completaremos la configuración de la fila cambiando la configuración de visibilidad en diferentes tamaños de pantalla. Como puede notar en la configuración, solo queremos que el efecto de desplazamiento ocurra en tamaños de pantalla más pequeños.
- Desbordamiento horizontal: oculto (escritorio), desplazamiento (tableta y teléfono)
- Desbordamiento vertical: oculto
Agregar módulo de código debajo del módulo de tienda
Una vez que haya modificado el módulo de tienda, puede agregar un módulo de código justo debajo de él.
Agregar código CSS al módulo
El siguiente código CSS convertirá automáticamente nuestro módulo de compras de 8 productos en tarjetas magnéticas de productos sensibles:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
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> |
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 conteo de productos en nuestro Módulo de Tienda a ‘4’, por ejemplo.
- Cantidad de productos: 4
Cuando volvamos a nuestro código, hay dos cambios que debemos 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 conteo de productos). También estamos aumentando el tamaño en porcentaje que estos productos ocupan en nuestras tarjetas magnéticas de productos (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 están escritos 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 adecuado, cambie a la vista móvil dentro de Visual Builder y modifique los valores cuidadosamente mientras ve el resultado de estos cambios.
|
01
|
width: 150% !important; |
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 ajuste de desplazamiento. El ajuste de desplazamiento ayuda a sus visitantes a desplazarse haciendo clic en el comienzo de un nuevo producto. Esto significa que su deslizamiento no tiene que ser exacto, el ajuste de desplazamiento en un punto tomará el control y mostrará el ajuste de su posición dentro del mecanismo de desplazamiento horizontal. Para habilitar el ajuste de desplazamiento en las tarjetas magnéticas de su producto, agregue una línea de código CSS a cada producto individualmente en el código CSS (vea 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 |
Reutilice el módulo de tienda para mostrar otras categorías
Clonar toda la fila una vez
Una vez que haya completado el primer conjunto de tarjetas magnéticas de producto, puede clonar toda la fila una vez.
Eliminar módulo de código en fila duplicada
Siempre que su módulo de tienda contenga la misma clase de CSS que el anterior, un módulo de código servirá. Continúe y elimine el Módulo de código en su fila duplicada.
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!
4. Guardar cambios en la página y ver el resultado en el dispositivo móvil
¡Asegúrese de que una vez que haya terminado de agregar las tarjetas magnéticas del producto, guarde su página antes de salir de Visual Builder y listo!
Avance
Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado en diferentes tamaños de pantalla.
Móvil
Escritorio
Pensamientos finales
En esta publicación, le mostramos cómo convertir el módulo Divi Shop integrado en tarjetas magnéticas de productos en pantallas más pequeñas. En el escritorio, hemos mantenido la estructura de columnas original asignada al módulo de tienda. El uso de tarjetas deslizantes de productos le permite agregar un sinfín de productos a un mecanismo de deslizamiento horizontal sin abrumar a sus visitantes con el desplazamiento vertical.
Es una tendencia de uso frecuente en el diseño web moderno porque se centra en el comportamiento del usuario y facilita el acceso a una amplia gama de elementos en tamaños de pantalla más pequeños. Puede usar estas tarjetas magnéticas de productos en cualquier página que desee, pero es particularmente conveniente para las páginas de destino de productos que cree. ¡También pudo descargar el archivo JSON del diseño de forma gratuita! Si tiene alguna pregunta o sugerencia, no dude en dejar un comentario en la sección de comentarios a continuación.
Si está ansioso por aprender más sobre Divi y obtener más regalos de Divi, asegúrese de suscribirse a nuestro boletín de correo electrónico y al canal de YouTube para que siempre sea una de las primeras personas en conocer y obtener los beneficios de este contenido gratuito.