La Guía Definitiva de las Cabeceras Fijas (Sticky Headers) de Elementor

Tanto si eres un aspirante a desarrollador web como un empresario de comercio electrónico, es probable que tus sitios web compartan algunos elementos esenciales. Por ejemplo, todo sitio necesita una cabecera clara para ayudar a los visitantes a navegar entre las diferentes páginas. Sin embargo, si utilizas un constructor de páginas como Elementor para reducir la codificación, puede que te preguntes si todavía es posible hacer una cabecera fija de Elementor sofisticada pero fácil de usar.

Afortunadamente, el uso de una cabecera de Elementor puede proporcionar a tus usuarios una forma simplificada de explorar tu sitio web. Con este popular constructor de páginas, puedes construir una gran variedad de cabeceras que no desaparecen cuando los usuarios se desplazan por el sitio. Esta característica es la que los hace » sticky «.

En este post, hablaremos de cómo funciona una cabecera fija y de las ventajas de utilizarla. A continuación, te mostraremos cómo hacer una cabecera fija de Elementor con las versiones gratuita y profesional de la herramienta. Por último, te proporcionaremos opciones de personalización adicionales para tus cabeceras fijas utilizando CSS. ¡Empecemos!

Introducción a las cabeceras fijas de Elementor

No hay dos sitios web iguales. Sin embargo, hay algunas características que los sitios web de calidad tienen en común.

Si tienes un sitio de varias páginas, uno de estos elementos es la cabecera. Se trata de la barra horizontal situada en la parte superior de cualquier página que contiene información útil.

Normalmente una cabecera incluye tu menú de navegación con páginas como Acerca de o Contacto:

Cuando los visitantes exploren tu página, es probable que esperen una cabecera organizada que les ayude a guiarse por tu sitio. Dado que la experiencia del usuario (UX) es clave para el éxito de un sitio web, sería conveniente crear un encabezado que sea intuitivo y sencillo. Ahí es donde una cabecera fija, diseñada con Elementor, puede marcar una gran diferencia.

Cómo funciona una cabecera fija

Antes de aprender cómo funciona una cabecera fija de Elementor, vamos a ver cómo se comporta una cabecera estándar cuando te desplazas por una página:

Como puedes ver en el ejemplo anterior, esta cabecera contiene una compleja barra de navegación con categorías como Rebajas, Ropa, Zapatos y otras. Estas pestañas ayudarán sin duda a los compradores a encontrar lo que buscan. Sin embargo, cuando se desplaza hacia abajo en la página, la cabecera desaparece.

Los usuarios pueden encontrar esto frustrante, ya que les obliga a volver a desplazarse hasta la parte superior de la página para acceder al menú de navegación. Afortunadamente, una cabecera fija ofrece una solución sencilla.

Al permanecer o «pegarse» en su sitio en la parte superior de tu página, una cabecera fija puede mejorar drásticamente la UX de tu sitio web:

Cuando el diseño de tu sitio incluye una cabecera fija, tus usuarios pueden saltar rápidamente a nuevas páginas sin perder tiempo desplazándose.

Además, con este elemento fijo, puedes incluir tu logotipo delante y en el centro en todo momento. Esta característica puede ayudar a los usuarios a recordar tu marca más fácilmente y animarles a permanecer en tu sitio más tiempo.

Cuándo deberías considerar el uso de una cabecera fija

Es menos probable que los visitantes se pierdan al explorar sitios más grandes con una cabecera fija. Por ello, es posible que quieras aprovechar esta función si tu sitio web tiene muchas páginas. Por eso, a menudo verás cabeceras fijas en sitios de comercio electrónico.

Una cabecera fija puede ser especialmente útil si quieres incluir una función de búsqueda en tu cabecera. De este modo, cuando los usuarios se desplacen y se den cuenta de que no encuentran lo que buscan, podrán introducir rápidamente una consulta en la barra de búsqueda.

Además, una cabecera fija puede ser un cambio de juego si tienes un blog monetizado que muestra todas tus publicaciones en la página de inicio. En general, esta cabecera puede garantizar el mantenimiento y la escalabilidad de tu sitio web.

Sin embargo, si tu sitio sólo tiene una página, no tiene mucho sentido transformar tu cabecera de esta manera. Además, si tienes una buena cantidad de páginas en tu sitio web, pero cada una de ellas es relativamente corta, probablemente tampoco necesites una cabecera fija.

