Crea un header profesional con Elementor Pro y una plantilla de

¿Estás cansado de que el header de tu web de WordPress parezca genérico y limitado por tu tema? En este artículo te voy a enseñar cómo, usando Elementor Pro y una plantilla de Envato, puedes diseñar un encabezado completamente personalizado, con menús avanzados, efectos visuales y un diseño responsive profesional, sin necesidad de tocar una sola línea de código.

Yo no sé programar, ¿vale? Y llevo años haciendo páginas web que, más que bonitas, tienen que vender. Y el header es una de las piezas clave para eso. En el vídeo que grabé para este artículo, muestro el proceso completo con una plantilla real que compré en Envato Elements para un proyecto de cliente. Te explico cómo la importo, la desmonto para entender su estructura y la adapto a las necesidades específicas del sitio, ajustando cada widget y sección en directo. También cometo y corrijo un error típico al configurar las condiciones de visualización del header, porque estas cosas son muy baratas si las sabes hacer, pero te pueden costar horas de frustración si no conoces el truco.

Vamos a ello.

Por qué necesitas Elementor Pro (y no hay atajo real)

¿Por qué te digo esto? Pues porque he pasado por todas las fases. He intentado apañármelas con lo gratis, he probado plugins de terceros y, al final, la única forma de tener control total y un resultado profesional es con Elementor Pro. No es marketing, es experiencia.

La trampa de los plugins ‘gratuitos’ para header/footer

Cuando empiezas, es tentador buscar alternativas. Ves que el plugin gratuito ‘Elementor Header & Footer Builder’ de Turbo Addons ofrece una alternativa limitada para crear headers/footers con la versión gratuita de Elementor. Y sí, funciona. Pero «limitada» es la palabra clave. Te encuentras con que no puedes hacer el header sticky, los efectos hover son básicos, y si quieres un mega menú o una barra de búsqueda integrada de una forma concreta, te vas a topar con un muro.

Es como cuando buscas un mecánico para tu coche. Puedes ir al más barato, pero si lo que necesitas es un experto, al final te va a salir más caro. Con estos plugins pasa igual: ahorras la licencia de Elementor Pro, pero pierdes horas intentando que algo parezca profesional y, al final, acabas contratándolo igual porque no hay otra.

Theme Builder: la función que lo cambia todo

La diferencia no es solo un widget más. Elementor Pro incluye la funcionalidad ‘Theme Builder’, que permite diseñar plantillas globales como headers y footers. Esto no es solo «editar el header». Es crear una plantilla que se aplica a todo tu sitio, con condiciones de visualización, con diferentes versiones para móvil y escritorio, y con la posibilidad de usar cualquier widget de Elementor Pro sin restricciones.

El Theme Builder es el taller completo del mecánico. Tienes todas las herramientas, no solo un destornillador y una llave inglesa. Y eso cambia absolutamente todo lo que puedes hacer con tu web.

Mi experiencia: por qué dejé de buscar alternativas cutres

Yo he estado ahí. Probé el plugin de Turbo Addons para un proyecto pequeño donde el presupuesto era ajustado. El resultado fue un header que parecía pegado con celo. Los márgenes no cuadraban bien en móvil, el menú se veía cutre y cada vez que quería ajustar algo, era una lucha contra las opciones limitadas del plugin.

Desde entonces, para cualquier proyecto serio, uso Elementor Pro. No es solo una cuestión de funcionalidad, es de eficiencia. El tiempo que ahorras en pelearte con limitaciones absurdas ya justifica la inversión. Y lo digo como alguien que es muy tiquismiquis con el dinero que gasta en herramientas.

Paso 1: Consigue y prepara tu plantilla de Envato Elements

Aquí es donde mucha gente se pierde. No es lo mismo una plantilla para una página que una plantilla para un header dentro del Theme Builder. Y la clave está en saber elegir y, sobre todo, en saber desmontar lo que has descargado.

1. Cómo filtrar y elegir la plantilla adecuada

En Envato Elements, no busques «header». Busca «Elementor Template Kits» o «Website Kits». ¿Por qué? Porque estos kits suelen incluir bloques de header que están diseñados para ser usados como plantillas globales. Son más completos y están mejor estructurados.

Filtra por «Elementor» y echa un vistazo a las demos. No te fijes solo en el diseño final de la página de inicio. Entra en las páginas internas y mira cómo se comporta el header. ¿Es sticky? ¿Tiene un menú hamburguesa bien hecho en móvil? ¿Incluye un CTA claro? Esa es la plantilla que quieres.

