Cómo diseñar un header personalizado con Elementor

Por qué un header personalizado cambia la experiencia de tu web

Cuando reviso webs hechas con WordPress en Lima, casi siempre el header es lo primero que delata si la empresa invirtió tiempo en su imagen o si dejó todo en piloto automático. Un header genérico, ese que viene por defecto con el tema gratis, transmite descuido. En cambio, un header personalizado con Elementor proyecta seriedad, ayuda al usuario a encontrar lo que busca y hasta puede subir tus conversiones sin que toques una sola línea de código.

Llevo varios años diseñando webs para clientes peruanos y la pregunta que más me hacen es cómo lograr ese encabezado limpio, con logo a la izquierda, menú al centro y botón de contacto a la derecha. Spoiler: con Elementor Pro y el Theme Builder se hace en un par de horas, incluso si recién estás empezando. En esta guía te muestro el proceso completo, los errores típicos que veo en proyectos de colegas y los detalles que diferencian un header amateur de uno profesional.

Qué necesitas antes de empezar a diseñar un header con Elementor

Lo primero es tener claro que el header personalizado vive dentro del Theme Builder, una función que solo está disponible en Elementor Pro. La versión gratuita te deja editar páginas y plantillas individuales, pero no permite reemplazar el encabezado global del tema. Esto es importante porque he visto a clientes pagar plugins extra cuando lo más limpio es invertir en la licencia oficial.

Necesitas también un logo en formato PNG o SVG, idealmente con fondo transparente y dos versiones: una para fondo claro y otra para fondo oscuro. El SVG es mi favorito porque pesa poco y se ve nítido en cualquier pantalla, incluso en monitores 4K. Si tu logo es un JPG con fondo blanco, te recomiendo pedirle al diseñador una versión limpia antes de seguir.

Otro punto crítico es la estructura de tu menú principal. Antes de tocar Elementor, ve a Apariencia, Menús y arma la jerarquía con cabeza fría. Un buen menú peruano de servicios tiene entre 4 y 6 ítems visibles, con submenús desplegables solo cuando hace falta. Si pones diez opciones, el usuario se pierde y rebota.

Activar el Theme Builder de Elementor paso a paso

Una vez instalado Elementor Pro, entra al panel de WordPress y ve a Plantillas, Theme Builder. Verás una pantalla con secciones como Header, Footer, Single Post, Archive y más. Cada una representa una parte global de tu sitio que puedes rediseñar sin tocar el tema padre.

Hago clic en Header y luego en Añadir nuevo. Elementor me ofrece una librería con plantillas prediseñadas. Te confieso que casi nunca las uso tal cual, porque suelen verse genéricas, pero sí me sirven como punto de partida cuando ando con prisa. Si prefieres construir desde cero, pulsa el botón cerrar y empieza con un lienzo en blanco.

El siguiente paso es decidir las condiciones de visualización. Elementor te pregunta dónde quieres mostrar este header: en todo el sitio, solo en páginas, solo en entradas o en un tipo específico de contenido. Para la mayoría de proyectos selecciono Todo el sitio y luego, si hace falta, creo un segundo header para landings con condición especial. Esa flexibilidad es lo que me hace recomendar Elementor sobre otros constructores.

Diseñar la estructura básica del header

Empiezo con una sección de una sola fila y tres columnas. La columna izquierda lleva el logo, la del centro el menú y la derecha el botón de contacto o el ícono de carrito si es una tienda. Esta disposición clásica funciona porque el ojo del visitante peruano ya está acostumbrado a leerla así, gracias a marcas grandes como Falabella, BCP o Plaza Vea.

En la columna del logo arrastro el widget Site Logo, que detecta automáticamente el logo que cargaste en Apariencia, Personalizar. Si todavía no lo subes, hazlo ahora. Le doy un ancho máximo de 180 píxeles en escritorio y 140 en móvil. Estos números no son arbitrarios: vienen de pruebas con clientes reales donde notamos que logos más grandes restan espacio al menú.

Para la columna central uso el widget Nav Menu. Elijo el menú que armé en Apariencia, selecciono alineación centrada y configuro los espacios entre ítems en 25 píxeles. El color del texto lo defino con el color principal de la marca y agrego un efecto hover sutil, normalmente un cambio de color o un subrayado animado de un segundo de duración.

