Cómo crear una plantilla de página de producto inspirado en la estética japonesa con Divi


¿Está buscando un diseño de página de producto limpio y mínimo para su tienda en línea? Hoy tenemos un diseño inspirado en la estética japonesa. Este es un estilo común para revistas y sitios web japoneses mínimos. Hace que sea fácil leer el texto, ver los productos y no distraerse. Siga el tutorial a continuación para recrear esta plantilla para sus propios productos. ¡También podrás descargar el archivo JSON de plantilla gratis!

Hagámoslo.

Avance

Antes de comenzar, veamos cómo se ve el diseño en diferentes dispositivos.

Escritorio

Móvil

Descargue la plantilla de la página del producto GRATIS

Para poner sus manos en la plantilla de página de producto gratuita, primero deberá descargarla 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.

1. Agregar / Abrir producto Woocommerce

Datos del producto

Abra o cree un nuevo producto WooCommerce. Para recrear este diseño de producto inspirado en la estética japonesa, deberá completar los siguientes detalles:

  • Título: Conjunto de caligrafía
  • Descripción: conjunto de caligrafía japonesa con todas las herramientas que necesitas para crear bellas letras artísticas. Tinta negra de India, pincel de crin, peso de roca, tazón para mezclar, tijeras japonesas y papel sin sangrado.
  • Precio: 31
  • Categoría: Suministros de arte
  • Imagen destacada: Una imagen de paisaje del producto.
  • Galería: 4 imágenes de paisajes en las mismas dimensiones
  • Atributos: ver abajo

La pestaña de atributos contiene la información para el módulo de información adicional woo. Para agregar esta información, seleccione la pestaña de atributos y cree un atributo personalizado de la siguiente manera:

  • Qué está incluido:
    • 1 cepillo
    • 1 tazón
    • 1 botella de tinta
    • 1 par de tijeras
    • 1 piedra de río
    • 1 resma de papel

Habilitar Divi Builder y modificar la configuración de la página

Cuando todos los datos del producto estén listos, habilite Divi Builder y cambie el diseño de la página a "ancho completo".

Cambiar a Visual Builder

Ahora, cambie al generador visual. Haga clic en el botón que dice "construir en el front-end".

Eliminar sección de producto predeterminada

Como queremos diseñar esta página de producto desde cero, elimine toda la sección predeterminada. Esto le dará un lienzo en blanco para trabajar.

2. Recrea el diseño de estilo japonés

Agregar nueva sección

¡Comencemos a recrear la página de productos estéticos japoneses! Agregar una nueva sección regular.

Antecedentes

Abra la configuración de la sección y cambie el color de fondo.

  • Color de fondo: gris muy claro # f2f2f2

Dimensionamiento

A continuación, ajuste el tamaño.

  • Ancho: 100%
  • Ancho Máx .: 100%

Espaciado

Luego, los valores de espaciado son los siguientes:

  • Relleno superior:
    • Escritorio: 0vw
    • Tableta + Teléfono: 2vw
  • Acolchado inferior:
    • Escritorio + Tableta: 2vw

Añadir primera fila

Estructura de columna

Agregue una nueva fila y seleccione la siguiente estructura de columnas:

Dimensionamiento

Antes de agregar cualquier módulo, ajuste la configuración de tamaño de la fila de la siguiente manera:

  • Anchura:
    • Escritorio: 80%
    • Tableta + teléfono: 63%

Espaciado

Además, ajuste los valores de espaciado.

  • Margen superior + inferior: 0vw
  • Relleno superior + inferior: 0vw

Añadir el módulo de migas de pan Woo

Contenido

Ahora, agregue el primer módulo; el pan rallado woo.

  • Producto: Este producto

Texto

En la pestaña de diseño, diseñe el texto de la siguiente manera:

  • Fuente: Duru Sans
  • Estilo de fuente: TT
  • Color: negro # 000000
  • Talla:
    • Escritorio: 0.7vw
    • Tableta: 1.5vw
    • Teléfono: 1.7vw
  • Espaciado de letras: 2px

Dimensionamiento

Luego, ajuste el tamaño.

  • Ancho: 100%

Espaciado

Finalmente, ajuste el espacio.

  • Margen superior:
    • Escritorio: 3em
    • Tableta + Teléfono: 0em
  • Margen inferior:
    • Escritorio + tableta: 1em
    • Teléfono: 0em
  • Relleno superior + inferior: 1em
  • Relleno izquierdo: 2em

Agregar segunda fila

Estructura de columna

Agregue una segunda fila usando la siguiente estructura de columnas:

Dimensionamiento

Abra la configuración de fila y cambie el ancho en diferentes tamaños de pantalla.

  • Anchura:
    • Escritorio: 80%
    • Tableta + teléfono: 65%

