Divi Theme Builder – Tutorial Completo

El Divi Theme Builder es una interface dentro de Divi 4.0 que te permite usar el Divi Builder para construir theme templates y asignar esos templates personalizados a páginas o posts a través de tu theme (incluyendo tipos de post personalizados como Projectos Divi y Productos WooCommerce y Páginas).

Con el Theme Builder tienes control completo sobre cada elemento de tu web. Y al tener la posibilidad de usar o excluir templates en cualquier página o post de tu sitio, ya no hay necesidad de editar manualmente un fichero theme template nunca más.

Resumiendo, el Divi Theme Builder toma el potencial del Divi Builder y lo extiende a todas las áreas de el Divi Theme, permitiéndote construir cabeceras personalizadas así como footers, páginas de categorías, templates de productos, templates para posts de blog, páginas 404 y mucho más.

Aquí tienes solo algunas de las muchas cosas que puedes hacer con el Theme Builder:

• Diseñar una cabecera/menú global para todo tu sitio desde cero usando el Divi Builder
• Diseñar un pie de página global para todo tu sitio desde cero usando el Divi Builder
• Crear un template de página 404 personalizado
• Crear un diseño de template de post personalizado para todos los posts del blog usando el Divi Builder
• Crear un template de página de producto personalizado para todos los productos
• Crear un template personalizado para páginas de archivo
• Crear un template personalizado para todos los posts (o productos) con una cierta categoría
• Diseñar theme builder packs completos (algo así como Child Themes) que puedes exportar e importar en otras webs

No te pierdas las fabulosas ofertas del proveedor de hosting SiteGround. Una calidad excelente a un precio muy bajo. Perfecto para tu web WordPress.

Acceder al Divi Theme Builder

Se puede acceder al Divi Theme Builder desde el backend dentro de tu panel WordPress bajo la categoría Divi del menú de elementos.

Desde el panel WordPress, navegar a Divi > Theme Builder.

Esto te llevará a la interface principal del Divi Theme Builder desde donde podrás administrar todos tus templates.

Personalizando Templates con el Theme Builder de Divi

Template de Web por Defecto

Por defecto, hay un único elemento template llamado Default Website Template (Template Web por Defecto), que no puede ser borrado, pero que puede ser modificado. Este es el “theme template” estándar, y si se deja sin editar, las 3 áreas (Cabecera, Footer y Cuerpo) usarán los estilos estándar de Divi. Si el área Cabecera del Template de Web por defecto es editada, la Cabecera del theme será reemplazada en todo el sitio con el contenido del Divi Builder personalizado. Lo mismo es aplicable al Pie de Página y al Cuerpo.

Areas Globales del Template Web por Defecto

El template web por defecto está compuesto de 3 áreas: Cabecera global, Cuerpo global y Footer global.

Para empezar el proceso de creación de un nuevo template de área de contenidos, todo lo que tienes que hacer es clicar en alguna las respectivas áreas vacías.

Construir una Cabecera Global

Si quieres añadir y construir una cabecera global nueva para tu web, clica el área “Add Global Header” y selecciona la opción “Build Global Header”.

Similarmente alo que haría al diseñar un página en Divi, se te da la posibilidad de elegir como deseas empezar a construir tu diseño. Por ejemplo, podrías empezar más rápido el diseño con un Premade Layout o con un diseño de cabecera que tengas ya diseñado seleccionando la opción “Choose a Premade Layout”. Sin embargo, si quieres construir la cabecera desde cero, puedes seleccionar “Build From Scratch”.

Una vez que hayas seleccionado construir el diseño desde cero, serás llevado al “Template Layout Editor”. Ahí es donde usarás el Divi Builder para diseñar tu diseño de cabecera de igual modo a como diseñarías una página normal o post con el Divi Builder.

Ten en cuenta que todo lo que veas en este “editor de diseño de template”, será lo que se muestra en la cabecera de tu página. Y si se trata de una cabecera global, se mostrará en todo tu sitio por defecto, reemplazando la cabecera estándar de Divi.

Una vez que hayas finalizado el diseño de tu cabecera, asegúrate de guardar el diseño antes de salir del “editor de diseño del template”.

Ahora deberías poder ver una Cabecera Global verde en el template web por defecto. El color verde te recuerda que se trata de una cabecera global (que afecta a todo tu sitio web).

Tu web tendrá ahora una nueva cabecera global que reemplaza la cabecera estándar de Divi.

No te pierdas las fabulosas ofertas del proveedor de hosting SiteGround. Una calidad excelente a un precio muy bajo. Perfecto para tu web WordPress.

