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 desde allí, podemos asignar el diseño a todas nuestras páginas de productos. Eso es exactamente lo que le mostraremos en el tutorial de caso de uso de hoy. Lo guiaremos a través de la configuración de una plantilla de página de productos de Woo en todo el sitio usando Divi. Comenzaremos diseñando la página predeterminada del producto woo 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

plantilla de página de producto

1. Habilite Divi Builder en el producto existente

Habilitar Divi y modificar configuraciones de 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 primero el diseño en una página de producto individual. Personalmente, prefiero crear el diseño en una página de producto individual primero. Le permite publicar el diseño y ver el resultado en vivo antes de aplicarlo realmente 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 página a ancho completo.

plantilla de página de producto

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.

plantilla de página de producto

2. Personalice el diseño para que coincida con el estilo del sitio web / paquete de diseño

Colores de fondo

Dentro del Visual Builder, puede notar todos los elementos de cortejo que necesita. Vamos a cambiar la configuración de algunos de estos módulos para que coincida con el paquete de diseño de serigrafía. Los cambios que estamos haciendo 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 con la personalización como desee, pero para este tutorial, trataremos de simplificarlo. Comenzaremos modificando algunos colores de fondo.

  • Módulo de aviso del carrito Woo: color de fondo

Abra el Módulo de aviso de Woo Cart y cambie su color de fondo.

  • Color de fondo: # 29314f

plantilla de página de producto

  • Módulo Woo Tabs: Texto de pestañas / Colores de fondo

Continúe abriendo el Módulo de pestañas 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 la pestaña activa: # 000000
  • Color del texto de la pestaña: #ffffff

plantilla de página de producto

Configuración de texto del cuerpo

También queremos hacer algunos cambios en el cuerpo del texto de los siguientes módulos:

  • Woo Breadcrumb Module: Configuración de texto
  • Woo Add To Cart Module: 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
  • Woo Tabs Module: 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 la línea de texto: 2em (computadora de escritorio y tableta), 1.7em (teléfono)

plantilla de página de producto

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:

  • Woo Title Module: 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

plantilla de página de producto

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

plantilla de página de producto

Configuración de texto de precio

También queremos diseñar el texto del precio, comenzando con el Módulo de precios Woo.

  • Módulo de precios de Woo: ajustes de texto de precios

Cambie la configuración del texto del precio de la siguiente manera:

  • Fuente del precio: Roboto
  • Peso de fuente de precio: negrita
  • Color del texto del precio: # ff7145

plantilla de página de producto

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 realice algunos cambios en la configuración del texto del precio:

  • Fuente del precio: Roboto
  • Peso de fuente de precio: negrita
  • Color del texto del precio: # ff7145
  • Tamaño del texto del precio: 16px

plantilla de página de producto

Configuraciones de botones

También tenemos dos botones en nuestra página de productos, cada uno de ellos necesita un estilo.

  • Módulo de aviso de Woo Cart: configuración de botones
  • Woo Add To Cart Module: 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: 14 px
  • 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

plantilla de página de producto

  • Radio del borde del botón: 100 px
  • Espacio entre letras de botones: 1 px
  • Fuente del botón: Roboto
  • Peso de fuente del botón: negrita
  • Estilo de fuente del botón: mayúscula

plantilla de página de producto

  • Relleno superior: 20px
  • Relleno inferior: 20px
  • Relleno izquierdo: 30px
  • Relleno derecho: 30px

plantilla de página de producto

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

Use el siguiente código de color:

  • Color de fondo: #efefef

plantilla de página de producto

También estamos modificando el espacio de la columna 2.

  • Columna 2: Espaciado

Use los siguientes valores de espaciado:

  • Relleno superior: 50px
  • Relleno inferior: 50px
  • Relleno izquierdo: 50px
  • Relleno derecho: 50px

plantilla de página de producto

Por último, pero no menos importante, queremos diseñar la configuración de los campos de nuestro módulo Añadir al carro de Woo.

  • 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 de los campos: Roboto
  • Campos Fuente Peso: Negrita

plantilla de página de producto

3. Crear nueva plantilla para productos e importar diseño de página de producto en el área del cuerpo

Guardar diseño de página del producto en Divi Library

Una vez que haya completado el diseño de la página del producto, puede guardar el diseño completo en su Biblioteca Divi.

plantilla de página de producto

Ir a Divi Theme Builder

¡Es hora de convertir el diseño en una plantilla de página de producto! Para hacerlo, navegue hasta el generador de temas en la configuración de Divi.

plantilla de página de producto

Agregar nueva plantilla

Continúe haciendo clic en ‘Agregar nueva plantilla’.

plantilla de página de producto

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.

plantilla de página de producto

Agregar cuerpo personalizado de 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.

plantilla de página de producto

Vaya a la pestaña ‘Sus diseños guardados’ para seleccionar su diseño guardado.

plantilla de página de producto

4. Guardar las opciones del generador de temas y ver la plantilla en 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!

plantilla de página de producto

Avance

plantilla de página de producto

Por Prunaestudio

Por Prunaestudio

Prunaestudio es un estudio de diseño web ubicado en Valencia (España). Estamos especializados en el diseño web basado en WordPress con la plantilla premium de Elegantthemes, Divi.

* Todos el contenido pertenece y se ha traducido del blog de Elegantthemes (Divi Resources)

Nuestras últimas entradas

Consigue la plantilla Divi

Más de 800 diseños de sitios web prefabricados vienen empaquetados dentro de Divi de forma gratuita.

You have Successfully Subscribed!