Cómo crear una plantilla de página de producto Woo para todo el sitio con el generador de temas de Divi
Publicado: 2019-11-06El 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 en todo el sitio utilizando 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!
Avance
Descargue la plantilla de la página del producto de ejemplo GRATIS
Para tener en sus manos 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 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.
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. 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 la interfaz.
2. Personalice el diseño para que coincida con el estilo del paquete de diseño / sitio web
Colores de fondo
Dentro del Visual Builder, puede notar todos los elementos de corte 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 que sea simple. Empezaremos modificando algunos colores de fondo.
- Módulo de aviso de Woo Cart: color de fondo
Abra el módulo de aviso de Woo Cart y cambie su color de fondo.
- Color de fondo: # 29314f
- Módulo de pestañas de Woo: texto de pestañas / colores de fondo
Continúe abriendo el módulo Woo Tabs 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 la pestaña activa: # 000000
- Color del texto de la pestaña: #ffffff
Configuración del texto del cuerpo
También queremos realizar algunos cambios en el texto del cuerpo de los siguientes módulos:
- Módulo Woo Breadcrumb: Configuración de texto
- Módulo Woo Add To Cart: 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 las pestañas
Abra cada módulo enumerado 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: 16px (escritorio y tableta), 14px (teléfono)
- Altura de la línea de texto: 2em (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 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 darle estilo al texto del precio, comenzando con el Módulo de precio de Woo.
- Módulo Woo Price: Configuración del texto del precio
Cambie la configuración del texto del precio de la siguiente manera:
- Fuente de precio: Roboto
- Peso de la fuente del precio: Negrita
- Precio del color del texto: # ff7145
A continuación, abra el módulo de productos relacionados con Woo.
- Módulo de producto relacionado con Woo: Configuración del texto del precio
Y realice algunos cambios en la configuración del texto del precio:
- Fuente de precio: Roboto
- Peso de la fuente del precio: Negrita
- Precio del color del texto: # ff7145
- Tamaño del texto del precio: 16px
Configuración de botones
También tenemos dos botones en nuestra página de producto, cada uno de ellos debe ser diseñado.
- Módulo de aviso de Woo Cart: Configuración de botones
- Módulo Woo Add To Cart: 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: 100 px
- Espacio entre letras del botón: 1px
- Fuente del botón: Roboto
- Peso de la fuente del botón: negrita
- Estilo de fuente del botón: mayúsculas
- Acolchado superior: 20px
- Acolchado 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 color:
- 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
- Acolchado inferior: 50px
- Relleno izquierdo: 50px
- Relleno derecho: 50px
Por último, pero no menos importante, queremos diseñar la configuración de los campos de nuestro módulo Woo Add To Cart.
- Woo Add To Cart Module: Configuración de campos
Aplicar los siguientes cambios:
- Color de fondo de los campos: #efefef
- Color del texto de los campos: # 7f7f7f
- Fuente Fields: 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 el diseño completo en su Biblioteca Divi.
Ir a Divi Theme Builder
¡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 crear 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 Creador 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 te 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 obsequios de Divi, asegúrese de suscribirse a nuestro boletín por 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.