En mi caso, para el vídeo, elegí un kit de una agencia digital que tenía un header con dos líneas: una superior con el contacto y una principal con el logo, un menú central y un botón a la derecha. Era justo lo que necesitaba para el proyecto.

2. Descarga e importación en WordPress

Una vez la tienes en tu cuenta de Envato, la descargas como un archivo .zip. No lo descomprimas.

Luego vas a tu WordPress, a Elementor > Plantillas > Biblioteca. Le das a Importar Plantillas, subes el .zip y lo importas. Si todo va bien, verás la plantilla nueva en la pestaña «Mis plantillas». Aquí es importante: no estamos importando una página entera, solo la plantilla del bloque que nos interesa, que en este caso es el header.

3. El primer vistazo: desmontando la plantilla para entenderla

Antes de usarla, ábrela en el editor de Elementor. No para editarla, sino para ver cómo está hecha. Fíjate en la estructura de secciones y columnas. ¿Cuántas filas tiene? ¿Usa contenedores o secciones antiguas? ¿Qué widgets de Elementor Pro utiliza (Menú de Navegación, Icon Box, etc.)?

Este paso es crucial. Te permite entender qué puedes modificar fácilmente y qué puede darte problemas. Por ejemplo, en la plantilla que usé, el menú estaba hecho con el widget «Menú de Navegación» de Elementor Pro, lo cual es perfecto porque me da control total sobre los estilos. Si estuviera hecho con un widget genérico de HTML, sería un lío.

Paso 2: Dentro del Theme Builder – Creando tu header desde la plantilla

Ahora viene la parte donde la magia ocurre de verdad. Vamos a llevar esa plantilla que hemos importado y la vamos a convertir en el header global de nuestra web.

1. Accediendo a Plantillas > Theme Builder

Desde el escritorio de WordPress, ve a Plantillas > Theme Builder. Este es tu centro de control para todo lo que es global en el sitio: headers, footers, páginas de archivo, singles… Nosotros nos vamos a la pestaña Header.

2. Añadir nuevo Header y elegir ‘Plantilla importada’

Le das a Añadir Nuevo. Elementor te preguntará si quieres empezar desde cero o elegir una plantilla. Aquí es donde haces clic en la pestaña Mis Plantillas. Y ahí debería aparecer la plantilla que importaste antes.

La seleccionas y le das a Insertar. En ese momento, el editor de Elementor se abrirá con tu plantilla ya cargada, pero ahora está dentro del contexto del Theme Builder. Esto significa que cualquier cambio que hagas aquí se aplicará globalmente, según las condiciones que definas después.

3. La magia de editar sobre una base sólida

La gran ventaja de empezar desde una plantilla de Envato es que ya tienes una estructura profesional de base. Los márgenes, los paddings, la alineación, los breakpoints para responsive… ya están ajustados por un diseñador. Tú no partes de un lienzo en blanco donde una columna te queda más grande que otra.

Tu trabajo ahora no es construir, es adaptar. Y eso es diez veces más rápido.

Paso 3: Personalización avanzada (logo, menú y botones)

Con la estructura ya en su sitio, es hora de meter tu marca y tu mensaje. Esto es lo que convierte una plantilla genérica en el header de tu web.

Reemplazar el logo y ajustar tamaño

Haz clic en el widget de imagen que hace de logo placeholder. En el panel izquierdo, sube tu logo. Un consejo que doy siempre: usa un PNG con fondo transparente o, mejor aún, un SVG si lo tienes. Pesa menos y se ve nítido en cualquier pantalla.

Ajusta el tamaño. No te dejes el que viene por defecto. Suele ser enorme. Redúcelo hasta que esté proporcionado con el resto del header. Y no olvides enlazarlo a la página de inicio.

Configurar el widget ‘Menú de navegación’ de Elementor Pro

Este widget es una bestia parda, ¿vale? Haz clic sobre el menú de la plantilla. Lo primero es seleccionar el menú que has creado previamente en Apariencia > Menús de WordPress.

Luego, ve a la pestaña Estilo. Aquí es donde la cosa se pone interesante y donde tú le das tu toque. No te limites a cambiar el color y ya está. Juega con los estados: el Normal, el Activo (cuando estás en esa página) y el Hover (cuando pasas el ratón). Define colores, fondos y, sobre todo, el subrayado. Luego pasa a la pestaña Menú desplegable para diseñar cómo se verán los submenús. Ponles un fondo que contraste, un poco de sombra para que floten… haz que parezcan parte de un diseño profesional, no un pop-up cutre. Y por último, ajusta la Tipografía. Que no sea la de por defecto, dale el peso y el espaciado que necesita para que se lea bien y encaje con tu marca.

