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


Las 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 su página de producto anterior en una limpia y audaz que tanto a usted como a sus visitantes les encantará. En el tutorial de hoy, recrearemos una página de producto en negrita desde cero y también podrás descargar el archivo JSON de forma gratuita. Este tutorial muestra cuán versátiles son los nuevos módulos de WooCommerce de Divi y cómo puede crear un sitio web de comercio electrónico altamente profesional en muy poco tiempo.

¡Hagámoslo!

Avance

Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.

página de producto en negrita

Descargue el diseño de la página del producto The Clean & Bold GRATIS

Para poner sus manos en el diseño de página del producto hero clean & bold gratis, 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 siguiente formulario. Como nuevo suscriptor, ¡recibirás aún más bondad Divi y un paquete de diseño Divi 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 "volverá a suscribir" ni recibirá correos electrónicos adicionales.

(incrustar) https://www.youtube.com/watch?v=1yCJzqdxBKI (/ incrustar)

Suscríbase a nuestro canal de Youtube

1. Añadir / 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

página de producto en negrita

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

página de producto en negrita

página de producto en negrita

Cambiar a Visual Builder

Continúe cambiando al Visual Builder.

página de producto en negrita

Eliminar la sección del producto original en la página

Allí, verá la información de la página del producto original en una sola sección. Recrearemos nuestro diseño limpio y audaz desde cero, así que siéntase libre de eliminar esta sección.

página de producto en negrita

2. Cree una página de producto limpia y audaz usando el Visual Builder de Divi

Agregar sección regular # 1

Espaciado

¡Es hora de comenzar a crear nuestra página de productos audaces! Agregue una nueva sección regular y cambie la configuración de espacio de la sección.

  • Acolchado superior: 200 px
  • Relleno inferior: 0px

página de producto en negrita

Desbordamientos

Para asegurarse de que nada excede el contenedor de la sección y que no se realiza 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

página de producto en negrita

Añadir fila

Estructura de columna

Continúe agregando una nueva fila utilizando la siguiente estructura de columnas:

página de producto en negrita

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

página de producto en negrita

Dimensionamiento

Modifique también el ancho máximo de la fila.

  • Ancho Máx .: 1000px

página de producto en negrita

Espaciado

Luego, vaya a la configuración de espaciado y agregue algunos rellenos superiores e inferiores personalizados.

  • Acolchado superior: 150 px
  • Relleno inferior: 150px

página de producto en negrita

Frontera

También estamos agregando un radio de borde de "50 px" a las esquinas superiores izquierda y derecha de la fila.

página de producto en negrita

Desbordamientos

Complete la configuración de la fila haciendo visibles los desbordamientos.

  • Desbordamiento horizontal: visible
  • Desbordamiento vertical: visible

página de producto en negrita

Añadir Woo Breadcrumb Module a la columna

Contenido dinámico

¡Es hora de comenzar a agregar módulos! El primer módulo que necesitamos es el Woo Breadcrumb Module.

  • Producto: Este producto

página de producto en negrita

Configuraciones de texto

Pase a la pestaña de diseño del módulo y cambie la configuración de texto en consecuencia:

  • Fuente de texto: texto carmesí
  • Peso de fuente de texto: negrita
  • Estilo de fuente de texto: mayúscula
  • Tamaño de texto: 20px
  • Espacio entre letras de texto: 4px

página de producto en negrita

Configuración de texto de enlace

También realiza algunos cambios en la configuración del texto del enlace.

  • Link Font Weight: Light
  • Color del texto del enlace: # e02b20

página de producto en negrita

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: 50 px (escritorio y tableta), 20 px (teléfono)

página de producto en negrita

Añadir Woo Title Module a la columna

Contenido dinámico

El siguiente y último módulo que necesitamos en esta columna es el Módulo de título de Woo.

  • Producto: Este producto

página de producto en negrita

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

página de producto en negrita

Espaciado

Aumente el ancho del módulo agregando un margen negativo izquierdo y derecho.

  • Margen izquierdo: -150 px (escritorio), -100 px (tableta), -50 px (teléfono)
  • Margen derecho: -150 px (escritorio), -100 px (tableta), -50 px (teléfono)

página de producto en negrita

Agregar sección regular # 2

Espaciado

Agregue 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: 200 px

página de producto en negrita

Añadir fila

Estructura de columna

Continúe agregando una nueva fila utilizando la siguiente estructura de columnas:

página de producto en negrita

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

página de producto en negrita

Dimensionamiento

Aumente el ancho máximo de la fila a continuación.

  • Ancho Máx .: 1000px

página de producto en negrita

Espaciado

Agregue también un relleno inferior personalizado.

  • Relleno inferior: 150px

página de producto en negrita

Frontera

Luego, vaya a la configuración del borde y aplique el radio del borde '50px' a las esquinas inferiores izquierda y derecha.

página de producto en negrita

Desbordamientos

Complete la configuración de la fila asegurándose de que los desbordamientos sean visibles.

  • Desbordamiento horizontal: visible
  • Desbordamiento vertical: visible

