De manera predeterminada, tan pronto como se 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 hoy en día, es posible que desee permitir que dos productos aparezcan uno al lado del otro al usar el Módulo de compras. En el tutorial 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 al alcance si está configurando una tienda en línea en el futuro! ¡También podrás descargar el archivo JSON del diseño de forma gratuita!

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 en diferentes tamaños de pantalla.

Móvil

Comprar módulo de punto de corte móvil

Escritorio

Comprar módulo de punto de corte móvil

1. Vaya a Divi Theme Builder y agregue una nueva plantilla

Vaya a Divi Theme Builder y agregue una nueva plantilla

Comience yendo al generador de temas de DIvi y agregue una nueva plantilla.

Comprar módulo de punto de corte móvil

Usar plantilla en la página de la tienda

Use esta nueva plantilla en la página de la tienda de su sitio web.

  • Uso en: comprar

Comprar módulo de punto de corte móvil

Comience a construir el cuerpo de la plantilla

Y comience a construir el cuerpo de la plantilla de la tienda.

Comprar módulo de punto de corte móvil

2. Comience a construir el cuerpo de la plantilla

Configuraciones de sección

Fondo degradado

Una vez dentro del editor de plantillas, verás 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 de degradado: 109 grados

Comprar módulo de punto de corte móvil

Imagen de fondo

Sube una imagen de fondo también. 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 imagen de fondo: ajuste

Comprar módulo de punto de corte móvil

Espaciado

Pase a la pestaña de diseño de la sección y modifique los valores de espacio en consecuencia:

  • Margen superior: 50 px
  • Margen izquierdo: 50 px
  • Margen derecho: 50 px
  • Relleno inferior: 150px

Comprar módulo de punto de corte móvil

Frontera

Complete la configuración de la sección agregando un radio de borde.

  • Todas las esquinas: 20 px

Comprar módulo de punto de corte móvil

Agregar nueva fila

Estructura de columna

Continúe agregando una nueva fila a la sección utilizando la siguiente estructura de columnas:

Comprar módulo de punto de corte móvil

Agregar módulo de texto a la columna

Añadir contenido H1

Agregue un módulo de texto a la columna de la fila con algún contenido H1 de su elección.

Comprar módulo de punto de corte móvil

Configuraciones de texto H1

Cambie la configuración de texto H1 del módulo en consecuencia:

  • Fuente del encabezado: Prata
  • Encabezado de texto: Centro
  • Color del texto del encabezado: #ffffff
  • Tamaño del texto del encabezado: 80 px (escritorio), 60 px (tableta), 40 px (teléfono)

Comprar módulo de punto de corte móvil

Agregar 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.

  • Índice Z: 2

Comprar módulo de punto de corte móvil

Agregar nueva fila

Estructura de columna

Luego, agregue una nueva fila utilizando la siguiente estructura de columnas:

Comprar módulo de punto de corte móvil

Color de fondo

Sin agregar ningún módulo todavía, abra la configuración de la fila y agregue un color de fondo.

  • Color de fondo: #ffffff

Comprar módulo de punto de corte móvil

Dimensionamiento

Pase 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áx .: 1380px

Comprar módulo de punto de corte móvil

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)

Comprar módulo de punto de corte móvil

Frontera

También estamos agregando un radio de borde a toda la fila.

  • Todas las esquinas: 25 px

Comprar módulo de punto de corte móvil

Sombra de la caja

Complete la configuración de la fila agregando una sombra de cuadro sutil.

  • Caja Shadow Blur Fuerza: 50px
  • Color de sombra: rgba (0,0,0,0.1)

Comprar módulo de punto de corte móvil

Agregar módulo de tienda a la columna

Contenido

Ahora es el momento de insertar nuestro Módulo de compras. Estamos usando un diseño de 4 columnas.

  • Diseño de columna: 4 columnas

Comprar módulo de punto de corte móvil

Cubrir

Pase 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 superpuesto: rgba (255,255,255,0.75)

Comprar módulo de punto de corte móvil

Imagen

Cambie la configuración de la imagen también.

  • Todas las esquinas: 10px

Comprar módulo de punto de corte móvil

  • Caja Shadow Blur Fuerza: 50px
  • Color de sombra: rgba (0,0,0,0.11)

Comprar módulo de punto de corte móvil

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)

Comprar módulo de punto de corte móvil

Configuración de texto de precio

A continuación, realice algunos cambios en la configuración del texto del precio.

  • Fuente del precio: Montserrat
  • Precio Fuente Peso: Medio
  • Tamaño del texto del precio: 18 px (escritorio), 16 px (tableta), 14 px (teléfono)

Comprar módulo de punto de corte móvil

Espaciado

Complete la configuración del módulo agregando algo de relleno superior.

  • Relleno superior: 50px

Comprar módulo de punto de corte móvil

Agregar módulo de código a la columna

Una vez que haya completado el diseño general del Módulo Shop, es hora de modificar el punto de ruptura de la columna móvil Shop Module usando 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 Compra.

Comprar módulo de punto de corte móvil

Insertar código CSS

Estamos reduciendo el punto de ruptura móvil de una columna a 300px de ancho. 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:

01
02
03
04
05
06
07
08
09
10
11
12
<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>

Comprar módulo de punto de corte móvil

3. Guardar todos los cambios del generador de temas y el resultado de la vista previa

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 de Theme Builder y ver el resultado en su página de la tienda.

Comprar módulo de punto de corte móvil

Comprar módulo de punto de corte móvil

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

You have Successfully Subscribed!