homefinance blog
Al construir una página de destino para ciertos productos, ya sea un nuevo lanzamiento o una venta para la que se está preparando, hay altas posibilidades de usar el módulo de la tienda a la vez. El módulo Div Store le permite extraer dinámicamente productos del complemento WooCommerce y estilizar los productos utilizando las opciones integradas del DIV. Ahora, por defecto, el módulo de la tienda viene con algunas estructuras de columnas que se traducen en dos columnas en dimensiones de pantalla más pequeñas. Esto significa que cuanto más elija mostrar más productos, más vertical desfile 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 su desarrollo vertical y mostrar elementos de acuerdo con las preferencias de sus visitantes es el uso de tarjetas deslizantes. En este tutorial, le mostraremos cómo transformar el módulo Div Shop en tarjetas de deslizamiento 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 utilizaremos una pequeña cantidad de código CSS para activar el efecto deslizante. Esta es una excelente manera de mostrar una amplia gama de productos en su página de destino sin abrumar a sus visitantes. ¡Podrá descargar el archivo JSON de forma gratuita!
Vamos a eso. Vista previa antes de tirar la cabeza en el tutorial, para echar un vistazo al resultado. Activamos las tarjetas de producto solo en la tableta y el móvil. En el escritorio, mantenemos la estructura de la columna que determinamos dentro del módulo de almacén. Móvil
Escritorio
Descargue la apariencia de tarjetas de producto gratuitas para poner su mano en el esquema de tarjetas de deslizamiento de productos gratuitos, primero deberá descargarla con el botón a continuación. Para tener acceso a la descarga, deberá suscribirse a nuestra lista diaria de correo electrónico utilizando el formulario a continuación. ¡Como nuevo suscriptor, recibirá más buenas divisiones y un paquete Divaut gratuito todos los lunes! Si ya está en la lista, simplemente ingrese la dirección de correo electrónico a continuación y haga clic en Descargar. No se “volverá a suscribirse” y no recibirá correos electrónicos adicionales. Determine los archivos
Descargue el registro gratuito para el Boletín Informativo Divic y le enviaremos una copia de la página de la página de la página final, además de muchos otros recursos, consejos y consejos para Div gratis. Sigue a ti mismo y serás una división maestra en el menor tiempo. Si ya está suscrito, simplemente ingrese el correo electrónico a continuación y haga clic en Descargar para acceder al paquete de apariencia.
Te has suscripto satisfactoriamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos!
1. Configure el WooCommerce y las páginas del producto antes de ingresar a la división de este tutorial, es importante instalar y activar el complemento WooCommerce en su sitio web. Si aún no lo ha hecho, agregue más productos, dependiendo de cuántos productos desea mostrar en el módulo de la tienda.
2. Cree una nueva página y cargue una página de destino para la papelería Cree una nueva página Una vez que tenga los productos en su lugar, agregue una nueva página a la mochila de WordPress. Dé el título de su página, publique la página y active Visual Builder of the Div. Lleve la página de diseño para la papelería una vez en la nueva página, navegue por los aspectos prefabricados y cargue el diseño de la tienda de papelería. Aunque usamos este aspecto específico, puede usar cualquier otro aspecto de su elección, siempre que agregue o localice un módulo de tienda dentro de ese aspecto.
3. Modifique la sección de la tienda Encuentre la sección con el módulo de la tienda Si ejecutamos nuestra nueva página que construimos con el diseño de la tienda de papelería, nos reuniremos con una sección con un módulo de tienda. Usaremos esta sección durante los próximos pasos de este tutorial.
Los conjuntos de filas de tamaño receptivo comienzan abriendo la configuración de la fila del módulo de almacén. Como se mencionó anteriormente, mantenemos el mismo diseño en el escritorio, activaremos las tarjetas de deslizamiento del producto solo en tamaños de pantalla más pequeños. Para crear una experiencia sin esfuerzo, permitiremos que la fila alcance el lado izquierdo y derecho de la pantalla, cambiando el ancho en la configuración de dimensionamiento.
Use el ancho de canal personalizado: 1
Ancho: 80% (escritorio), 100% (tableta y teléfono)
Visibilidad también, nos aseguraremos de que nada vaya más allá del contenedor de la fila estableciendo la configuración de visibilidad.
Desbordamiento horizontal: oculto
Desbordamiento verticalmente: oculto
Compre la configuración del módulo Elija el número de productos y la estructura de columna de su elección, luego abriremos la configuración del módulo de la tienda. Los cambios que realizamos 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 tienda con 8 productos en tarjetas de producto. Puede elegir cualquier apariencia de color de su elección para el escritorio. Número de producto: 8
Columnas de apariencia: 4 columnas
Dimensionamiento receptivo Para aumentar el tamaño de nuestro módulo de tienda, cambiaremos la configuración de la pestaña de diseño. Observe cómo hacemos esto solo para tableta y teléfono.
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 tarde, cuando agregamos el código CSS, podremos transformar el módulo de almacén que contiene solo esta clase CSS. En otras palabras, si desea que otro módulo de tienda aparezca en un estado normal, dejar fuera de esta clase CSS le permitirá hacer esto.
Clase CSS: Tarjetas de producto
Derrame receptivo Completaremos la configuración de la fila modificando la configuración de visibilidad en diferentes tamaños de pantalla. Como puede ver en la configuración, queremos que el efecto de desarrollo aparezca solo en un tamaño más pequeño de la pantalla.
Overflow Horizontal: Oculto (escritorio), desplazamiento (tableta y teléfono)
Desbordamiento verticalmente: oculto
Agregue un módulo de código en el módulo de almacenamiento después de haber cambiado el módulo de almacenamiento, puede agregar un módulo de código justo debajo de él.
Agregue el código CSS al siguiente código CSS cambiará automáticamente nuestros 8 productos en las tarjetas de deslizamiento de productos receptivos:
@Media All y (Max-Width: 980px) {
.Product-swipe-tartas ul.products {
Display: Grid! IMPORTANTE;
Columnas de plantilla de cuadrícula: ¡Repita (8, 8.8%)!
Grid-column-gap: 0.7%;
}
.Product-swipe-tardes .WoOcommerce ul.products :: antes {
Contenido: Ninguno;
Bloqueo de pantalla;
}
.Product-swipe-cards.et_pb_shop ul.products li.product {
Ancho: 100%! Importante;
}
.Product-swipe-tarjets .wooCommerce {
Ancho: 255%! Importante;
Margen-izquierda: 5%;
}
.Product-swipe-tars ::-WebKit-Scrollbar {
Pantalla: ninguno;
}
.Product-swipe-tartas {
-Ms-Overflow Style: Ninguno;
}
}
Combinando los diferentes recuentos de productos ahora, si desea agregar menos (o más) productos en el módulo de la tienda, el código se cambia ligeramente en dos lugares. Estos dos lugares deben modificarse manualmente para que coincidan con el resultado deseado. Cambiemos el número de productos en nuestro módulo de tienda a “4”, por ejemplo.
Número de producto: 4
Cuando volvemos a nuestro código, debemos hacer dos cambios. Primero, tendremos que cambiar las columnas de la plantilla de cuadrícula. En lugar de 8, usamos 4 (el mismo número que el número de productos). También aumentamos el porcentaje que usan estos productos en nuestras tarjetas de productos (cuantos más productos, menos espacio). Columnas de plantilla de cuadrícula: ¡Repita (4, 14%)! Luego, también cambiaremos el ancho del contenedor en el que se colocan los productos. Para 4 productos, esto es igual al 150%. Estos valores no se establecen en piedra, se hacen jugar y encontrar una armonía entre las columnas de la plantilla de la cuadrícula y el ancho del contenedor. Para encontrar el equilibrio correcto, pase a la visualización móvil dentro del constructor visual y modifique cuidadosamente los valores al ver el resultado de estos cambios. Ancho: ¡150%! IMPORTANTE; Agregue el roto de desplazamiento si desea que la experiencia del usuario sea un paso más allá en el diseño de la tarjeta deslizante del producto, puede agregar desplazamiento. Conectarse al desplazamiento ayuda a los visitantes a administrar accediendo al comienzo de un nuevo producto. Esto significa que su deslizamiento no debe ser preciso, cortar el desfile se hará cargo en un momento dado y mostrará ajustar su posición dentro del mecanismo de desplazamiento horizontal. Para activar la fijación del desfile en las tarjetas de 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). Scroll-snap-align: inicio también activaremos el módulo de compras agregando el siguiente código CSS: scroll-snap-type: x obligatorio
Reutilice el módulo de la tienda para mostrar otras categorías Clon toda la fila Una vez que haya completado el primer conjunto de tarjeta deslizante de productos, la misma clase CSS que la anterior hará un módulo de código. Continúe y elimine el módulo de código en su fila duplicada.
Clone la fila duplicada como desee y clone la fila duplicada ahora cuántas veces es necesaria, dependiendo de cuántas tarjetas de producto desee mostrar en su página de destino!
4. Guarde los cambios en la página y vea el resultado en su dispositivo móvil, asegúrese de que una vez que haya terminado de agregar las tarjetas de producto, guarde su página antes de salir de Visual Builder y que haya terminado.
Vista previa ahora que hemos dado todos los pasos, para echar un vistazo final al resultado en diferentes tamaños de pantalla. Móvil
Escritorio