La columna derecha es donde meto el CTA. Suelo usar un botón con texto corto como Contáctanos o Cotiza aquí. Lo enlazo a la página de contacto o, si la empresa tiene WhatsApp Business, lo conecto directo al chat con un mensaje predeterminado. Ese pequeño detalle ha subido la tasa de conversión en proyectos donde el usuario quiere contacto inmediato.

Convertir el header en sticky sin afectar el rendimiento

El sticky header es ese encabezado que se queda fijo arriba mientras el usuario hace scroll. Bien usado, mejora la navegación porque el menú siempre está al alcance. Mal usado, ocupa demasiado espacio en pantallas pequeñas y molesta.

Para activarlo en Elementor, selecciono la sección completa del header y voy a la pestaña Avanzado, Efectos de movimiento. Activo Efectos de scroll y luego Sticky con valor superior. Configuro un desplazamiento de 50 píxeles, lo que significa que el header se vuelve fijo solo después de que el usuario baja un poco. Esto evita el salto visual brusco que molesta a algunos visitantes.

Un truco que aprendí a la mala: cuando el header se vuelve sticky, conviene reducirlo en tamaño. Para eso uso la opción Efectos de scroll, Sticky efectos, donde configuro una clase CSS que aplica un padding menor. El logo también puede reducirse al 80 por ciento de su tamaño original. El resultado es un encabezado que se transforma con elegancia y libera espacio para el contenido principal.

Hacer el header responsive sin perder identidad

En Perú más del 70 por ciento del tráfico web viene de móviles, así que diseñar pensando en pantallas pequeñas no es opcional. Elementor permite editar por separado las versiones de escritorio, tablet y móvil sin duplicar trabajo.

En móvil oculto el menú horizontal y muestro un ícono hamburguesa. Para eso reemplazo el widget Nav Menu por uno con dropdown activado, o uso el widget WP Menu de la versión 3.18 en adelante, que ya viene preparado con animaciones suaves. El ícono lo alineo a la derecha y el logo lo centro o lo dejo a la izquierda según la identidad de la marca.

Algo que reviso siempre es el tamaño del área clickeable del ícono hamburguesa. Tiene que ser de al menos 44 píxeles cuadrados, según las guías de accesibilidad. Si es más pequeño, los usuarios con dedos grandes o con problemas motrices van a frustrarse y abandonar la página.

Optimizar la velocidad del header para no romper el SEO

Un header pesado arrastra todo el sitio. Por eso cada elemento que agrego, lo pienso dos veces. Las animaciones excesivas, los fondos en video, los íconos cargados desde librerías externas, todo suma milisegundos al tiempo de carga.

Mi regla básica es: máximo dos efectos animados en el header y solo uno que use JavaScript pesado. El logo SVG en lugar de PNG ahorra alrededor de 30 kilobytes por carga. El menú con CSS puro pesa menos que uno con dropdowns animados por JavaScript. Y los íconos los cargo desde Font Awesome solo si los voy a usar en varias partes del sitio, sino prefiero subirlos como SVG sueltos.

Otra recomendación es revisar el resultado con PageSpeed Insights de Google. Si el header dispara el tiempo de Largest Contentful Paint por encima de 2.5 segundos, hay que recortar. Mis clientes con webs corporativas en Perú están viendo que el Core Web Vitals empieza a pesar más en posicionamiento orgánico, así que invertir en velocidad ya no es solo estética.

Errores comunes que veo en headers diseñados con Elementor

El error más frecuente es olvidar la condición de visualización. Diseñan un header bonito, lo publican y descubren que no se muestra en ninguna parte porque nunca asignaron las condiciones. Pasa hasta a profesionales con experiencia.

Otro clásico es usar imágenes de logo en JPG con fondo blanco sobre un header de color. Queda un parche feo. Siempre PNG o SVG con transparencia.

También me topo con menús que tienen tres niveles de submenús. En móvil esto es una pesadilla. Si tu negocio realmente necesita esa profundidad, considera una mega menú o una página de servicios bien estructurada como alternativa.

Y el último: poner el botón CTA con un color que no contrasta con el fondo. Si tu marca usa azul oscuro y el botón también es azul oscuro, nadie lo va a notar. El CTA debe gritar visualmente sin romper la armonía.

Cómo probar y publicar tu nuevo header con confianza

Antes de hacer clic en publicar, paso por una checklist mental. Reviso el header en escritorio con resolución 1920×1080, en una laptop de 1366×768, en una tablet horizontal y en un iPhone tamaño estándar. Si algo se desacomoda, ajusto los breakpoints en Elementor.

