Cómo crear un diseño de bloqueo receptivo para páginas de productos Woo con div Div

Ahora que puede usar módulos WOO en la división, el único límite es su imaginación. Cada módulo dinámico WOO es personalizable como todos los demás módulos dentro del constructor. En esta publicación, le mostraremos cómo recrear un diseño creativo para sus páginas de productos. Los módulos dinámicos se agrupan en un conjunto creativo que se destaca del fondo oscuro. ¡También puede descargar el archivo JSON gratis! Vamos a eso. Vista previa antes de comenzar, para echar un vistazo al diseño en diferentes tamaños de pantalla. Escritorio

Móvil

Descargue el diseño del bloque de respuesta gratuito para poner su mano en el diseño del bloque de respuesta gratuito, primero deberá descargarlo usando 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.
Te has suscripto satisfactoriamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos! Suscríbase a nuestro canal de YouTube 1. Agregue / abra los detalles del producto WoCommerce Abra un producto existente o cree un nuevo. Para recrear este diseño de estilo de bloque, deberá completar la siguiente información:
Título
Descripción
Precio
Categoría
atributo
Imagen presentada
La pestaña Atributo es donde se extrae la información para el módulo de información de WOO adicional. Para agregar esta información, haga clic en la pestaña Atributo y cree tres atributos personalizados de la siguiente manera:
Atributos:
Capacidad: 250 ml / 2 tazas de té
Material: cobre puro
Estado: desgaste normal
La imagen presentada debe tener el mismo color de fondo que el color de diseño.
Active Divi Builder y modifique la configuración de la página cuando se completen todos los detalles del producto, continúen y activen Divi Builder. Cambie la apariencia de la página a “ancho completo”.

Pase al Visual Builder continúe pasando al Visual Builder.


Elimine la sección de producto predeterminada porque creamos una página de producto personalizada, continuamos y eliminamos la sección Producto WOO predeterminado.

2. Recrear el diseño del bloque receptivo Agregar una nueva sección El primer paso para recrear el diseño es agregar una nueva sección. Agregue un fondo degradado en diferentes tamaños de pantalla.

Antecedentes: gradiente
Color 1: Gris claro # F2F6F5
Color 2: casi negro # 313131
Dirección:
Escritorio: 90%
Tableta + teléfono: 180%
Inicio + finalización:
Escritorio: 50%
Tableta: 40%
Teléfono: 30%
Dimensión Ajuste la configuración del tamaño de la sección. Poco: 100%

Ancho máximo: 100%
Espacio Retire el revestimiento predeterminado desde arriba e abajo.
Alineado arriba + abajo: 0VW

Finalmente visibilidad, ajuste los desbordamientos de la sección.
Vertical + desbordamiento horizontal: oculto

Agregue la estructura de la fila # 1 de la columna Después de configurar la sección, agregue la primera fila con una columna.
Dimensión En la pestaña de diseño, ajuste el tamaño para diferentes tamaños de pantalla.

Ancho:

Escritorio: 50%
Tableta + teléfono: 100%
Ancho máximo: 100%
Alineación de filas: a la izquierda
Finalmente visibilidad, coloque el derrame horizontal y vertical en visible.
Horizontal + flujo visible: visible

Agregue el contenido de Crumba Woo Bread Agregue el primer módulo, el módulo Woo Breadcrumb. Seleccione “este producto”.
Producto: este producto

Texto En la pestaña Diseño, estilice el texto de la siguiente manera.
Texto de fuente: Fenix

Color de texto: Brown # 594239
Tamano del texto:
Escritorio: 1VW
Tableta: 2VW
Teléfono: 3VW
Espaciado Agregue algunos valores de espaciado para diferentes tamaños de pantalla.
Margen superior: 3VW

Borde izquierdo:
Escritorio: 10 VW
Tableta + teléfono: 20VW
Agregue el contenido de la imagen Woo Agregar ahora es el momento de agregar la imagen del producto con un módulo de imagen WOO. En la pestaña de contenido, elija “este producto”.
Producto: este producto

La dimensión continúa ajustando el tamaño del módulo.
Ancho: 100%

Finalmente visibilidad, esconde el desbordamiento.
Horizontal + desbordamiento vertical: oculto

