Cómo crear un encabezado fijo en Elementor










  • Un encabezado fijo de CSS permite que un usuario del sitio tenga acceso al encabezado y a la parte del menú de la página, sin importar cuánto se desplace hacia abajo. Esto ayuda a los usuarios a navegar rápidamente por el contenido y saber exactamente lo que están viendo.

    Esto es particularmente útil en sitios web que continuamente se desplazan hacia abajo y entran en nuevos artículos. Esto asegura que el usuario sepa que ha ingresado en un artículo diferente.

    En este artículo, le mostraré cómo crear un encabezado fijo en Elementor utilizando las herramientas integradas que proporciona la versión pro del creador de páginas.

    ¿Qué es un encabezado fijo?

    También llamado encabezado "fijo", un encabezado fijo es un tipo de herramienta de navegación que le permite fijar el menú de su sitio web en la parte superior de la pantalla, incluso cuando el usuario se desplaza hacia abajo en la página. El menú permanece a la vista y siempre accesible sin importar en qué página o lugar de la página se encuentre el usuario.

    Puede obtener la funcionalidad de encabezado adhesivo utilizando algún código CSS personalizado si sabe cómo hacerlo. Sin embargo, cuando usa el generador de páginas de Elementor, la opción se le presenta en una pestaña "Avanzada" y todo lo que tiene que hacer es hacer clic en el botón para que su encabezado sea un encabezado fijo.

    Echemos un vistazo rápido a cómo lograr esto al usar Elementor.

    Nota: Deberá tener instalado Elementor Pro para lograr esta función. La versión gratuita de Elementor no tendrá disponible esta funcionalidad.

    Crear un encabezado fijo en Elementor

    Primero, haga clic en Plantillas y seleccione la opción Generador de temas.

    Haga clic en Plantillas y luego en generador de temas

    Ahora seleccione la opción "Encabezado" y edite su plantilla de encabezado como mejor le parezca. Recuerde, necesitará la versión pro para continuar desde aquí.

    Haga clic en la opción de encabezado

    Haga clic con el botón derecho en el identificador de sección del encabezado para editar la sección. En el panel, vaya a Avanzado > Efecto de desplazamiento.

    Una vez que esté en el área Efecto de desplazamiento, aquí hay algunos elementos que puede elegir como desee y personalizarlos como mejor le parezca.

    • Adhesivo: haga clic en Superior para optar por pegar el encabezado en la parte superior. Otras opciones incluyen Inferior o Ninguno.
    • Sticky On: elija qué dispositivos se pegarán al encabezado, incluidos el escritorio, la tableta y el móvil.
    • Desplazamiento: establezca el número de píxeles desplazados antes de que el encabezado se vuelva fijo.
    • Compensación de efectos: establezca el número de píxeles desplazados antes de que se produzcan los efectos de encabezado.

    Nota: Las opciones de Efectos compensados ​​solo funcionarán cuando se aplique CSS personalizado. Entonces, si no está agregando ninguno de sus propios CSS personalizados, puede omitir la última opción.

    También puede agregar condiciones antes de publicar el encabezado adhesivo final. Un ejemplo de una condición de encabezado fijo incluye dónde desea mostrar el encabezado fijo. Entonces, una condición que elija puede ser "sitio completo".

    Ahora desea agregar algo de CSS personalizado. Puede agregar lo que quiera si está familiarizado con CSS personalizado y cómo funciona .

    Recuerde, necesitará Elementor Pro para lograr lo anterior.

    Ahí tienes. Ha creado con éxito un encabezado fijo en Elementor. Puedes personalizarlo y construir alrededor de él todo lo que quieras.

    preguntas frecuentes

    ¿Debo usar un encabezado adhesivo?

    A veces son ideales para fines de navegación. Sin embargo, eso no significa que siempre sean una buena adición.

    Por ejemplo, pensemos en un usuario móvil por un segundo. El espacio en la pantalla es muy limitado y si el encabezado de su sitio es demasiado grande, entonces un encabezado fijo podría ocupar demasiado espacio visible. Eso puede asustar fácilmente a los usuarios móviles.

    Dicho esto, es posible habilitar o deshabilitar la función según el dispositivo que esté utilizando el usuario. Encontrar el ajuste adecuado para sus visitantes es vital.

    ¿Puedo usar CSS simple para hacer que un encabezado sea fijo?

    Sí, como la mayoría de las cosas en WordPress, puedes usar una simple línea de código que hará que el encabezado sea fijo:

    1
    2
    3
    nav {
    position: sticky; top: 0;
    }

    ¡Es realmente así de simple! Solo recuerde que debe agregar esto para cada publicación o página en la que desee que aparezca el encabezado fijo, ya que es específico para cada una. Por lo tanto, puede llevar mucho tiempo configurar todo el sitio web, pero nadie dijo que sería fácil.

    ¿Necesito Elementor para crear un encabezado fijo?

    No, como se indicó anteriormente, puede usar CSS personalizado.

    Y en el caso de WordPress, tiene un montón de complementos que pueden ayudarlo a crear un encabezado fijo para su sitio en lugar de usar Elementor. En la mayoría de los casos, son bastante simples de configurar y solo requieren usar el bloque correcto en Gutenberg.

    Algunos de estos incluso contienen soluciones masivas, por lo que vale la pena considerarlos incluso si ya usa Elementor.

    ¿Hay alguna diferencia entre un encabezado fijo y un menú fijo?

    Sí, pero es bastante mínimo. Tanto el menú fijo como el encabezado serán visibles para el usuario a medida que se desplaza hacia abajo en la página. La principal diferencia es el contenido que contienen.

    Un menú fijo normalmente contendrá enlaces a otros encabezados en la publicación o página. Como resultado, los usuarios pueden usar este elemento de navegación fijo para llegar a cualquier ubicación en esa página.

    Es particularmente útil en contenido más largo donde desplazarse hacia arriba y hacia abajo puede volverse tedioso.

    Es fácil agregar un encabezado adhesivo en WordPress con Elementor

    Los encabezados fijos son una excelente manera de dar acceso al menú y la navegación a un sitio sin importar en qué parte de la página se encuentre el usuario. El proceso de creación de un encabezado fijo no es difícil, especialmente con una herramienta como Elementor.

    Alternativamente, es posible que desee considerar agregar un menú de navegación fijo en su lugar. Esto les dará a los usuarios aún más opciones cuando se trata de navegar por su contenido.

    Dicho esto, también puede agregar fácilmente uno a WordPress usando otro complemento o código CSS personalizado. Elementor es una gran opción, pero no es la única.

    ¿Ha utilizado otros complementos para lograr esto? ¿Prefiere poner su propio CSS personalizado para agregar funcionalidad?










  • Subir