Construyendo un Cuerpo Global (Global Body)

En la mayoría de los casos, no querrás diseñar un área de cuerpo global para tus theme templates por defecto, ya que lo que seguramente deseas es tener más control sobre el Cuerpo en cada página.

Por ejemplo, puede que quieras empezar creando un área de Cuerpo global para tu template web por defecto (que será aplicada por defecto a todas las páginas y posts), pero puede desees crear un nuevo template con un template personalizado de área de Cuerpo para todos tus posts del blog. De ese modo no tendrías que preocuparte por el diseño de cada nuevo post. Tan solo tendrías que añadir nuevo contenido de Cuerpo.

Para añadir un Global Body a tu template web por defecto, simplemente has de clicar el área “Add Global Body” y después seleccionar la opción “Build Global Body”.

Esto te llevará al Template Layout Editor desde donde podrás diseñar el área de Cuerpo global de tu web.

Es importante incluir el módulo de contenido de post siempre que diseñes el área de cuerpo de tu template. El módulo de contenido de post es lo que permite a Divi llenar el template con la página o contenido de post.

El módulo de contenido de post muestra convenientemente contenido simulado para que sea fácil añadir estilo al contenido antes de tener el contenido real de todas las páginas y posts.

Este módulo de contenidos de post es esencialmente un marcador de posición para el contenido que se añade a una página en Divi. Si no estás usando el Divi Builder en una página, el módulo de contenidos de post mostrará el contenido dentro del editor WYSIWYG de una página o post en el backend.

Aquí tienes un ejemplo de como ese contenido aparecería en el área de Cuerpo Global del template.

Si decides usar el Divi Builder para editar una página o post, el área disponible para el contenido Divi Builder estará dentro del área designada del módulo de contenidos de post en el Cuerpo del template.

Por eso en la mayoría de los casos no es recomendable tener un área global body para tu web a menos que sea por una razón específica. Crear un Cuerpo Global puede imponer limitaciones innecesarias a la hora de diseñar contenido de página en Divi.

Si decides usar un area de cuerpo global para tu template web por defecto, es recomendable que te asegures que tu módulo de contenidos de post abarque todo el ancho del diseño para que no te veas limitado de ninguna manera por el espaciado a la hora de diseñar páginas con el Divi Builder.

No te pierdas las fabulosas ofertas del proveedor de hosting SiteGround. Una calidad excelente a un precio muy bajo. Perfecto para tu web WordPress.

Construyendo un Global Footer

El Divi Theme Builder te permite reemplazar el footer estándar de Divi (y barra del footer) por un pie de página nuevo y personalizado que puedes diseñar completamente desde cero usando el Divi Builder.

Para construir un global footer para tu web, simplemente clica el área “Add Global Footer” y selecciona “Build Global Footer”.

A continuación usa el poder del Divi Builder para diseñar el footer dentro del Template Layout Editor. ¡Y no olvides guardar el diseño!

Nota: También puedes optar por añadir uno los premade layouts disponibles desde Elegant Themes al editor de template de footer, para acelerar el diseño de tu pie de página. Puedes hacer eso en cualquier momento clicando el botón Añadir desde la Biblioteca en el menú de ajustes en la parte inferior del editor.

Una vez que tienes un Global Header, Body, y Footer puesto, la página tendría más o menos este aspecto.

El Global Body No es Necesario

Como hemos mencionado antes, el Cuerpo Global no es necesario. Puedes borrar fácilmente el Cuerpo Global clicando el icono de la basura.

Sin el Global Body, puedes tener control total sobre el diseño de tu página usando el Divi Builder.

Una vez que hayas finalizado el diseño de tu página, el Global Header y Global Footer permanecerán mientras el contenido de la página se muestra de manera muy bella como cabría esperar.

Custom Templates

El template web por defecto controla el template para todo el sitio. Sin embargo, los templates personalizados (custom) te permiten sobreescribir el template por defecto y ofrecer un template customizado para cualquier página o post de tu web. En otras palabras, los custom templates te permiten crear templates para páginas o posts que no quieres que tomen el template por defecto.

No te pierdas las fabulosas ofertas del proveedor de hosting SiteGround. Una calidad excelente a un precio muy bajo. Perfecto para tu web WordPress.

Añadir un Nuevo Template

Para crear un nuevo template, simplemente clica el cajetín “Add New Template” con el icono del + gris.

