Cómo crear una plantilla de página inspirada en el producto inspirado en el producto con Div

¿Busca un diseño de diseño de productos 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 mínimos japoneses. Es fácil leer el texto, ver los productos y no distraer su atención. Siga el tutorial a continuación para recrear esta plantilla para sus propios productos. ¡Podrá descargar la plantilla JSON gratuita! Vamos a eso. Vista previa antes de comenzar, para echar un vistazo al diseño del diseño en diferentes dispositivos. Escritorio

Móvil

Descargue la plantilla de producto de forma gratuita para poner su mano en la plantilla de página de producto gratuita, primero deberá descargarla con el botón a continuación. Para tener acceso a la descarga, deberá suscribirse a nuestra lista diaria de correo electrónico utilizando el formulario a continuación. ¡Como nuevo suscriptor, recibirá más buenas divisiones y un paquete Divaut gratuito todos los lunes! Si ya está en la lista, simplemente ingrese la dirección de correo electrónico a continuación y haga clic en Descargar. No será “reubicado” y no recibirá correos electrónicos adicionales.
Descargar archivos

Descargue el registro gratuito para el Boletín Informativo Divic y le enviaremos una copia de la página de la página de la página final, además de muchos otros recursos, consejos y consejos para Div gratis. Sigue a ti mismo y serás una división maestra en el menor tiempo. Si ya está suscrito, simplemente ingrese el correo electrónico a continuación y haga clic en Descargar para acceder al paquete de apariencia.
Te has suscripto satisfactoriamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos! 1. Agregue / abra el producto WooCommerce Datos del producto Abierto o cree un nuevo producto de 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: caligrafía japonesa establecida con todas las herramientas que necesita para crear un arte hermoso con letras. India de tinta negra, cepillo para el cabello de caballo, peso de piedra, tazón de mezcla, tijeras japonesas y papel no sangrante.
Precio: 31
Categoría: suministros de arte
Imagen presentada: una imagen de paisaje del producto.
Galería: 4 imágenes de paisaje en las mismas dimensiones
Atributo: ver más abajo
La pestaña Atributo contiene la información para el módulo de información de WOO adicional. Para agregar esta información, seleccione la pestaña Atributo y cree un atributo personalizado de la siguiente manera:
Que esta incluido:
1 cepillo
1 tazón
1 botella de tinta
1 par de tijeras
1 piedra del río
1 fila de papel
Active Divi Builder y cambie la configuración de la página Cuando todos los datos del producto estén listos, activen Divi Builder y cambie la página Mira en “ancho completo”.

Cambie a Visual Builder ahora, pase al Visual Builder. Haga clic en el botón que escribe la “construcción en la parte delantera”.


Elimine la sección de producto predeterminada porque queremos diseñar esta página de producto desde cero, eliminar toda la sección predeterminada. Esto le dará un lienzo vacío para trabajar.

2. Recrea el diseño del estilo japonés ¡Agregue una nueva sección para comenzar a recrear el 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. Fondo: Gris muy claro # F2F2F2

Dimensión luego ajuste el tamaño.
Ancho: 100%

Ancho máximo: 100%
Espacio entonces los valores de espaciado como sigue:
Revestimiento superior:

Escritorio: 0VW
Tableta + teléfono: 2VW
Levante inferior:
Desktop + tableta: 2VW
Agregue la primera fila La estructura de la columna Agregue una nueva fila y seleccione la siguiente estructura de columna:
Dimensión Antes de agregar módulos, ajuste la configuración de tamaño de línea de la siguiente manera:

Ancho:

Escritorio: 80%
Tableta + teléfono: 63%
El espacio también ajusta los valores de espaciado.
Superior + Margen inferior: 0VW

Alineado arriba + abajo: 0VW
Agregue el contenido del módulo Woo Breadcrumb ahora, agregue el primer módulo; Woo pesmetul.
Producto: este producto

Texto En la pestaña Design, estilice el texto de la siguiente manera:
FUENTE: Duru Sans

Estilo de fuente: TT
Color: negro # 000000
Tamaño:
Escritorio: 0.7 VW
Tableta: 1.5VW
Teléfono: 1.7VW
Espacio de letras: 2 PX
Dimensión luego ajuste el tamaño.
Ancho: 100%

