Tal cual como lo leíste en el título, Header Footer & Blocks Template es un plugin gratuito con el que es posible crear e insertar una cabecera, pie de página o bloque en cualquier parte de tu web usando la versión gratuita de Elementor.

Y dedicaré las siguientes líneas a explicarte cómo puedes crear un footer y un header con esta herramienta.

No está de más comentarte que Elementor – Header Footer & Blocks Template -como también es conocido- fue desarrollado por los creadores del tema Astra (Brainstorm Force), así que ya te imaginarás la calidad de los resultados que puedes obtener con él.

Y por su compatibilidad con los demás temas para WordPress no te preocupes porque funciona con casi todos.

¿Listo para comenzar a meterle caña a tu proyecto con Header Footer & Blocks Template?

Comencemos entonces.

De entrada, me gustaría tengas muy claro todo lo que puedes realizar con la ayuda de este plugin.

Por lo que te preparé una lista con sus principales funcionalidades. Léela y ve tomando nota de las funcionalidades que quieres aplicar a tu sitio.

Por cierto, si algunas que te interesen no las explico en este artículo, por favor cuéntame en los comentarios y crearé un tutorial mostrándote cómo hacerlo.

Qué puedes hacer con Header Footer & Blocks Template

Aquí la lista.

1.- Diseñar el menú que desees: horizontal, expandido, volante y vertical. Incluso puedes establecer íconos personalizados para abrirlos y cerrarlos.

2.- Crear un menú del carrito para WooCommerce.

3.- Emplear imágenes Retina en tus diseños.

4.- Elegir una ubicación de destino específica para mostrar la cabecera o pie de página que crees. Puedes establecer que aparezca en todas las páginas de tu web o en páginas concretas.

5.- Diseñar plantillas personalizadas y colocarlas donde quieras utilizando solo un shortcode.

6.- Agregar una plantilla personalizada sobre el footer. Sin duda esto te dará más posibilidades de diseño.

7.- Mostrar con más facilidad en las páginas donde tengas activa la plantilla Elementor Canvas. el header o footer que hayas creado.

8.- No tendrás que instalar más plugins. Header Footer & Blocks Template tiene los widgets necesarios para crear una cabecera, pie de página e incluso un bloque de contenido profesional.

9.- Establecer como logo una imagen (personalizada, si deseas) con su respectivo enlace personalizado y leyenda.

10.- Te mostrará automáticamente el nombre de tu sitio, su descripción y los títulos de las entradas o páginas actuales. De hecho, también te brinda alternativas extras para que personalices la alineación, enlace, prefijo, ícono y sufijo. 

Cómo funciona Header Footer & Blocks Template

En este apartado te explico cómo es la dinámica de trabajo general con Header, Footer & Blocks Template. Y en los dos apartados siguientes te detallaré, con videotutoriales incluidos, como diseñar propiamente un footer y un header con Elementor.

Esto lo hago para que te familiarices con el procedimiento y notes lo súper fácil que es trabajar con la ayuda de esta herramienta.

Te resumo su funcionamiento en 8 sencillos pasos:

1.- Instalar el complemento. Ya sabes cómo es el procedimiento: Ve a Plugin > Añadir nuevo > Buscas Header Footer & Blocks Template  > Instalar > Activar.

2.- Crear la página para el diseño. Haz clic en la caja Apariencia >Seleccionar Header Footer Builder > Añadir Nuevo.

3.- Establecer un nombre al diseño. Solo debes escribirlo en el recuadro en blanco que aparece debajo de la frase Add New Header Footer.

4.- Elegir que tipo de elemento web crearás (cabecera, pie de página o un bloque).

5.- Elementor Canvas. Activar la aparición del elemento a diseñar en todas las páginas que sean Elementor Canvas y en el recuadro Atributos de entrada (Está al lado derecho) seleccionar esta plantilla.

6.- Publicar la página y editarla con Elementor.

7.- Comenzar la gestión de diseño, agregando y personalizando cada elemento gráfico y de texto.

8.- Guardar el header o footer diseñado.

Listo.  Aquí ya podrías comenzar a crear todas las páginas que desees y en ellas te aparecerán el header y footer creado. Por lo que solo tendrás que dedicarte a maquetar el contenido del resto de la web.

