Marc Grau

Header footer builder elementor

Cómo hacer Header y Footer con Elementor

Header footer builder elementor

Hola queridos lectores, ¿cómo estáis? Espero que todo bien.

Hoy os he preparado una pequeña guía sobre algo que muchos no sabéis como hacer del todo. En varias ocasiones he dicho que para diseñar mis webs uso el constructor por bloques llamado “Elementor”. Este plugin para WordPress facilita muchísimo todo el trabajo de hacer una estética bonita.

Por eso mismo, os enseñaré a crear un Header y un Footer usando este plugin de una forma muy sencilla y rápida. Con este método, acelerareis mucho todo el proceso de creación inicial de la web y veréis la inmensa cantidad de diseños diferentes que podéis llegar a hacer.

¿Qué es el Header y el Footer?

El Header y Footer son conceptos muy básicos de diseño web que es necesario entender desde el primer momento para estructurar una web de forma correcta. Para empezar, el Header es la cabecera de la página web que deberá tener ciertos elementos característicos y ser llamativa. Por otro lado, el Footer es el pie de página que se encuentra al final de la web mostrando elementos de menor importancia para los usuarios corrientes.

A continuación, os muestro algunos de los elementos más característicos de estas dos secciones necesarias en cualquier web:

Contenidos del Header:

  • Logotipo de la tienda o empresa.
  • Menú con las partes de la web o categorías de la tienda.
  • Botón que enlaza al blog.
  • Carrito de la compra (en la mayoría de tiendas).
  • Buscador.
  • Botón de acceso para usuarios logados (en el caso de ser un portal).
  • Opción de cambiar el idioma de la web.

Contenidos del Footer:

  • Política de privacidad.
  • Política de cookies.
  • Aviso legal.
  • Política de devoluciones (en los eCommerce).
  • Página de contacto y quienes somos.
  • Información de la empresa.
  • Redes sociales.

¿Qué es Elementor?

Ahora que ya sabes un poco de teoría, podemos empezar con lo realmente interesante. Para crear el Header y Footer de la web de una forma rápida y sencilla usaremos 2 plugins de WordPress. El primero se llama Elementor y será la base de todo lo que hagamos.

Elementor es uno de los constructores por bloques (page builder) que compite mano a mano con las mejores plantillas de WordPress.

Consiste en una gran variedad de bloques que puedes ir personalizando para crear cada página como tú quieras. Estructurarla con columnas y filas añadiendo dentro de ellas los títulos, imágenes, texto y mucho más. El segundo plugin que usaremos se llama: Elementor – header footer & blocks. Es un addon totalmente gratis de Elementor que te permitirá crear estos bloques de una forma realmente fácil.

Header Footer Elementor tutorial

Voy a dar por supuesto que ya tienes conocimientos mínimos de WordPress, así que no haré hincapié en el proceso de instalación. Lo primero que tienes que hacer es instalar los 2 plugins nombrados anteriormente: Elementor (con la versión gratis es suficiente) y Elementor – header footer & blocks.

En el caso que quieras hacer algún menú, tendrás que buscar algunos addons ya que la versión gratis de Elementor no tiene esa opción. Yo te recomiendo el plugin NavMenu Addon for Elementor.

Una vez tenemos todos los plugins que necesitamos, empezamos a crear los bloques:

Crear Header con Elementor

Sigue los siguientes pasos para crear un Header con Elementor:

  1. Ve a “Apariencia” y haz clic en “header footer builder”.
  2. Haz clic en “Añadir nuevo”.

3. Pon esta configuración y guarda.

4. Haz clic en “Editar con Elementor”.

5. Edítalo como tú quieras.

Crear Footer con Elementor

Sigue los siguientes pasos para crear un Footer con Elementor:

  1. Ve a “Apariencia” y haz clic en “header footer builder”.
  2. Haz clic en “Añadir nuevo”.

3. Pon esta configuración y guarda.

4. Haz clic en “Editar con Elementor”.

5. Edítalo como tú quieras.

Ahora ya sabes cómo editar el Header y el Footer de tu web usando el constructor por bloques Elementor. Si quieres más guías o tutoriales de Elementor u otros plugins de WordPress, no dudes en decírmelo en los comentarios.

¡Nos vemos!

Share on facebook
Facebook
Share on twitter
Twitter
Share on whatsapp
WhatsApp
Share on linkedin
LinkedIn