La Guía más completa para usar Divi Theme Builder

Esta guía de Divi Theme Builder es una recopilación de tutoriales para poder aprovechar al máximo el nuevo constructor de Divi llamado Divi Theme Builder que ya viene incorporado en Divi 4.

Llevamos poco tiempo con la nueva versión de Divi 4, y puede que comenzar a realizar un diseño desde cero te cueste algo de trabajo. Y la verdad es que a priori no es muy intuitivo. Menos mal que tenemos los tutoriales básicos en el blog de Elegant Themes para coger rápidamente los conceptos básicos. Pero aún así, puede costarnos empezar o encontrar aquello que necesitamos en concreto.

Estos tutoriales me han servido de apoyo para realizar mi primer diseño realizado con Divi Theme Builder. En algunos momentos me he atascado y no sabía cómo avanzar y gracias a estos tutoriales encontré la solución. Por eso, he decidido hacer una recopilación de los más importantes y los he ordenado según categoría para que podamos encontrar la solución más rápido.

También te puede interesar:
Todo sobre la plantilla Divi WordPress
La nueva versión versión de Divi 4
Curso Gratuito de Diseño Web con Divi
Divi Child Theme [+Descarga]

¿Qué es Divi Theme Builder?

Antes de empezar, es bueno que conozcas qué es Divi Theme Builder. Divi Theme Builder es el nuevo módulo de Divi que te permite diseñar por completo una web. A diferencia del tema de Divi, esto te permite diseñar tanto el header como el footer, el contenido, y diseñar el resto de páginas de cualquier web hecha con WordPress, como son las páginas de categorías o etiquetas, o la página de resultados y la página de error 404.

Ahora, Divi Theme Builder también permite diseñar las páginas de WooCommerce. Así podrás personalizar las páginas de producto, categorías, resultados, tienda, etc.

Con el nuevo Divi Theme Builder podrás hacer una plantilla desde cero sin tener que escribir nada de código PHP y podrás exportarla e importarla en el sitio que quieras usando la interfaz del usuario.

Gracias a Divi Theme Builder he podido realizar un diseño desde cero de una plantilla que se quedó obsoleta y que me gustaba mucho. He podido copiar al diseño gracias a Divi Theme builder y dejar de tener un sitio web desactualizado y con problemas de seguridad a  tener un sitio seguro y actualizado manteniendo el 99% del aspecto que tenía antes.

Diseño básico con Divi Theme Builder

Para realizar un diseño con Divi Theme Builder es necesario realizar al menos estos diseños para que ningún enlace de WordPress os muestre una página en blanco sin diseño.

Uno de los problemas que he sufrido con Divi Theme Builder es que si no realizas todos estos diseños es que se muestra una página vacía, y eso te puede generar un vacío en tu web y que el usuario se acabe yendo o no sepa por dónde continuar.

Aquí os dejo una captura de todas las páginas que tuve que diseñar. Este diseño es sin woocommerce. Si vas a realizar un diseño de WooCommerce tendrás que incluir también los diseños de Producto, Categoría de Producto, Tienda, etc.

Tutoriales de Divi Theme Builder

Os dejo ahora con el listado de tutoriales que os recomiendo seguir para vuestro diseño web con Divi Theme Builder y así poder realizar todas las páginas que necesitéis.

Yo os recomiendo partir siempre de la plantilla Divi, que viene prácticamente vacía y que a partir de ella podemos adaptarnos mejor a cualquier diseño que se nos pueda ocurrir.

Los más importantes os lo he remarcado en negrita para que os quedéis con los indispensables que debéis leer.

Divi Header & Footer

Con los siguientes tutoriales aprenderemos a diseñar por completo un header o cabecera y un footer o pie por completo. 

How to Create a Custom Global Header with Divi’s Theme Builder: Este es el principal tutorial que debes seguir para diseñar la cabecera con Divi Theme Builder. Contiene los aspectos básicos para diseñar tu header con Divi.
https://www.elegantthemes.com/blog/divi-resources/how-to-create-a-custom-global-header-with-divis-theme-builder

How to Animate Your Global Header with Divi:
https://www.elegantthemes.com/blog/divi-resources/how-to-animate-your-global-header-with-divi

How to Blend Your Header & Body Using Divi’s Post Content Module & Section Dividers
https://www.elegantthemes.com/blog/divi-resources/how-to-blend-your-header-body-using-divis-post-content-module-section-dividers

How to Create a Mobile Collapsing Nested Menu with Divi’s Theme Builder
https://www.elegantthemes.com/blog/divi-resources/how-to-create-a-mobile-collapsing-nested-menu-with-divis-theme-builder

How to Reveal Your Global Header While Scrolling Up & Hide While Scrolling Down with Divi
https://www.elegantthemes.com/blog/divi-resources/how-to-reveal-your-global-header-while-scrolling-up-hide-while-scrolling-down-with-divi

