Cómo Crear Encabezados en Elementor (Incluye Método Gratuito)

¿Le gustaría tener más control sobre su sitio web sin tener que codificar?

Si conoces el popular constructor de páginas Elementorentonces sabrá que ofrece una flexibilidad increíble a la hora de crear su sitio web, ¡sin necesidad de programación!

Sin embargo, Elementor sólo te lleva hasta cierto punto, porque es tu tema de WordPress el que controla elementos como la cabecera, incluido el logotipo y la zona de navegación. 

Esto no es un problema si estás contento con las opciones de cabecera que vienen con tu tema, pero cada tema de WordPress es diferente, por lo que las opciones integradas pueden no ser exactamente lo que estás buscando. O quizás te gusta tu cabecera, pero desearías poder aplicar fácilmente una única a un página de aterrizaje en su sitio. 

Sea cual sea la personalización que necesites en tus cabeceras, hay algunas formas estupendas de utilizar Elementor y disfrutar de un control total de arrastrar y soltar sobre la cabecera de tu sitio web. Esto es lo que necesita saber para construya bonitas cabeceras personalizadas ¡con Elementor! 

Cómo editar la cabecera en Elementor

Está claro que, tanto desde el punto de vista estético como funcional, la cabecera de su sitio web es esencial para una buena experiencia de usuario. Al fin y al cabo, aquí es donde se encuentran el menú de navegación, el logotipo, el carrito y otros elementos importantes. 

Para personalizar tu cabecera para Elementor, vas a utilizar una gran función llamada Theme Builder, que está disponible en Elementor Pro sólo.

(Nota: Este enfoque requiere que dispongas de la versión de pago de Elementor, pero también exploraremos una alternativa gratuita más adelante).

Creación de una cabecera Elementor con el Theme Builder

A continuación se explica cómo empezar a utilizar el Theme Builder.

Paso 1: Busque la pestaña Elementor en la barra lateral

Acceda al backend de su sitio web WordPress, instale la aplicación Elementor plugin de Plugins > Añadir nuevo. 

Asegúrese de instalar la versión pro de este constructor de páginas. Incluye docenas de plantillas de cabecera prediseñadas, pero para tener un control total, ¡deberías crear la tuya desde cero!

Vaya a Plantillas > Creador de temas.

Paso 2: Crear una nueva plantilla en Elementor

Haga clic en Añadir nueva plantilla para crear una nueva plantilla en Elementor. 

En este cuadro de diálogo, puede seleccionar el Cabecera y cree un nombre para su plantilla. 

Paso 3: Haga clic en "Crear plantilla" para empezar

Una vez creada y publicada la plantilla, puede editar la cabecera directamente con Elementor. 

Widgets Elementor

Diseñar tu cabecera funciona igual que cualquier página o sección con Elementor. Simplemente arrastra diferentes widgets a la página principal para crear algo increíble.

Hablando de widgets, en la barra lateral de Elementor Pro encontrarás todo tipo de prácticos widgets Elementor para crear rápidamente una cabecera personalizada.

He aquí algunos de los más útiles:

• Logotipo del sitio
• Título del sitio
• Título de la página
• Menú de navegación
• Formulario de búsqueda
• Mapa del sitio

Con estas opciones de widgets en Elementor Pro, puede crear una cabecera con todos los elementos que necesite.

Sólo recuerda que si estás diseñando un encabezado personalizado, debes aprovechar el contenido dinámico para que el sitio web extraiga el mismo elemento de cada página. 

Por ejemplo, para obtener un logotipo coherente, puede cargar un logotipo del sitio en su personalizador con la función Widget del logotipo del sitio y utilícelo como elemento dinámico en su plantilla de cabecera, en lugar de utilizar un widget de imagen para el logotipo.

De este modo, aparecerá igual en todas las páginas que utilicen esta plantilla de cabecera y, cuando llegue el momento de actualizar el logotipo, sólo tendrá que cambiarlo de sitio.

