Un encabezado adhesivo permanece fijado en la parte superior de la pantalla mientras el visitante se desplaza. Su logotipo, menú y botón de llamada a la acción permanecen accesibles sin importar qué tan abajo vaya alguien, razón por la cual casi todos los sitios SaaS y de agencias envían uno.
Esta guía muestra cómo crear un encabezado adhesivo en Elementor usando gratis Creador de temas de complementos maestros, entonces no necesitarás Elementor Pro. Y mientras uso complementos maestros aquí, el método es universal: cree el encabezado como plantilla y luego establezca la posición del contenedor en Fijo. Cualquier generador de encabezado que le permita editar el encabezado en Elementor sigue los mismos tres clics.
La versión 2020 de esta publicación le indicó que colocara una ID de CSS en una sección y la pegara en el widget del menú de navegación. Esa era de las Secciones. Elementor ha utilizado contenedores Flexbox como diseño predeterminado desde 3.6, y el control de posición ahora se encuentra justo en el panel, por lo que todo el baile de ID de CSS desapareció.
Qué encabezado tan pegajoso es en realidad
Dos comportamientos diferentes reciben el mismo nombre, y mezclarlos es la razón por la que la gente termina buscando un entorno que no existe.
A encabezado fijo está en pantalla desde el momento en que se carga la página y nunca sale. Eso es lo position: fixed lo hace, y eso es lo que estamos construyendo aquí.
A encabezado adhesivo en desplazamiento normalmente se sienta en la parte superior, se desplaza y luego se desliza hacia adentro cuando el visitante se desplaza hacia arriba. Lo verás llamado desplazamiento inteligente u ocultación en desplazamiento. Necesita un efecto de desplazamiento y Elementor los mantiene en Pro.
Para la mayoría de los sitios, el encabezado fijo es el que realmente desea y es el que puede crear de forma gratuita.
El problema: su encabezado se desplaza
Aquí está el punto de partida. Un encabezado Elementor normal se encuentra en la parte superior de la página como cualquier otro contenedor.
Desplácese un poco hacia abajo y desaparecerá. Logotipo, menú, botón Solicitar demostración gratuita, todo en la parte superior de la pantalla. Entonces, un visitante que llega a su sección de precios y desea hacer clic en Contacto debe retroceder para encontrar el menú nuevamente.
Ese es todo el problema que resuelve un encabezado adhesivo.
Antes de empezar
Necesita Elementor gratuito, versión 3.6 o posterior, para que los contenedores estén encendidos.
También necesita una plantilla de encabezado para aplicar la configuración. El propio Theme Builder de Elementor es solo Pro, así que obtenga uno gratis: Complementos maestros incluye un gratis generador de encabezado, y su Theme Builder también maneja pies de página, 404, archivos y plantillas individuales.
¿ya tienes una plantilla de encabezado de otro complemento? Saltar al paso 2. La configuración de posición es Elementor nativo, por lo que se comporta igual dondequiera que venga su encabezado.
Paso 1: abre tu plantilla de encabezado en Elementor
Ir a Complementos maestros > Creador de temas. Tus plantillas se enumeran por tipo. El mío tiene un encabezado y un pie de página, ambos activos, ambos configurados para mostrarse en todo el sitio.
¿Aún no hay encabezado? Haga clic Agregar nueva plantilla, configure el tipo en Encabezado, active Activación y configure la condición en Todo el sitio. El documentos del creador de encabezado cúbrelo y el flujo será el mismo por el que caminé guía para editar el pie de página en Elementor.
Pase el cursor sobre la plantilla de encabezado y presione Editar con Elementor. El encabezado se abre en su propio lienzo.
Paso 2: seleccione el contenedor del encabezado
La gente se equivoca constantemente, así que sé preciso: quieres el contenedor exterior del encabezado. Ni el logotipo, ni el widget del menú de navegación, ni un contenedor anidado escondido en su interior.
La forma confiable de estar seguro es Estructura panel, el icono de capas en la barra superior. Haga clic en el contenedor de nivel superior en ese árbol y todo el encabezado debería resaltarse. Si solo se ilumina el logotipo o el menú, no ha captado un elemento secundario y al establecer la posición se fijará ese widget en la pantalla en lugar de en su encabezado. Parece extraño y es lo primero que debes comprobar si tu resultado es extraño.
Paso 3: establezca la posición del contenedor en Fijo
Con el contenedor del encabezado seleccionado, abra el Avanzado tabular y expandir el Diseño sección. El Posición dropdown tiene tres opciones.
El valor predeterminado es lo que tienes ahora: el encabezado se desplaza con la página. Absolute fija el encabezado a la página en lugar de a la pantalla, por lo que aún se desplaza hacia afuera, lo cual es para encabezados superpuestos, no adhesivos. Se corrigió que lo vinculara a la ventana gráfica, y ese es el que desea.
Elegir Fijo, y el panel se expande con los controles de orientación.
Establezca la orientación horizontal a la izquierda con un desplazamiento de 0, y Orientación vertical hacia arriba con un desplazamiento de 0. Cero en ambos pegamentos el encabezado en la parte superior izquierda de la ventana gráfica. Levante el desplazamiento vertical si prefiere que el encabezado flote un poco por debajo del borde superior.
Elementor también te dará una advertencia: “El posicionamiento personalizado no se considera una mejor práctica para el diseño web responsivo y no debe usarse con demasiada frecuencia” Ignóralo. Esa es una advertencia general contra la dispersión de elementos fijos y absolutos a través de un diseño, y un encabezado fijo es el caso del libro de texto donde es la llamada correcta. Simplemente revisa la vista móvil cuando hayas terminado, a la que volveré.
Paso 4: aumenta el índice z
Aún en la sección Diseño, busque el Índice Z campo y configúrelo en algo cómodamente alto. Yo uso 99.
El índice Z decide qué elemento se encuentra en la parte superior cuando dos se superponen. Se garantiza que un encabezado fijo se superpondrá al contenido de su página a medida que el visitante se desplaza, y si su índice z es demasiado bajo, el contenido se desplaza directamente sobre él. Ese es el error clásico en el que el encabezado es técnicamente pegajoso pero los controles deslizantes, las ventanas emergentes y las imágenes lo atraviesan.
Si algo todavía cubre el encabezado, aumente el número. Solo tiene que superar lo que esté perdiendo, y muchos complementos emergentes y deslizantes establecen su propio índice z por miles.
Paso 5: publicar
Golpear Publicar.
Abra el sitio en vivo y desplácese. El encabezado permanece bloqueado en la parte superior de la pantalla completamente hacia abajo.
Si aún se desplaza en la interfaz pero mira directamente en el editor, borre su caché antes de comenzar a depurar. Un complemento de almacenamiento en caché servirá felizmente al antiguo encabezado CSS por un tiempo.
Tres cosas que rompen un encabezado fijo y las correcciones
Los pasos anteriores fijan el encabezado. Lo que sigue es lo que separa un encabezado adhesivo que sobrevive al contacto con un sitio real de uno que extrae una semana después.
1. El encabezado se vuelve transparente y el contenido se muestra
Un elemento fijo se elimina del flujo de página normal, por lo que deja de heredar un fondo de cualquier cosa. Si nunca establece un color de fondo en el encabezado, el contenido de su página se desplaza debajo se muestra directamente y el texto de su menú se convierte en una sopa ilegible en el momento en que pasa una imagen detrás de él.
Seleccione el contenedor del encabezado, vaya a Estilo > Fondo, y dale un color sólido. Si realmente quieres un encabezado transparente, esa es una apariencia válida, pero luego diseña la primera sección para que funcione detrás de él.
2. La primera sección se esconde detrás del encabezado
Misma causa raíz. Un encabezado fijo ya no ocupa espacio en el diseño, por lo que la primera sección se desliza hacia arriba para llenar el espacio que dejó y parte de ella termina atrapada detrás del encabezado.
Agregue un acolchado superior a su primera sección, que coincida aproximadamente con la altura del encabezado. Si el encabezado mide 80px de altura, dale al héroe 80px de acolchado superior. Si no está seguro de su altura, haga clic derecho en el encabezado en el extremo frontal e inspecciónelo; la altura está ahí en las herramientas del navegador.
3. Se come la pantalla del móvil
Las pantallas de los teléfonos son cortas. Un encabezado que se siente bien en un monitor de escritorio puede tragarse una parte importante de la ventana gráfica de un teléfono y luego seguir al visitante a través de cada página.
Cambie a la vista móvil en el modo responsivo de Elementor y corte el relleno vertical del encabezado. Los controles de posición también son por dispositivo, por lo que puede volver a configurar la posición Predeterminado solo en dispositivos móviles y deje que el encabezado se desplace hacia afuera. En una página de artículo larga, normalmente es la mejor llamada. Si ejecuta puntos de interrupción personalizados, el Complemento de puntos de interrupción personalizados le permite ajustar esto a los anchos reales de su dispositivo.
¿funciona esto con otros complementos de encabezado?
Sí, y esta es la parte que vale la pena entender. Posición: Fijo es un control Elementor nativo, no es una función de complementos maestros. Master Addons está haciendo exactamente un trabajo aquí: brindarle una plantilla de encabezado gratuita que se abre en Elementor. Una vez que estás en el editor, la parte adhesiva es Elementor simple.
Entonces, si crea encabezados con un creador de temas diferente, o su tema envía un encabezado propio editable por Elementor, se aplica la misma ruta Avanzada > Diseño > Posición > Fija. Lo único que cambia es adónde vas para abrir el encabezado para editarlo.
Una alternativa sin salto: posición pegajosa con CSS personalizado gratuito
El posicionamiento fijo levanta el encabezado fuera del flujo de la página, por lo que debes rellenar la primera sección para que nada se esconda detrás de ella. Si quieres saltarte ese paso, CSS position: sticky es la alternativa. Mantiene el encabezado en flujo y solo lo fija una vez que llega a la parte superior, por lo que no hay ningún salto de contenido que corregir.
El problema es dónde agregas el CSS. La caja CSS personalizada por elemento de Elementor es una función profesional, pero los complementos maestros gratuitos Extensión CSS personalizada te ofrece la misma caja sin costo alguno. Seleccione el contenedor del encabezado, abra su campo CSS personalizado y pegue esto:
selector {
position: sticky;
top: 0;
z-index: 99;
}selector es la abreviatura de Elementor para el elemento que está editando, por lo que no necesita una identificación ni clase. Uno tiene: si algún contenedor principal lo tiene overflow: hidden, sticky deja de funcionar silenciosamente, tan claro que del antepasado si el encabezado se niega a fijar. El comportamiento completo está documentado en el Referencia MDN sobre la posición del CSS.
Se compararon métodos de encabezado adhesivos gratuitos
Tres de estas rutas son gratuitas y cada una se adapta a una necesidad diferente. Se corrigieron vidas en el control de posición del propio Elementor. Los complementos maestros Extensión de posicionamiento no tiene opción Fija, pero ayuda dentro del encabezado: empujar un logotipo o insignia con compensaciones Relativas o Absolutas, con valores separados por dispositivo.
| Método | Necesita código | Costo | Salto de contenido | Mejor para |
|---|---|---|---|---|
| Posición Fija (pestaña Elementor Avanzado) | No | Gratis | Necesita una solución de relleno | Encabezado siempre visible |
| posición: pegajosa (CSS personalizado) | Un fragmento | Gratis | Ninguno | Diseño limpio, sin salto |
| Efectos de desplazamiento adhesivo Elementor Pro | No | Pagado | Manejado | Ocultar en desplazamiento y encoger |
| Complemento de encabezado adhesivo dedicado | No | Gratis | Manejado | Efectos de desplazamiento prediseñados |
Agregar contracción o cambio de color en el desplazamiento
¿quiere que el encabezado se reduzca o intercambie color una vez que el visitante se desplace? Eso lee la distancia de desplazamiento, lo que CSS no puede hacer por sí solo. Unas pocas líneas de JavaScript a través del Extensión JS personalizada en Master Addons Pro puedes alternar una clase en el encabezado más allá de un umbral de desplazamiento, luego diseñas esa clase en CSS personalizado. Es más trabajo que un complemento que envía el efecto, así que sopese el esfuerzo antes de construirlo a mano.
Hacer que valga la pena pegar el encabezado
Una vez que está pegado a la pantalla, el encabezado es visible el 100% del tiempo, por lo que vale la pena pasar un segundo.
Primero recorte la altura. Un encabezado alto que nunca desaparece se vuelve molesto rápidamente, y cada píxel que guarda es un píxel de contenido que el visitante puede ver. Luego mira lo que hay en él: una ranura permanente en la pantalla es un buen hogar para tu mejor enlace, ya sea una demostración, un precio o un botón de contacto.
¿gran sitio? Los complementos maestros Widget de meni de navigație crea mega menús, para que puedas mantener toda la estructura a un clic de distancia sin que el encabezado crezca. Y esté atento al peso, ya que el encabezado ahora se carga en cada página y nunca se descarga. El Guía de velocidad de Elementor vale la pena leerlo si su tiempo de carga ya es ajustado.
Si prefieres no crear un encabezado desde cero, el Biblioteca de plantillas de complementos maestros tiene encabezados listos para usar que puedes importar y luego hacer pegajosos con los mismos pasos, y el Kits de plantillas envíe encabezados y pies de página coincidentes para todo un sitio.
Preguntas frecuentes
¿puedo crear un encabezado adhesivo en Elementor gratis?
Sí. La posición: el control fijo es parte de Elementor gratuito. Solo necesitas una plantilla de encabezado para aplicarla y Master Addons Theme Builder te ofrece una de forma gratuita. El propio Theme Builder de Elementor y sus efectos de desplazamiento adhesivo son las partes exclusivas de Pro.
¿cuál es la diferencia entre un encabezado fijo y uno adhesivo?
Un encabezado fijo siempre es visible desde la carga de la página y nunca se desplaza. Un encabezado adhesivo en desplazamiento se desplaza y luego se desliza hacia adentro cuando el visitante se desplaza hacia arriba. Posición: Fija le brinda el primero. El segundo necesita los efectos de desplazamiento de Elementor Pro.
¿por qué mi contenido se esconde detrás del encabezado adhesivo?
Se elimina un encabezado fijo del flujo de página normal, por lo que la sección siguiente se desliza hacia arriba debajo de él. Agregue un relleno superior a su primera sección, que coincida aproximadamente con la altura del encabezado, y establezca un color de fondo sólido en el contenedor del encabezado.
¿Por qué el contenido de mi página se desplaza por encima de mi encabezado?
El índice z es demasiado bajo. En la pestaña Avanzado en Diseño, establezca Z-Index en 99 (o superior) en el contenedor del encabezado para que se apile por encima de todo lo demás en la página.
¿debo usar un encabezado adhesivo en el móvil?
A menudo no. Un encabezado fijo ocupa el escaso espacio vertical en un teléfono. Los controles de posición de Elementor son por dispositivo, así que cambie a la vista móvil y vuelva a configurar la posición como predeterminada, o al menos corte el relleno del encabezado.
Envolviendo
Crear un encabezado adhesivo en Elementor consta de tres configuraciones en un elemento. Seleccione el contenedor del encabezado, establezca la posición en Fijo con cero compensaciones, aumente el índice z. Todo lo que sigue es limpieza: darle al encabezado un fondo sólido, rellene la primera sección para que nada se esconda detrás y verifique cómo se siente en un teléfono antes de llamarlo.
Todo se ejecuta en Elementor gratuito. Lo único que necesitas es una plantilla de encabezado para editar, que es lo que es gratis Creador de temas en complementos maestros proporciona, junto con el pie de página, 404, archivos y plantillas individuales. Si luego desea el resto del kit de herramientas, eso es lo que dice Planes profesionales portada, pero nada en este tutorial lo necesita.
Lectura relacionada: cómo editar el pie de página en WordPress con Elementor, cómo crear un fondo sesgado en Elementor, y cómo crear un sitio web de una página con Elementor.
