Cómo hacer un header con Elementor para tu web

El header de una web (o cabecera) es una parte fundamental dentro de la web de cualquier negocio online, puesto que es un elemento dentro del diseño web que tiene como misión ayudar a que la navegabilidad del usuario por el sitio sea fácil y placentera.

Pero la cabecera de una web no sólo sirve para eso. Es mucho más.

Un header web bien hecho puede ayudarnos incluso a mejorar las conversiones de nuestra web y ayudarnos a lograr nuestros objetivos de negocio finales.

Por ello, porque es una parte tan importante, he creado este artículo para enseñarte cómo hacer un header con Elementor para tu web que sea memorable en todos los sentidos.

Esto es, que no sólo sea como tú quieras estéticamente, sino que también pueda cumplir tus objetivos estratégicos a nivel de negocio.

Qué es un header web y qué poner en él

Bueno, entiendo que esto lo sabes de antemano. Pero por si acaso, te voy a explicar rápidamente a qué me refiero cuando hablo del header de una web.

Para empezar, te quiero aclarar que header web es lo mismo que cabecera web. Si en este artículo te encuentras escritos estos dos conceptos, no te líes: tienen el mismo significado.

El header o cabecera de una web hace referencia a la sección de la web donde, por regla general, encontramos siempre dos elementos fundamentales:

• El logotipo de tu sitio. O el isotipo, imagotipo, isologo o cualquier elemento gráfico que tengas que sea el identificador de tu marca o tu negocio.
• El menú principal de la web. Esto es, el elemento que permitirá a tus visitantes navegar entre las diferentes páginas de tu sitio web.

¿Significa esto que estos dos elementos son los únicos que pueden aparecer en el header de una web?

En absoluto.

Dependiendo de tu estrategia de negocio y objetivos, en la cabecera de tu web podrás incluir otros elementos tales como:

• Botones a redes sociales
• Botones destacados en plan CTA’s para lograr tus objetivos (suscripción a tu newsletter, página de solicitud de presupuesto, ofertas, etc.).
• Buscadores (para facilitar al usuario aún más la navegación y que encuentre rápidamente lo que está buscando)
• Datos relevantes para tus visitantes o clientes. Por ejemplo, los datos de contacto de una empresa cuyo objetivo principal es precisamente ese, que les contacten.

Y mucho más, por supuesto. Realmente, se puede implementar prácticamente cualquier cosa que necesites.

Dónde se pone el header de una web

Generalmente, el header está situado en la parte superior del sitio web, antes de ninguna otra sección, contenido o elemento del diseño web.

Fíjate bien que he dicho «generalmente».

¿Por qué generalmente? Porque esto no es necesariamente siempre así ni es ni de lejos obligatorio que esté ahí siempre.

De hecho, hay webs que tienen su header (recuerda, es la zona donde se encuentra el logotipo y menú principal) oculto en una ventana emergente que se activa al pulsar en un botón del tipo «hamburguesa» o también el header se puede situar en uno de los laterales del sitio web.

Debajo de estas líneas te pongo dos ejemplos visuales de esto.

Tutorial sobre cómo hacer un header con Elementor en tu web paso a paso

Aclarados los conceptos principales, vamos al lío. Es hora de aprender cómo hacer un header con Elementor para tu web.

Pero antes de meternos en faena quiero aclararte que para poder seguir este tutorial te hacen falta una serie de requisitos previos.

Requisitos previos para crear una cabecera web con Elementor

El primer requisito es que necesitas tener la versión de pago de Elementor, ya que para esta tarea vamos a usar Elementor Theme Builder. Es decir tienes que tener comprado e instalado sí o sí Elementor Pro en tu WordPress.

Si no lo tienes, te dejo por aquí el enlace de compra para que puedas adquirirlo si quieres.

Y si tienes comprado Elementor Pro, pero no lo tienes instalado aún porque no sabes cómo hacerlo, te recomiendo que veas este otro post sobre cómo instalar Elementor Pro.

El segundo requisito indispensable para crear un header en Elementor para tu web es que previamente hayas creado al menos un menú en tu zona de menús de WordPress.

Si no lo tienes creado y no sabes cómo hacerlo, échale un vistazo primero a este otro vídeo en el que explico cómo se crea un menú en WordPress.

Y ahora sí. Cumplidos estos dos requisitos previos, es la hora de irnos al tutorial paso a paso sobre cómo hacer un header con Elementor. Vamos al lío.

Crear la estructura de la cabecera web

El primer paso es dirigirte a Plantillas > Elementor Theme Builder y pulsar el botón Añadir Nueva.

