Lección 08-01 – Topbar: barra superior con teléfono, email y redes sociales
Vamos a construir la barra superior (topbar) del sitio usando el Theme Builder de Divi 5. Esa es la franjita fina de arriba del todo donde normalmente van el teléfono, el email y los íconos de redes sociales. Es lo primero que ve cualquier visitante, así que tiene que transmitir confianza desde el primer segundo.
¿Qué es el Theme Builder y para qué sirve?
Antes de Divi Theme Builder, había que editar archivos PHP del tema para cambiar el header. Ahora todo se hace de forma visual, sin tocar código. Así de poderoso es Divi 5.
Paso 1 — Acceder al Theme Builder
Desde tu panel de WordPress, buscá el menú Divi en la barra lateral izquierda y hacé clic en Theme Builder:
| Menú | Submenú | ¿Para qué? |
|---|---|---|
| Divi | Escritorio | Panel principal de Divi |
| Divi | Theme Builder | ⬅ Acá entramos nosotros |
| Divi | Opciones Del Tema | Configuración general del tema |
| Divi | Biblioteca De Divi | Guardado de layouts y secciones |
Paso 2 — Crear el Encabezado Global
Cuando entrás al Theme Builder, lo primero que ves es la Plantilla De Sitio Web Predeterminada. Dentro de ella hay tres botones principales:
| Botón | ¿Qué crea? |
|---|---|
| Crear Encabezado Global | El header que aparece en TODAS las páginas del sitio |
| Añadir Cuerpo Global | El layout del contenido principal (raramente se usa) |
| Añadir Pie De Página Global | El footer que aparece en TODAS las páginas del sitio |
Hacé clic en Crear Encabezado Global → se abre un menú con dos opciones:
- Crear Encabezado Global — empieza desde cero (esto es lo que usaremos)
- Añadir Desde La Biblioteca — carga un diseño ya guardado
Elegí Crear Encabezado Global y se abrirá el Visual Builder en modo encabezado.
Paso 3 — El editor vacío: conociendo el lienzo
Cuando el Visual Builder se abre para el encabezado, vas a ver un lienzo casi vacío con dos botones en el centro:
| Botón / Color | ¿Qué hace? |
|---|---|
| ➕ Verde | Inserta una nueva Sección (el contenedor más grande) |
| ➕ Azul | Inserta una nueva Fila dentro de la sección activa |
🏠 Sección = la habitación completa (fondo, ancho, padding general)
📐 Fila = la distribución de columnas dentro de esa habitación
🧩 Módulo = el mueble o elemento concreto que ponés en la columna
Para nuestra topbar, la estructura va a ser esta:
Sección (fondo azul oscuro #0d1b2a)
└── Fila (2 columnas: izquierda y derecha)
├── Columna izquierda → Módulo Texto (teléfono + email)
└── Columna derecha → Módulo Seguir En Redes SocialesPaso 4 — Insertar la Sección y la Fila
Hacé clic en el ➕ verde para insertar la primera Sección. Divi crea automáticamente una sección de tipo «regular» con una fila de 1 columna.
Para cambiar la distribución de esa fila a 2 columnas:
- Hacé clic en el ícono de configuración de la fila (el engranaje ⚙️ que aparece al hacer hover)
- En el panel derecho, en Elementos, cambiá la distribución a 2 columnas iguales (50% / 50%)
Paso 5 — Módulo Texto en la columna izquierda
Hacé clic en el ➕ gris dentro de la columna izquierda → se abre el modal Insertar Módulo O Fila con todos los módulos disponibles.
Buscá y hacé clic en Texto. Una vez agregado, abrí sus ajustes:
| Pestaña | Qué configurar | Valor |
|---|---|---|
| Contenido → Texto Principal | El contenido del módulo | 📞 +54 9 11 1234-5678 | ✉ info@tucurso.com |
| Diseño → Texto | Color del texto | #ffffff (blanco) |
| Diseño → Texto | Tamaño de fuente | 13px |
| Diseño → Espaciado | Padding top/bottom | 8px arriba y abajo |
Paso 6 — Módulo «Seguir En Redes Sociales» en la columna derecha
En la columna derecha insertá el módulo Seguir En Redes Sociales. Este módulo ya tiene los íconos de redes populares listos para configurar:
| Ajuste | Dónde está | Valor recomendado |
|---|---|---|
| Redes a mostrar | Contenido → Redes | Facebook, Instagram, YouTube, LinkedIn |
| Color de íconos | Diseño → Íconos | #ffffff (blanco) |
| Alineación | Diseño → Alineación | Derecha (right) |
| Tamaño de íconos | Diseño → Íconos | 18px |
Paso 7 — Dar estilo a la Sección (fondo oscuro)
Hacé clic en el ícono de configuración de la Sección (el contenedor más externo) → en el panel derecho configurá:
| Ajuste | Pestaña | Valor |
|---|---|---|
| Fondo → Color sólido | Contenido → Fondo | #0d1b2a (negro azulado) |
| Padding top/bottom | Diseño → Espaciado | 0px (la fila ya tiene su propio padding) |
| CSS personalizado — ID | Avanzado → Atributos | topbar-global |
Paso 8 — Agregar CSS personalizado desde la pestaña Avanzado
En Divi 5, cada módulo tiene una pestaña Avanzado donde podés escribir CSS propio. Esto es muy potente porque el CSS se aplica SOLO a ese módulo sin afectar nada más.
En la Sección de la topbar, abrí Avanzado → CSS → CSS De Forma Libre y pegá esto:
/* Topbar — barra superior global */
selector {
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
font-size: 13px;
}selector: En el CSS de Divi 5, usás la palabra selector en vez del nombre de la clase real. Divi la reemplaza automáticamente por la clase del módulo que estás editando. Es como decirle «aplicá esto a mí mismo».
Paso 9 — Guardar y salir
Cuando terminés el diseño de la topbar:
- Hacé clic en el botón Guardar (arriba a la izquierda) o presioná Ctrl + S
- Hacé clic en Salir para volver al Theme Builder
- En el Theme Builder, hacé clic en Guardar cambios (el botón azul arriba)
El primer guardado es del layout del encabezado en el Visual Builder. El segundo guardado es para que el Theme Builder aplique ese encabezado a todas las páginas del sitio. Si guardás solo el primero, el diseño queda guardado pero no se activa.
Lo que aprendiste en esta lección
#0d1b2a), una Fila de 2 columnas, el módulo Texto a la izquierda (teléfono y email) y el módulo Seguir En Redes Sociales a la derecha.
selector para apuntar a ese elemento específico.