También pruebo todos los enlaces del menú y verifico que el botón CTA lleve al destino correcto. Suena obvio pero he visto landings con el botón roto durante semanas porque nadie lo verificó.

Cuando todo está conforme, vuelvo al Theme Builder, confirmo las condiciones y publico. Recomiendo limpiar cualquier caché que tenga el sitio, sea con W3 Total Cache, WP Rocket o LiteSpeed Cache, para que los visitantes vean la versión nueva de inmediato.

Preguntas frecuentes sobre header con Elementor

¿Puedo diseñar un header personalizado con Elementor gratis?

No del todo. La versión gratuita de Elementor permite editar páginas y plantillas individuales, pero el Theme Builder, que es la herramienta para crear headers globales, viene solo en Elementor Pro. Si quieres reemplazar el encabezado de tu tema sin tocar código, la inversión en Pro vale la pena porque también te da widgets exclusivos y soporte oficial.

¿Qué tamaño debe tener el logo en un header con Elementor?

Recomiendo entre 150 y 200 píxeles de ancho en escritorio, y entre 120 y 160 píxeles en móvil. El alto se ajusta automáticamente al mantener la proporción. Lo importante es que el archivo original sea de buena calidad, idealmente en SVG, para que se vea nítido en cualquier pantalla sin pesar mucho.

¿Cómo hago que mi header sea sticky solo en escritorio?

En la configuración de Efectos de movimiento de la sección del header, activa la opción Sticky y luego en el campo Dispositivos selecciona solo Desktop. Esto deja el sticky activo para escritorio y lo desactiva en tablet y móvil, donde a veces ocupa demasiado espacio y estorba la lectura.

¿Puedo tener dos headers diferentes en el mismo sitio?

Sí, y es una práctica que recomiendo mucho. Por ejemplo, puedes tener un header completo en la página principal con todos los servicios, y un header simplificado para landings de campaña donde solo quieres el logo y un botón de contacto. Lo configuras desde las condiciones de visualización en el Theme Builder.

¿Cómo agrego un buscador al header de Elementor?

Usa el widget Search Form que viene en Elementor Pro. Lo arrastras a una columna del header, lo configuras con ícono lupa y diseñas el campo para que coincida con tu paleta. También puedes hacerlo aparecer al hacer clic, usando el widget Search Bar con animación de despliegue. Es ideal para sitios con muchas páginas o tiendas con catálogo amplio.

¿Es mejor usar el widget Nav Menu o el menú nativo de WordPress?

Para un header personalizado siempre uso el widget Nav Menu de Elementor Pro porque me da control total sobre tipografía, colores, hover, dropdowns y comportamiento móvil. El menú nativo de WordPress depende del tema y limita la personalización. Eso sí, el menú lo armo siempre desde Apariencia, Menús, y desde ahí Elementor lo lee.

¿Cómo evito que el header se vea mal en pantallas grandes?

Define un ancho máximo de contenido en la sección del header, normalmente 1200 o 1400 píxeles. Esto evita que el logo y el menú se estiren demasiado en monitores ultra wide. Elementor te permite configurar este límite desde la pestaña Diseño de la sección, y luego centras el contenido con padding automático.

¿Puedo agregar un mensaje promocional encima del header?

Sí, se llama topbar y es muy útil para anuncios temporales, horarios de atención o promociones. Solo agrega una sección adicional encima de la del header principal, con altura reducida y fondo de color distinto. Si quieres que se pueda cerrar, puedes combinar Elementor con un plugin sencillo como Header Footer Elementor para gestionar la visibilidad.

¿El header personalizado de Elementor afecta el SEO?

Si está bien hecho no afecta, e incluso ayuda. Lo que sí daña el SEO es un header lento, con animaciones pesadas o con imágenes sin optimizar. Cuida que el código generado por Elementor sea limpio, usa SVG cuando puedas y revisa siempre las métricas de Core Web Vitals después de publicar. Un header rápido y claro mejora la experiencia, y Google premia esa experiencia con mejor posicionamiento.

¿Qué hago si mi header de Elementor desaparece después de actualizar?

Lo primero es revisar si las condiciones de visualización siguen activas en el Theme Builder. A veces tras actualizar el tema o el propio Elementor, las condiciones se desconfiguran. Si todo está en orden, limpia la caché del sitio y la del navegador. Si el problema persiste, revisa si hay conflictos con algún plugin reciente desactivando uno a uno para identificar el causante.