En la ventana emergente que te aparecerá, selecciona la opción de «Header» y dale un nombre a la cabecera que vas a crear para tenerla identificada en tu WordPress.

Cierra la ventana de plantillas predeterminadas que Elementor pone a tu disposición, ya que aquí vamos a crear nuestro header web de forma 100% personalizada.

Ahora estarás en la pantalla de maquetación web de Elementor. Pulsando en el botón morado con un símbolo de +, añade una sección a tu web de dos columnas.

Con el cursor del ratón, puedes establecer el ancho de las columnas que más te convenga. Generalmente, el ancho de la columna del logotipo siempre será menor que el de la columna donde se vaya a ubicar el menú principal de la web.

Con esto ya tenemos creada la estructura de nuestra cabecera web. Fácil, ¿verdad?

Añadir tu logotipo a tu header

El siguiente paso es el de añadir el logotipo a la cabecera de tu web en la columna que hemos implementado con este fin. Para ello, haremos uso de la herramienta Site Logo incluida con Elementor Pro.

Gracias a ella, ya tendremos automáticamente el logotipo de nuestro negocio implementado en la cabecera siempre y cuando tengamos establecido dicho logotipo en las opciones de Apariencia de WordPress (Apariencia > Personalizar > Identidad del Sitio).

Si no es así, desde el propio Elementor puedes establecer el logotipo del sitio pulsando en el icono «hamburguesa» de Elementor (son tres barras horizontales) y posteriormente yendo a Ajustes del Sitio > Identidad del sitio.

Con las opciones de Estilo de la herramienta Site Logo puedes optimizar el tamaño del logotipo como tú quieras si lo ves necesario.

Cómo crear un menú con Elementor

Ahora, en la segunda de las columnas, vamos a implementar el menú principal que hemos creado previamente en la zona de menús de WordPress.

Y, dicho sea de paso, a darle un poquito de estilo propio.

Para ello, utilizaremos la herramienta Nav Menu de Elementor, arrastrando y soltando dicha herramienta hacia la segunda de las columnas que hemos preparado para que en ella se visualice nuestro menú de navegación.

Una vez colocado en nuestro diseño, en las opción Menú de la pestaña Contenido de la herramienta Nav Menu seleccionaremos el menú que queremos colocar como principal (en el caso de que tengamos creados más de un menú en WordPress).

A partir de aquí, con las opciones de las pestañas Contenido y Diseño podrás darle a tu menú la apariencia que quieras. Incluso, podrás darle ciertas animaciones que lo podrán diferenciar sensiblemente de cualquier otro menú de otra web.

No profundizaré aquí en todas y cada una de las opciones que contienen estas dos pestañas, pero si quieres ver un ejemplo real de cómo darle estilos a tu menú dando un repaso a las opciones de estilo principales que puedes utilizar, te recomiendo que veas el vídeo sobre cómo hacer un header con Elementor que encontrarás al principio de este mismo post.

Cómo hacer un header con Elementor para conseguir tus objetivos

Por supuesto, el tutorial sobre cómo crear una cabecera con Elementor que te he explicado anteriormente es un tutorial para una cabecera básica.

Esto es, que simplemente contenga un logotipo y un menú principal.

Pero, si tú lo deseas y en función siempre de tu estrategia, puedes añadir a tu header web tantos elementos como necesitas o consideres importantes para conseguir tus objetivos de negocio.

De hecho, puedes usar cualquier herramienta disponible en Elementor y Elementor Pro para crear lo que más te interese.

Por ejemplo, podrías crear una barra fija encima del header básico para poner ahí un banner que tenga como objetivo incentivar a la suscripción de tu newsletter o la descarga de tu lead magnet creando una nueva sección encima y utilizando la herramienta Formulario de Elementor.

O, si le das mucha importancia a tus redes sociales dentro de tu negocio, puedes colocar al lado del menú principal unos iconos que enlacen hacia tus perfiles en estas redes sociales utilizando la herramienta Iconos Sociales.

Una vez más, te recomiendo que le eches un vistazo al vídeo que he puesto al principio de este artículo para que veas algunos ejemplos prácticos y te des cuenta del tremendo potencial que tiene el poder crear tu header personalizado con Elementor y su Theme Builder.

Y esto es todo por hoy. Espero que este tutorial sobre cómo crear un header con Elementor para tu web te haya sido de utilidad y, sobre todo, te haya abierto los ojos de cara a poder exprimir al máximo el potencial de la cabecera de la web de tu negocio.