Esto te permitirá acceder al conjunto de Ajustes del Template para gestionarlo a tu gusto. En otras palabras, podrás indicar a qué páginas o posts quieres asignar el template.

Administración de la Asignación de los Templates

“Usarlo en” Vs “Excluirlo de”

La asignación de los templates puede ser seleccionada desde las etiquetas “Use on” y “Exclude From”. Simplemente usa la etiqueta que te resulte más cómoda para asignar los templates a tus páginas o posts. También puedes usar una combinación de ambas etiquetas si quieres.

Por ejemplo, puedes optar por usar el template en todas las páginas y posts pero excluirlo de alguna página específica o post.

Nota: Si hay conflicto entre una selección de inclusión y otra de exclusión, la selección de exclusión es la que predomina. Por ejemplo si optas por incluir la página Home y también excluir el template de la home, el resultado final será que el template es excluido de la Homepage.

Elige entre cualquier theme template

Hay templates para todo tipo de página o post y archivos. Puedes incluso asignar templates a las páginas de WooCommerce y de productos si tienes instalado WooCommerce en tu sitio.

Asignaciones Macro y Micro

Los templates pueden ser asignados a nivel macro y/o micro. Por ejemplo, puedes optar por asignar el template a todas las páginas de tu sitio (nivel macro) o puedes optar por asignar el template a un post específico (nivel micro). ¡O ambos! Puedes incluso seleccionar asignaciones múltiples, teniendo control completo sobre donde te gustaría asignar tu template en tu sitio web.

Asignaciones conflictivas

Si el usuario asigna un template a una página que ya está asignada a otro template, la última asignación es la que prevalece y la otra es eliminada. De todos modos te aparecerá un mensaje de aviso advirtiéndotelo antes de que guardes el template.

Renombrar Templates Personalizados

Una vez que hayas seleccionado todas tus asignaciones, verás un nuevo nombre de template que se ha generado basado en tu(s) selección(es). Cuando pases el cursor por encima del área título de la tarjeta del template, te aparecerá un mensaje mostrando la lista de donde el template está en uso y de donde está excluido. Puedes renombrar ese template clicando su nombre y editando el nombre.

Aviso de Template sin Asignación

Si no das ninguna asignación a un template, verás un texto de advertencia en lugar del nombre del template que dice asi: “Unassigned”.

No te pierdas las fabulosas ofertas del proveedor de hosting SiteGround. Una calidad excelente a un precio muy bajo. Perfecto para tu web WordPress.

Areas del Template Personalizadas

Al igual que el template web por defecto (o Template Global), un template personalizado tendrá también las siguientes áreas: Cabecera, Cuerpo y Pie de Página.

Si el template web por defecto posee diseños de template globales en cualquiera de esas 3 áreas, esos diseños globales aparecerán automáticamente en el nuevo template.

Como Manejar Elementos Globales en Nuevos Templates

No tienes por qué mantener el diseño global en tu nuevo template. Puedes usar las opciones de área del template para borrar el diseño y crear uno nuevo desde cero, o bien deshabilitar global y retocar el diseño de acuerdo a tus necesidades.

Por ejemplo si tienes un Global Header en el template web por defecto, tu nuevo template heredará esa Cabecera Global. Puedes optar por hacer algo de lo siguiente:

1. Puedes usar esa Cabecera Global en tu nuevo template

2. Puedes deshabilitar Global para así poder retocar el diseño para un template personalizado

3. Puedes borrar el Global Header y construir una Cabecera Personalizada desde cero para el template o añadir uno desde la biblioteca

4. También puedes optar por dejar el área Custom Header vacia en cuyo caso heredará la cabecera estándar de Divi theme.

Añadir un Area template desde la Biblioteca

Si deseas tener un area de template personalizada en tu nuevo template, puedes optar por añadir un diseño desde la biblioteca de Divi. Esta funcionalidad es similar a cuando añades un nuevo layout a tu página usando el Divi Builder. Para añadir un “layout” (diseño predefinido) al área template desde la biblioteca, clica el área template en cuestión y selecciona “Add from Library”. Se abrirá un popup desde donde podrás elegir cualquier diseño ya hecho, guardado o de una página existente.

Una vez que el layout ha sido añadido al área template, puedes seleccionar el icono de la rueda dentada para editar el diseño usando el Divi Builder dentro del Template Layout Editor.

Drag and Drop Template “Areas”

