Haga un encabezado pegajoso en el elemento (el método más simple)

Este artículo introducirá una forma simple de agregar un encabezado pegajoso al elemento, sin suplementos de tercera parte y CSS increíblemente simple. Elementor no tiene una excelente funcionalidad del encabezado adhesivo, por lo que tenemos que usar los complementos terceros o CSS y JavaScript.

Cómo agregar un encabezado pegajoso al elemento nuestra agencia usa 4 líneas CSS simples para agregarlas a nuestros encabezados pegajosos y quería compartir nuestro método. Al final de este artículo, también incluirán adiciones avanzadas al encabezado pegajoso y elemental, lo que le ayuda a cambiar el tamaño de la imagen en el desfile, cambie el color de fondo de su encabezado pegajoso y más
Tenga en cuenta que esta guía está orientada a aquellos que usan Elementor Pro. Esto se debe a que Elementor Pro incluye el generador de temas, que le permite configurar sus propios encabezados y sótanos. Si aún no posee este complemento, vale su precio de $ 49.00, ya que le permite crear un sitio web desde cero. Si lo toma de este enlace de afiliado, nuestra agencia no tiene costo adicional. Paso 1: construya primero el encabezado básico, construiremos nuestro encabezado básico y lo aplicaremos a todas las páginas del elemento. Para acceder al generador de encabezado, navegue por las plantillas de la coma de back-end administradora y luego haga clic en el generador de temas.

Agregue una nueva plantilla y cambie el tipo al encabezado. Después del nombre de la plantilla, haga clic en el botón verde “Crear la plantilla”.

Nombra tu plantilla ahora, construye tu encabezado. Para hacer esto, las personas generalmente crean una nueva sección, la dividen en dos columnas y luego agregan un logotipo y un menú de navegación. Por lo general, el sitio del sitio está alineado directamente a la izquierda de la sección (y se contiene en la columna izquierda), mientras que el menú elemental está en la columna derecha y se alinea hacia la derecha. También puede usar una sola columna, configurando el posicionamiento en configuraciones avanzadas para cada elemento en el menú. Puede usar la alineación horizontal, “espacio entre”, para lograr el mismo efecto que dos columnas. Este es nuestro método recomendado, ya que reduce el número de elementos DOM y conduce a un sitio de carga más rápido (marginal). En la pestaña de estilo del elemento, puede manejar el fondo del encabezado para que sea transparente o coloreado. En este ejemplo, queremos que nuestro encabezado se superponga a nuestra sección inicial de héroes, lo que significa que mantendremos el fondo transparente. Para hacer esto, establezca el color de fondo de la sección para que sea RGB (0.0,0). Asegúrese de cambiar la etiqueta HTML de predeterminado a “encabezado”

Finalmente, dale a tu encabezado una identificación personalizada, como: #my-al-header. (Agregaremos una clase CSS personalizada)

Después de construir el encabezado, publíquelo y establezca las condiciones de visualización en consecuencia. En este ejemplo, mostramos este encabezado en todas las secciones de nuestro sitio. Sin embargo, los instrumentos de elemento de visibilidad condicionado son uno de los mejores de la industria y puede usarlo para mostrar el encabezado pegajoso de manera demasiado selectiva donde sea necesario. En este momento, si navega por el frente de su sitio web, verá el encabezado que se muestra visiblemente. Pero, como verá, no es pegajoso y no se superpone el contenido inicial. Posicionamiento general del encabezado elemental para hacer que nuestro elemento sea Lipic (es decir, superponga el contenido mientras se desplaza en la pantalla), es hora de agregar algunos CSS personalizado. Vuelva a navegar al generador de encabezado y seleccione la columna general. Vaya a la pestaña Configuración avanzada de esa sección y abra la entrada CSS personalizada. ?? Esta es la parte del artículo en el que le mostramos la forma increíblemente simple de hacer que su encabezado sea pegajoso en el elemento. En la entrada CSS personalizada, agregue el siguiente código:

#my-al-header {posición: fijo; Ancho: 100%; Arriba: 0; Index Z: 9999; }

