Cómo crear una plantilla de producto de sitio ancho Woo Woo con el constructor de temas de Div.

El nuevo constructor Al The Divinize cómo construimos nuestros sitios web de la Divica. Por ejemplo, cuando diseñamos páginas de productos, debemos pasar por el proceso creativo una vez y, a partir de ahí, podemos atribuir el diseño de todas nuestras páginas de productos. Esto es exactamente lo que le mostraremos en el tutorial de hoy sobre los casos de uso. Le guiaremos configurando una plantilla de página de producto WOO en el sitio utilizando Div. Comenzaremos estilizando la página de producto predeterminada de WOO de un producto en particular, para que coincida con el paquete serigráfico. Continuaremos guardando la apariencia en la biblioteca de la Divic y luego lo usaremos como cuerpo global en una nueva plantilla que creamos.
¡Vamos a eso! avance

Descargue el modelo de producto para que el producto ponga su mano en el ejemplo de plantilla de producto gratuito, primero deberá descargarlo 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. Se ha suscrito correctamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos!
1. Active Divi Builder para el producto existente Activar Divi y modificar la configuración de la página Hay dos formas de abordar una plantilla de producto; Puede comenzar a editar el cuerpo global dentro de la plantilla de producto o primero puede crear el diseño en una página de producto individual. Personalmente, prefiero crear primero el diseño en una página de producto individual. Le permite publicar el diseño y ver el resultado en vivo antes de aplicarlo de manera efectiva en todas sus páginas de productos simultáneamente. Este es el enfoque que adoptaremos hoy, así que continúe y abra una de sus páginas existentes y cambie el aspecto de la página a su ancho completo.
Cambie a Visual Builder Una vez que cambie la página.

2. Personalice el aspecto para que coincida con el estilo del sitio web / el paquete de fondos de pantalla dentro de Visual Builder, puede ver todos los artículos que necesita. Cambiaremos algunas de las configuraciones de estos módulos para que coincidan con el paquete serigráfico. Los cambios que realizamos son mínimos y solo lo ayudan a aplicar un determinado estilo de diseño en la página del producto. Si trabaja en un proyecto personal, no dude en llegar lo más lejos posible con la personalización deseada, pero para este tutorial, intentaremos simplificarlo. Comenzaremos cambiando algunos colores de fondo. Módulos de ruidos de vía de carro: color de fondo

Abra el módulo Notic de Cart Woo y cambie el color de fondo.
Color de fondo: # 29314F
Modo de pestañas woo: pestañas de color de texto / fondo
Continúe abriendo el módulo de pestañas WOO y modifique el texto de la pestaña y los colores de fondo.

Color de fondo de pestaña activa: #ffffff
Color de fondo de pestaña inactiva: # 29314F
Color de texto de pestaña activa: # 000000
El color del texto de la pestaña: #ffffff
Configuración de texto de Corp también queremos traer algunos cambios al texto del cuerpo de los siguientes módulos:
Modo Woo Breadcrumb: Configuración de texto

Modo Woo Agregar en el carrito: configuración de texto
Modo de descripción de Woo: Configuración de texto
Woo Meta Module: Configuración de texto
Modo de pestañas woo: configuración de texto
Modo de pestañas woo: configuración de pestaña de texto
Abra cada modo enumerado anteriormente y cambie el tamaño de texto y la altura de la línea de texto de la siguiente manera:
Tamaño de texto: 16 PX (escritorio y tableta), 14 PX (teléfono)
Altura de la línea de texto: 2em (escritorio y tableta), 1.7em (teléfono)
La configuración del texto del título también cambia el estilo de nuestros títulos. Aplicaremos los cambios a cada uno de estos módulos:
Módulo de título de Woo: Configuración de texto Titlumode Productos relacionados con Woo: Configuración de texto de título

Modo de productos relacionados con WOO: configuración de texto del título del producto
Las únicas dos cosas que cambiamos son el título del título y el peso de la fuente del título.
Título de la fuente: Roboto
Título Fuente de peso: Bold
Vinculando los colores que van más allá, queremos asegurarnos de que se resalten los elementos que se pueden hacer clic. Cambiaremos el color del texto de los siguientes dos módulos:
Módulo Woo Breadcrumb: Color de texto de enlace
Woo Meta Module: Color de texto de enlace

Este es el código de color que usamos:

Color de texto de enlace: # FF7145
Configuración de texto de precio desea estilizar el precio del precio, comenzando con el módulo de precio WOO.
Modo de precio de Woo: configuración de texto de texto
Cambie la configuración del texto del precio de la siguiente manera:

Precio de fuente: Roboto
El precio del peso de la fuente: en negrita
Color de texto de precio: # FF7145
Abra el módulo de producto relacionado con WOO.
Modo Woo de productos relacionados: configuración para el texto del precio
Y haga algunos cambios en la configuración del texto del precio:

Precio de fuente: Roboto
El precio del peso de la fuente: en negrita
Color de texto de precio: # FF7145
Tamaño del texto del precio: 16 PX
La configuración del botón tiene dos botones en la página de nuestro producto, cada uno de ellos debe ser estilizado.
Módulos de notificación de carrito de Woo: botón Configuración
Modo WOO AGREGAR EN CART: Botón Configuración

Cambie la configuración de los botones del módulo de la siguiente manera:
Use estilos personalizados para el botón: Sí
Tamaño de texto de texto: 14 PX
El color del texto del botón: #ffffff
El color de fondo del botón: # FF7145
El ancho del nudo del botón: 2 PX
El color del marco del botón: # FF7145
Botón Raza: 100 PX
Distancia entre letras y botones: 1 PX
Botón de fuente: Robotobet Fuente Peso: Bold

El estilo de la fuente del botón: mayúscula
Revestimiento superior: 20 px
Finamiento inferior: 20 PX
Revelaje izquierdo: 30 PX
Revestimiento derecho: 30 PX

Más detalles hay algunos cambios adicionales que queremos aplicar para diseñar la página del producto, comenzando con el fondo de la columna 2 de la segunda fila en nuestra página.
Columna 2: El color del fondo
Use el siguiente código de color:
Color de fondo: #efefef

También cambiamos el espacio de columna 2.
Columna 2: Espacio
Use los siguientes valores de espaciado:
Revestimiento superior: 50 px

Revestimiento inferior: 50 PX
ENNIZACIÓN IZQUIERDA: 50 PX
Revestimiento derecho: 50 PX
Por último, pero no menos importante, querremos estilizar la configuración de nuestro módulo de CART AGREGAR al CART.
Modo Woo Agregar en la canasta: configuración de campo
Aplicar los siguientes cambios:
El color del fondo del campo: #efefef

Campos de texto en color: # 7f7f7f
Fuerte de campos: Roboto
Campo de peso de fuente: en negrita
3. Cree una nueva plantilla para los productos e importe la apariencia de la página del producto en el área del cuerpo Guardar la apariencia del producto en la biblioteca de la Divica Después de que haya completado el diseño del producto, puede guardar todo el aspecto en la biblioteca de la Divica. .
¡Vaya a Divic Builder es hora de convertir el aspecto en una plantilla de página del producto! Para hacer esto, navegue por el constructor de temas en la configuración de la Divic.
Agregue una nueva plantilla Continuar haciendo clic en “Agregar una nueva plantilla”.
Seleccione “todos los productos” en la pestaña “Use activado” en su configuración de plantilla para que la plantilla se aplique a todos sus productos simultáneamente.

Agregue el cuerpo personalizado de la biblioteca luego, haga clic en “Agregar un cuerpo global”. En lugar de construir el cuerpo personalizado desde cero, seleccionaremos la apariencia que acabamos de guardar en la biblioteca de la Divic. Acepte la pestaña “Sus aspectos guardados” para seleccionar el aspecto guardado.

4. Guarde las opciones del generador de temas y vea la plantilla de productos existentes Una vez que se ha creado su cuerpo de plantilla, solo queda una cosa que hacer; Guarde los cambios. Tan pronto como se haya guardado su nueva plantilla, puede obtener una vista previa de cada uno de sus productos y ¡puede ver que se aplica la misma plantilla del cuerpo!

avance

Pensamientos finales En esta publicación, le mostré cómo crear una plantilla de producto a nivel de sitio. Comencé modificando una página de producto existente, utilizando los módulos WOO de Div. Hice algunos cambios mínimos en la página del producto, para que coincida con el paquete del paquete. Continué guardando la apariencia de la página del producto en la biblioteca de la Divic. Luego, creamos una nueva plantilla y cargamos la apariencia en el cuerpo de la plantilla de página de nuestro producto, para que se aplique a todo nuestro sitio web. ¡Esperamos que este tutorial lo ayude a construir hermosos sitios web electrónicos con la nueva Divic de Builder Builder! Si tiene alguna pregunta, asegúrese de dejar un comentario en la sección de comentarios a continuación. Si está ansioso por obtener más información sobre Divi y obtener más regalos de la Divicidad, 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 beneficios de este contenido gratuito.