Montar un header que parezca de plantilla premium sin pagar ni un euro es perfectamente posible con la versión gratuita de Elementor. No hace falta Elementor Pro, ni plugins de terceros, ni tocar una línea de código. Yo lo hice y te cuento exactamente cómo, sin humo.
La clave está en dejar de pensar en Elementor Free como un constructor limitado y empezar a exprimir lo que ya trae: secciones, columnas, widgets básicos y, sobre todo, el control de espaciado y tipografía. Con eso ya se puede crear un header de lujo en Elementor gratis que no envidia a muchos temas de pago.
Antes de tocar nada: entiende qué es el header y por qué casi todos lo hacen mal
El encabezado de una web no es solo el logo y el menú. Es la primera impresión, el sitio donde el usuario decide si se queda o se va. Un header mal alineado, con tipografías por defecto y colores planos, mata la percepción de marca en dos segundos.
La mayoría de tutoriales de cómo editar el header en WordPress se quedan en el personalizador del tema. Eso vale para salir del paso, pero si quieres algo con verdadero impacto visual, el personalizador se queda corto. Ahí es donde entra Elementor.
Ojo con una cosa: Elementor Free no permite crear plantillas de header globales como sí hace la versión Pro. Eso significa que no puedes asignar un header a todo el sitio desde el constructor. Pero hay un truco que muy poca gente usa y que te explico más abajo.
El truco real para tener un header fijo con Elementor gratis
Como Elementor Free no tiene Theme Builder, lo que haces es construir el header dentro de la propia página, en la primera sección, y luego usar un poco de CSS personalizado para que se comporte como un header fijo. Sí, es un apaño, pero funciona y el resultado es idéntico al de un header sticky de pago.
Pasos concretos:
- Crea una nueva sección en Elementor con estructura de una sola columna.
- Dentro, añade un widget de Menú (el nav menu nativo) o un widget de icono + texto si prefieres algo más minimalista.
- Ve a la pestaña Avanzado de la sección y en CSS personalizado pega algo así: selector{position:sticky;top:0;z-index:999;}
- Ajusta el fondo con un degradado sutil o un color sólido con opacidad para dar sensación de cristal.
Con eso ya tienes un header sticky en Elementor gratis sin necesidad de Pro. El z-index alto evita que otros elementos se le monten encima al hacer scroll.
Tipografías, espaciado y colores: donde se nota el lujo
Un header parece caro cuando respira. Padding generoso, tipografía con carácter y contraste medido. Nada de Arial por defecto ni de azul link chillón.
Mi recomendación: usa una fuente serif para el logo (tipo Playfair Display o Cormorant) y una sans limpia para el menú (Inter o Manrope). Ese contraste serif/sans es lo que usan las marcas de lujo reales, no es casualidad.
En cuanto a colores, apuesta por fondos oscuros con acentos dorados o crema, o al revés, fondos crema con tipografía casi negra. Huye del blanco puro y del negro absoluto: usa #0f0f0f o #faf7f2, se nota la diferencia.
Espaciado que marca la diferencia
En Elementor, ve a Avanzado → Padding y pon al menos 20px arriba y abajo en la sección del header. En el menú, aumenta el espacio entre elementos (gap) a 30-40px. Ese aire es lo que separa un header amateur de uno profesional.
Si tu header parece apretado, parece barato. No hay más vuelta.
Efectos hover y microinteracciones sin plugins
Elementor Free ya trae animaciones de hover en los widgets de icono y en los elementos del menú si tocas el CSS. Un subrayado que crece desde el centro al pasar el ratón, o un cambio de opacidad suave, transforma la percepción.
Pega esto en el CSS personalizado del menú:
selector a{position:relative;} selector a::after{content:»;position:absolute;bottom:-4px;left:50%;width:0;height:2px;background:#c9a227;transition:all .3s ease;transform:translateX(-50%);} selector a:hover::after{width:100%;}
Ese subrayado dorado que aparece al pasar el ratón es el tipo de detalle que hace que un header de lujo con Elementor parezca hecho por un diseñador profesional.
Qué hacer si necesitas el header en todo el sitio
Aquí viene la parte incómoda. Sin Elementor Pro no puedes asignar el header globalmente desde el constructor. Tienes tres opciones reales:
- Duplicar la sección en cada página manualmente. Funciona, pero es un coñazo si tienes muchas páginas.
- Editar el header.php del tema mediante un tema hijo. Es la opción más limpia si controlas un mínimo de PHP. Insertas ahí tu estructura HTML y CSS, y el header aparece en todo el sitio.
- Usar un plugin gratuito como Header Footer Code Manager o similar, que te permite inyectar código en el header sin tocar archivos del tema.
Si vas en serio con el proyecto, la opción del tema hijo es la que menos dolores de cabeza da a largo plazo. Y no, no necesitas ser desarrollador: con saber copiar y pegar donde toca, vas sobrado.
Errores que te cargan el header en dos minutos
El primero: usar demasiados elementos. Logo, menú, buscador, carrito, redes sociales, botón CTA… y acabas con un churro ilegible. Elige tres cosas como máximo. Menos es más, sobre todo en móvil.
El segundo: no probar en responsive. Elementor Free te deja ajustar el padding y el tamaño de fuente por dispositivo. Si no lo tocas, en móvil el header se ve como el culo. Revisa siempre la vista de tablet y móvil antes de publicar.
El tercero: abusar de las animaciones. Un header con cinco efectos distintos parece una feria, no una marca de lujo. Un solo detalle sutil bien puesto vale más que diez efectos chillones.
Mi veredicto honesto sobre Elementor Free para headers
Se puede hacer un header de lujo con la versión gratuita, sí. Pero no es magia: requiere entender CSS básico y tener criterio de diseño. Si no tienes ni una cosa ni la otra, vas a acabar con algo mediocre aunque uses Pro.
La diferencia entre un header premium y uno cutre no está en la herramienta. Está en el espaciado, la tipografía y la contención. Elementor Free te da todo lo necesario para eso. Lo demás lo pones tú.
Y si tu proyecto crece y necesitas headers distintos por sección, ahí sí te tocará pasar por caja con Pro. Pero para empezar, para validar una idea o para un proyecto personal, con la versión gratuita tienes más que suficiente. No dejes que nadie te diga lo contrario.
