¿Está buscando un diseño de página de producto limpio y minimalista para su tienda online? Hoy tenemos un diseño inspirado en la estética japonesa. Este es un estilo común para revistas y sitios web japoneses. 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.

Hagámoslo.

Avance

Antes de comenzar, echemos un vistazo a cómo se ve el diseño en diferentes dispositivos.

Escritorio

Móvil

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

Fondo

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
  • Tamaño:
    • 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

Fondo

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
  • Tamaño:
    • 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 de la siguiente manera:

  • Fuente: Duru Sans
  • Color: Gris muy oscuro # 333333
  • Tamaño:
    • 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

Fondo

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
  • Tamaño:
    • 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
  • Tamaño:
    • 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 el texto del atributo también.

  • Fuente: Duru Sans
  • Estilo de fuente: TT
  • Color: Gris muy oscuro # 333333
  • Tamaño:
    • 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 espaciado 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 el diseño de la página de nuestro 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’ del 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.

Por Prunaestudio

Por Prunaestudio

Prunaestudio es un estudio de diseño web ubicado en Valencia (España). Estamos especializados en el diseño web basado en WordPress con la plantilla premium de Elegantthemes, Divi.

* Todos el contenido pertenece y se ha traducido del blog de Elegantthemes (Divi Resources)

Nuestras últimas entradas

Consigue la plantilla Divi

Más de 800 diseños de sitios web prefabricados vienen empaquetados dentro de Divi de forma gratuita.

You have Successfully Subscribed!