En general, una cabecera fija reduce el tiempo de desplazamiento y aumenta la usabilidad y la navegación del sitio. Si no estás seguro de si esta función beneficiaría a tu sitio web, puedes hacer una rápida auditoría de la longitud de tus páginas y luego decidir.

Cómo crear una cabecera fija de Elementor

En este tutorial, te guiaremos por los pasos para crear una cabecera fija de Elementor. Asumiremos que ya tienes el plugin de Elementor instalado y activado en tu sitio.

Cubriremos cómo puedes hacer esta cabecera tanto con la versión gratuita como con Elementor Pro. Seguramente te alegrará saber que no tendrás que aprender HTML ni editar mucho código para hacerlo

Cómo crear una cabecera fija con Elementor (gratis)

La versión gratuita de Elementor ofrece algunas funciones potentes para la creación de páginas. Sin embargo, si quieres hacer cambios en tus encabezados y pies de página, necesitarás algunas herramientas adicionales (también gratuitas).

Teniendo esto en cuenta, ¡vamos a ver cómo puedes crear una cabecera fija con Elementor!

Paso 1: Instalar y activar tus plugins esenciales

Afortunadamente, unas cuantas herramientas fiables pueden ampliar fácilmente la funcionalidad de la versión gratuita de Elementor.

Ve a tu panel de control de WordPress para encontrar tu primera herramienta. Ve a Plugins > Añadir nuevo y busca los complementos de ElementsKit Elementor utilizando la función de búsqueda:

Instala y activa este plugin como lo harías habitualmente. Cuando termines este proceso, serás llevado a tu página principal de plugins:

Ahora, vuelve a hacer clic en Añadir nuevo para localizar el plugin Sticky Header Effects for Elementor con la barra de búsqueda:

Repite el proceso de instalación y activación de esta herramienta, ¡y ya estás listo para el siguiente paso!

Paso 2: Crea tu menú

Antes de hacer cualquier tipo de cabecera, necesitarás un menú de navegación. Vamos a hacer un menú sencillo con los elementos más comunes. Incluirá un logotipo, páginas y una llamada a la acción (CTA).

Para crear tu propio menú dentro de tu panel de control de WordPress, ve a Apariencia > Menús. Junto al campo Nombre del menú, dale al tuyo un nombre descriptivo. Vamos a llamar al nuestro «Menú de cabecera fijo»:

Asegúrate de elegir Encabezado como lugar de visualización. También puedes seleccionar la casilla para añadir nuevas páginas a tu menú automáticamente.

A continuación, tendrás que añadir algunas páginas a tu menú. En la sección Páginas de la izquierda, marca las casillas de las páginas que quieras incluir, y luego haz clic en Añadir al menú:

Entonces verás tus páginas transferidas a tu menú a la derecha. Sigue adelante y haz clic en Guardar menú en la parte inferior derecha de tu pantalla:

Como puedes ver, hemos añadido algunas páginas básicas, como Contacto Acerca dey Página de muestra. Puede que quieras reordenar tus páginas para que la secuencia sea intuitiva para los visitantes.

Paso 3: Crea tu cabecera

Ahora tu menú de navegación existe, pero no puedes acceder a él en ningún sitio. Eso es porque necesitas crear una cabecera para él.

Para ello, ve a la pestaña ElementsKit de tu menú izquierdo. Si aún no lo has hecho, tendrás que hacer clic en algunas páginas de «inicio» en este punto.

Es probable que cada persona tenga preferencias diferentes, así que tómate tu tiempo para seleccionar las funciones que quieres activar. Sin embargo, asegúrate de que el módulo de pie de página de la cabecera está activado:

Ahora, ve a ElementsKit > Pie de página de cabecera:

Esta página estará vacía ya que aún no tienes ninguna plantilla de encabezado o pie de página. Haz clic en Añadir nuevo en la parte superior de la pantalla para crear tu primera plantilla de cabecera:

En la pantalla de arriba, introduce un nombre descriptivo y asegúrate de que se selecciona Cabecera como Tipo. Como estás utilizando la versión gratuita, este encabezado aparecerá en todo el sitio.

Asegúrate de poner el interruptor de Activar/Desactivar en ON y haz clic en GUARDAR CAMBIOS. Ahora volverás a tu página de plantillas, donde podrás ver tu nueva plantilla de cabecera en la lista:

También puedes ver un icono verde de Activo junto a este encabezado. Sin embargo, aún no está activo.

Para completar tu cabecera, pasa el ratón por encima de ella en la lista de plantillas y haz clic en Editar en Elementor, justo debajo de su nombre. Esto te llevará a la pantalla de Elementor Builder.

Aquí, haz clic en el icono de ElementsKit:

En la siguiente pantalla, selecciona la pestaña Secciones:

Desplázate un poco hacia abajo hasta encontrar una sección de cabecera que te guste, y haz clic en Insertar. Nosotros elegimos Encabezado – Sección 5:

Como probablemente puedas ver, nuestro menú de navegación no es visible. Así que vamos a añadirlo a nuestra plantilla de cabecera. Para ello, pasa el ratón por encima de la sección del menú de navegación de tu cabecera. En este caso, está justo en el centro:

Haz clic en esta zona, y tu configuración de menú debería aparecer en el panel de la izquierda. Ahora, localiza el campo Seleccionar menú. En el desplegable, elige el menú que has creado antes:

En este punto, deberías ver cómo se rellena el menú en tu plantilla de cabecera. Haz clic en ACTUALIZAR en la esquina inferior izquierda de la pantalla, y tu cabecera estándar estará terminada.

Veamos cómo funciona en acción:

Como puedes ver, nuestra cabecera se ve muy bien. Sin embargo, desaparece cuando nos desplazamos hacia abajo. Veamos cómo podemos hacer que se mantenga.

Paso 4: Haz que tu cabecera sea fija

Para nuestro último paso, ve a ElementsKit > Pie de cabecera > Editar con Elementor. A continuación, selecciona tu encabezado y haz clic en el icono central con seis puntos:

Cuando pases por encima de él, verás que te permite editar la sección. Una vez que hagas clic en él, aparecerán las opciones de edición en el panel de la izquierda.

Haz clic en la pestaña Avanzado y desplázate hacia abajo hasta Efectos de cabecera fija . Habrá un mensaje de advertencia que dice que el plugin no controla la cabecera fija, pero puedes ignorarlo. Como también hemos añadido el plugin Sticky Header Effects for Elementor, funcionará perfectamente.

Ahora activa la cabecera fija de Elementor cambiando el interruptor a ON:

Dependiendo de tu tema, tu cabecera fija puede parecer transparente. Si ese es el caso, es posible que quieras hacer un cambio de estilo.

En tu panel Editar sección, en Estilo, ve a Fondo > Color y asegúrate de que has seleccionado un tono que destaque sobre tu fondo normal:

A continuación, haz clic en ACTUALIZAR. Ahora puedes previsualizar tu sitio para comprobar el resultado final:

¡Eso es todo! Este es un simple encabezado fijo de Elementor, pero puede llevar fácilmente tu sitio al siguiente nivel.

Cómo crear una cabecera fija con Elementor Pro

Si utilizas Elementor Pro, crear una cabecera fija es un poco más sencillo. Puedes añadir esta función a tu sitio en sólo tres sencillos pasos.

Paso 1: Crea tu menú

Para crear tu menú, ve a Apariencia > Menús en tu panel de control de WordPress:

Dale a tu menú un nombre descriptivo, selecciona Menú principal junto a Ubicación de la pantalla y haz clic en Crear menú:

En este punto, deberías tener unas cuantas páginas existentes en tu sitio web. Selecciona las páginas que quieres incluir en tu menú en el panel de la izquierda.

A continuación, haz clic en Añadir al menú, seguido de Guardar menú:

Ahora tus páginas deberían estar pobladas en el lado derecho bajo la Estructura del Menú.

Paso 2: Crea tu cabecera

A continuación, tendremos que crear nuestra base. Vamos a crear una cabecera clásica.

Para empezar, localiza la pestaña de Elementor en tu barra lateral izquierda. Justo debajo, ve a Plantillas > Constructor de temas. La siguiente página tendrá este aspecto:

Como probablemente veas, con Elementor Pro puedes empezar a diseñar fácilmente todos los elementos de tu sitio.

Haz clic en el icono del signo más (+) en el elemento Cabecera. Ahora deberías ver una ventana emergente que muestra varios bloques de cabecera entre los que puedes elegir:

