Cómo hacer un Header con Theme Builder Divi: Guía completa paso a paso

Hay cosas que parecen sencillas hasta que te pones a hacerlas… y crear un header personalizado en Divi es justo una de esas. A ver, no es que sea imposible ni mucho menos, pero es que entre menús, logos, diseños y ajustes que parecen escondidos a propósito, es fácil perderse. Así que si estás aquí es porque, como me pasó a mí la primera vez, quieres dejar atrás ese encabezado predeterminado que viene con Divi y hacer uno personalizado, bonito y funcional. Vamos al lío.

¿Qué es un header personalizado en Divi y por qué deberías crearlo?

El header o encabezado es esa parte superior de la web que normalmente contiene el logotipo, el menú de navegación y a veces algún botón de llamada a la acción o iconos de redes. Y sí, Divi ya trae uno por defecto… pero la verdad es que es bastante básico y todos los sitios Divi se ven igual si no haces nada.

Crear un header con el Theme Builder de Divi te da control total sobre su diseño, permitiéndote:

• Cambiar el logo.
• Personalizar el menú (colores, fuentes, espaciados…).
• Mostrar diferentes headers en diferentes páginas.
• Añadir botones, formularios, anuncios, etc.

Y lo mejor es que no necesitas saber nada de código.

Paso 1: Prepara tu menú y tu logo antes de entrar al Theme Builder

Antes de lanzarte a construir el header, es importante tener dos cosas listas: el menú y el logo.

🧭 Crear el menú desde Apariencia > Menús

1. Ve a Apariencia > Menús.
2. Haz clic en “Crear un nuevo menú”.
3. Ponle un nombre (por ejemplo: “Menú principal”) y dale a “Crear menú”.
4. Añade las páginas que quieres que aparezcan (Inicio, Servicios, Contacto…).
5. Guarda los cambios.

👉 Consejo: Aunque parezca una tontería, muchos se olvidan de guardar el menú y luego en Divi no aparece nada. Anda que no me ha pasado…

🖼️ Sube tu logo a la biblioteca de medios

1. Ve a Medios > Añadir nuevo.
2. Sube el logo (idealmente en formato PNG, sin fondo y con buena resolución).
3. Asegúrate de que el archivo no tiene espacio en blanco innecesario a los lados.

👉 Truco: Si tu logo se ve muy pequeño o muy grande luego en el menú, es probable que sea por el tamaño real de la imagen. Mejor que lo ajustes desde el diseño de Divi más que desde Photoshop.

Paso 2: Crea un header global con el Theme Builder de Divi

🛠️ Accede al Theme Builder

1. En el menú de WordPress, ve a Divi > Theme Builder.
2. Haz clic en “Agregar encabezado global” > “Construir encabezado global”.

Ya estarás dentro del constructor visual. Aquí empieza la magia.

Paso 3: Diseña tu header personalizado paso a paso

🧱 Estructura básica

1. Elimina cualquier contenido que haya por defecto.
2. Añade una sección.
3. Dentro, añade una fila con una sola columna.
4. Agrega el módulo de menú.

🔗 Asocia el menú que has creado

En el módulo de menú, elige el menú que has creado antes (probablemente “Menú principal”). Si no lo ves, asegúrate de haberlo guardado, como decía antes.

🖼️ Añade el logotipo

1. Dentro del mismo módulo, en el apartado Logotipo, selecciona tu logo desde la biblioteca.
2. Ajusta el tamaño del logo desde el apartado Diseño > Logotipo > Anchura máxima. Por ejemplo: 20%.

👉 Consejo: Si ves que hay mucho espacio entre el logo y el menú, ajusta los márgenes y rellenos en “Diseño > Espaciado”. Lo típico es poner “0px” en los márgenes superiores e inferiores.

🎨 Personaliza el diseño

Desde el mismo módulo de menú puedes cambiar:

• El color del texto.
• El color del fondo del header.
• El tamaño y tipo de fuente.
• La alineación del logo (izquierda, centro, derecha).
• El espaciado entre elementos.

🧠 Tip pro: A veces, menos es más. Un header limpio funciona mejor que uno con demasiados elementos. Que no parezca un folleto de supermercado.

💾 Guarda los cambios

Haz clic en Guardar dentro del constructor visual y luego Guarda en el Theme Builder.

Paso 4: Verifica que el header aparece correctamente

Vuelve a visitar tu web y recarga. Si todo ha ido bien, deberías ver tu nuevo encabezado personalizado activo en todas las páginas.

¿Y si quiero headers diferentes según la página?

Aquí viene lo guay: con Divi puedes crear headers personalizados por página.

🔄 Crear un header específico para una página concreta

1. En el Theme Builder, haz clic en “Agregar nueva plantilla”.
2. Selecciona la página en la que quieres que ese header se muestre (por ejemplo, “Servicios”).
3. Una vez creada, haz clic en “Agregar encabezado personalizado” y diseña otro diferente (puedes usar otro logo, otro menú, colores distintos…).

🧹 Recuerda: si usas una plantilla específica, desactiva el encabezado global

Si no lo haces, podrías estar viendo el global encima del específico. Vamos, un lío visual.

Ejemplo práctico: header personalizado para la página de servicios

Digamos que tienes una página de “Servicios de Marketing” y quieres que el logo sea diferente, más pequeño, y el color de fondo distinto. Sigues los pasos anteriores y cuando estás en esa plantilla:

• Pones un logo más discreto.
• Cambias el color de fondo a gris claro.
• Quitas el menú global y creas uno solo con los servicios más relevantes.

Esto ayuda a enfocar al usuario, sin distracciones, justo donde quieres.

Bonus: haz que el logo enlace a la home

Esto suele pasarse por alto. En el módulo de menú, busca la opción de enlazar el logo y añade la URL de tu página de inicio.

🔁 Así cuando el usuario haga clic en el logo, volverá al inicio. Detalle pequeño, pero esencial para la usabilidad.

Errores comunes al crear un header con Divi (y cómo evitarlos)

• No guardar los cambios: Créeme, pasa más de lo que parece. Guarda en el constructor y en el Theme Builder.
• Menú vacío: Asegúrate de haber creado y asignado el menú desde Apariencia > Menús.
• Logo con fondo blanco o demasiado grande: Usa PNG con transparencia y ajusta el tamaño en Divi.
• Demasiados elementos en el header: Lo ideal es que en móvil el header sea ligero. A veces es mejor ocultar ciertas cosas en móviles.
• No probar en distintos dispositivos: Usa la vista previa para ver cómo queda en móvil, tablet y escritorio.

Conclusión: personaliza tu encabezado y marca la diferencia

Crear un header con Theme Builder de Divi no es solo una cuestión estética. Es una forma de controlar la primera impresión que das, mejorar la navegación y reforzar tu identidad de marca.

Yo, la primera vez que lo hice, tardé más de la cuenta, claro… entre que no encontraba dónde se cambiaban los márgenes y que el logo me salía como del tamaño de una pizza familiar… pero después de varias pruebas, la verdad es que le pillas el punto y ya no quieres volver al header genérico nunca más.

Así que nada, prueba, experimenta, guarda a menudo y no tengas miedo de romper cosas. Siempre puedes volver atrás.