blog webempresa

Cómo crear un encabezado personalizado en Elementor

por | Ago 16, 2022 | Plugins WordPress

Cómo crear un encabezado personalizado en Elementor

Una de las grandes ventajas que tiene el uso de constructores es que nos permiten diseñar nuestro sitio web a la medida, añadiendo configuración específica y logrando organizar el contenido como deseas.

Actualmente, tenemos muchos constructores que nos ayudan con esta tarea, alguno de ellos puede ser:

  • Divi Builder (Integrado por defecto con el tema Divi y WP Fácil)
  • Elementor
  • Beaver builder

Muchas de estos constructores pueden ser de pago y muchas de sus funcionalidades solo están disponibles en las versiones pro del complemento; sin embargo, tenemos alternativas adicionales para usar algunas funcionalidades extras con alguno de ellos. En esta guía veremos como podremos construir un encabezado personalizado utilizando un complemento gratuito disponible en el repositorio de WordPress, el cual funciona con uno de los constructores más utilizados actualmente, “Elementor”.

Configuraciones básicas del plugin

Lo primero que tenemos que hacer es tener o utilizar Elementor como nuestro constructor e instalar el complemento adicional “Elementor Header & Footer Builder”

Elementor Header & Footer Builder

Una vez tenemos instalado y activos los dos plugins para construir nuestro encabezado, tenemos que ir al apartado Apariencia > Elementor Header & Footer Builder y pulsar en añadir nuevo.

En la siguiente ventana lo que tendremos que escribir es el título de nuestra plantilla, en nuestro caso puede ser “cabecera” e indicar el tipo de plantilla que queremos.

Luego tenemos que configurar donde deseamos, se muestre esta cabecera y pulsar publicar.

Una vez tenemos nuestra plantilla configurar con las configuraciones básicas, lo siguiente será comenzar a darle forma con el constructor de Elementor.

Construyendo nuestra cabecera con Elementor.

Para comenzar a construir nuestra cabecera con Elementor, una vez tenemos configurado la plantilla lo primero será pulsa en el botón que indica “Editar con Elementor”.

Una vez pulsamos en nuestro constructor comenzará a cargar el constructor donde podremos comenzar a diseñar nuestra cabecera, para construir de forma adecuada nuestra cabecera puedes usar todos los widgets disponibles con el plugin de Elementor Header & Footer Builder.

Cada uno de estos widgets tienen una funcionalidad distinta:

  • Logotipo del sitio – Hereda automáticamente un logotipo del personalizador. Incluso puedes establecer una imagen personalizada como logotipo con un enlace personalizado y una leyenda.
  • Título del sitio – El nombre del sitio se heredará automáticamente del personalizador. Puedes añadir un prefijo, un sufijo, un ícono y un enlace.
  • Descripción del sitio – Mostrará la descripción del personalizador. Tienes una opción para el prefijo, el sufijo, el icono y el enlace.
  • Menú de navegación – Te ofrece una lista de menús ya creados en tu web. Solo necesitas elegir el necesario. Ofrece 4 diseños para el menú: horizontal, vertical, expandido y volante. Con muchas otras opciones, incluso puedes establecer íconos personalizados para abrir y cerrar el menú.
  • Título de la página – Muestra el título de tu entrada o página actual y ofrece opciones adicionales para el prefijo, sufijo, ícono, enlace y alineación.
  • Imagen Retina – Puedes subir la imagen Retina para pantallas de alta definición.
  • Menú del carrito de WooCommerce – Puedes mostrar el número actual de productos en el carrito junto con el precio total.
  • Copyright – Ofrece constantes para mostrar un aviso de copyright – [hfe_current_year] y [hfe_site_title].
  • Search – Agregue un formulario de búsqueda con diferentes opciones de diseño y estilo.

Utilizando cada uno de estos widgets puedes añadir y construir tu cabecera, puedes construir una cabecera para tu tienda, por ejemplo la que se muestra en el siguiente video:

Como puedes ver, tenemos diferentes opciones como podemos construir o diseñar nuestro sitio web de forma personalizada, incluyendo nuestras cabeceras o header.

¿Te ha resultado útil este artículo?

Video tutorial, paso a paso y demo del editor de contenidos

 

La verdad es que este creador de webs con IA me tiene algo enamorado, y aquí te envío un vídeo de cómo es “por dentro”, para terminar de convencerte y animarte a que lo utilices.

Durante el vídeo voy a:

  • Configurar la web desde cero, con el asistente (que hemos visto en el apartado anterior).
  • Añadir información sobre mi web (una web para un restaurante vegano en madrid, especializado en verduras de la huerta).
  • Ver el resultado y explorar las características principales de WeBuilder en cuanto a configuración y posibilidades generales.

Ten en cuenta que este vídeo no es un curso completo sobre la herramienta, es un recorrido por encima para que te hagas una idea de las posibilidades que tiene.

 

 

 

Conclusión

Crear una web con IA y WeBuilder te permite centrarte en tu negocio o tu pasión, dejando la parte técnica en manos de algoritmos inteligentes. Ahorro de tiempo, costes reducidos y resultados profesionales son solo el comienzo.

  1. Define tu proyecto y palabras clave.
  2. Deja que la IA genere la estructura y contenido.
  3. Personaliza el diseño y las funcionalidades.
  4. Publica y mantén tu sitio siempre optimizado.
  5. Delega la parte técnica y las dudas al equipo de soporte de Webempresa.

Prueba WeBuilder hoy mismo y lleva tu proyecto a un nivel que no pensabas alcanzable hasta antes de leer este artículo, y todo gracias a la potencia de la inteligencia artificial en Webempresa.

¡Espero de todo corazón que este artículo te haya servido para darte un empujoncito a llevar a cabo esa puesta a punto de tu web o prueba de concepto de tu proyecto, y nos vemos en el siguiente artículo!

Promo hosting Webempresa julio 2025