Cómo crear una página de producto limpia y audaz con los módulos WooCommerce de Divi (¡Descarga gratuita!)
Publicado: 2019-09-16Las páginas de productos en negrita tienen una forma especial de llamar la atención de sus visitantes. Y con la nueva actualización de los módulos WooCommerce de Divi, puede convertir rápidamente la página de su antiguo producto en una limpia y audaz que tanto a usted como a sus visitantes les encantarán. En el tutorial de hoy, recrearemos una página de producto en negrita desde cero y también podrá descargar el archivo JSON de forma gratuita. Este tutorial muestra cuán versátiles son los nuevos módulos WooCommerce de Divi y cómo puede crear un sitio web de comercio electrónico altamente profesional en poco tiempo.
¡Hagámoslo!
Avance
Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.
Descargue el diseño de la página del producto Clean & Bold GRATIS
Para poner sus manos en el diseño de página del producto Hero Clean & Bold gratuito, primero deberá descargarlo 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!
Suscríbete a nuestro canal de Youtube
1. Agregar / Abrir producto WooCommerce
Detalles de producto
Abra un producto existente o cree uno nuevo. Si desea lograr exactamente el mismo resultado que se muestra en la vista previa de esta publicación, asegúrese de agregar los siguientes detalles del producto:
- Título
- Breve descripción
- descripción larga
- Categoría
- Foto principal
- Precio
Habilite Divi Builder y modifique la configuración de la página del producto
Una vez que haya completado los detalles del producto, habilite Divi y cambie el diseño de la página a 'Ancho completo'.
Cambiar a Visual Builder
Continúe cambiando al Visual Builder.
Eliminar la sección del producto original en la página
Allí, verá la información de la página del producto original reunida en una sola sección. Recrearemos nuestro diseño limpio y atrevido desde cero, así que siéntete libre de eliminar esta sección.
2. Cree una página de producto limpia y audaz con Visual Builder de Divi
Agregar sección regular n. ° 1
Espaciado
¡Es hora de empezar a crear nuestra atrevida página de productos! Agregue una nueva sección regular y cambie la configuración de espaciado de la sección.
- Relleno superior: 200 px
- Acolchado inferior: 0px
Desbordes
Para asegurarse de que nada exceda el contenedor de la sección y que no se realice ningún desplazamiento horizontal en la página, oculte los desbordamientos de la sección en la configuración de visibilidad.
- Desbordamiento horizontal: oculto
- Desbordamiento vertical: oculto
Añadir fila
Estructura de la columna
Continúe agregando 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 la fila y cambie el color de fondo de la fila.
- Color de fondo: # f4f4f4
Dimensionamiento
Modifique también el ancho máximo de la fila.
- Ancho máximo: 1000px
Espaciado
Luego, vaya a la configuración de espaciado y agregue un poco de relleno superior e inferior personalizado.
- Relleno superior: 150 px
- Acolchado inferior: 150px
Frontera
También estamos agregando un radio de borde de '50px' a las esquinas superiores izquierda y derecha de la fila.
Desbordes
Complete la configuración de la fila haciendo visibles los desbordamientos.
- Desbordamiento horizontal: visible
- Desbordamiento vertical: visible
Agregue el módulo Woo Breadcrumb a la columna
Contenido dinámico
¡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 de diseño del módulo y cambie la configuración del texto en consecuencia:
- Fuente de texto: Crimson Text
- Peso de la fuente del texto: negrita
- Estilo de fuente de texto: mayúsculas
- Tamaño del texto: 20px
- Espaciado de letras de texto: 4px
Configuración del texto del enlace
También realiza algunos cambios en la configuración del texto del enlace.
- Peso de la fuente del enlace: ligero
- Color del texto del enlace: # e02b20
Espaciado
Luego, vaya 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: 50px (escritorio y tableta), 20px (teléfono)
Agregar módulo de título Woo a la columna
Contenido dinámico
El siguiente y último 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 la configuración del texto del título del módulo de la siguiente manera:
- Fuente del título: Montserrat
- Peso de la fuente del título: Pesado
- Alineación del texto del título: centro
- Color del texto del título: # 000000
- Tamaño del texto del título: 250 px (escritorio), 150 px (tableta), 80 px (teléfono)
- Altura de la línea de título: 0.9em
Espaciado
Aumente el ancho del módulo agregando algunos márgenes negativos izquierdo y derecho.
- Margen izquierdo: -150px (escritorio), -100px (tableta), -50px (teléfono)
- Margen derecho: -150px (escritorio), -100px (tableta), -50px (teléfono)
Agregar sección regular n. ° 2
Espaciado
Agrega otra sección justo debajo de la anterior. Modifique los valores de relleno de la sección de la siguiente manera:
- Relleno superior: 0px
- Acolchado inferior: 200px
Añadir fila
Estructura de la columna
Continúe agregando 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 la fila y cambie el color de fondo de la fila.
- Color de fondo: # f4f4f4
Dimensionamiento
A continuación, aumente el ancho máximo de la fila.
- Ancho máximo: 1000px
Espaciado
Agregue un poco de acolchado inferior personalizado también.
- Acolchado inferior: 150px
Frontera
Luego, vaya a la configuración del borde y aplique el radio del borde '50px' en las esquinas inferiores izquierda y derecha.
Desbordes
Complete la configuración de la fila asegurándose de que los desbordamientos sean visibles.
- Desbordamiento horizontal: visible
- Desbordamiento vertical: visible
Configuración de la columna 1
Imagen de fondo dinámica
Una vez que haya completado la configuración general de la fila, abra la configuración de la columna 1 y agregue la imagen destacada del producto al fondo utilizando contenido dinámico.
- Imagen de fondo: Imagen destacada
Espaciado
Agregue un poco de relleno en la parte inferior de la columna siguiente. Esto permitirá que se vea la imagen de fondo.
- Acolchado inferior: 370 px (escritorio), 690 px (tableta), 380 px (teléfono)
Agregar módulo de texto a la columna 1
Agregar contenido
¡Es hora de comenzar a agregar módulos! En la columna 1, el único módulo que necesitamos es un módulo de texto. Agregue algún contenido de su elección.
Color de fondo
A continuación, cambie el color de fondo del módulo.
- Color de fondo: # E02B20
Configuración de texto
Vaya a la pestaña de diseño y modifique la configuración del texto.
- Fuente de texto: Montserrat
- Peso de la fuente del texto: Ultra Bold
- Alineación de texto: centro
- Color del texto: #FFFFFF
- Tamaño del texto: 30px
- Altura de la línea de texto: 1em
Dimensionamiento
A continuación, reduzca el tamaño del módulo en la configuración de tamaño.
- Ancho: 280px
Espaciado
Y convierta el módulo en un cuadrado agregando algunos valores de relleno personalizados. También estamos creando una superposición superior e izquierda utilizando un margen negativo.
- Margen superior: -120px
- Margen izquierdo: -120px
- Acolchado superior: 110px
- Acolchado inferior: 110px
- Relleno izquierdo: 50px
- Relleno derecho: 50px
Frontera
Para convertir el cuadrado en un círculo, agregaremos un radio de borde de '500px' a cada una de las esquinas del módulo.
Transformar Girar
También rotaremos el módulo.
- Izquierda: 330 grados
Agregar módulo de texto a la columna 2
Agregar contenido H2
¡A la segunda columna! Allí, el primer módulo que necesitamos es un módulo de texto normal. Ingrese algún contenido H2 de su elección.
Configuración de texto H2
Vaya a la pestaña de diseño y cambie la configuración del texto H2 de la siguiente manera:
- Fuente del encabezado 2: Montserrat
- Tamaño del texto del encabezado 2: 35px
Espaciado
A continuación, agregue algunos valores de margen personalizados.
- Margen superior: -70px (escritorio), 100px (tableta y teléfono)
- Margen izquierdo: 100 px (escritorio), 20 px (tableta y teléfono)
- Margen derecho: 20px (tableta y teléfono)
Agregar módulo de descripción de Woo a la columna 2
Contenido dinámico
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: Breve descripción
Configuración de texto
Cambie la configuración de texto del módulo en consecuencia:
- Fuente de texto: Crimson Text
- Tamaño del texto: 19px
- Altura de la línea de texto: 1.8em
- Alineación del texto: justificar
Espaciado
A continuación, modifique los valores de espaciado del módulo.
- Margen inferior: 50 px
- Margen izquierdo: 100 px (escritorio), 20 px (tableta y teléfono)
- Margen derecho: -100px (escritorio), 20px (tableta y teléfono)
Agregar módulo de precio de Woo a la columna 2
Contenido dinámico
Pasemos al siguiente módulo, que es el módulo Woo Price.
- Producto: este producto
Configuración de texto de precio
Cambie la configuración del texto del precio de la siguiente manera:
- Fuente de precio: Montserrat
- Peso de la fuente del precio: Pesado
- Precio Color del texto: # 000000
- Precio Tamaño del texto: 50px
Espaciado
A continuación, cambie la configuración de espaciado.
- Margen inferior: 50 px
- Margen izquierdo: 100 px (escritorio), 20 px (tableta y teléfono)
- Margen derecho: 20px (tableta y teléfono)
Agregue Woo Add to Cart Module a la columna 2
Contenido dinámico
El siguiente y último módulo que necesitamos para completar este diseño es el módulo Woo Add To Cart.
- Producto: este producto
Configuración de texto
Cambie la fuente del texto en la configuración del texto.
- Fuente de texto: Montserrat
Configuración de campos
A continuación, modifique la configuración de los campos.
- Color de fondo del campo: #ffffff
- Color del texto de los campos: # 000000
- Acolchado superior: 66px
- Acolchado inferior: 66px
- Fuente Fields: Montserrat
- Peso de la fuente de los campos: Pesado
- Todas las esquinas: 5px
- Ancho del borde de los campos inferiores: 3px
- Color del borde de los campos: # e02b20
Configuración de botones
Continúe diseñando el botón.
- Usar estilos personalizados para el botón: Sí
- Color del texto del botón: #ffffff
- Color de fondo del botón: # E02B20
- Ancho del borde del botón: 0px
- Radio del borde del botón: 5px
- Fuente del botón: Montserrat
- Peso de la fuente del botón: Ultra Bold
- Estilo de fuente del botón: mayúsculas
- Relleno superior: 50px
- Acolchado inferior: 50px
- Relleno izquierdo: 100 px (escritorio), 50 px (tableta), 20 px (teléfono)
- Relleno derecho: 100 px (escritorio), 50 px (tableta), 20 px (teléfono)
- Fuerza de desenfoque de sombra de caja: 80px
- Color de sombra: rgba (0,0,0,0.3)
Espaciado
Complete el diseño del módulo agregando algunos valores de margen izquierdo y derecho en tamaños de pantalla más pequeños y ¡listo!
- Margen izquierdo: 20px (tableta y teléfono)
- Margen derecho: 20px (tableta y teléfono)
Avance
Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado en diferentes tamaños de pantalla.
Pensamientos finales
En esta publicación, le mostramos cómo crear una página de producto impresionante y audaz con una apariencia limpia utilizando los nuevos módulos WooCommerce de Divi. Las páginas de productos en negrita tienen una forma única de poner su producto en el centro de atención. ¡También pudo 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 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.