Cómo crear una página de producto limpia y audaz con los módulos de Div WooCommerce (¡descarga gratuita!)

Las páginas con productos en negrita tienen una forma especial de atraer la atención de los visitantes. Y con la nueva actualización de los módulos de Divi de WooCommerce, puede convertir rápidamente la página de producto antigua en una limpieza y audaz, que a usted y a sus visitantes les encantará. En el tutorial de hoy, recrearemos una página de productos en negrita desde cero y podrá descargar el archivo JSON de forma gratuita. Este tutorial muestra cuán versátiles son los nuevos módulos de Div WooCommerce y cómo puede crear un sitio de comercio electrónico extremadamente profesional en el menor tiempo. ¡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.

Descargue la página del producto limpio y en negrita de forma gratuita para poner su mano en el aspecto gratuito de la página de héroe limpio y audaz, primero tendrá que 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. Se ha suscrito correctamente. ¡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 el producto WoCommerce que abra un producto existente o cree uno nuevo. Si desea obtener exactamente el mismo resultado que se muestra en la vista previa de esta publicación, asegúrese de agregar los siguientes detalles:
Título
Breve descripción
descripción larga
Categoría
Imagen presentada
Precio
Active Divi Builder y modifique la configuración de la página del producto después de haber completado los detalles del producto, active la división y cambie la página.

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


Elimine la sección del producto original en la página allí, verá la información original sobre la página del producto reunida en una sola sección. Recrearemos el diseño limpio y audaz de cero, así que no dude en eliminar esta sección.

2. Cree una página de productos limpios y en negrita utilizando Visual Builder Al Div Add Sección 1 El espacio es hora de comenzar a crear nuestra página de productos en negrita. Agregue una nueva sección habitual y cambie el espacio de sección

Finamiento inferior: 0 PX
Operaciones Para asegurarse de que nada vaya más allá del contenedor de sección y que no haya desarrollo horizontal en la página, oculte la salida de la sección en la configuración de visibilidad.
Desbordamiento horizontal: oculto

Desbordamiento verticalmente: oculto
Agregue la fila La estructura de la columna Continúe agregando una nueva fila utilizando la siguiente estructura de columnas:
El color de fondo sin agregar módulos, abra la configuración de la fila y cambie el color de fondo de la fila.

Color de fondo: # F4F4F4

Dimensión Modifique el ancho de fila máximo.
Ancho máximo: 1000 PX

Extienda luego, acceda a la configuración de espaciado y agregue algunos rellenos personalizados en la parte superior e inferior.
Revestimiento superior: 150 PX

Revestimiento inferior: 150 px
Border agregue el radio de borde “50 PX” y a las esquinas superior izquierda y derecha.
Complete la configuración de la fila haciendo que los desbordamientos sean visibles.

Desbordamiento horizontal: visible

Desbordamiento vertical: visible
¡Agregue el módulo Woo Breadcrumb a la columna dinámica es hora de comenzar a agregar módulos! El primer módulo que necesitamos es el módulo Woo Breadcrumb.
Producto: este producto

Configuración de texto Vaya a la pestaña Diseño del módulo y cambie la configuración de texto en consecuencia:
Texto de fuente: texto carmesí

El peso de la fuente de texto: en negrita
Text -Text estilo: mayúscula
Tamaño de texto: 20 PX
Texto de la carta de espacio: 4 PX
Configuración del enlace de texto también cambia la configuración del texto del enlace. Peso de la fuente de enlace: fácil
Enlace de color de texto: # E02B20

Extienda luego, acceda a la configuración de espaciado y agregue algunos valores de margen personalizados en diferentes tamaños de pantalla.
Margen inferior: 80 PX
Margen izquierdo: 50 PX (escritorio y tableta), 20 PX (teléfono)

Margen derecho: 50 PX (escritorio y tableta), 20 PX (teléfono)
Agregue el módulo de título WOO a la columna dinámica El siguiente módulo que necesitamos en esta columna es el módulo de título WOO.
Producto: este producto
Configuración del texto del título Cambie el texto del módulo Título de la siguiente manera:

Título de la fuente: Montserrat
Fuente de peso del título: duro

Alineación del texto del título: Centro
Color de texto del título: # 000000
Título Tamaño del texto: 250 PX (escritorio), 150 PX (tableta), 80 PX (teléfono)
Altura de la línea de título: 0.9em
El espacio aumenta el ancho del módulo agregando bordes negativos a la izquierda y a la derecha.
Margen izquierdo: -150 PX (escritorio), -100 PX (tableta), -50 PX (teléfono)
Margen derecho: -150 PX (escritorio), -100 PX (tableta), -50 PX (teléfono)

Agregue la sección regular no. 2 Espacio Agregue otra sección justo debajo de la anterior. Cambie los valores de llenado de la sección de la siguiente manera:
SUS Lingo: 0 PX
Finamiento inferior: 200 PX

Agregue la fila La estructura de la columna Continúe agregando una nueva fila utilizando la siguiente estructura de columnas:
El color de fondo sin agregar módulos, abra la configuración de la fila y cambie el color de fondo de la fila.
Color de fondo: # F4F4F4

La dimensión aumenta el ancho de fila máximo.

Ancho máximo: 1000 PX
Espacio agregue un relleno de fondo personalizado.


Revestimiento inferior: 150 px
Border, entonces, acceda a la configuración del borde y aplique el radio de borde “50px” en las esquinas de derecha izquierda y derecha. Vuelve a llenar la configuración asegurándose de que las descargas sean visibles.

Desbordamiento horizontal: visible
Desbordamiento vertical: visible

Configuración de fondo dinámico 1 Se establece después de completar la configuración de la fila general, abra la configuración de la columna 1 y agregue la imagen presentada en el fondo usando el contenido dinámico.

Imagen de fondo: imagen presentada
Espacio Agregue un poco de relleno a continuación a la siguiente columna. Esto permitirá que se muestre la imagen de fondo.
Bajo forro: 370 PX (escritorio), 690 PX (tableta), 380 PX (teléfono)

Agregue un módulo de texto a la columna 1 Agregar contenido es hora de comenzar a agregar módulos. En la columna 1, la única forma en que necesitamos es un módulo de texto. Agregue un contenido a su elección.
El color de fondo cambia el color de fondo del módulo.

Color de fondo: # E02B20
Configuración de texto Vaya a la pestaña Diseño y cambie la configuración de texto.

Texto de fuente: Montserrat

El peso de la fuente de texto: Ultra Bold
Alineación de texto: Centro

Color de texto: #ffffff
Tamaño de texto: 30 PX
La altura de la línea de texto: 1em
La dimensión reduce el tamaño del módulo en la configuración de siguiente tamaño.
Ancho: 280 PX
Espacio y convierte el módulo en un cuadrado agregando algunos valores de llenado personalizados. También creamos una superposición superior y izquierda utilizando el margen negativo.
Margen superior: -120 PX

Margen izquierdo: -120px
Revestimiento superior: 110 PX

Revestimiento inferior: 110 PX
ENNIZACIÓN IZQUIERDA: 50 PX
Revestimiento derecho: 50 PX
Borde para transformar el cuadrado en un círculo, agregaremos un radio de borde “500 px” a cada una de las esquinas del módulo. Rover de transformación giraremos y el módulo.
Izquierda: 330 grados
Agregue un módulo de texto en la columna 2 Agregue el contenido H2 ¡Vamos a la segunda columna! Allí, el primer módulo que necesitamos es un módulo de texto normal. Ingrese un contenido H2 de su elección.
Configuración de texto H2 Cambiar a la pestaña Diseño y cambiar la configuración de texto H2 de la siguiente manera:

2 Sección de fuentes: Montserrat

Rúbrica 2 Dimensión de texto: 35 PX
Espaciado Agregue algunos valores de margen personalizados.

Margen superior: -70 PX (escritorio), 100 PX (tableta y teléfono)

