Las páginas de productos en negrita tienen una forma especial de llamar la atención de sus visitantes. Y con Divi y su nueva actualización de Módulos de WooCommerce, puede convertir rápidamente su antigua página de productos 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á 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 muy poco tiempo.
¡Hagámoslo!
Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.
Descargue el diseño de página del producto Clean & Bold GRATIS
Para poner sus manos en el diseño de la página del producto gratuito hero clean & bold, primero deberá descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestro boletín utilizando 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 será «resuscrito» ni recibirá correos electrónicos adicionales.
Descárgalo gratis
Únase al boletín informativo 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 muchos otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguenos y serás un maestro 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.
You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!
Suscríbete a nuestro canal de Youtube
1. Agregar/abrir producto de 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 a 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 audaz desde cero, así que siéntete libre de eliminar esta sección.
2. Cree una página de producto limpia y audaz usando Visual Builder de Divi
Agregar Sección Regular #1
Espaciado
¡Es hora de comenzar a crear nuestra llamativa página de productos! Agregue una nueva sección regular y cambie la configuración de espaciado de la sección.
- Relleno superior: 200px
- Relleno inferior: 0px
desbordamientos
Para asegurarse de que nada sobrepase el contenedor de la sección y que no se produzca un 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 relleno superior e inferior personalizado.
- Relleno superior: 150px
- Relleno inferior: 150px
Borde
También estamos agregando un radio de borde de ’50 px’ a las esquinas superiores izquierda y derecha de la fila.
desbordamientos
Complete la configuración de la fila haciendo visibles los desbordamientos.
- Desbordamiento horizontal: visible
- Desbordamiento vertical: visible
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
Pase a la pestaña de diseño del módulo y cambie la configuración del texto en consecuencia:
- Fuente de texto: Texto carmesí
- Peso de fuente de texto: Negrita
- Estilo de fuente de texto: Mayúsculas
- Tamaño del texto: 20px
- Espaciado entre letras de texto: 4px
Ajustes de texto de 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: 80px
- Margen izquierdo: 50 px (computadora de escritorio y tableta), 20 px (teléfono)
- Margen derecho: 50 px (computadora de escritorio y tableta), 20 px (teléfono)
Agregue el módulo de título de Woo a la columna
Contenido dinámico
El siguiente y último módulo que necesitamos en esta columna es el módulo de títulos de 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,9 em
Espaciado
Aumente el ancho del módulo agregando un margen negativo 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 #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
- Relleno 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
Aumente el ancho máximo de la fila a continuación.
- Ancho máximo: 1000px
Espaciado
Agregue un poco de relleno inferior personalizado también.
- Relleno inferior: 150px
Borde
Luego, vaya a la configuración del borde y aplique un radio de borde de ’50px’ a las esquinas inferiores izquierda y derecha.
desbordamientos
Complete la configuración de la fila asegurándose de que los desbordamientos estén 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 usando contenido dinámico .
- Imagen de fondo: Imagen destacada
Espaciado
Agregue un poco de relleno inferior a la columna siguiente. Esto permitirá que se vea la imagen de fondo.
- Relleno 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
Cambia el color de fondo del módulo a continuación.
- Color de fondo: #E02B20
Configuración de texto
Pase a la pestaña de diseño y modifique la configuración del texto.
- Fuente del texto: Montserrat
- Peso de fuente de texto: ultra negrita
- Alineación de texto: Centro
- Color del texto: #FFFFFF
- Tamaño del texto: 30px
- Altura de línea de texto: 1em
Dimensionamiento
Reduzca el tamaño del módulo en la siguiente 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 usando un margen negativo.
- Margen superior: -120px
- Margen izquierdo: -120px
- Relleno superior: 110px
- Relleno inferior: 110px
- Relleno izquierdo: 50px
- Relleno derecho: 50px
Borde
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.
Transformar Rotar
También rotaremos el módulo.
- Izquierda: 330 grados
Agregar módulo de texto a la columna 2
Agregar contenido H2
¡A por la segunda columna! Allí, el primer módulo que necesitamos es un módulo de texto normal. Ingrese algún contenido de H2 de su elección.
Configuración de texto H2
Pase a la pestaña de diseño y cambie la configuración de texto H2 de la siguiente manera:
- Título 2 Fuente: Montserrat
- Encabezado 2 Tamaño del texto: 35px
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: 20px (tableta y teléfono)
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 de Woo.
- Producto: Este Producto
- Descripción Tipo: Breve descripción
Configuración de texto
Cambie la configuración de texto del módulo en consecuencia:
- Fuente de texto: Texto carmesí
- Tamaño del texto: 19px
- Altura de la línea de texto: 1,8 em
- Alineación de texto: Justificar
Espaciado
Modifique los valores de espaciado del módulo a continuación.
- Margen inferior: 50px
- 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 precios 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:
- Precio Fuente: Montserrat
- Peso de fuente de precio: Pesado
- Color del texto del precio: #000000
- Precio Tamaño del Texto: 50px
Espaciado
Cambie la configuración de espaciado a continuación.
- Margen inferior: 50px
- Margen izquierdo: 100 px (escritorio), 20 px (tableta y teléfono)
- Margen derecho: 20px (tableta y teléfono)
Agregar Woo Agregar al módulo del carrito a la columna 2
Contenido dinámico
El siguiente y último módulo que necesitamos para completar este diseño es el módulo Agregar al carrito de Woo.
- Producto: Este Producto
Configuración de texto
Cambie la fuente del texto en la configuración de texto.
- Fuente del texto: Montserrat
Configuración 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
- Relleno superior: 66px
- Relleno inferior: 66px
- Campos Fuente: 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 negrita
- Estilo de fuente del botón: Mayúsculas
- 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 cuadro: 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 impresionante página de producto en negrita 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 de forma gratuita! 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 de Divi, 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 los beneficios de este contenido gratuito.