Topbar: la barra superior con Theme Builder de Divi 5
Esta lección no crea archivos de código. Todo se configura directamente dentro del Divi Theme Builder usando el constructor visual. No hay que tocar ningún archivo PHP, CSS ni JavaScript.
1. ¿Qué es el Divi Theme Builder?
El Theme Builder es la herramienta de Divi para construir visualmente el encabezado (header), el pie de página (footer) y las plantillas del sitio.
Antes de esta lección, tu sitio usaba el header «por defecto» de Divi: ese encabezado azul oscuro con el logo «D» circular y los links del menú. Ese header se configura desde Opciones del Tema y tiene opciones muy limitadas.
Con el Theme Builder vas a construir un encabezado completamente personalizado, usando los mismos módulos que usás para editar cualquier página del sitio.
Analogía para entenderlo:
El header por defecto de Divi es como un auto que te dan en un color fijo. El Theme Builder es el taller donde podés pintarlo del color que quieras, cambiarle la tapicería, agregar accesorios — todo personalizado.
El header por defecto de Divi es como un auto que te dan en un color fijo. El Theme Builder es el taller donde podés pintarlo del color que quieras, cambiarle la tapicería, agregar accesorios — todo personalizado.
2. ¿Qué vamos a construir en este módulo?
El encabezado completo tendrá dos partes. Hoy construimos la primera:
- Topbar (lección de hoy): la franja fina azul oscuro con texto a la izquierda e íconos de redes a la derecha
- Menú principal (lección 6.2): barra blanca con logo, navegación y botón CTA
3. Paso 1 — Abrir el Theme Builder y crear el encabezado
1
Ir al Theme Builder
En el menú lateral de WordPress hacé clic en Divi → Theme Builder.
Vas a ver la pantalla con la Plantilla De Sitio Web Predeterminada y tres áreas vacías.
Ir al Theme Builder
En el menú lateral de WordPress hacé clic en Divi → Theme Builder.
Vas a ver la pantalla con la Plantilla De Sitio Web Predeterminada y tres áreas vacías.
2
Hacer clic en «Añadir Encabezado Global»
Hacé clic sobre el texto Añadir Encabezado Global (el área punteada arriba del todo).
Aparece un menú desplegable con dos opciones:
Hacer clic en «Añadir Encabezado Global»
Hacé clic sobre el texto Añadir Encabezado Global (el área punteada arriba del todo).
Aparece un menú desplegable con dos opciones:
3
Elegir «Crear Encabezado Global»
Hacé clic en la opción azul Crear Encabezado Global.
Esto abre el constructor visual de Divi 5 para el encabezado. Vas a ver una pantalla casi en blanco con la barra de herramientas arriba que dice Main Canvas a la izquierda y los botones Salir / Guardar a la derecha.
Elegir «Crear Encabezado Global»
Hacé clic en la opción azul Crear Encabezado Global.
Esto abre el constructor visual de Divi 5 para el encabezado. Vas a ver una pantalla casi en blanco con la barra de herramientas arriba que dice Main Canvas a la izquierda y los botones Salir / Guardar a la derecha.
¿Qué es el «Main Canvas»?
Es el lienzo principal donde se construye el encabezado. En el panel derecho vas a ver la sección «Encabezado» con tres pestañas: Contenido · Diseño · Avanzado. Esas pestañas controlan las opciones del encabezado completo.
Es el lienzo principal donde se construye el encabezado. En el panel derecho vas a ver la sección «Encabezado» con tres pestañas: Contenido · Diseño · Avanzado. Esas pestañas controlan las opciones del encabezado completo.
4. Paso 2 — Crear la sección de la Topbar
4
Hacer clic en el botón «+»
En el centro del lienzo vacío aparece un botón «+» de color verde. Hacé clic en él para insertar la primera sección.
Se crea automáticamente una sección vacía y el panel derecho cambia a los ajustes de Sección.
Hacer clic en el botón «+»
En el centro del lienzo vacío aparece un botón «+» de color verde. Hacé clic en él para insertar la primera sección.
Se crea automáticamente una sección vacía y el panel derecho cambia a los ajustes de Sección.
5
Configurar el color de fondo de la sección
Con la sección seleccionada, en el panel derecho estás en la pestaña Contenido. Buscá el bloque Fondo.
Hacé clic en + Añadir Color De Fondo.
Se abre el selector de color. En el campo de texto abajo escribí:
Configurar el color de fondo de la sección
Con la sección seleccionada, en el panel derecho estás en la pestaña Contenido. Buscá el bloque Fondo.
Hacé clic en + Añadir Color De Fondo.
Se abre el selector de color. En el campo de texto abajo escribí:
1E3A5F
→ presioná Enter
El lienzo se pone azul oscuro al instante. Cerrá el selector de color con la X.
6
Ajustar el espaciado (Relleno)
Hacé clic en la pestaña Diseño del panel derecho. Buscá el bloque Espaciado.
En la sección Relleno De configurá:
Ajustar el espaciado (Relleno)
Hacé clic en la pestaña Diseño del panel derecho. Buscá el bloque Espaciado.
En la sección Relleno De configurá:
| Superior | 6 px |
| Inferior | 6 px |
| Izquierda | 0 px |
| Derecha | 0 px |
Esto hace que la topbar sea una franja fina y discreta.
5. Paso 3 — Agregar la fila con dos columnas
7
Insertar una fila dentro de la sección
Dentro de la sección azul oscura, aparece el botón «+» para agregar contenido. Hacé clic en él.
Se abre la ventana «Insertar Módulo O Fila». Hacé clic en la pestaña Nueva Fila.
Elegí la estructura de 2 columnas iguales (la que tiene dos rectángulos iguales, 50% | 50%).
Insertar una fila dentro de la sección
Dentro de la sección azul oscura, aparece el botón «+» para agregar contenido. Hacé clic en él.
Se abre la ventana «Insertar Módulo O Fila». Hacé clic en la pestaña Nueva Fila.
Elegí la estructura de 2 columnas iguales (la que tiene dos rectángulos iguales, 50% | 50%).
6. Paso 4 — Columna izquierda: módulo Texto
8
Agregar el módulo Texto en la columna izquierda
Hacé clic en el «+» de la columna izquierda.
En la ventana de módulos buscá Texto y hacé clic en él.
Se agrega un módulo de texto con contenido de ejemplo. Hacé clic sobre el texto para editarlo en línea y reemplazalo con el texto de tu topbar, por ejemplo:
Agregar el módulo Texto en la columna izquierda
Hacé clic en el «+» de la columna izquierda.
En la ventana de módulos buscá Texto y hacé clic en él.
Se agrega un módulo de texto con contenido de ejemplo. Hacé clic sobre el texto para editarlo en línea y reemplazalo con el texto de tu topbar, por ejemplo:
✉ info@miescuela.com ☎ +54 11 1234-5678
Cambiar el color del texto a blanco: con el texto seleccionado, hacé clic en el ícono del balde de pintura en la barra flotante que aparece → elegí color blanco #ffffff.
7. Paso 5 — Columna derecha: módulo Seguir En Redes Sociales
9
Agregar el módulo de redes sociales en la columna derecha
Hacé clic en el «+» de la columna derecha.
En la ventana de módulos buscá Seguir En Redes Sociales y hacé clic en él.
Se agrega automáticamente con íconos de ejemplo.
Agregar el módulo de redes sociales en la columna derecha
Hacé clic en el «+» de la columna derecha.
En la ventana de módulos buscá Seguir En Redes Sociales y hacé clic en él.
Se agrega automáticamente con íconos de ejemplo.
10
Configurar las redes sociales (pestaña Contenido)
En el panel derecho, dentro del módulo Seguir En Redes Sociales, pestaña Contenido, buscá el bloque Elementos.
Vas a ver la lista de redes. Podés editar cada una con el ícono del lápiz ✏️, duplicar con el ícono de copiar, o eliminar con el tacho 🗑️.
Configurá tres redes: Facebook · YouTube · Instagram.
Configurar las redes sociales (pestaña Contenido)
En el panel derecho, dentro del módulo Seguir En Redes Sociales, pestaña Contenido, buscá el bloque Elementos.
Vas a ver la lista de redes. Podés editar cada una con el ícono del lápiz ✏️, duplicar con el ícono de copiar, o eliminar con el tacho 🗑️.
Configurá tres redes: Facebook · YouTube · Instagram.
11
Cambiar el color de los íconos a blanco
Hacé clic en la pestaña Diseño del módulo. Buscá el bloque Icono.
En Color Del Icono hacé clic en Elegir Un Color.
Escribí
Cambiar el color de los íconos a blanco
Hacé clic en la pestaña Diseño del módulo. Buscá el bloque Icono.
En Color Del Icono hacé clic en Elegir Un Color.
Escribí
ffffff en el campo de texto y presioná Enter.
12
Activar el tamaño personalizado del ícono
Debajo del color, encontrás la opción Usar Tamaño De Icono Personalizado.
Activá el switch (se pone azul). Aparece un nuevo campo: Tamaño De Fuente Del Icono.
Escribí
Activar el tamaño personalizado del ícono
Debajo del color, encontrás la opción Usar Tamaño De Icono Personalizado.
Activá el switch (se pone azul). Aparece un nuevo campo: Tamaño De Fuente Del Icono.
Escribí
16 (px).
13
Alinear los íconos a la derecha
En la misma pestaña Diseño, buscá la sección Diseño (más abajo).
En Justificar Contenido elegí la alineación Fin (último ícono del grupo, que alinea los elementos a la derecha).
Los íconos de redes sociales se mueven a la derecha de la columna.
Alinear los íconos a la derecha
En la misma pestaña Diseño, buscá la sección Diseño (más abajo).
En Justificar Contenido elegí la alineación Fin (último ícono del grupo, que alinea los elementos a la derecha).
Los íconos de redes sociales se mueven a la derecha de la columna.
8. Paso 6 — Guardar
14
Guardar el encabezado
Hacé clic en el botón Guardar (arriba a la derecha, botón oscuro).
Luego hacé clic en Salir para volver al Theme Builder.
Guardar el encabezado
Hacé clic en el botón Guardar (arriba a la derecha, botón oscuro).
Luego hacé clic en Salir para volver al Theme Builder.
15
Guardar los cambios del Theme Builder
De vuelta en el Theme Builder, el área del encabezado ahora aparece en verde con el texto «Encabezado Global».
Hacé clic en Guardar Cambios (botón azul arriba a la izquierda).
Cuando diga «All Changes Saved» el trabajo está guardado y publicado.
Guardar los cambios del Theme Builder
De vuelta en el Theme Builder, el área del encabezado ahora aparece en verde con el texto «Encabezado Global».
Hacé clic en Guardar Cambios (botón azul arriba a la izquierda).
Cuando diga «All Changes Saved» el trabajo está guardado y publicado.
9. Diferencias clave entre Divi 4 y Divi 5
| Acción | Divi 4 (antiguo) | Divi 5 (tu versión) |
|---|---|---|
| Crear el encabezado | «Construir Encabezado Global» | «Crear Encabezado Global» |
| Módulo de redes | «Seguimiento en redes sociales» | «Seguir En Redes Sociales» |
| Tamaño del ícono | Campo directo | Primero activar «Usar Tamaño De Icono Personalizado» |
| Alineación | Opciones de texto | «Justificar Contenido» → «Fin» |
| Encabezado guardado | Botón «Save» negro | Aparece en VERDE en el Theme Builder |
10. Vista previa del resultado
Vista previa — Topbar completada
Tu contenido va aquí. Edita el texto del módulo Texto.
f
▶
📷
Franja angosta con fondo #1E3A5F, texto a la izquierda, íconos de redes sociales con color blanco a la derecha. El Theme Builder muestra «Encabezado Global» en verde — señal de que está guardado y activo en todo el sitio.
11. Verificación de la lección
Para confirmar que la topbar funciona correctamente:
- En el Theme Builder, el bloque Encabezado Global debe aparecer en verde.
- Abrí la página de inicio de tu sitio en el frontend.
- Presioná Ctrl + Shift + R para recargar sin caché.
- Debe aparecer una franja angosta con fondo azul oscuro en la parte superior.
- Navegá a otra página (Cursos, Blog) — la topbar debe aparecer en todas las páginas.
Resumen de la lección 6.1: Usamos el Divi Theme Builder de Divi 5 para crear el Encabezado Global. Dentro de ese encabezado construimos la topbar: una sección con fondo
#1E3A5F, módulo Texto a la izquierda y módulo Seguir En Redes Sociales (con íconos blancos de 16px alineados a la derecha) en la columna derecha. El Theme Builder reemplaza el encabezado por defecto de Divi automáticamente. En la lección 6.2 agregaremos el menú de navegación principal debajo.