Si tienes una plantilla de cabecera preexistente, puedes seleccionarla en la pestaña Mis plantillas. Si no, puedes utilizar uno de los bloques de sección que vienen incluidos en Elementor Pro.

Cuando hayas hecho tu selección, simplemente pasa el ratón por encima del bloque deseado y haz clic en Insertar:

Aquí verás que este bloque viene con su propio logotipo, pero nuestro menú de navegación se ha rellenado automáticamente. Ahora, haz clic en PUBLICAR:

La siguiente pantalla te pedirá que determines tus AJUSTES DE PUBLICACIÓN. Aquí, selecciona AÑADIR COND ICIÓN para decidir dónde quieres mostrar tu cabecera:

Probablemente querrás seleccionar Todo el sitio junto a INCLUIR. También puedes excluir ciertas áreas del sitio haciendo clic en la flecha junto a INCLUIR y cambiando a la alternativa. Cuando estés satisfecho con tus selecciones, haz clic en GUARDAR Y CERRAR.

En este momento, aparecerá un mensaje emergente en la esquina inferior derecha de tu pantalla. Si no desaparece antes de que puedas hacer clic en él, selecciona la opción para ver tu sitio en vivo.

Alternativamente, vuelve a tu panel de control de WordPress y obtén una vista previa de tu sitio haciendo clic en el icono de la casa en la esquina superior izquierda y luego seleccionando Visitar el sitio:

Como puedes ver, nuestra cabecera ya funciona, pero cuando nos desplazamos hacia abajo en la página, desaparece. ¡Veamos qué podemos hacer al respecto!

Paso 3: Haz que tu cabecera sea fija

¡Ahora vamos a ver cómo crear una cabecera fija de Elementor con la herramienta pro!

Ve a Plantillas > Constructor de temas y selecciona la cabecera que acabas de crear. Luego, haz clic en Editar junto al icono del lápiz en la siguiente pantalla. Esto te devolverá al editor de Elementor.

Pasa el ratón por encima de tu plantilla de cabecera y haz clic en el icono de los seis puntos del centro. Esto abrirá el panel de la sección de edición a la izquierda:

Ahora, navega hasta la pestaña Avanzado y localiza la sección Efectos de Movimiento. Aquí, activa los Efectos de Desplazamiento cambiando el interruptor a ON:

A continuación, desplázate hacia abajo en la sección de Efectos de Movimiento para encontrar el campo Fijo. En el menú desplegable, selecciona Arriba:

Ahora, haz clic en ACTUALIZAR. Ten en cuenta que, dependiendo del esquema de colores de tu tema, tu cabecera fija de Elementor puede parecer transparente:

Si ese es el caso, y no te gusta cómo se ve, siempre puedes cambiar el color de fondo. En tu panel de edición de la sección, ve a Estilo > Fondo y selecciona Clásico como tipo de fondo.

Ahora, selecciona un nuevo color de fondo para tu plantilla de cabecera. Querrás elegir un tono que sea complementario al del resto de la página, pero que también cree un bonito contraste:

Como esto es sólo un ejemplo, vamos a elegir simplemente un color gris para que nuestra cabecera sea menos transparente.

Ahora, haz clic en ACTUALIZAR para guardar los cambios. Sigue adelante y obtén una vista previa de tu resultado final:

¡Eso es todo! Seguramente querrás ajustar el estilo y los colores de acuerdo con tu marca. Sólo asegúrate de guardar siempre los cambios cuando hayas terminado.

Cómo usar CSS para mejorar tu cabecera fija de Elementor

Cuando implementas una cabecera fija de Elementor en tu sitio web, puede parecer un importante lavado de cara para el diseño de tu sitio. Sin embargo, es posible que te interesen más personalizaciones o características más dinámicas.

Ahora que sabes cómo crear una cabecera fija básica, veamos cómo llevar tu diseño al siguiente nivel. Puedes hacerlo utilizando el código de las Hojas de Estilo en Cascada (CSS) en WordPress.

Si eres un principiante o no tienes experiencia en codificación, no te preocupes. Mejorar tus diseños es muy fácil con Elementor.

Para ello, ve a Plantillas > Constructor de temas > Encabezado:

En la sección Editar > Avanzado >CSS personalizado, puedes añadir un pequeño fragmento de CSS para realizar cambios estilísticos.

Tipos de cabeceras fijas de Elementor