Espaciado

Ajuste el espacio también.

  • Relleno superior: 0vw

Configuración de columna 1 + 2

Antecedentes

Continuar con la configuración de la columna. Ambas columnas 1 y 2 tienen el mismo estilo. Comience con el fondo.

  • Color: blanco #ffffff

Frontera

Y agregue un estilo de borde a ambas columnas también.

  • Estilos de borde: los cuatro lados
  • Ancho del borde: 4px
  • Color: # 333333

Agregue el módulo de imágenes Woo a la columna 1

Contenido

¡Es hora de comenzar a agregar módulos! Necesitaremos un módulo de imagen woo en la columna 1.

  • Producto: Este producto

Elementos

Ajuste las palancas en la pestaña de elementos de la siguiente manera:

  • Imagen destacada: en
  • Mostrar imágenes de la galería: OFF
  • Mostrar insignia de ventas: OFF

Añadir Woo Title Module a la Columna 1

Contenido

Debajo de la imagen, agregue un módulo de título woo. Selecciona el contenido.

  • Producto: Este producto

Texto del título

En la pestaña de diseño, dale estilo al texto.

  • Nivel de título del título: H1
  • Fuente H1: Droid Sans
  • Estilo de fuente H1: TT
  • Color H1: Gris muy oscuro # 333333
  • Espaciado de letras: 5px
  • Altura de línea: 1 em

Espaciado

Luego, ajuste los valores de espaciado.

  • Margen superior:
    • Tableta + Teléfono: 0vw
  • Relleno superior: 0vw
  • Acolchado inferior:
    • Escritorio: 1.5vw
    • Tableta: 3.5vw
    • Teléfono: 6vw
  • Acolchado Izquierdo:
    • Escritorio: 2vw
    • Tableta + Teléfono: 5vw
  • Relleno derecho:
    • Escritorio + Tableta: 0vw

Frontera

Complete la configuración del módulo agregando un borde.

  • Estilos de borde: borde inferior
  • Ancho: 4px
  • Color: Gris muy oscuro # 333333

Agregue el módulo de descripción de Woo a la columna 1

Contenido

Continuando, agregue un módulo de descripción woo. Seleccione el contenido y el tipo de descripción.

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

Texto

Luego, peina el texto de la siguiente manera:

  • Fuente: Duru Sans
  • Estilo de fuente: TT
  • Color: Gris muy oscuro # 333333
  • Talla:
    • Escritorio: 0.8vw
    • Tableta: 1.4vw
    • Teléfono: 1.8vw
  • Espaciado de letras: 3px
  • Altura de línea: 2em

Espaciado

Complete la configuración del módulo agregando un relleno personalizado en diferentes tamaños de pantalla.

  • Relleno superior + inferior: 0vw
  • Acolchado izquierdo + derecho:
    • Escritorio: 2vw
    • Tableta + Teléfono: 5vw

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

Contenido

Luego, agregue un módulo de precios woo a la columna y seleccione el producto.

  • Producto: Este producto

Texto de precio

Diseñe el texto del precio como sigue:

  • Fuente: Duru Sans
  • Color: Gris muy oscuro # 333333
  • Talla:
    • Escritorio: 1.5vw
    • Tableta: 3.2vw
    • Teléfono: 4vw
  • Espaciado de letras: 3px
  • Altura de línea: 1 em

Espaciado

Ajuste la configuración de espaciado también.

  • Margen inferior:
    • Escritorio: 1vw
    • Tableta: 3vw
    • Teléfono: 4vw
  • Relleno superior:
    • Escritorio: 1vw
    • Tableta: 3.3vw
    • Teléfono: 5vw
  • Relleno inferior: 0vw
  • Acolchado Izquierdo:
    • Tableta + Teléfono: 5vw
  • Relleno derecho:
    • Escritorio: 2vw
    • Tableta + Teléfono: 3vw

Frontera

Por último, agregue un borde.

  • Estilos de borde: borde superior
  • Ancho del borde: 4px
  • Color: Gris muy oscuro # 333333

Añadir Woo Añadir al carrito Módulo a la columna 1

Contenido

Debajo del precio, agregue un módulo para agregar al carrito y seleccione el producto.

  • Producto: Este producto

Elementos

Alternar los elementos de la siguiente manera:

  • Mostrar campo de cantidad: OFF
  • Mostrar Stock: ENCENDIDO

Antecedentes

Agregue un color de fondo también.

  • Color de fondo: Gris muy oscuro # 333333

Botón

En la pestaña de diseño, estilo el botón de la siguiente manera:

  • Tamano del texto:
    • Escritorio: 1vw
    • Tableta: 2.6vw
    • Teléfono: 3.1vw
  • Color: blanco #ffffff
  • Ancho del borde: 0px
  • Espaciado de letras: 3px
  • Fuente: Duru Sans
  • Fuente: TT

