El nuevo Theme Builder de Divi automatiza la forma en que construimos nuestros sitios web Divi. Al diseñar páginas de productos, por ejemplo, solo tenemos que pasar por el proceso de creación una vez y, a partir de ahí, podemos asignar el diseño a todas nuestras páginas de productos. Eso es exactamente lo que le mostraremos en el tutorial de casos de uso de hoy. Lo guiaremos a través de la configuración de una plantilla de página de producto Woo para todo el sitio usando Divi . Comenzaremos diseñando la página de producto Woo predeterminada de un producto en particular, para que coincida con el paquete de diseño de serigrafía. Continuaremos guardando el diseño en nuestra Biblioteca Divi y luego lo usaremos como el cuerpo global en una nueva plantilla que creamos.
¡Hagámoslo!
Descargue la plantilla de página de producto de ejemplo GRATIS
Para poner sus manos en la plantilla de página de producto de ejemplo gratuita, primero deberá descargarla usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestro boletín utilizando 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 será «resuscrito» ni recibirá correos electrónicos adicionales.
Descárgalo gratis
Únase al boletín informativo 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 muchos otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguenos y serás un maestro 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.
You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!
1. Habilite Divi Builder en un producto existente
Habilitar Divi y modificar la configuración de la página
Hay dos formas de abordar la creación de una plantilla de página de producto; puede comenzar a editar el cuerpo global dentro de la plantilla de la página de su producto, o puede crear el diseño en una página de producto individual primero. 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 a todas las páginas de sus productos a la vez. Ese es el enfoque que adoptaremos hoy, así que adelante, abra una de sus páginas existentes y cambie el diseño de la página a ancho completo.
Cambiar a Visual Builder
Una vez que haya cambiado el diseño de la página en la configuración de la página, puede comenzar a construir en el front-end.
2. Personalice el diseño para que coincida con el estilo del sitio web/paquete de diseño
Colores de fondo
Dentro de Visual Builder, puede notar todos los elementos de cortejo que necesita. Vamos a cambiar algunas de las configuraciones de estos módulos para que coincidan con el paquete de diseño de serigrafía. Los cambios que estamos realizando son mínimos y solo lo ayudan a aplicar un cierto estilo de diseño a la página de su producto. Si está trabajando en un proyecto personal, siéntase libre de ir tan lejos como desee con la personalización, pero para este tutorial, intentaremos mantenerlo simple. Comenzaremos modificando algunos colores de fondo.
- Módulo de notificación de Woo Cart: color de fondo
Abra el módulo de notificación de Woo Cart y cambie su color de fondo.
- Color de fondo: #29314f
- Módulo Woo Tabs: texto de pestañas/colores de fondo
Continúe abriendo el Módulo de pestañas de Woo y cambie el texto de la pestaña y los colores de fondo a continuación.
- Color de fondo de la pestaña activa: #ffffff
- Color de fondo de la pestaña inactiva: #29314f
- Color de texto de pestaña activa: #000000
- Color del texto de la pestaña: #ffffff
Configuración del texto del cuerpo
También queremos hacer algunos cambios en el cuerpo del texto de los siguientes módulos:
- Módulo Woo Breadcrumb: configuración de texto
- Módulo Agregar al carrito de Woo: configuración de texto
- Módulo de descripción de Woo: configuración de texto
- Woo Meta Module: configuración de texto
- Módulo Woo Tabs: configuración de texto
- Módulo Woo Tabs: configuración de texto de pestañas
Abra cada módulo mencionado anteriormente y cambie el tamaño del texto y la altura de la línea de texto de la siguiente manera:
- Tamaño del texto: 16 px (computadora de escritorio y tableta), 14 px (teléfono)
- Altura de línea de texto: 2em (computadora de escritorio y tableta), 1,7em (teléfono)
Configuración del texto del título
También estamos cambiando 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 del texto del título
- Módulo de productos relacionados con Woo: Configuración del texto del título
- Módulo de productos relacionados con Woo: Configuración del texto del título del producto
Las únicas dos cosas que estamos cambiando son la fuente del título y el peso de la fuente del título.
- Fuente del título: Roboto
- Peso de la fuente del título: Negrita
Colores de enlace
Continuando, queremos asegurarnos de que los elementos en los que se puede hacer clic estén resaltados. Cambiaremos el color del texto del enlace de los siguientes dos módulos:
- Módulo Woo Breadcrumb: color del texto del enlace
- Woo Meta Module: color del texto del enlace
Este es el código de color que estamos usando:
- Color del texto del enlace: #ff7145
Configuración de texto de precio
También queremos diseñar el texto del precio, comenzando con el Módulo de precios de Woo.
- Módulo de precio de Woo: configuración de texto de precio
Cambie la configuración del texto del precio de la siguiente manera:
- Fuente de precio: Roboto
- Peso de fuente de precio: Negrita
- Color del texto del precio: #ff7145
Abra el módulo de productos relacionados con Woo a continuación.
- Módulo de productos relacionados con Woo: configuración de texto de precio
Y haga algunos cambios en la configuración del texto del precio:
- Fuente de precio: Roboto
- Peso de fuente de precio: Negrita
- Color del texto del precio: #ff7145
- Precio Tamaño del texto: 16px
También tenemos dos botones en nuestra página de productos, cada uno de ellos necesita un estilo.
- Módulo de notificación de Woo Cart: configuración de botones
- Módulo Agregar al carrito de Woo: configuración de botones
Cambie la configuración de los botones de los módulos de la siguiente manera:
- Usar estilos personalizados para el botón: Sí
- Tamaño del texto del botón: 14px
- Color del texto del botón: #ffffff
- Color de fondo del botón: #ff7145
- Ancho del borde del botón: 2px
- Color del borde del botón: #ff7145
- Radio del borde del botón: 100px
- Espaciado entre letras de botones: 1 px
- Fuente del botón: Roboto
- Peso de la fuente del botón: Negrita
- Estilo de fuente del botón: Mayúsculas
- Relleno superior: 20px
- Relleno inferior: 20px
- Relleno izquierdo: 30px
- Relleno derecho: 30px
Detalles adicionales
Hay algunos cambios adicionales que queremos aplicar al diseño de la página del producto, comenzando con el fondo de la columna 2 de la segunda fila de nuestra página.
- Columna 2: Color de fondo
Utilice el siguiente código de colores:
- Color de fondo: #efefef
También estamos modificando el espaciado de la columna 2.
- Columna 2: Espaciado
Utilice los siguientes valores de espaciado:
- Relleno superior: 50px
- Relleno inferior: 50px
- Relleno izquierdo: 50px
- Relleno derecho: 50px
Por último, pero no menos importante, querremos diseñar la configuración de los campos de nuestro módulo Woo Add To Cart.
- Módulo Agregar al carrito de Woo: Configuración de campos
Aplicar los siguientes cambios:
- Color de fondo de los campos: #efefef
- Color del texto de los campos: #7f7f7f
- Fuente de los campos: Roboto
- Peso de la fuente de los campos: Negrita
3. Cree una nueva plantilla para productos e importe el diseño de la página del producto en el área del cuerpo
Guardar el diseño de la página del producto en la biblioteca Divi
Una vez que haya completado el diseño de la página del producto, puede guardar todo el diseño en su Biblioteca Divi.
Ir al Creador de temas Divi
¡Es hora de convertir el diseño en una plantilla de página de producto! Para hacer eso, navegue hasta Theme Builder en su configuración de Divi.
Agregar nueva plantilla
Continúe haciendo clic en ‘Agregar nueva plantilla’.
Seleccione ‘Todos los productos’ en la pestaña ‘Usar en’ de la configuración de su plantilla para que la plantilla se aplique a todos sus productos a la vez.
Agregar cuerpo personalizado desde la biblioteca
Luego, haga clic en ‘Agregar cuerpo global’. En lugar de construir el cuerpo personalizado desde cero, seleccionaremos el diseño que acabamos de guardar en nuestra Biblioteca Divi.
Vaya a la pestaña ‘Sus diseños guardados’ para seleccionar su diseño guardado.
4. Guarde las opciones del generador de temas y vea la plantilla en los productos existentes
Una vez que se ha creado el cuerpo de su plantilla, solo queda una cosa por hacer; guardar los cambios. ¡Tan pronto como se haya guardado su nueva plantilla, puede obtener una vista previa de cada uno de sus productos y notar que se le aplica la misma plantilla de cuerpo!
Avance
Pensamientos finales
En esta publicación, le mostramos cómo crear una plantilla de página de producto para todo el sitio. Comenzamos modificando una página de producto existente, utilizando los módulos woo de Divi. Hicimos algunos cambios mínimos en la página del producto para que coincida con el paquete de diseño de serigrafía. Continuamos guardando el diseño de la página del producto en nuestra Biblioteca Divi. Luego, creamos una nueva plantilla y cargamos el diseño en el cuerpo de nuestra plantilla de página de producto para que se aplique a todo nuestro sitio web. ¡Esperamos que este tutorial lo ayude a crear hermosos sitios web de comercio electrónico con el nuevo Theme Builder de Divi! Si tiene alguna pregunta, asegúrese de dejar un comentario en la sección de comentarios a continuación.
Si está ansioso por aprender más sobre Divi y obtener más regalos de Divi, 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 los beneficios de este contenido gratuito.