Paso 4: Elegir las condiciones de visualización

Ahora sólo tienes que completar un paso más y estarás listo para lucir tu nueva cabecera.

Una vez que pulse Publicar se le pedirá que seleccione la condición de visualización. 

Las condiciones de visualización sólo significan en qué parte de su sitio web WordPress desea mostrar el encabezado. 

Hay tres opciones:

• Todo el sitio: Si se selecciona, el encabezado se mostrará en todas las páginas y todas las entradas de blog de su sitio web.
• Archivos: Si selecciona esta opción, puede mostrar la cabecera en una página o entrada archivada en particular.
• Singular: Si selecciona esta opción, puede mostrar la cabecera en una página, categoría o entrada específica.

Esta pantalla dirigida es una de las cosas más potentes del Elementor. Puede utilizarlo para crear páginas y entradas personalizadas e incluso páginas de destino dentro de su sitio web WordPress.

¿Sabías que Astra plantillas preconstruidas para Elementor ¿vienen con fantásticos cabezales?

Elementor Cabezal adhesivo

En Elementor Protienes la opción de crear algunas variaciones interesantes en la cabecera. En lugar de depender de las opciones de cabecera pegajosa de su tema o un plugin de cabecera pegajosa de terceros torpe, puede utilizar el incluido Cabecera adhesiva Elementor.

Para crear un encabezado adhesivo para su plantilla de encabezado, todo lo que tiene que hacer es ir al panel y seleccionar Avanzado > Efecto de desplazamiento. 

A continuación, seleccione "top" o "fondo" para que la cabecera que has creado "palo" en la parte superior o inferior de la página a medida que el usuario se desplaza.

Hay funciones adicionales para definir cómo se anima la cabecera, y también puedes seleccionar qué dispositivos quieres que se apliquen a escritorio, móvil y tableta.

Elementor Cabecera transparente 

Si realmente quieres que tu cabecera personalizada impresione, puedes añadirle transparencia cambiando la opacidad a un número como 0,5 con algo de CSS personalizado y la clase CSS de Elementor. 

A continuación, puede combinarlo con la función de cabecera adhesiva, de modo que cuando el usuario se desplace, la cabecera transparente Elementor revelará la página que hay detrás.

Esta función requiere un poco de código, pero, afortunadamente, es tan sencillo como copiar y pegar. 

Aquí tienes un vídeo oficial del Elementor que muestra cómo se hace.

Crear cabecera móvil

Elementor Pro te da la libertad de personalizar completamente tu cabecera móvil igual que personalizas una página. 

Puedes seleccionar la vista para móvil o tableta haciendo clic en el botón de modo responsive de la parte inferior izquierda de la pantalla, justo debajo del panel del widget Elementor.

Una vez seleccionada, verás que aparece una barra en la parte superior del área de edición. Desde aquí puedes seleccionar el tamaño de la pantalla.

Este proceso es muy similar a la edición de páginas con la versión gratuita de Elementor.

Elementor Recapitulación del Theme Builder

Este es un resumen rápido de cómo construir cabeceras personalizadas en Elementor. No es una solución perfecta, pero te da mucha flexibilidad en la construcción de la cabecera personalizada que necesitas para tu sitio web.

Usando condiciones, Theme Builder también te permite crear más de un encabezado y asignarlos a diferentes áreas de tu sitio, lo cual es un gran beneficio que tal vez no tengas con tu tema actual.

¿Quieres saber más sobre el método Theme Builder? Aquí está el video oficial que le guiará a través de la creación de su propio encabezado de WordPress utilizando Elementor's Theme Builder.

Pros de Theme Builder: 

• Personalización total del diseño de la cabecera
• Uso intuitivo Creador de páginas Elementor
• Incluye una gran selección de widgets útiles

Contras de Theme Builder:

• No incluye el marcado schema
• No incluye mega menú
• Requiere Elementor Pro (la versión de pago de Elementor)

Alternativa gratuita a Elementor Pro para crear cabeceras personalizadas