Agregue la fila # 2 La estructura de la columna vertebral agregue una segunda fila con dos columnas.
Dimensión primero, ajuste el tamaño.

El ancho de la canaleta: 1

Ancho:
Escritorio: 53%
Tableta + teléfono: 53%
Ancho máximo: 100%
Alineación: correcto
Espacio entonces, los valores del espacio. Superior Marja:
Escritorio: -47VW

Tableta + teléfono: 0VW
Borde izquierdo:
Tableta: -5VW
Teléfono: -8VW
Levante inferior:
Desktop + tableta: 4.1VW
Forro izquierdo:
Escritorio: 0VW
Tableta: 16 VW
Teléfono: 12VW
Junta derecha:
Escritorio: 0VW
Tableta: 0VW
CSS personalizado en la pestaña Avanzada, agregue algunos CSS personalizados.
Artículo principal CSS:
Pantalla: Flex;

Pantalla: Flex;
La visibilidad, en última instancia, establece los derrames en lo visible.
Horizontal + desbordamientos verticales: visible
Configuración Columna 1 Espacio Antes de agregar módulos, ajuste los valores de espaciado en la columna 1.

Junta izquierda: 4VW
Junta derecha: 0VW

Configuración Columna 2 Ajuste de espaciado y valores de espaciado de espacio 2.
Revestimiento superior:
Escritorio: 7VW

Tableta: 17 VW
Teléfono: 28 VW
Junta derecha:
Desktop + tableta: 15 VW
Agregue un módulo de texto a la columna 1 Agregar contenido ahora es el momento de agregar los módulos. Comience con un módulo de texto. Ingrese contenido descriptivo para el producto.
Texto luego estilice el texto.
FUENTE: Fenix


Color: # f2eed0

Tamaño:
Escritorio: 1.3VW
Tableta: 2.6VW
Teléfono: 3.8VW
Espacio de letras: 1 PX
Alineación: centro
Dimensión Ajuste el tamaño del módulo para diferentes tamaños de pantalla.
Ancho:
Escritorio: 50%

Tableta: 60%
Teléfono: 80%
El espacio también ajusta los valores de espaciado de la siguiente manera.
Reviniente superior + inferior: 1 VW
Forro izquierdo + derecha: 1VW

Borde agregue un borde al modo en consecuencia.
Estilos de borde: arriba + izquierda + derecha
El ancho de la frontera:

Arriba + izquierda + derecha: 2 px
Color del borde:
Arriba + izquierda + derecha: crema # f2eed0
Agregue el título de Woo a la columna 1 Agregar contenido ahora, agregue un módulo de título de Woo y elija “este producto” en la pestaña Contenido. Producto: este producto
Fondo para estilizar el módulo, agregue un fondo naranja oscuro.
Color de fondo

Color: cobre naranja # d66b00
Texto del título luego cambie la configuración del texto del encabezado.

Título del nivel Título: H1
FUENTE: Fenix
Color: crema # f2eed0

Tamaño:
Escritorio: 2.9VW
Tableta: 7.8VW
Teléfono: 13.9VW
Espacio de letras H1: 1 PX
Además del tamaño, ajuste el tamaño del módulo
Ancho: 100%
Espacio entonces, agregue algunos valores de llenado.
Revestimiento superior + inferior:

Escritorio: 2VW
Tableta: 3VW

Teléfono: 4VW
Forro izquierdo + derecho:
Escritorio: 2VW
Tableta: 3VW
Teléfono: 4VW
Finalmente borde, agregue un borde de la siguiente manera.
Estilos de borde: arriba + izquierda + derecha
El ancho de la frontera:
Arriba + izquierda + derecha: 2 px

Color del borde:
Arriba + izquierda + derecha: crema # f2eed0
Agregue el título de descripción de Woo a la columna 1 Agregar contenido bajo el título, agregue un módulo de descripción Woo. En la pestaña de contenido, elija “este producto”.
Producto: este producto
Tipo de descripción: Descripción
Texto luego estilice el texto.

Fuente: abre sans
Color: crema # f2eed0
Tamaño:

Escritorio: 08VW
Tableta: 2VW
Teléfono: 3VW
La dimensión también ajusta el tamaño.
Ancho: 100%
Espacio de la misma manera, ajuste la distancia.
Revestimiento superior + inferior:

Escritorio: 2VW
Tableta + teléfono: 3VW

Forro izquierdo + derecho:
Escritorio: 2VW
Tableta + teléfono: 3VW
Borde similar a otros módulos, agregue un borde.
Estilos de borde: los cuatro bordes
Ancho: 2 PX
Color: crema # f2eed0

Agregue información adicional de WOO a la columna 2 Agregar contenido ahora es el momento de agregar atributos personalizados con un módulo de información de WOO adicional. En la pestaña de contenido, elija “este producto”. Producus: este producto
Texto Cambie la configuración de texto de la siguiente manera.
Fuente: abre sans
Estilo: cursiva

Color: crema # f2eed0
Tamaño:

Escritorio: 0.6 VW
Tableta: 1.6VW
Teléfono: 2.2VW
El texto del atributo entonces, estilice el texto del atributo de acuerdo con la consecuencia:
FUENTE: Fenix
Color: crema # f2eed0
Tamaño:
Escritorio: 1.1VW

Tableta: 2VW
Teléfono: 3VW
Distancia: 1 PX
La dimensión también ajusta el tamaño.
Ancho: 100%
Borde y finalmente agregue un borde.
Estilos de borde: arriba + derecho + abajo
El ancho de la frontera:

Arriba + derecha + abajo: 2 px
Color del borde:

Arriba + derecha + abajo: crema # f2eed0
Agregue la fila # 3 La estructura de la columna Agregue la tercera fila, con dos columnas.
Dimensión Antes de agregar módulos, ajuste el tamaño de la fila para diferentes tamaños de pantalla.
Ancho:
Escritorio: 50%
Tableta: 87%

Teléfono: 93%

Alineación: correcto
El revestimiento también ajusta el revestimiento.
Revestimiento inferior: 12VW
Configuración de la columna 1 El espacio continúa ajustando el relleno desde la primera columna.
Forro izquierdo:
Escritorio: 5VW

Tableta + teléfono: 12VW
Agregue el precio de WOO a la columna 1 Agregar contenido ahora, agregue el precio del producto utilizando el módulo de precio WOO. En la pestaña de contenido, elija “este producto”.

Producto: este producto
El texto del precio entonces, estilice el texto en consecuencia.
FUENTE: Fenix
Color: crema # f2eed0

Tamaño:
Escritorio: 1.5VW

Tableta: 3.5VW
Teléfono: 5VW
La dimensión también ajusta el tamaño del módulo.
Ancho:
Escritorio: 39%
Tableta: 45%
Teléfono: 54%

Ajuste de espaciado y distancia. Auriculares superiores:
Escritorio: 1VW
Tableta: 2VW
Teléfono: 3V2
Levante inferior:

Escritorio: 1VW
Tableta + teléfono: 2VW
Forro izquierdo:
Escritorio: 1VW
Tableta + teléfono: 2VW
Junta derecha:
Tableta + teléfono: 2VW
El borde finalmente agregue el borde.
Estilos de borde: los cuatro lados
Ancho: 2 PX
Color: crema # f2eed0
Agregar Woo Agregar a la canasta en la columna 2 Agregar contenido El módulo final es un agrega Woo al carrito. En la pestaña de contenido, elija “este producto”. Estilos de estilo botón elegante de la siguiente manera.
Estilos personalizados: sí

Botón Tamaño de texto:
Escritorio: 1.3VW
Tableta: 3.5VW
Teléfono: 5VW

Color de texto: crema # f2eed0
Color de fondo: cobre naranja # d66b00
La guarnición de mantequilla y luego, agregue algunos valores de llenado al botón.
El revestimiento superior + inferior: 0.5 VW
Lenaje izquierdo + derecha: 1.5VW
Dimensión por último, pero no menos importante, ajusta el tamaño del módulo y ¡ya está!
Ancho: 100%
Vista previa para echar un vistazo al resultado en diferentes tamaños de pantalla. Escritorio

Móvil
¡Es una lámina! Si su contenido es más largo o más corto que el de este tutorial podría interrumpir el espacio de bloque. Todo lo que tiene que hacer es ajustar la configuración de la columna para que se ajusten mejor en la composición. Esperamos que este tutorial lo inspire a crear modelos de división más sorprendentes. Cuéntanos en comentarios si tienes alguna pregunta.