¿Ves? No es una lista de tareas, es ir jugando con cada opción hasta que diga «esta es mi web». El menú es el centro de la navegación, así que merece ese tiempo.

Diseñar botones de CTA que convierten

El botón de «Contacto» o «Solicitar Presupuesto» que suele ir en el header es oro. En la plantilla, localiza el widget del botón.

No te conformes con el color azul genérico. Pon el color principal de tu marca. Ajusta la tipografía para que sea potente. Y en la pestaña Contenido, asegúrate de que el enlace es correcto (que vaya a tu página de contacto o a un formulario de lead).

Luego, ve a Estilo > Hover. Añade un efecto hover sencillo pero claro, como un cambio de color de fondo o un ligero aumento de tamaño. Esto le da feedback al usuario y mejora la experiencia.

Paso 4: Efectos visuales y comportamiento (Scroll, Hover, Responsive)

Un header profesional no solo se ve bien estático. Tiene vida. Reacciona. Y aquí es donde Elementor Pro demuestra su valor.

Cómo hacer el header sticky (fijo al hacer scroll)

En el editor, con cualquier sección del header seleccionada, ve al panel izquierdo. Ahora, ojo, porque la ubicación exacta de esta opción puede cambiar entre versiones de Elementor. Normalmente está en la pestaña Avanzado, pero búscala también en «Efectos de movimiento» o directamente en las opciones de la sección. Lo que quieres es una opción que diga «Sticky» o «Fijo al hacer scroll». Actívala.

Esto hará que tu header se quede pegado arriba cuando el usuario haga scroll. Es esencial para que el menú de navegación esté siempre accesible. Y lo bueno es que puedes ajustar incluso cómo se ve cuando está «fijo». A veces conviene que cambie ligeramente (que se haga más delgado, que cambie el fondo a sólido) para ahorrar espacio y dar una sensación de dinamismo.

Añadir efectos hover al menú para mejorar la UX

Ya tocamos esto en el menú, pero es tan importante que merece su propio apartado. Un hover bien hecho (un subrayado que aparece desde la izquierda, un cambio de color sutil) no es decoración. Le dice al usuario: «esto en lo que estás pasando el ratón es clickeable». Guía la atención.

En el widget de Menú de Navegación, dentro de Estilo > Hover, experimenta con la Animación del subrayado. Hay varias. Elige una que sea rápida y clara. Nada de efectos que duren medio segundo.

Ajuste fino para móviles: el menú hamburguesa

Aquí es donde muchos headers fallan. En el editor, haz clic en el icono de móvil abajo a la izquierda para cambiar a la vista responsive.

Es probable que tu menú de escritorio se convierta automáticamente en un menú hamburguesa (las tres rayas). Haz clic en ese icono del menú hamburguesa en la vista previa. Se seleccionará el widget correspondiente.

Asegúrate de que: 1. El icono del hamburguesa se ve bien (no está pixelado, es del tamaño adecuado). 2. El panel del menú que se despliega (el «off-canvas») tiene un fondo que contrasta con el texto. 3. Los enlaces dentro del menú móvil son fáciles de tocar (tienen suficiente padding). No des por hecho que la plantilla lo tiene todo bien ajustado. Revísalo siempre.

Paso 5: La clave que todos olvidan – Las condiciones de visualización

Este es el paso que, si te lo saltas, tu header no se verá en ningún lado. O se verá donde no debe. En el vídeo, justo aquí, me equivoqué. Lo publiqué y el header no aparecía. Y es un error tonto, pero muy común.

‘Todo el sitio’ vs. condiciones específicas

Cuando termines de editar tu header, no le des a Publicar directamente. Dale a Condiciones de visualización. Se abrirá una ventana.

Por defecto, quizá no tenga ninguna condición. Tienes que añadir una. La más común es Todo el sitio. Esto hará que tu header reemplace al header por defecto de tu tema en todas las páginas.

Pero también puedes ser más específico. Por ejemplo, puedes crear un header distinto solo para la página de inicio, o excluirlo de la página de checkout si tienes una tienda.

Mi error en el vídeo y cómo lo corregí

En la grabación, después de diseñar todo el header, le di a Guardar y cerré el editor. No configuré las condiciones. Cuando fui a ver la web en vivo, seguía viendo el header antiguo de mi tema. Me llevó un minuto de confusión hasta que caí: «¡Ah, las condiciones!».

