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

Publicado: 2019-11-21

¿Está buscando un diseño de página de producto limpio y minimalista 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. Facilita la lectura del texto, ver los productos y no distraerse. Siga el tutorial a continuación para recrear esta plantilla para sus propios productos. ¡También podrá descargar el archivo JSON de plantilla de forma gratuita!

Hagámoslo.

Avance

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

Escritorio

Móvil

Descargue la plantilla de la página del producto GRATIS

Para tener en sus manos 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 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.

Descarga los archivos

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!

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 hermosas letras. Tinta china negra, pincel de crin, peso de roca, tazón para mezclar, tijeras japonesas y papel que no sangra.
Precio: 31
Categoría: Suministros de arte
Imagen destacada: una imagen horizontal del producto.
Galería: 4 imágenes de paisajes en las mismas dimensiones
Atributos: ver más abajo

La pestaña de atributos contiene la información para el módulo de información adicional de 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 cuenco
- 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 constructor visual. Haga clic en el botón que dice "construir en la interfaz".

Eliminar la sección de producto predeterminado

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 del producto estético japonés! Agregue 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áximo: 100%

Espaciado

Luego, los valores de espaciado son los siguientes:

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

Agregar la primera fila

Estructura de la columna

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

Dimensionamiento

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

Ancho:
- Escritorio: 80%
- Tableta + Teléfono: 63%

Espaciado

Además, ajuste los valores de espaciado.

Margen superior + inferior: 0vw
Acolchado superior + inferior: 0vw

Agregar módulo Woo Breadcrumb

Contenido

Ahora, agregue el primer módulo; la miga de pan 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 entre letras: 2px

Dimensionamiento

Luego, ajusta el tamaño.

Ancho: 100%

Espaciado

Finalmente, ajuste el espaciado.

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

Agregar segunda fila

Estructura de la columna

Agregue una segunda fila usando la siguiente estructura de columnas:

Dimensionamiento

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

Ancho:
- Escritorio: 80%
- Tableta + Teléfono: 65%

Espaciado

También ajusta el espaciado.

Acolchado superior: 0vw