Espaciado

A continuación, ajuste el espacio.

  • Acolchado superior + inferior: 0.5vw
  • Relleno izquierdo: 1vw

Frontera

Finalmente, agrega un borde.

  • Estilos de borde: borde superior
  • Ancho: 4px
  • Color: Gris muy oscuro # 333333

Agregue el módulo de información adicional Woo a la columna 2

Contenido

Pase a la segunda columna y agregue un módulo de información adicional woo. Selecciona el producto.

  • Producto: Este producto

Elementos

Cambie la configuración de los elementos de la siguiente manera:

  • Mostrar título: ON

Texto

En la pestaña de diseño, dale estilo al texto.

  • Fuente: Duru Sans
  • Estilo de fuente: I + TT
  • Color: Gris muy oscuro # 333333
  • Talla:
    • Escritorio: 0.7vw
    • Tableta: 1.5vw
    • Teléfono: 2.4vw
  • Espaciado de letras: 2px
  • Altura de línea: 1.5 em

Texto del título

Dale estilo al texto del título a continuación.

  • Fuente: Duru Sans
  • Estilo de fuente: TT
  • Color: Gris muy oscuro # 333333
  • Talla:
    • Escritorio: 1vw
    • Tableta: 2vw
    • Teléfono: 2.2vw
  • Espaciado de letras: 3px
  • Altura de línea: 1.5 em

Texto de atributo

No olvides diseñar también el texto del atributo.

  • Fuente: Duru Sans
  • Estilo de fuente: TT
  • Color: Gris muy oscuro # 333333
  • Talla:
    • Escritorio: 0.7vw
    • Tableta: 2vw
    • Teléfono: 2.4vw
  • Espaciado de letras: 2px

Espaciado

Luego, ajuste el espacio.

  • Relleno superior:
    • Escritorio: 1vw
    • Tableta + Teléfono: 3vw
  • Acolchado inferior:
    • Escritorio + Tableta: 1vw
  • Acolchado Izquierdo:
    • Escritorio: 2vw
    • Tableta + Teléfono: 5vw
  • Relleno derecho:
    • Teléfono: 3vw

Agregue el módulo de la galería Woo a la columna 2

Contenido

El último módulo que necesitamos para completar el diseño es un módulo de galería woo. Selecciona el producto.

  • Producto: Este producto

Diseño

Pase a la pestaña de diseño y cambie el diseño.

  • Diseño: control deslizante

Espaciado

Luego, ajuste la configuración de espacio de la siguiente manera:

  • Margen superior:
    • Escritorio: -2vw
    • Tableta: -4vw
    • Teléfono: -6vw
  • Relleno superior: 0vw

Frontera

Finalmente, agrega un borde.

  • Estilos de borde: borde superior
  • Ancho: 4px
  • Color: Gris muy oscuro # 333333

3. Convertir a plantilla para Divi Theme Builder

Guardar en Divi Library

Ahora que hemos completado el diseño, es hora de guardar nuestro diseño de página del producto en la Biblioteca Divi. Si no tiene una categoría para los diseños de sus productos, cree una.

  • Guardar como: diseño
  • Nombre: Maestro de productos de estilo japonés
  • Categoría: Diseños de productos.

Abra Divi Theme Builder y cree una nueva plantilla

Para utilizar este diseño en todas las páginas de sus productos, debe crear una plantilla para él en el generador de temas. Dentro de la página del generador de temas, agregue una nueva plantilla. Seleccione "todos los productos" en el menú desplegable. Si desea utilizar este diseño solo para algunos de sus productos, puede ajustar la configuración.

Agregar cuerpo personalizado de la biblioteca Divi

Haga clic en "agregar cuerpo personalizado" y seleccione "agregar de la biblioteca" en el menú desplegable.

Buscar diseño en diseños guardados y aplicar

En la ventana de diseños, haga clic en diseños guardados y busque el que acabamos de crear.

Guardar cambios en Theme Builder

No olvide guardar los cambios en el generador de temas.

Avance

La plantilla ahora se aplicará a todos los productos en su sitio web. Echemos un vistazo final al resultado en diferentes tamaños de pantalla.

Escritorio

Móvil

¡Es una envoltura!

En esta publicación, le mostramos cómo crear una página de productos de inspiración estética japonesa. El estilo es limpio y minimalista, perfecto para exhibir productos delicados o hechos a mano. También le mostramos cómo convertir el diseño en una plantilla con el generador de temas Divi. Pruebe este diseño con su nuevo proyecto Divi + WooCommerce y díganos qué piensa.