Finalmente espaciado, ajuste la distancia.
Margen superior:

Escritorio: 3em
Tableta + teléfono: 0em
Margen inferior:
Escritorio + tableta: 1em
Teléfono: 0em
Reviniente superior + inferior: 1em
ENNIZACIÓN IZQUIERDA: 2EM
Agregue la estructura de la columna de la segunda fila Agregue una segunda fila utilizando la siguiente estructura de columna:
Dimensión Abra la configuración de la fila y cambie el ancho en diferentes tamaños de pantalla.

Ancho:

Escritorio: 80%
Tableta + teléfono: 65%
Ajuste de espaciado y distancia. Subsick desde arriba: 0VW
Columna 1 + 2 Configuración de 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
Borde y agregue un estilo de borde y a ambas columnas.

Estilos de borde: los cuatro lados
Ancho fronterizo: 4 PX

Color: # 333333
¡Agregue el módulo de imágenes WOO al contenido de la columna 1 es hora de comenzar a agregar módulos! Necesitaremos un módulo de imagen WOO en la columna 1.
Producto: este producto
Elementos Ajuste los interruptores en la pestaña Elementos de la siguiente manera:

Imagen presentada: activado
Mostrar fotos de la galería: Off

Mostrar la insignia de ventas: APAGADO
Agregue el módulo de título WOO al contenido de la columna 1 debajo de la imagen, agregue un módulo de título WOO. Seleccione el contenido.
Producto: este producto
El texto del título En la pestaña Diseño, estilice el texto.

Título del nivel Título: H1
Fuente H1: Droid sans

Fuente H1 Estilo: TT
Color H1: Gris muy oscuro # 333333
Espacio de letras: 5 PX
Altura de línea: 1em
Espacio luego ajuste los valores de espaciado.
Margen superior:
Tableta + teléfono: 0VW

SUS Lingo: 0VW
Levante inferior:
Escritorio: 1.5VW
Tableta: 3.5VW
Teléfono: 6VW
Forro izquierdo:
Escritorio: 2VW
Tableta + teléfono: 5VW
Junta derecha:
Desktop + tableta: 0VW
Border llene la configuración del módulo agregando un borde.
Estilos de borde: borde inferior
Ancho: 4 PX


Color: Muy oscuro gris # 333333
Agregue el módulo de descripción de WOO al contenido de la columna 1 Continuo, 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 entonces, estilice el texto de la siguiente manera:
FUENTE: Duru Sans
Estilo de fuente: TT

Color: Muy Dark Grey # 333333myimea:
Escritorio: 0.8VW
Tableta: 1.4VW
Teléfono: 1.8VW
Espacio de letras: 3 PX
Altura de línea: 2em
Espacio Complete la configuración del módulo agregando algunos rellenos personalizados en diferentes tamaños de pantalla.
Alineado arriba + abajo: 0VW
Forro izquierdo + derecho:
Escritorio: 2VW

Tableta + teléfono: 5VW
Agregue el módulo de precio WOO al contenido de la columna 1 y luego, agregue un módulo de precio de WOO a la columna y seleccione el producto.
Producto: este producto
El texto del precio estiliza el precio del precio de la siguiente manera:
FUENTE: Duru Sans

Color: Muy oscuro gris # 333333
Tamaño:

Escritorio: 1.5VW
Tableta: 3.2VW
Teléfono: 4VW
Espacio de letras: 3 PX
Altura de línea: 1em
Extender la configuración de ajuste y espaciado.
Margen inferior:
Escritorio: 1VW
Tableta: 3VW

Teléfono: 4VW
Revestimiento superior:
Escritorio: 1VW
Tableta: 3.3VW
Teléfono: 5VW
Revestimiento inferior: 0 VW
Forro izquierdo:
Tableta + teléfono: 5VW
Junta derecha:
Escritorio: 2VW
Tableta + teléfono: 3VW
El borde finalmente agregue un borde.
Estilos de borde: borde superior
Ancho fronterizo: 4 PX
Color: Muy oscuro gris # 333333

Agregue Woo Agregar a los módulos de carrito en el precio de la columna 1, agregue un agregado al carrito y seleccione el producto.
Producto: este producto
Los elementos cambian los elementos de la siguiente manera:
Mostrar el campo de la cantidad: detenido