página de producto en negrita

Configuración de 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

página de producto en negrita

Espaciado

Agregue un poco de relleno inferior a la columna siguiente. Esto permitirá que se muestre la imagen de fondo.

  • Acolchado inferior: 370 px (escritorio), 690 px (tableta), 380 px (teléfono)

página de producto en negrita

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.

página de producto en negrita

Color de fondo

A continuación, cambie el color de fondo del módulo.

  • Color de fondo: # E02B20

página de producto en negrita

Configuraciones de texto

Pase a la pestaña de diseño y modifique la configuración del texto.

  • Fuente de texto: Montserrat
  • Peso de fuente de texto: Ultra negrita
  • Alineación de texto: centro
  • Color del texto: #FFFFFF
  • Tamaño de texto: 30px
  • Altura de la línea de texto: 1em

página de producto en negrita

Dimensionamiento

Reduzca el tamaño del módulo en la siguiente configuración de tamaño.

  • Ancho: 280 px

página de producto en negrita

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 con margen negativo.

  • Margen superior: -120 px
  • Margen izquierdo: -120px
  • Relleno superior: 110px
  • Relleno inferior: 110px
  • Relleno izquierdo: 50px
  • Relleno derecho: 50px

página de producto en negrita

Frontera

Para convertir el cuadrado en un círculo, agregaremos un radio de borde de "500 px" a cada una de las esquinas del módulo.

página de producto en negrita

Transformar Rotar

También rotaremos el módulo.

  • Izquierda: 330 grados

página de producto en negrita

Agregar módulo de texto a la columna 2

Añadir 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.

página de producto en negrita

Configuraciones de texto H2

Pase a la pestaña de diseño y cambie la configuración del texto H2 de la siguiente manera:

  • Título 2 Fuente: Montserrat
  • Encabezado 2 Tamaño del texto: 35px

página de producto en negrita

Espaciado

Agregue algunos valores de margen personalizados a continuación.

  • 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)

página de producto en negrita

Agregue el 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 Woo.

  • Producto: Este producto
  • Tipo de descripción: breve descripción

página de producto en negrita

Configuraciones de texto

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

  • Fuente de texto: texto carmesí
  • Tamaño del texto: 19 px
  • Altura de la línea de texto: 1.8em
  • Alineación de texto: justificar

página de producto en negrita

Espaciado

Modifique los valores de espaciado del 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)

página de producto en negrita

Agregue el módulo de precios Woo a la columna 2

Contenido dinámico

En el siguiente módulo, que es el módulo de precios Woo.

  • Producto: Este producto

página de producto en negrita

Configuración de texto de precio

Cambie la configuración del texto del precio de la siguiente manera:

  • Fuente del precio: Montserrat
  • Peso de fuente de precio: pesado
  • Color del texto del precio: # 000000
  • Tamaño del texto del precio: 50 px

página de producto en negrita

Espaciado

Cambie la configuración de espaciado a continuación.

  • Margen inferior: 50 px
  • Margen izquierdo: 100 px (escritorio), 20 px (tableta y teléfono)
  • Margen derecho: 20 px (tableta y teléfono)

página de producto en negrita

Añadir Woo Añadir al carrito Módulo 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

página de producto en negrita

Configuraciones de texto

Cambie la fuente del texto en la configuración de texto.

  • Fuente de texto: Montserrat

página de producto en negrita

Configuraciones de campos

Modifique la configuración de los campos a continuación.

  • Color de fondo del campo: #ffffff
  • Color del texto de los campos: # 000000
  • Acolchado superior: 66 px
  • Acolchado inferior: 66 px
  • Campos Fuente: Montserrat
  • Campos Fuente Peso: Pesado

página de producto en negrita

  • Todas las esquinas: 5px
  • Ancho del borde de los campos inferiores: 3px
  • Color del borde de los campos: # e02b20

página de producto en negrita

Configuraciones de botones

Continúa peinando 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

página de producto en negrita

  • Radio del borde del botón: 5px
  • Fuente del botón: Montserrat
  • Peso de fuente del botón: Ultra negrita
  • Estilo de fuente del botón: mayúscula

página de producto en negrita

  • Relleno superior: 50px
  • Relleno 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: 80 px
  • Color de sombra: rgba (0,0,0,0.3)

página de producto en negrita

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: 20 px (tableta y teléfono)
  • Margen derecho: 20 px (tableta y teléfono)

página de producto en negrita

Avance

Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado en diferentes tamaños de pantalla.

página de producto en negrita

Pensamientos finales

En esta publicación, le mostramos cómo crear una página de producto llamativa y llamativa con un aspecto limpio utilizando los nuevos módulos de WooCommerce de Divi. Las páginas de productos en negrita tienen una forma única de destacar su producto. ¡También pudiste 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 regalos Divi, asegúrese de Suscríbete a nuestro boletín de correo electrónico y Canal de Youtube así que siempre serás una de las primeras personas en conocer y obtener beneficios de este contenido gratuito.