Aquí tienes algunas mejoras populares que puedes considerar para tu cabecera fija de Elementor

Cabecera fija transparente

Algunos temas pueden establecer automáticamente las cabeceras fijas como transparentes. Sin embargo, si quieres hacerlo mediante CSS, puedes utilizar un fragmento de código como éste:

selector.elementor-sticky--effects{ background-color: rgba(133,130,255,0.5) !important }

selector{ transition: background-color 4s ease !important; }

selector.elementor-sticky--effects >.elementor-container{ min-height: 80px; }

selector > .elementor-container{ transition: min-height 1s ease !important; }

Simplemente copia y pega este código en el campo CSS personalizado y ajusta los campos a tus preferencias. Este fragmento altera el color de fondo, la transparencia y la altura de tu cabecera, con un efecto de animación:

Las posibilidades de este tipo por sí solas son infinitas.

Encabezado fijo que se encoge

Otra opción popular es un encabezado que se hace más grande y más pequeño a medida que los visitantes se desplazan. Aquí tienes el código que necesitarás para este tipo de cabecera fija de Elementor:

header.sticky-header {
    --header-height: 90px;
    --opacity: 0.90;
    --shrink-me: 0.80;
    --sticky-background-color: #0e41e5;
    --transition: .3s ease-in-out;

    transition: background-color var(--transition),
                background-image var(--transition),
                backdrop-filter var(--transition),
                opacity var(--transition);
}
header.sticky-header.elementor-sticky--effects {
    background-color: var(--sticky-background-color) !important;
    background-image: none !important;
    opacity: var(--opacity) !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
header.sticky-header > .elementor-container {
    transition: min-height var(--transition);
}
header.sticky-header.elementor-sticky--effects > .elementor-container {
    min-height: calc(var(--header-height) * var(--shrink-me))!important;
    height: calc(var(--header-height) * var(--shrink-me));
}
header.sticky-header .elementor-nav-menu .elementor-item {
    transition: padding var(--transition);
}
header.sticky-header.elementor-sticky--effects .elementor-nav-menu .elementor-item {
    padding-bottom: 10px !important;
    padding-top: 10px !important;
}
header.sticky-header > .elementor-container .logo img {
    transition: max-width var(--transition);
}
header.sticky-header.elementor-sticky--effects .logo img {
    max-width: calc(100% * var(--shrink-me));
}

Si no te sientes cómodo con un trozo de código tan extenso, puedes consultar la guía de Elementor para hacer un encabezado fijo retráctil.

Con este diseño, acabarás con este efecto:

Aunque esta cabecera tiene un toque sutil, su sofisticación puede dar a tu diseño un aspecto más profesional.

Fundido de entrada / fundido de salida

Además de estas opciones de moda, también existe la función de fundido de entrada y salida (también llamada «revelación»). Su aspecto es el siguiente:

Para este efecto, no tendrás que tocar ningún código. Simplemente navega hasta tu cabecera en tu constructor de temas. A continuación, ve a la sección Editar > Avanzado > Efectos de movimiento > Efectos de desplazamiento:

Aquí, haz clic en el icono del lápiz situado junto al campo Transparencia y cambia la Dirección a Fundido de entrada o Fundido de salida. A continuación, ajusta tu diseño a tus preferencias.

Hay muchas opciones para estos efectos de transparencia, así que te recomendamos que consultes la documentación de Elementor. Así podrás conseguir el aspecto exacto que deseas.

Resumen

Trabajar con un constructor de sitios web de confianza es una excelente alternativa a pagar a un desarrollador web veterano para que cree tu sitio. Si utilizas algunos de los mejores programas de diseño de sitios web, puedes crear fácilmente los elementos esenciales para cualquier sitio web. Entre ellos se encuentran las prácticas pero bonitas cabeceras fijas .

Una cabecera fija puede crear una experiencia más agradable para tus usuarios. Puedes elegir entre varios estilos de cabecera dinámicos, incluidos el transparente y el encogido. Y lo que es mejor, puedes hacer estos impresionantes diseños de cabecera tanto con Elementor Pro como con su versión gratuita.

Diseñar tu sitio web es uno de los primeros pasos para lanzarlo. Sin embargo, primero necesitarás un alojamiento fiable. Consulta los planes de alojamiento administrado de Kinsta para ver cómo podemos optimizar el rendimiento de tu sitio