Las áreas template pueden ser arrastradas y colocadas (drag and drop) en las áreas de contenido de otro template. Esta es una manera fácil y rápida de duplicar y colocar un área template mediante el cómodo sistema de arraste de elementos “drag and drop”. Al mover el área de un template a otro, ésta no desaparece del primer template sino que se duplica para ir a parar al otro template. Es decir, no se trata de un Cortar y Pegar sino más bien de un Copiar y Pegar.

Opciones de Visibilidad del Area Template: Ocultar/Mostrar las áreas Header, Body y Footer

Ademñas de ser capaz de personalizar cada área de un template, también puedes conmutar la visibilidad del área para mostrarla o esconderla en el Front End, simplemente clicando el icono del “ojo” que hay junto a cada área. Por ejemplo, puedes esconder el área de Cabecera y de Footer de tu página 404.

Nota: Ocultar un Template Area no vuelve al área a su formato por defecto, sino que la oculta en el front end.

Ajustes de Custom Template

Menú de Ajustes del Template

Cuando pasas el cursor sobre un template dentro del theme builder, aparece un menú de ajustes del template arriba a la izquierda del cajetín del template. Este menú es muy similar a los menús que ves cuando pasas el cursor sobre una sección, fila o módulo dentro del Divi Builder.

El Menú incluye iconos para las siguientes funciones:

• Template Settings – Aquí puedes adminstrar las asignaciones del template
• Duplicate Template – Esto duplica el template para tener rápidamente otro template personalizado.
• Duplicar un template activa lo mismo que al clicar el “Add New Template”. La diferencia está en que depués de definir los ajustes del template, el template generado usa la misma Area Cabecera, Area de Cuerpo y Area de Footer que el template que ha sido duplicado.
• Delete Template – Esto borrará el template. Cualquier página, post o archivo que estén asignados con ese template, volverán a tener el template web por defecto y/o el layout de Divi estándar para esa página (si no se ha creado un template por defecto).
• Export Template – Puedes clicar el icono de exportar template para exportar un fichero .json de este template específico. Una vez que clicas el icono de exportar template, metes un nombre para el fichero de exportación y clicas el botón “Export Divi Theme Builder Template”.

• Más Opciones de Ajuste – El icono para más ajustes abre una lista de todos los ajustes que se pueden hacer a un template.

Construir una Cabecera Personalizada

Construir un Custom Header es el mismo proceso que construir un global header. Ya que la cabecera es donde tendrás que incluir el menú principal de tu web, es importante entender como usar el Menu Module que ha sido creado específicamente para el theme builder.

Construir un Cuerpo Personalizado

Construir un Area Custom Body para tu template puede seruna manera genial de añadir diseño y/o contenido al cuerpo de un montón de páginas o posts de un plumazo. Y si usas contenido dinámico, puedes realmente optimizar el diseño y funcionalidad de tus posts de blog o de los productos WooCommerce.

Construir un Pie de Página Personalizado

Construir un Custom Footer es el mismo proceso que construir un global footer. Es importante recordar que cualquier pie de página personalizado añadido a un template sobreescribirá el footer estándar de Divi, incluyendo la barra de footer inferior.

Guardar Cambios con el Theme Builder

Guardar y Cancelar Template Layouts

Cuando has acabado de crear tu template, es importante que guardes tus cambios. Para ello debes clicar el botón de Guardar en la parte inferior. Si deseas cancelar los cambios hechos al diseño, simplemente has de clicar la X arriba a la derecha.

Nota: Si clicas el icono de la X durante la creación (sin haber guardado), el diseño del template no se creará ni se guardará.

No te pierdas las fabulosas ofertas del proveedor de hosting SiteGround. Una calidad excelente a un precio muy bajo. Perfecto para tu web WordPress.

Guardar los Cambios del Theme Builder

Al igual que con las Opciones del Divi Theme, debes guardar los cambios del Theme Builder para que tomen efecto. Si refrescas la página o cierras la ventana sin guardar, los cambios se perderán.

Usar Contenido Dinámico dentro del Theme Builder

El Contenido Dinámico (por ejemplo el Título, Imagen Destacada, Contenido del Post, etc.) pueden ser incluidos en diseños Global o Custom Template. Esta es una poderosa herramienta que te permite optimizar el diseño y funcionalidad de tu web, especialmente para blog posts y/o productos de WooCommerce.

Construir un Template de Blog Post “Site-Wide”

Los posts de blog son un gran ejemplo de donde se necesita un template personalizado con contenido dinámico. Esto te permitirá diseñar un template de post que será aplicado a todos los posts del blog en todo el sitio web (site-wide) usando el Divi Builder y contenido dinámico. Una vez hecho todo lo que tendrías que hacer es actualizar contenido del Cuerpo para todos los futuros posts. El nuevo contenido del post heredará el diseño del Custom Template.