How to Create an Animated Promo Bar for Your Page Templates in Divi
https://www.elegantthemes.com/blog/divi-resources/how-to-create-an-animated-promo-bar-to-page-templates-in-divi

How to Create a Rotated Global Header with Divi’s Theme Builder
https://www.elegantthemes.com/blog/divi-resources/how-to-create-a-rotated-global-header-with-divis-theme-builder

How to Shrink Your Global Header’s Size When Scrolling with Divi’s Theme Builder
https://www.elegantthemes.com/blog/divi-resources/how-to-shrink-your-global-headers-size-when-scrolling-with-divis-theme-builder

How to Create a Global Transparent Floating Menu Bar with Divi’s Theme Builder
https://www.elegantthemes.com/blog/divi-resources/how-to-create-a-global-transparent-floating-menu-bar-with-divis-theme-builder

How to Create a Custom Fullscreen Global Header with Divi’s Theme Builder
https://www.elegantthemes.com/blog/divi-resources/how-to-create-a-custom-fullscreen-global-header-with-divis-theme-builder

Contenido principal

Para la parte central de la web, el contenido en sí, te vendrán muy útiles estos tutoriales.

5 Tips for Organizing Blog Page Content in Divi
https://www.elegantthemes.com/blog/divi-resources/5-tips-for-organizing-blog-page-content-in-divi

How to Design a Recent Posts by Category Layout with Cool Hover Effects in Divi: Tutorial para crear un bloque con las entradas recientes de tu blog. 
https://www.elegantthemes.com/blog/divi-resources/how-to-design-a-recent-posts-by-category-layout-with-cool-hover-effects-in-divi

How to Dynamically Create a Simple UX-Friendly Blog Post Template with Divi
https://www.elegantthemes.com/blog/divi-resources/how-to-dynamically-create-a-simple-ux-friendly-blog-post-template-with-divi

How to Optimize Your Sidebar on Mobile Using the Divi Theme Builder: Muy útil para realizar el diseño correcto del sidebar para móviles.
https://www.elegantthemes.com/blog/divi-resources/how-to-optimize-your-sidebar-on-mobile-using-the-divi-theme-builder

How to Add Sticky Sidebar CTAs to a Blog Post Template in Divi
https://www.elegantthemes.com/blog/divi-resources/how-to-add-sticky-sidebar-ctas-to-a-blog-post-template-in-divi

A Guide to Using Sidebars with the Divi Theme builder: Otro tutorial indispensable que debes leer para diseñar correctamente tu sidebar.
https://www.elegantthemes.com/blog/divi-resources/a-guide-to-using-sidebars-with-the-divi-theme-builder

How to Design a Blog Post Template with Divi’s Theme Builder (FREE Download)
https://www.elegantthemes.com/blog/divi-resources/how-to-create-a-site-wide-woo-product-page-template-with-divis-theme-builder

How to Use the Post Content Module in the Divi Theme Builder
https://www.elegantthemes.com/blog/divi-resources/how-to-use-the-post-content-module-in-the-divi-theme-builder

Footer

Para diseñar el footer o pie de la web, no hay muchos tutoriales. Con este tutorial podrás diseñar el pie de tu web sin problemas. Esta es la parte más sencilla de Divi Theme Builder y la que menos problemas da.

How to Create a Custom Footer with Divi’s Theme Builder:
https://www.elegantthemes.com/blog/divi-resources/how-to-create-a-custom-footer-with-divis-theme-builder

Otras páginas que necesitamos para nuestro diseño en WordPress

Después tendremos que realizar otros diseños extras que a priori no detectaremos pero si pensamos un poco veremos que son necesarios.

How to Create a Search Results Page Template in Divi: Cuando realizas una búsqueda en tu web y quieres que te muestre los resultados debes diseñar la página de resultados. Si no lo haces, se quedará en blanco y el usuario se perderá. Esta página, aunque no parece muy necesaria, es muy útil en esos momentos en los que un usuario le da por buscar algo en tu blog.
https://www.elegantthemes.com/blog/divi-resources/how-to-create-a-search-results-page-template-in-divi

How to Create a 404 Page Template with Divi’s Theme Builder: la página de error 404 ya viene incluida con Divi 4. Aunque ya hice un tutorial específico sobre esto, ahora es más sencilla de diseñar si seguimos este tutorial. Hay que aprovechar esta página para mostrar a los usuarios contenidos que le puedan ser de interés y evitar que se vayan por no haber encontrado lo que buscaban.
https://www.elegantthemes.com/blog/divi-resources/how-to-create-a-404-page-template-with-divis-theme-builder

Diseña las páginas de WooCommerce con Divi Theme Builder

Aquí tienes los principales tutoriales que necesitarás para poder diseñar a medida tu tienda online con WooCommerce utilizando Divi Theme Builder.