Idioma de código: CSS (CSS) Si lo escribe en la entrada (en lugar de copiar y pegar), podrá ver qué hace cada línea. En primer lugar, el selector aplica este CSS CSS personalizado al elemento de envoltura de destino, que es la sección de encabezado en este caso.
En segundo lugar, la posición: fijada asegura que el encabezado permanezca pegajoso a medida que pase por la página. Tercero, arriba: 0 hace que el encabezado permanezca fijo en la parte superior de la ventana de vista del navegador. Cuarto, Index Z: 9999 asegura que el encabezado permanezca por encima de todo el contenido de la página. Si navega al frente de su sitio, verá que el encabezado ahora se superpone al contenido. A medida que atraviesa la página, su posición permanece fija en la parte superior de la pantalla. Esencialmente, es el encabezado pegajoso más simple que jamás incorporará en un sitio web elemental. Todo lo que necesita son cuatro Cs. En este momento, puede elegir detenerse y dejar el encabezado tal como está. Sin embargo, a menudo queremos agregar algunos efectos avanzados. Para nosotros, los dos efectos más importantes para cualquier encabezado pegajoso en el elemento son los siguientes:
Cambiar el fondo de transparente a color cuando el usuario se ejecuta en la pantalla
Esto es importante porque asegura que los elementos del menú sean visibles al desplazarse en la pantalla. Por lo general, un héroe consiste en una foto oscura, lo que significa que hay un contraste adecuado para que el visitante vea y haga clic en la navegación. Sin embargo, a medida que se desplaza por la pantalla, cambiar el color de fondo en un encabezado elemental pegajoso hace que sea mucho más fácil de leer y usar.
Cambiar la imagen desde el desplazamiento
En muchos casos, el menú inicial tiene el logotipo de la compañía que muestra el nombre dentro de él. Esto hace un informe amplio, algo así como 16 en 9, que puede reducirse a medida que el visitante se ejecuta en la pantalla. Al reducir el tamaño del logotipo de la empresa, la altura total del encabezado pegajoso en el elemento también se reduce al maximizar el tamaño de la cara de visualización que el usuario puede usar para ver el contenido. Por ejemplo, podemos tener nuestro logotipo como el derecho cuando estamos en la parte superior de la página. La derecha es horizontal, la izquierda es cuadrada pero el logotipo cambia a la izquierda (y disminuye) cuando el usuario se ejecuta, minimizando la altura de todos.
Las adiciones avanzadas cambian el color de fondo en el desfile La primera adición avanzada que queremos hacer a nuestro encabezado elemental pegajoso es cambiar el color de fondo de la sección general. Para hacer esto, utilizaremos el JavaScript básico y el CSS. Si esto lo asusta, no se preocupe, todo lo que tiene que hacer es copiar e insertar en un bloque HTML. Primero, tire y colóquelo en el bloque HTML directamente en el encabezado. No se preocupe de que esté confuso con la estructura, porque el bloque HTML no aparecerá en el front-end.
Pegue en el siguiente código:

Lenguaje del código: HTML, XML (XML) Lo que hace este código es aplicar el estilo CSS tan pronto como se ejecute en 10 píxeles.
Para nuestro CSS personalizado con el encabezado, agregaremos 2 nuevas líneas. La primera línea hace que la transición transparente y de fondo desaparezca. El segundo asegura que el fondo original sea transparente. Ancho: 100%; Arriba: 0; Index Z: 9999; Transición: facilidad de 500 ms;

Antecedentes: transparente;

}
Idioma de código: CSS (CSS) Luego agregaremos un selector CSS completamente nuevo, que aplica el color de fondo cuando el usuario ejecute su página:
#My-al-header .scroll {fondo: #000; }
Lenguaje del código: CSS (CSS) simplemente copie e inserte ambos códigos CSS directamente en el CSS personalizado para la sección del encabezado.
Ahora guarde la página y explique su encabezado en el frente. A medida que atraviesas la página, el efecto del. En este ejemplo, solo cambié el fondo en negro, pero puede confundir su tamaño, estilos de fuente y más. Cambie la imagen en el desfile Otro efecto avanzado que nos gusta aplicar a nuestras cabezas pegajosas está cambiando el tamaño del logotipo o incluso la imagen completa del logotipo. En primer lugar, hablemos sobre cómo puede cambiar el tamaño de la imagen usando JavaScript y las clases existentes de “Cambiar el fondo de contaminación”. Simplemente especifique el selector de logotipo de su sitio detrás de su CSS original y .scroll de la siguiente manera:
#My-al-header img {ancho: 100px; Transición: 500 ms de facilidad; } #My-al-header .scroll img {ancho: 50px; }
Idioma de código: CSS (CSS) Este código cambiará el tamaño del ancho de la imagen con 50 píxeles cuando se desplace hacia abajo en la página. En nuestro caso, tuvimos que cambiar el tamaño del encabezado real para adaptarse mejor a nuestro logotipo de 50 píxeles. Esto se aplicó al selector #my-heaader.scroll. Supongamos que querías cambiar la imagen por completo cuando obtuviste una puntuación en la página. Esta es otra cosa que es posible y bastante fácil de hacer con CSS.#My-Al-Header {posición: fijo; Ancho: 100%; Arriba: 0; Index Z: 9999; Transición: 500 ms de facilidad; Antecedentes: transparente; } #My-al-header .scroll {fondo: #000; Altura: Auto; margen -top: – 20px! importante; } #My-al-header img {ancho: 100px; Transición: 500 ms de facilidad; } #My-al-header .croll img {opacidad: 0; Transición: 500 ms de facilidad; } #My-al-header .scroll .logo {background-image: url (https://img.freepik.com/free-vector/cute-pig-with-pink-white_1308-40061 .jpg ?? 626 & ext = jpg); Tamaño de fondo: cubierta; Ancho: 50px; Transición: 500 ms de facilidad; }
Idioma de código: CSS (CSS) Esto es ocultar la imagen original del logotipo y muestra una imagen de fondo en su lugar. En nuestro ejemplo, esta sería otra foto de cerdo.
También puede usar consultas de medios CSS en Elementor para aplicar diferentes efectos de desfile según el ancho de la pantalla. Conclusión Esperamos que se le haya mostrado una manera simple de agregar encabezado de palo al elemento, junto con algunos efectos avanzados. Si tiene alguna pregunta a este respecto, no dude en comunicarse con los comentarios.

Suscribir y distribuir
Si le gustó este contenido, suscríbase al resumen mensual de noticias de WordPress, inspiración para sitios web, ofertas exclusivas y artículos interesantes.No enviamos spam y nunca venderemos o distribuiremos su correo electrónico.