Stock de espectáculos: en
Fondo agregado y un color de fondo.

Color de fondo: Muy Dark Grey # 333333
Botón En la pestaña de diseño, estilice el botón de la siguiente manera:
Tamano del texto:

Escritorio: 1VW
Tableta: 2.6VW

Teléfono: 3.1VW
Color: blanco #ffffff
Ancho fronterizo: 0 PX
Espacio de letras: 3 PX
FUENTE: Duru Sans
Fuente: TT
Espacio y luego ajusta el espacio. Superior + encabezado inferior: 0.5VW
Lengo izquierdo: 1VW
El borde finalmente agregue un borde.
Estilos de borde: borde superior

Ancho: 4 PX
Color: Muy oscuro gris # 333333
Agregue el módulo de información de WOO adicional al contenido de la columna 2, pase a la segunda columna y agregue un módulo de información adicional. Seleccione el producto.

Producto: este producto
Los elementos cambian la configuración de los elementos de la siguiente manera:
Mostrar el título: ON
Texto En la pestaña Diseño, estilice el texto.

FUENTE: Duru Sans
Estilo de fuente: i + tt

Color: Muy oscuro gris # 333333
Tamaño:

Escritorio: 0.7 VW
Tableta: 1.5VW
Teléfono: 2.4VW
Espacio de letras: 2 PX
Altura de la línea: 1.5em
El texto del título acolza el texto del título.
FUENTE: Duru Sans
Estilo de fuente: TT
Color: Muy oscuro gris # 333333
Tamaño:

Escritorio: 1VW
Tableta: 2VW
Teléfono: 2.2VW
Espacio de letras: 3 PX
Altura de la línea: 1.5em
El texto del atributo no olvida estilizar el texto del atributo.
FUENTE: Duru Sans
Estilo de fuente: TT
Color: Muy oscuro gris # 333333
Tamaño:

Escritorio: 0.7 VW
Tableta: 2VW
Teléfono: 2.4VW
Espacio de letras: 2 PX
Espacio y luego ajusta el espacio.
Revestimiento superior:
Escritorio: 1VW
Tableta + teléfono: 3VW
Levante inferior:

Desktop + tableta: 1VW
Forro izquierdo:
Escritorio: 2VW
Tableta + teléfono: 5VW
Junta derecha:
Teléfono: 3VW
Agregue el módulo Woo Gallery al contenido de la columna 2 El último módulo que necesitamos para completar el diseño es un módulo Woo Gallery. Seleccione el producto.
Producto: este producto
Aparece el cambio a la pestaña de diseño y cambie el aspecto.
Apariencia: diapositiva
Espacio y luego ajusta la configuración de espaciado de la siguiente manera:

Margen superior:
Escritorio: -2VW

Tableta: -4VW
Teléfono: -6VW

SUS Lingo: 0VW
El borde finalmente agregue un borde.
Estilos de borde: borde superior
Ancho: 4 PX
Color: Muy oscuro gris # 333333
3. Convierta a la plantilla para la biblioteca Guardar a Divați ahora que hemos completado el diseño, es hora de guardar la página del producto en el DIV. Si no tiene una categoría para aspectos del producto, cree uno.

Guardar como: apariencia
Nombre: Master de productos de estilo japonés
Categoría: aspectos del producto.
Abra el Builder de Divic y cree una nueva plantilla para usar este diseño en todas las páginas de productos, debe crear una plantilla para él en el generador de temas. En la página de creación de tareas, agregue una nueva plantilla. Seleccione “todos los productos” en el menú Drop -down. Si desea utilizar este diseño solo para algunos de sus productos, puede ajustar la configuración.

Agregue el cuerpo personalizado de la biblioteca de la Divica Haga clic en “Agregar cuerpo personalizado” y seleccione “Agregar de la biblioteca” al menú de caída.
Encuentre el aspecto en los aspectos guardados y aplique en los modelos, haga clic en los modelos guardados y busque el que acabo de crear.
Guarde los cambios realizados en Temo Builder No olvide guardar los cambios en el generador de temas.
Vista previa La plantilla ahora se aplicará a todos los productos en su sitio web. Echemos un último vistazo al resultado en diferentes tamaños de pantalla. Escritorio

Móvil