homefinance blog
Por defecto, tan pronto como pasa a un dispositivo móvil, el módulo de la tienda se convierte en una aparición con una columna. Ahora, si desea resaltar cada producto individualmente, es maravilloso, pero con las dimensiones más grandes de la pantalla del teléfono inteligente hoy en día, le recomendamos que permita dos productos uno al lado del otro cuando use el módulo de la tienda. En el tutorial de la división de hoy, le mostraremos cómo cambiar el punto de interrupción móvil del módulo de la tienda utilizando CSS, lo que permite que dos productos aparezcan uno al lado del otro en la mayoría de los teléfonos inteligentes modernos. ¡Este es un excelente tutorial que tiene a mano si crea una tienda en línea en el futuro! ¡Podrá descargar el archivo de diseño JSON de forma gratuita!
Vamos a eso. Vista previa antes de arrojar nuestras cabezas en el tutorial, para echar un vistazo rápido al resultado en diferentes tamaños de pantalla. Móvil
Escritorio
Descargue la plantilla de página de forma gratuita para poner su mano en la plantilla de tienda gratuita de su tienda, 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 será “reubicado” y no recibirá correos electrónicos adicionales.
Descargar 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. Se ha suscrito correctamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos!
1. Vaya al Temo Builder Divin y agregue una nueva plantilla Access The Divic Builder y agregue una nueva plantilla accediendo al creador de temas Al Div y agregue una nueva plantilla.
Use la plantilla en la página de la tienda Use esta nueva plantilla en la página de la tienda de la tienda.
Uso en: comprar
Comience a construir el cuerpo de la plantilla y comience a construir la tienda de la plantilla de la tienda.
2. Comience a construir el cuerpo de la configuración de la plantilla del fondo de gradiente Una vez que llegue al editor de plantillas, notará una sección. Abra esa sección y use los siguientes antecedentes de gradiente para esto:
Color 1: # 32FF3D
Color 2: # 29C4A9
Tipo de gradiente: lineal
Dirección de gradiente: 109 grados
Carga de imagen de fondo y una imagen de fondo. Puede encontrar la imagen de fondo que utilizamos en este tutorial en el archivo de descarga que podría descargar al comienzo de esta publicación.
Tamaño de la imagen de fondo: adecuado
Espacio ir a la pestaña de diseño de la sección y cambiar los valores de espaciado en consecuencia:
Margen superior: 50 PX
Margen izquierdo: 50 pxmarja derecha: 50 px
Revestimiento inferior: 150 px
Llena de borde en la configuración de la sección Agregar un rayo de borde.
Todas las esquinas: 20 PX
Agregue una nueva estructura de columna de fila Continúe agregando una nueva línea a la sección utilizando la siguiente estructura de columna:
Agregue un módulo de texto a la columna Agregar contenido H1 Agregue un módulo de texto en la columna de fila con un contenido H1 de su elección.
Configuración de texto H1 Cambie la configuración de texto H1 del módulo en consecuencia:
Fuente del título: Prata
Alineación del texto del encabezado: Centro
Encabezado de texto en color: #ffffff
Encabezado de texto de tamaño: 80 PX (escritorio), 60 px (tableta), 40 px (teléfono)
Agregue la sección 2 índice z Agregue otra sección justo debajo de la anterior. Abra la configuración de la sección y aumente el índice Z.
IND ÍNDICE: 2
Agregue una nueva fila a la estructura de la columna y luego, agregue una nueva fila utilizando la siguiente estructura de columnas:
Color de fondo sin agregar módulos, abra la configuración de línea y agregue un color de fondo.
Color de fondo: #ffffff
Dimensión Vaya a la pestaña Diseño del módulo y cambie la configuración de tamaño de la siguiente manera:
Ancho: 100%
Ancho máximo: 1380 PX
Espacio entonces, agregue algunos valores de espaciado personalizados en diferentes tamaños de pantalla.
Margen superior: 200 PX
Revestimiento superior: 50 PX (escritorio), 20 px (tableta y teléfono)
Bajo forro: 50 PX (escritorio), 20 px (tableta y teléfono)
ENNIZACIÓN IZQUIERDA: 100 PX (escritorio), 20 px (tableta y teléfono)
Revestimiento derecho: 100 PX (escritorio), 20 px (tableta y teléfono)
El borde también agregue un cierto rayo de borde en toda la fila.
Todas las esquinas: 25 PX
Box Shadow Complete la configuración de la fila agregando una sombra de caja sutil. Poniendo la sombra de la sombra de la caja: 50 PX
Color de la sombra: RGBA (0.0,0,0,1)
Agregue el módulo de almacenamiento a la columna contenida ahora, es hora de ingresar a nuestro módulo de tienda. Usamos una apariencia con 4 columnas.
Columnas de apariencia: 4 columnas
Cubra el interruptor a la pestaña Diseño del módulo y cambie los colores de la superposición.
Overlap icono de color: # 29C6A6
Color de fondo superpuesto: RGBA (255.255.255.0.75)
La imagen modifica la configuración de la imagen.
Todas las esquinas: 10 PX
Poder de poco claro de la sombra de la caja: 50 px
Color de la sombra: RGBA (0.0,0,0.11)
Configuración de texto de título Continúe cambiando la configuración del texto del título según:
Título de la fuente: Prata
Título Tamaño de texto: 30 PX (escritorio), 25 PX (tableta), 20 PX (teléfono)
Configuración de texto de precio Entonces, realice algunos cambios en la configuración del texto del precio.
Precio de fuente: Montserrat
Peso del precio de la fuente: medio
Tamaño de texto de precio: 18 PX (escritorio), 16 px (tableta), 14 px (teléfono)
Espacio Complete la configuración del módulo agregando algunos revestimientos superiores.
Revestimiento superior: 50 px
Agregue un 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 cambiar el punto de interrupción de la columna móvil de la tienda con 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 almacenamiento.
Ingrese el código CSS. Reduzca el punto de interrupción móvil con una columna al 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 hacer esto, agregaremos las siguientes líneas de código CSS al módulo de código: @Media (Max-Width: 479px) {
.WOOCOMMERCE-PAGE UL.PRODUCTS LI.PRODUCT: NTH-Child (n) {
Ancho: 49%! Importante;
}
}
@Media (max-width: 300px) {
.WOOCOMMERCE-PAGE UL.PRODUCTS LI.PRODUCT: NTH-Child (n) {
Ancho: 100%! Importante;
}
}
3. Guarde todos los cambios y el resultado de la vista previa del constructor Después de haber completado el diseño de la tienda y agregó el código CSS para cambiar su interrupción móvil, puede guardar todo el edificio del tema y ver el resultado en la página de su tienda !
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
Pensamientos finales En esta publicación, le he mostrado cómo cambiar el punto de interrupción de la columna móvil del módulo de la tienda, 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 desarrollo móvil necesario y mostrar a los visitantes más productos simultáneamente. ¡Podrías descargar el archivo JSON gratis! Si tiene alguna pregunta, no dude en dejar un comentario en la sección de comentarios a continuación.