How to Create a Japanese Aesthetic Inspired Product Page Template with Divi
https://www.elegantthemes.com/blog/divi-resources/how-to-create-a-japanese-aesthetic-inspired-product-page-template-with-divi

How to Creatively Feature Popular Products on Your Divi Landing Page
https://www.elegantthemes.com/blog/divi-resources/how-to-creatively-feature-popular-products-on-your-divi-landing-page

How to Create a Site-Wide Woo Product Page Template with Divi’s Theme Builder
https://www.elegantthemes.com/blog/divi-resources/how-to-create-a-site-wide-woo-product-page-template-with-divis-theme-builder

How to Create a Responsive Block Design for Woo Product Pages with Divi
https://www.elegantthemes.com/blog/divi-resources/how-to-create-a-responsive-block-design-for-woo-product-pages-with-divi

Download a Beautiful Fullscreen Product Page for Divi
https://www.elegantthemes.com/blog/divi-resources/download-a-beautiful-fullscreen-product-page-for-divi

Download a Beautiful Fullscreen Product Page for Divi
https://www.elegantthemes.com/blog/divi-resources/download-a-beautiful-fullscreen-product-page-for-divi

How to Customize a Divi Product Page with Inline Dynamic Content
https://www.elegantthemes.com/blog/divi-resources/how-to-customize-a-divi-product-page-with-inline-dynamic-content

How to Use Dynamic Content to Create a WooCommerce Product Info Accordion in Divi
https://www.elegantthemes.com/blog/divi-resources/how-to-use-dynamic-content-to-create-a-woocommerce-product-info-accordion-in-divi

How to Create a WooCommerce Account Page with a Featured Product Section for Logged-In Users
https://www.elegantthemes.com/blog/divi-resources/how-to-create-a-woocommerce-account-page-with-a-featured-product-section-for-logged-in-users

How to Design Sticky Bars for Product Pages with Divi’s Woo Modules
https://www.elegantthemes.com/blog/divi-resources/how-to-design-sticky-bars-for-product-pages-with-divis-woo-modules

Divi Layouts

¿Necesitas un diseño personalizado? Aquí tienes tutoriales para crear contenido personalizado. Puedes utilizar campos personalizados y crear tu página de contenido a medida con los campos que necesites.

Divi Layouts for Photography Websites
https://www.elegantthemes.com/blog/divi-resources/divi-layouts-for-photography-websites

How to Create a Recipe Card Template with the Divi Theme Builder
https://www.elegantthemes.com/blog/divi-resources/how-to-create-a-recipe-card-template-with-the-divi-theme-builder

How to Toggle Between Images in a Stunning Divi Split Section Design
https://www.elegantthemes.com/blog/divi-resources/how-to-toggle-between-images-in-a-stunning-divi-split-section-design

Utilidades

How to Use Divi’s Theme Builder Portability (Import & Export) Features: Este tutorial es muy útil para poder exportar e importar tus diseños. Puedes hacer backup de ellos en un fichero JSON y usarlos en otra web, o guardarlos como copia de seguridad.
https://www.elegantthemes.com/blog/divi-resources/how-to-use-divis-theme-builder-portability-import-export-features

BONUS

Aquí tenéis algunos ejemplos que podéis descargar gratuitamente para poder partir de estos diseños o ver internamente cómo se hicieron para poder aprender.

Download a FREE Monthly/Yearly Pricing Toggle Design for Divi
https://www.elegantthemes.com/blog/divi-resources/download-a-free-monthly-yearly-pricing-toggle-design-for-divi

Download The First FREE Theme Builder Pack For Divi
https://www.elegantthemes.com/blog/divi-resources/download-the-first-free-theme-builder-pack-for-divi

Download The Second FREE Theme Builder Pack For Divi
https://www.elegantthemes.com/blog/divi-resources/download-the-second-free-theme-builder-pack-for-divi

Download The Third FREE Theme Builder Pack For Divi
https://www.elegantthemes.com/blog/divi-resources/download-the-third-free-theme-builder-pack-for-divi

Download the Fourth FREE Theme Builder Pack for Divi
https://www.elegantthemes.com/blog/divi-resources/download-the-fourth-free-theme-builder-pack-for-divi

Download the Fifth FREE Theme Builder Pack for Divi
https://www.elegantthemes.com/blog/divi-resources/download-the-fifth-free-theme-builder-pack-for-divi

Download the Sixth FREE Theme Builder Pack for Divi
https://www.elegantthemes.com/blog/divi-resources/download-the-sixth-free-theme-builder-pack-for-divi

Consigue tu licencia de Divi con un 20% de descuento o amplíala a lifetime con un 10% de descuento

Con el siguiente enlace podrás conseguir la licencia Divi developer con el 20% de descuento o ampliar tu licencia de developer a lifetime con un 10% de descuento.

Me gusta Divi y quiero mi descuento