Si eres de los que utiliza el tema Divi en su web, ya sabrás que desde hace unas semanas está disponible el Theme Builder, que permite editar las partes partes generales del sitio, como son la cabecera, el cuerpo o el footer.
Esta funcionalidad tan esperada ha llegado con la gran actualización de Divi 4.0, que ya analicé unos días después de su lanzamiento.
Además, en una actualización previa lanzada en septiembre también se añadió el constructor de WooCommcerce para Divi, otra reivindicación común entre los diseñadores web que usamos este tema, pues hasta entonces no era posible modificar los productos sin recurrir a plugins o a código.
Es decir, ahora tenemos disponibles 16 módulos nuevos específicos para WooCommerce.
Pues bien, hoy te voy a explicar cómo diseñar un producto de WooCommerce con Divi a paso para que personalices al máximo las fichas de tu tienda online.
Resumen
Maquetar una ficha de producto de WooCommerce con Divi
Una vez has instalado, activado y configurado WooCommerce, el primer paso es crear un producto y completar los campos según tus necesidades:
- Nombre del producto (título)
- Descripción corta.
- Descripción larga.
- Precios (normal y rebajado).
- Categorías y etiquetas.
- Imagen del producto.
- Galería de fotos.
- Variaciones e información adicional si la hubiera.
En este ejemplo puedes ver cómo lo he hecho yo:
Una vez hayas completado toda la información de la ficha de producto, la publicas y así quedaría por defecto:
¡Ahora empezamos el proceso de diseño de un producto de WooCommerce con Divi!
Para ello, dentro de la edición de la ficha de producto clicas en el botón usar el constructor Divi.
Una vez se ha cargado el editor visual, ya puedes empezar con el diseño y maquetación. Y si te fijas en los módulos de Divi para WooCommerce, verás que aparecen los 16 que te mostré arriba.
Como ves, ahora puedes editar, mover y arrastrar cualquiera de los módulos a tu gusto: título, descripción, precio, categoría, etc.
Una vez hayas concluido el diseño y esté todo a tu gusto, solo tienes que guardar los cambios y los verás reflejados en tu ficha de producto.
Este es el resultado de mi diseño:
Cómo extender tu diseño de ficha con Divi al resto de productos
Ahora que has maquetado tu ficha de producto a tu gusto con Divi, es el momento de extender este diseño al resto de artículos de tu tienda online.
¿Cómo puedes hacerlo?
¡Con Divi Theme Builder el realmente sencillo!
Para ello, debes seguir los siguientes pasos:
1) Vas a Theme Builder dentro de las opciones de Divi:
2) Añades una nueva plantilla y seleccionas todos los productos o la categoría específica a la que quieras asignar este diseño:
3) Clicas en el botón azul «create template» y editas el cuerpo de la plantilla: «build custom body«.
4) Una vez se han cargado las opciones del editor visual de Divi, seleccionas «elegir diseño» (la opción central):
5) Ahora eliges la tercera pestaña (sus páginas existentes) y seleccionas el producto que acabas de diseñar:
6) Guardas los cambios tanto en el editor visual como en Divi Theme Builder y ya tienes asociado tu diseño de ficha a todos los productos de la tienda.
Por último, te dejo un vídeo tutorial en el que te explico todo el proceso paso a paso:
Portada: elegantthemes.com/blog