Volví al Theme Builder, edité el header, puse la condición Todo el sitio, guardé y entonces sí, el header personalizado apareció. Es un error mío, hay que revisarlo. Pero te lo cuento para que no te pase a ti.

Cuándo crear un segundo header para una landing page

Imagina que tienes una landing page de captación muy agresiva, sin menú de navegación para no distraer. No quieres que el header principal, con todos sus enlaces, aparezca ahí.

¿Qué haces? Vas al Theme Builder, creas un nuevo header. Lo diseñas minimalista (solo el logo, por ejemplo). Luego, en sus condiciones de visualización, lo aplicas solo a esa página específica. Y al header principal le añades una condición para excluir esa página.

Así tienes dos headers diferentes funcionando en el mismo sitio, cada uno donde debe estar. El Theme Builder lo gestiona perfectamente.

Problemas comunes y sus soluciones (tras publicar)

Aunque lo hagas todo bien, a veces las cosas no salen como esperas. No te agobies. Estos son los problemas más frecuentes y cómo los arreglo yo.

• El header no se ve: conflicto con el tema. Esto es lo más común. Si has creado un header en el Theme Builder pero tu tema (como Astra o GeneratePress) tiene su propio header activado, pueden estar peleando. Solución: Ve a las opciones de tu tema (normalmente en Personalizar) y busca la sección de Header. Ahí suele haber una opción para desactivar el header del tema y dejar que Elementor lo gestione. Actívala.
• El menú no aparece en el móvil. Comprueba dos cosas: Primero, que en la vista móvil del editor el widget del menú hamburguesa está visible y bien configurado. Segundo, que el menú de WordPress que has asignado al widget tiene elementos. A veces el problema es que el menú está vacío o no está asignado a la ubicación «Principal».
• Los cambios no se actualizan (caché). Has hecho cambios, los has guardado, pero en la web en vivo sigues viendo lo antiguo. Lo más probable es que sea la caché. Limpia la caché de tu plugin de caching (como WP Rocket). Si no tienes, prueba a actualizar la página con Ctrl + F5. Y si eso no funciona, a veces el propio hosting tiene caché; en ese caso, espera unos minutos o contacta con su soporte.

¿Vale la pena una plantilla de Envato vs. construir desde cero?

Al final, siempre llega esta pregunta. ¿No es mejor hacerlo yo desde cero para que sea 100% mío? Depende.

Análisis de tiempo/calidad: mi framework

Mi regla es simple: si el proyecto tiene un diseño de marca muy fuerte y atípico, o si el header requiere una funcionalidad tan específica que ninguna plantilla se le acerca, entonces construyo desde cero.

Pero para el 90% de los proyectos (webs corporativas, de servicios, portfolios, blogs serios), una plantilla de Envato es un punto de partida insuperable. La calidad de diseño en cuanto a proporciones, espaciado y jerarquía visual que traen estos kits es muy alta. Yo, que soy diseñador, reconozco que me ahorran horas de trabajo de ajuste fino.

Casos donde recomiendo empezar desde cero

Solo en dos casos: 1. Cuando el header es una pieza central de la experiencia y es completamente experimental (como un header que es parte de una animación compleja). 2. Cuando el proyecto es tan pequeño y el presupuesto tan ajustado que no puedo justificar ni la suscripción a Envato Elements ni el tiempo de buscar y adaptar una plantilla. En ese caso, con Elementor Pro y empezando de cero, algo funcional se hace rápido.

Conclusión: tu nuevo workflow para headers profesionales

Así que este es el flujo que yo sigo ahora y que te recomiendo: 1. Consigue Elementor Pro. No hay sustituto real. 2. Busca un Template Kit en Envato Elements que se ajuste a la vibra de tu proyecto. 3. Importa la plantilla del header y créalo desde ahí en el Theme Builder. 4. Personaliza logo, menú y botones con tu marca. 5. Ajusta efectos (sticky, hover) y el responsive, sobre todo en móvil. 6. No olvides configurar las condiciones de visualización. 7. Publica y revisa que todo funcione.

Con esto, tienes un header que no parece de plantilla, que se comporta como un profesional y que no te ha requerido saber programar. Y lo más importante: es un header que ayuda a tu web a vender, no solo a decorar.

Si quieres ver todo este proceso en acción, con los errores incluidos y cómo los soluciono, tienes el vídeo completo en mi canal. Y si te surge cualquier duda con tu proyecto, ya sabes dónde encontrarme.