Cómo crear un header  y footer con Elementor

En este caso te explicaré como crear un menú sin Elementor PRO.

1.- Lo primero que deberás hacer es crear las páginas de la web en las que aparecerá el menú.

Recuerda el procedimiento: Ve a Páginas y crea las que conformarán tu web.

2.- Una vez las hayas creado, ve a Apariencia > Menú.

Luego en la sección Estructura del menú harás dos cosas: Colocar el nombre del menú y ordenar en el orden que aparecerá cada página en el menú.

3.- En Ajustes de menú elige donde se verá el menú. En mi caso, elegí Menú principal (ya lo verás en el vídeo).

4.- Luego haz clic en Guardar menú.

5.- Aquí es momento de ajustar el estilo. En esta parte del proceso entra en juego nuestro plugin protagonista. Para hacerlo debes instalo y activarlo siguiendo el proceso habitual: Plugin > Añadir nuevo > Buscas Elementor – Header Footer & Blocks Template > Instalar > Activar.

6.- Te sugiero que también instales y actives otro plugin llamado Elementor Kit Elementor Addons.

7.- Luego de haber instalado y activado ambos plugins, ve a Apariencia > Header & Footer.

8.- Ya dentro del plugin debes efectuar varias acciones importantes como escribir el nombre referencial del elemento que crearás y elegir las siguientes opciones:

• Tipo de plantilla: Elige  Cabecera.
• Mostrar en: Escoge Todo el sitio.
• Perfiles de usuarios: Selecciona Todos los usuarios.

Selecciona la casilla ¿Activar el diseño para la plantilla Canvas de Elementor? para habilitar el diseño.

Luego haz clic en Publicar y luego Editar con Elementor.

9.- Cuando te aparezca el Panel de Control de Canvas ya podrás comenzar a crear propiamente el menú.

10.- Elige la estructura que quieres, es decir cuantas secciones tendrá el menú.

Después puedes dar vida al menú que has planeado. Solo debes arrastrar, soltar y personalizar cada elemento: imágenes, textos y espacio entre ellos.

11.- Para agregar el menú que elaboraste al inicio busca en la caja de widgets la opción Menú y elige Ad menú. Posteriormente ve a Select menú y escoge el menú que habías creado (en mi caso lo nombré Menú Principal, recuerdas).

De aquí en adelante puedes comenzar a realizar los ajustes de apariencia que desees como cambiar su alineación ubicación, etc.

Para observar cada cambio solo debes actualizar la pagina. Y si deseas ver como se verá su versión responsive  (e incluso cambiar el orden de cada sección del menú) puedes ajustar con el cursor el tamaño del Panel y luego continuar ejecutando los ajustes de apariencia y diseño que quieras.

¿Prefieres ver todo este proceso en un vídeo?

Mira este vídeo. Al inicio te explico cómo crear un header para Elementor gratis y luego cómo crear un footer con Elementor

Cómo editar un footer con Elementor

Preparé un vídeo en el que te explico cómo crear y editar un footer de la forma convencional y también como hacerlo utilizando Elementor Pro.

Es un proceso sencillo y la verdad más divertido explicártelo y entenderlo en vídeo.

Míralo y te espero en la conclusión de este artículo.

Conclusión

La principal cualidad que considero posee Header Footer & Blocks Template es que permite a cada uno de sus 900 mil usuarios activos (y contando…) ahorrar muchas horas de trabajo al crear cabeceras y pie de página para todas las páginas, sin necesidad de hacerlo una y otra vez.

Además es una prueba fehaciente de que puedes desarrollar tu proyecto utilizando herramientas gratuitas e igual obtener resultados muy profesionales.

Anímate a probarlo, Header Footer & Blocks Template es un plugin muy potente y demasiado fácil de usar con el que puedes dar vida a esa cabera y encabezado que deseas.

Y no te dará problemas.

Bueno, una pequeña muestra de ello la valoración positiva que tiene esta herramienta en el repositorio de WordPress: Un ranking arrollador de 5 sobre 5 estrellas.

Espero que la información compartí en las anteriores líneas te resulte útil para que puedas seguir creando tu web.

Si tienes dudas con gusto puedes dejármela en los comentarios o visitando la sección Soporte de IDEI HOSTING.

Nos leemos.