Cómo cambiar el punto de interrupción de la columna móvil del módulo Divi Shop
Publicado: 2020-01-24De forma predeterminada, tan pronto como cambia a un dispositivo móvil, el módulo de la tienda se convierte en un diseño de una columna. Ahora, si está buscando resaltar cada producto individualmente, eso es genial, pero con los tamaños de pantalla de teléfonos inteligentes más grandes en la actualidad, es posible que desee permitir que aparezcan dos productos uno al lado del otro cuando use el Módulo de compra. En el tutorial de Divi de hoy, le mostraremos cómo cambiar el punto de interrupción móvil del módulo de la tienda usando CSS, permitiendo que dos productos aparezcan uno al lado del otro en la mayoría de los teléfonos inteligentes modernos. ¡Este es un gran tutorial para tener a su alcance si está configurando una tienda en línea en el futuro! ¡También podrá descargar el archivo JSON del diseño de forma gratuita!
Hagámoslo.
Avance
Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.
Móvil
Escritorio
Descargue la plantilla de la página de la tienda GRATIS
Para tener en sus manos la plantilla de la página de la tienda gratuita, primero deberá descargarla usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestra lista de correo electrónico Divi Daily mediante 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 se le “volverá a suscribir” ni recibirá correos electrónicos adicionales.
Descárgalo gratis
Únase al boletín 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 toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguelo y serás un maestro de 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.
Te has suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!
1. Vaya a Divi Theme Builder y agregue una nueva plantilla
Vaya a Divi Theme Builder y agregue una nueva plantilla
Comience por ir al Creador de temas de DIvi y agregue una nueva plantilla.
Usar plantilla en la página de la tienda
Utilice esta nueva plantilla en la página de la tienda de su sitio web.
- Usar en: Tienda
Empezar a construir el cuerpo de la plantilla
Y comience a construir el cuerpo de la plantilla de la tienda.
2. Empiece a crear el cuerpo de la plantilla
Configuración de la sección
Fondo degradado
Una vez dentro del editor de plantillas, verá una sección. Abra esa sección y use el siguiente fondo degradado para ella:
- Color 1: # 32ff3d
- Color 2: # 29c4a9
- Tipo de degradado: lineal
- Dirección del gradiente: 109 grados
Imagen de fondo
Sube también una imagen de fondo. Puede encontrar la imagen de fondo que estamos usando en este tutorial en la carpeta de descarga que pudo descargar al principio de esta publicación.
- Tamaño de la imagen de fondo: Ajustar
Espaciado
Vaya a la pestaña de diseño de la sección y modifique los valores de espaciado en consecuencia:
- Margen superior: 50 px
- Margen izquierdo: 50px
- Margen derecho: 50px
- Acolchado inferior: 150px
Frontera
Complete la configuración de la sección agregando un radio de borde.
- Todas las esquinas: 20px
Agregar nueva fila
Estructura de la columna
Continúe agregando una nueva fila a la sección usando la siguiente estructura de columnas:
Agregar módulo de texto a la columna
Agregar contenido H1
Agregue un módulo de texto a la columna de la fila con algún contenido H1 de su elección.
Configuración de texto H1
Cambie la configuración de texto H1 del módulo en consecuencia:
- Fuente de encabezado: Prata
- Alineación del texto del encabezado: centro
- Color del texto del encabezado: #ffffff
- Tamaño del texto del encabezado: 80 px (escritorio), 60 px (tableta), 40 px (teléfono)
Agregar sección n. ° 2
Índice Z
Agrega otra sección justo debajo de la anterior. Abra la configuración de la sección y aumente el índice z.
- Índice Z: 2
Agregar nueva fila
Estructura de la columna
Luego, agregue una nueva fila usando la siguiente estructura de columnas:
Color de fondo
Sin agregar ningún módulo todavía, abra la configuración de fila y agregue un color de fondo.
- Color de fondo: #ffffff
Dimensionamiento
Vaya a la pestaña de diseño del módulo y modifique la configuración de tamaño de la siguiente manera:
- Ancho: 100%
- Ancho máximo: 1380px
Espaciado
Luego, agregue algunos valores de espaciado personalizados en diferentes tamaños de pantalla.
- Margen superior: 200 px
- Relleno superior: 50 px (escritorio), 20 px (tableta y teléfono)
- Acolchado inferior: 50 px (escritorio), 20 px (tableta y teléfono)
- Relleno izquierdo: 100 px (escritorio), 20 px (tableta y teléfono)
- Relleno derecho: 100 px (escritorio), 20 px (tableta y teléfono)
Frontera
También estamos agregando un radio de borde a toda la fila.
- Todas las esquinas: 25px
Sombra de la caja
Complete la configuración de la fila agregando una sombra de cuadro sutil.
- Fuerza de desenfoque de sombra de caja: 50px
- Color de sombra: rgba (0,0,0,0.1)
Agregar módulo de tienda a la columna
Contenido
Ahora es el momento de insertar nuestro módulo de tienda. Estamos usando un diseño de 4 columnas.
- Diseño de columna: 4 columnas
Cubrir
Vaya a la pestaña de diseño del módulo y cambie los colores de superposición.
- Color del icono de superposición: # 29c6a6
- Color de fondo de superposición: rgba (255,255,255,0.75)
Imagen
Cambie también la configuración de la imagen.
- Todas las esquinas: 10px
- Fuerza de desenfoque de sombra de caja: 50px
- Color de sombra: rgba (0,0,0,0.11)
Configuración del texto del título
Continúe modificando la configuración del texto del título en consecuencia:
- Fuente del título: Prata
- Tamaño del texto del título: 30 px (escritorio), 25 px (tableta), 20 px (teléfono)
Configuración de texto de precio
A continuación, realice algunos cambios en la configuración del texto del precio.
- Fuente de precio: Montserrat
- Precio Peso de la fuente: Medio
- Precio Tamaño del texto: 18px (escritorio), 16px (tableta), 14px (teléfono)
Espaciado
Complete la configuración del módulo agregando algo de relleno superior.
- Relleno superior: 50px
Agregar módulo de código a la columna
Una vez que haya completado el diseño general del Módulo de la tienda, es hora de modificar el punto de interrupción de la columna móvil del Módulo de la tienda utilizando CSS. Agregaremos el código CSS a un módulo de código dentro de nuestro diseño. Continúe y agregue un nuevo módulo de código justo debajo del módulo de la tienda.
Insertar código CSS
Estamos reduciendo el punto de interrupción móvil de una columna a un ancho de 300 px. Esto significa que la mayoría de los teléfonos inteligentes modernos mostrarán dos productos uno al lado del otro en lugar de uno. Para que esto suceda, agregaremos las siguientes líneas de código CSS al Módulo de código:
<style>
@media (max-width: 479px) {
.woocommerce-page ul.products li.product:nth-child(n) {
width: 49% !important;
}
}
@media (max-width: 300px) {
.woocommerce-page ul.products li.product:nth-child(n) {
width: 100% !important;
}
}
</style>
3. Guarde todos los cambios del generador de temas y obtenga una vista previa del resultado
Una vez que haya completado el diseño de la página de la tienda y haya agregado el código CSS para cambiar el punto de interrupción móvil, puede guardar todos los cambios en el Generador de temas y ver el resultado en la página de su tienda.
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 cambiar el punto de interrupción de la columna móvil del módulo de la tienda, lo que le permite mostrar dos productos uno al lado del otro en la mayoría de los teléfonos inteligentes modernos en la actualidad. Esta es una excelente manera de reducir el desplazamiento móvil que se requiere y mostrar a sus visitantes más productos a la vez. ¡También pudo descargar el archivo JSON gratis! Si tiene alguna pregunta, 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 obsequios de Divi, asegúrese de suscribirse a nuestro boletín por correo electrónico y al canal de YouTube para que siempre sea una de las primeras personas en conocer y obtener beneficios de este contenido gratuito.