Si quieres montar un encabezado en WordPress con Elementor y que quede bien, lo primero es que te quites de la cabeza que solo puedes usar lo que te da tu tema. Eso ya se acabó. Con Elementor, si sabes moverlo, haces lo que te da la gana, aunque el tema que tengas sea un ladrillo .
Lo primero es entrar al Constructor de Tema. No lo busques en otro sitio. Vas a tu Escritorio de WordPress, pinchas en «Templates» y luego en «Theme Builder» . Ahí verás una sección que pone «Header». Le das al signo de más y empieza lo bueno.
Aquí tienes dos caminos. El fácil: coger una plantilla prediseñada de la biblioteca que tienen, que hay unas cuantas y algunas están bastante bien para empezar . El otro camino, que es el que mola de verdad, es cerrar esa biblioteca y montártelo desde cero, tú solito con los widgets . Es más trabajo, pero queda exactamente como tú quieres, sin concesiones.
Yo te recomiendo que si es tu primera vez, juegues con las plantillas, pero no te quedes solo con poner tu logo y cambiar colores. Métete dentro, desmonta los bloques, mira cómo están hechos. Así le pierdes el miedo al editor.
Ahora, la clave para que no sea un desastre, especialmente en el móvil, es usar contenedores Flexbox. No te asustes con el nombre. En el editor, cuando vas a añadir algo, en vez de una sección normal, buscas la opción «Flexbox». Esto te permite organizar los elementos (el logo, el menú, un botón) en una fila o columna y controlar cómo se alinean y cómo se redistribuyen en pantallas pequeñas. Es un cambio radical respecto a la antigua manera de hacerlo con secciones y columnas.
Vas añadiendo widgets dentro de ese contenedor. Los básicos e imprescindibles son el «Site Logo» para tu marca, el «Menu» para la navegación y, si quieres, el «Search» . Ojo con el buscador, que ocupar mucho ancho. Una solución muy limpia es poner solo un icono de lupa que, al pincharlo, abra un cuadro de búsqueda flotante (eso se hace con el widget «Off-Canvas») . Queda mucho más profesional.
Una cosa que mucha gente pasa por alto y es un error garrafal: el etiquetado HTML para accesibilidad. Cuando tengas tu encabezado casi listo, pincha en el icono de ajustes de la barra superior, busca la opción «HTML Tag» y selecciona «header» . Así, las personas que usan lectores de pantalla pueden identificar la estructura de tu página. No cuesta nada hacerlo y demuestra que te importa tu audiencia.
La magia está en los ajustes responsivos. No basta con que se vea bien en tu pantalla. Tienes que pulsar el icono del móvil y la tablet en la parte inferior del editor y repasar todo . A lo mejor en ordenador tu menú está en horizontal, pero en móvil tiene que convertirse en el típico icono de hamburguesa (三). Eso no pasa solo. Tienes que ir al widget del menú, y en sus ajustes responsivos configurar el «Punto de interrupción» (Breakpoint) para que se transforme en el icono en dispositivos pequeños . Puedes elegir si quieres que eso pase solo en móvil, o también en tablet .
Y dentro del menú, los submenús suelen indicarse con una flechita hacia abajo. Puedes cambiarla por otro icono o quitarla si no te gusta .
¿Quieres que sea más útil? Añade un botón de «Llamada a la Acción» (Call to Action). No pongas solo «Click aquí». Pon algo como «Reserva ahora» o «Consigue tu presupuesto». Le das un color que contraste, y en la pestaña «Estilo» puedes incluso configurar un color diferente para cuando el ratón pase por encima (hover), para que dé feedback visual . Esos pequeños detalles hacen que la gente interactúe más.
Otra idea buena es añadir iconos de contacto directo. Elementor te deja poner iconos que, al pincharlos, abran directamente el correo, WhatsApp o marquen un teléfono . Para un negocio local, esto es oro. Lo configuras en la sección «Mostrar» / «Elementos» del encabezado .
Cuando lo tengas todo a tu gusto, le das a «Publicar». Ahí es donde Elementor te hace otra pregunta clave: ¿En qué páginas quieres que aparezca este encabezado?. Lo normal es elegir «Todo el sitio». Pero si eres más avanzado, puedes crear encabezados distintos. Por ejemplo, uno normal para la mayoría de páginas y uno sin menú, más minimalista, para la página de ventas específica. Eso se controla con las «Condiciones» dentro del Theme Builder .
Por último, un truco de los buenos: el «Sticky Header» o encabezado fijo. Eso no se activa aquí. Normalmente es una opción que traen algunos temas o que puedes lograr con ajustes avanzados de CSS o con plugins extras. La idea es que el encabezado te siga al hacer scroll. Es muy cómodo para el usuario, pero asegúrate de que cuando se quede fijo, no ocupe media pantalla en el móvil.
Si no quieres complicarte tanto la vida desde cero, hay plugins complementarios como «Elementor Header & Footer Builder» o «ElementsKit» que añaden widgets específicos y más plantillas para encabezados . Son una buena ayuda, pero a veces con lo que trae Elementor Pro (si lo tienes) es más que suficiente.
El resumen de todo esto es: piensa en el encabezado como la fachada de tu casa virtual. Tiene que ser acogedora, indicar claramente dónde está la puerta (el menú) y ofrecer algo útil nada más llegar (un botón o un contacto). Y sobre todo, tiene que verse igual de bien y ser igual de fácil de usar tanto si te visitan desde un ordenador como desde el móvil. Si no es responsive, no sirve.
