¿Qué es un Header?
Header o encabezado es un término que en lenguaje de programación designa la parte superior de un sitio web. En otras palabras, el heather es lo primero que ves cuando visitas una página.
Normalmente el header incluye el nombre o logo de la empresa, algún eslogan o información muy breve y las pestañas del menú de navegación. También suele ser fijo, o sea, que no importa cuánto baje el usuario en la página, éste siempre se mantendrá visible.
¿Para qué sirve el header?
El header de tu sitio web tiene una gran importancia porque es la primera impresión que causas en tus visitas. Esta primera impresión que quieras causar va a depender mucho de los objetivos de la página y de las necesidades del Buyer persona, por lo que no todos los headers son iguales.
Por ejemplo, el header del sitio de Neil Patel es un CTA directo y agresivo:
Este Header de Home Depot está enfocado a que el cliente encuentre más rápido el producto que está buscando:
Y el header de Pizza Hut está pensado para agilizar el proceso de pedido en línea:
¿Cómo hacer un buen header?
La primera pregunta que debes hacerte para estructurar un buen header es ¿cuál es la impresión, sensación o acción más importante que quiero detonar en mi visitante? porque de esa respuesta va a partir todo lo demás.
Sin embargo, independientemente del objetivo y contenido de tu sitio, hay algunos consejos que pueden aplicarse para incrementar la calidad y la efectividad de cualquier header:
- Siempre identifica tu marca con el logo y el slogan
- Menos es más: información directa, concisa y breve
- Cuida mucho el diseño, independientemente de que incluyas o no imágenes
- Procura que el header cumpla alguna función práctica de navegación
- Integra el CTA más importante del sitio (registro, búsqueda, pedido, etc)
- Incluye íconos con links a tus redes sociale o a tu App
¿Qué elementos debe tener un header?
Puede o debe porque habrá elementos opcionales y otros podríamos decir que casi obligatorios:
- El menú. Como antes te he comentado, el menú es uno de los elementos más importantes e imprescindibles del header de tu web. El usuario siempre buscará el menú de tu web para poder navegar por ella.
- Por supuesto, otro de los elementos más imprescindibles es el logotipo de tu empresa. Al colocarlo en la cabecera en todo momento en tu sitio web, mejorarás tu branding y será fácil para los usuarios reconocer siempre dónde están.
- Los iconos de redes sociales. Si tu empresa o blog tiene redes sociales, es conveniente que coloques los iconos de éstas en el header, ya que es uno de los sitios (junto al footer) donde el usuario más va a recurrir para buscarlas.
- El buscador. En algunos blogs o páginas web, suele haber en el header un icono de una lupa, para poder buscar por medio de palabras clave algún contenido.
- Información de contacto de tu empresa: teléfono, email, etc.
- Selector de idioma, si el sitio está traducido a varios idiomas. Si es así, el lugar más cómodo y intuitivo para que estén estas banderitas es en el header, aunque también pueden estar en otros lugares de la web.
- Otros enlaces importantes que quieras destacar. Puede ser un segundo menú, o simplemente varios enlaces adicionales a otras partes de tu web o a otros sitios web que quieras colocar de manera independiente en la cabecera.
- Llamada a la acción o botón. En él podemos destacar el objetivo de nuestra página web: “Hazte socio”, “Contrata ahora”, «Suscríbete«, etc.
¿En qué situaciones no hay header en un sitio web?
Antes he mencionado que puede darse la situación de que haya páginas de tu sitio que no tengan header. ¿Cuál es el caso? Por ejemplo, en el caso de las páginas de aterrizaje o landing pages.
Estas páginas normalmente no tienen menú y por tanto, algunas tampoco tienen header.
Las páginas de aterrizaje o landing pages, son páginas a las que se enlazan desde un anuncio o desde un email, por alguna campaña concreta.
El objetivo de esa campaña puede ser rellenar un formulario, descargar un infoproducto, obtener información de un servicio. Por tanto, normalmente, para estas campañas suelen utilizarse páginas específicas (no el sitio web completo, donde está el menú) con esa información y nada más, para no desviar la atención del usuario ni mezclar objetivos.
De todas formas, estas landing pages pueden no tener menú, pero sí header con otros elementos: redes sociales, información de contacto, etc.
¿Cómo dejar fijo el header cuando se hace scroll?
Para finalizar, porque soy así de generosa, voy a compartir contigo cómo puedes fijar el header de tu página para que al hacer scroll continúe siempre visible arriba.
Tan solo tendrás que tocar un poco el código css de tu sitio. Si utilizas WordPress puedes hacerlo directamente en la hoja de estilos o en el apartado de css personalizado que suelen tener algunas plantillas.
Vamos a editar el código del header y del body. Si quieres, puedes aplicarle una clase o un selector-id al header que quieres editar. En mi caso, por ejemplo, el selector que voy a utilizar es #cabedera-fija. Por tanto, el código sería el siguiente:
#cabecera-fija {
position: fixed;
}
Con solamente este código, conseguimos que la cabecera se quede fija, pero el contenido de la página queda por debajo. Así que, habría que editar el body:
body {
padding-top: 80px; ---> Altura del header
}
Para que no quede mal, debemos poner un padding-top del mismo tamaño que la altura que tiene la cabecera.
Si todo ha ido bien, ya tendrías tu header fijo y funcionando correctamente.