Aquí tienes un rápido ejemplo de como hacer esto:
Primero, creas un nuevo template y asignas el template a Todos los Posts. Entonces, añades un Cuerpo personalizado al template.

Usando el Template Layout Editor, diseña todo el layout usando el Divi Builder combinado con los módulos y opciones de contenido dinámico que integra Divi.

Por ejemplo, podrías usar el Post Title Module para mostrar el título del post de manera dinámica.

O usar un módulo de texto que traiga la fecha de publicación del post.

Y lo que es más importante, debes incluir el módulo de Contenido del Post cuando crees cualquier diseño de cuerpo personalizado para tu template. El Módulo Contenido de Post incluye el área para contenido de post o página, para que sea mostrado dentro del Area de Cuerpo del template.

Aquí tienes una ilustración de todo un diseño para un blog post template usando el contenido dinámico:

Una vez el template ha sido creado, puedes crear fácilmente un nuevo blog post usando el editor de post por defecto de WordPress y ver como el post hereda el diseño del blog post template que has creado usando el Divi Theme Builder.

También puedes usar el Divi Builder en blog posts con este custom template. Funcionará del mismo modo. Cualquier cosa que construyas con el Divi Builder para tu post se mostrará dentro del área designada por el Post Content Module en el diseño del template.

Construir una Página de Producto Site-Wide

El Contenido Dinámico no solo se aplica a los templates de post de blog. Puedes también usar los módulos WooCommerce integrados en Divi para construir un template personalizado de Página de Producto para todo el sitio web (site-wide).

Para hacerlo, simplemente crea un nuevo template y asigna el template a “All Products”. Entonces añade un Custom Body al template y clica para construir el diseño del cuerpo usando el editor de templates.

Luego usa el Divi Builder y los módulos Woo para diseñar el template de páginas de productos.

Ahora, siempre que crees un nuevo producto en el backend usando el editor estándar de página de producto, el producto heredará automáticamente el diseño del template body asignado.

No te pierdas las fabulosas ofertas del proveedor de hosting SiteGround. Una calidad excelente a un precio muy bajo. Perfecto para tu web WordPress.

Opciones de Portabilidad para Theme Builder Templates

Exportar e Importar Templates

Usando las Opciones de Portabilidad del Theme Builder, puedes exportar todos o parte de los theme templates en un fichero. Estos ficheros de exportación incluirán todos los diseños de la biblioteca que están asociados con cada template y todos los datos de asignación del template.

Para acceder a la opción de Portabilidad del Theme Builder, clica el icono de portabilidad a la derecha de la barra púrpura en la parte superior de la interface Theme Builder.

El modo portabilidad aparecerá con la pestaña de exportación abierta por defecto. Da un nombre al fichero de exportación, actualiza la opción exportar (si es necesario) y clica para exportar el fichero.

Si dejas que la opción exportar exporte todos los templates, todos los theme templates serán exportados en el fichero.

Si des-seleccionas la opción “Export All Templates”, verás una lista de opciones, incluyendo templates específicos que puedes elegir para ser incluidos en el fichero de exportación.

Para importar un fichero theme builder template json a tu sitio web, necesitarás desplegar el modo portabilidad y seleccionar la pestaña importar. Selecciona el fichero que te gustaría importar, actualiza las opciones de sobreescritura (si es necesario) y clica para importar el fichero.

Importante: Al importar, se importa todo, incluso templates que están asignados a páginas y posts que no existen en la actual instalación WP. Todos los conflictos pueden resolversa permitiendo a los templares importados sobreescribir los templates existentes en la web. Esto significa que el Template por Defecto es sobreescrito y todas las páginas o posts asignados de los templates importados prevalecerán.

Por ejemplo, si importas un template que está asignado a la página 404, quitará la página 404 del template actual que está asignado a la página 404.

Importar y Exportar Theme Builder Packs Enteros

Las exportaciones de Theme Builder son lo que se llama “Theme Builder Packs”. Piensa en ellos como Divi Layout Packs, excepto que en este caso se trata de la estructura general de la web en lugar de diseños de página individuales. Los Theme Builder Packs quitan la necesidad de tener Child Themes en muchos casos y te permiten crear theme templates prediseñados que pueden ser usados en cualquier web.

No te pierdas las fabulosas ofertas del proveedor de hosting SiteGround. Una calidad excelente a un precio muy bajo. Perfecto para tu web WordPress.