El Theme Builder de Elementor Pro es indudablemente potente, pero para acceder a él hay que adquirir una suscripción Personal Elementor, que cuesta $49/año para un sitio web. 

La buena noticia es que, si utilizas la versión gratuita de Elementor, tienes otra opción.

Hemos creado un fantástico plugin gratuito llamado Elementor - Encabezado, pie de página y bloques plugin. Se trata de un complemento para Elementor que le permite crear un diseño y establecerlo como encabezado o pie de página en su sitio web.

¿Cómo funciona? Es tan fácil como 1-2-3:

1. Diseña un esquema en Elementor como lo harías normalmente
2. Designarlo como cabecera
3. La plantilla creada se aplicará automáticamente como cabecera

Consulte esta entrada del blog para obtener un proceso detallado paso a paso.

En Elementor - Encabezado, pie de página y bloques le ofrece muchas de las mismas funciones que el Theme Builder de Elementor Pro, con la ventaja añadida del marcado schema. 

Otra gran ventaja de este plugin constructor es que puedes utilizarlo de forma gratuita indefinidamente: nunca tendrás que preocuparte por perder el acceso si no mantienes una suscripción de pago.

El plugin viene con widgets integrados que facilitan el proceso de diseño de la cabecera. 

Estos widgets ofrecen las funciones básicas necesarias para que no tengas que buscar plugins adicionales. 

• Logotipo del sitio 
• Título del sitio 
• Lema del sitio 
• Menú de navegación 
• Título de la página 
• Imagen Retina 
• Copyright 

Este plugin funciona con todos los temas. Algunos de los temas tienen compatibilidad incorporada para este plugin, mientras que para unos pocos tendría que elegir un método de compatibilidad.

En caso de que después de activar el plugin, vea un aviso para comprobar los métodos de compatibilidad disponibles.

Vaya a Apariencia > Creador de encabezados y pies de página > Soporte temático, y selecciona un método adecuado.

Una vez añadido el soporte para temas, sólo tienes que diseñar un diseño con Elementor, designar si debe aplicarse como cabecera o pie de página, ¡y listo!

¿Debería utilizar una cabecera Elementor?

Hasta ahora en este post, hemos visto algunas maneras de hacer un encabezado personalizado con Elementor. Pero una vez dicho esto, ¿merece la pena prescindir de las opciones de cabecera de tu tema para crear una cabecera personalizada con Elementor? 

No necesariamente.

La mayor ventaja de utilizar el encabezado integrado en el tema es que ya es totalmente compatible. 

Éstas son sólo algunas de las características que puede incluir su tema:

• Múltiples variantes de diseño
• Una cabecera pegajosa
• Capacidad de respuesta móvil
• Opciones de cabecera móvil
• Opciones de estilo personalizadas

En otras palabras,

En última instancia, todo se reduce a esto: ¿Te permite tu tema actual crear una cabecera que haga lo que necesitas?

Con el Tema Astra, se obtiene el Creador avanzado de encabezados y pies de páginaque funcionará perfectamente. Puede obtener más información en este vídeo.

No sacrifiques la funcionalidad ni la imagen de marca de tu cabecera, pero tampoco te compliques más de lo necesario. Solo tú puedes decidir si necesitas una cabecera totalmente personalizada.

Conclusión

Ahora es más fácil que nunca crear sitios web atractivos utilizando las funciones de arrastrar y soltar del constructor de páginas más popular de WordPress. Independientemente del enfoque que adopte, su sitio web tendrá un aspecto y un funcionamiento excelentes con Elementor. Y no sólo eso, también puedes diseña tu blog con Elementor.

Si desea edite también el pie de página de su sitio web, aquí tiene una guía rápida.

Ahora queremos conocer su opinión. ¿Ha tenido éxito utilizando el Theme Builder en Elementor Pro para su cabecera? ¿Ha podido crear una cabecera personalizada utilizando el programa gratuito Plugin Header Builder?