Margen izquierdo: 100 PX (escritorio), 20 px (tableta y teléfono)
Margen derecho: 20 PX (tableta y teléfono)
Agregue el módulo de descripción de WOO al contenido dinámico de la columna 2 El segundo módulo que necesitamos en la columna 2 es el módulo de descripción de WOO.

Producto: este producto
Tipo de descripción: descripción corta
Configuración de texto Cambie la configuración de texto del módulo en consecuencia:
Texto de fuente: texto carmesí

Tamaño del texto: 19 PX
La altura de la línea de texto: 1.8em
Alineación de texto: justificar

Extienda el cambio de los valores de espaciar el módulo a continuación.
Margen inferior: 50 PX
Margen izquierdo: 100 PX (escritorio), 20 px (tableta y teléfono)
Margen derecho: -100 PX (escritorio), 20 px (tableta y teléfono)
Agregue el módulo de precio WOO al contenido dinámico de la columna 2 al siguiente módulo, que es el módulo de precio WOO.

Producto: este producto
Configuración de texto de precio Modifique la configuración de texto de precio de la siguiente manera:
Precio de fuente: Montserrat
Precio de peso de fuente: duro

Color de texto de precio: # 000000
Texto del tamaño del precio: 50 PX

Espacio y luego cambiar la configuración de espaciado. Matrimonio inferior: 50 PX
Margen izquierdo: 100 PX (escritorio), 20 px (tableta y teléfono)
Margen derecho: 20 PX (tableta y teléfono)
Agregue Woo Agregar a los módulos de carrito en la columna 2 Contenido dinámico y el último módulo que necesitamos completar este diseño es el módulo Woo Agregar al CART.
Producto: este producto

Configuración de texto Cambie la fuente de texto de la configuración del texto.
Texto de fuente: Montserrat
Configuración de campo luego cambie la configuración del campo.
El color del fondo del campo: #ffffff

Color de texto de campo: # 000000
Revestimiento superior: 66 PX

Finamiento inferior: 66 PX
Fuente de campos: Montserrat

El peso de la fuente de campos: duro
Todas las esquinas: 5 PX
El ancho del borde de los campos inferiores: 3 PX
El color del borde de campo: # E02B20
Configuración Continúe extinguiendo el botón.
Use estilos personalizados para el botón: Sí
El color del texto del botón: #ffffff

El color de fondo del botón: # E02B20
El ancho del nudo del botón: 0 PX
Botón Raza: 5 PX

Botón de fuente: Montserrat
Peso de fuente de fuente: Ultra Bold
El estilo de la fuente del botón: mayúscula
Revestimiento superior: 50 px
Revestimiento inferior: 50 PX

Revelaje izquierdo: 100 PX (escritorio), 50 px (tableta), 20 px (teléfono)
Llenado derecho: 100 PX (escritorio), 50 px (tableta), 20 px (teléfono)
Poder de poco claro de la sombra de la caja: 80 px
Color de la sombra: RGBA (0.0,0,0,3)

Espacio Complete el diseño del módulo agregando algunos valores de bordes izquierdo y derecho en tamaños de pantalla más pequeños y ¡ya está!
Margen izquierdo: 20 PX (tableta y teléfono)
Margen derecho: 20 PX (tableta y teléfono)
Vista previa Ahora que hemos dado todos los pasos, para echar un vistazo final al resultado en diferentes tamaños de pantalla. Finales En esta publicación, le mostré cómo crear una página increíble del producto en negrita, con una apariencia limpia y sentirlo Usando los nuevos módulos de WooCommerce de Div.Las páginas con productos en negrita tienen una forma única de poner su producto en el centro de atención.¡Podrías descargar el archivo JSON gratis!Si tiene alguna pregunta o sugerencia, ¡no dude en dejar un comentario en la sección de comentarios a continuación!Si está ansioso por obtener más información sobre Divi y obtener más regalos de la Divicidad, asegúrese de suscribirse a nuestro boletín de 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.