La guía suprema para la primaria de la sede pegajosa

Ya sea que sea un desarrollador web aspirante o emprendedor de comercio electrónico, sus sitios web probablemente compartan algunos elementos esenciales. Por ejemplo, cada sitio necesita un encabezado claro para ayudar a los visitantes a navegar por diferentes páginas. Sin embargo, si usa un generador de páginas como Elementor para reducir el COD, es posible que se pregunte si es posible crear un encabezado horneado pegajoso, pero fácil de usar.
Afortunadamente, el uso de un encabezado elemental puede dar a los usuarios una forma simplificada de explorar su sitio. Con este popular generador de páginas, puede crear una amplia variedad de encabezados que no desaparecen cuando los usuarios corren en un sitio. Esta característica los hace “pegajosos”.
En esta publicación, discutiremos cómo funciona un encabezado pegajoso y los beneficios de usar uno. Luego le mostraremos cómo hacer un encabezado pegajoso elemental con Free y Pro del instrumento. Finalmente, le daremos opciones de personalización adicionales para su sede pegajosa con CSS. ¡Vamos a empezar!
Una introducción a los encabezados pegajosos de Elementor no son dos sitios web tampoco son dos sitios web. Sin embargo, hay algunas características que los sitios web de calidad tienen en común. Si ejecuta un sitio de múltiples páginas, uno de estos elementos es un encabezado. Esta es la barra horizontal en la parte superior de cualquier página que contenga información útil.
Por lo general, un encabezado incluye el menú de navegación de su página como o contactarnos:

Área de encabezado del sitio Kinsta Cuando los visitantes exploran su página, probablemente esperarán que un encabezado organizado los ayude a guiarlos en su sitio. Como la experiencia del usuario (UX) es la clave del éxito de un sitio web, sería aconsejable crear un encabezado que sea intuitivo y simple. Allí, un encabezado pegajoso, diseñado con primaria, puede marcar una gran diferencia. ¿Quieres hacer un encabezado sofisticado pero fácil de usar? Esta guía ha cubierto que haga clic para tuitear cómo funciona un encabezado pegajoso antes de descubrir cómo funciona un encabezado elemental pegajoso, veamos cómo se comporta un encabezado estándar cuando se desplaza en una página: ejemplo de encabezado estándar como puede ver en el ejemplo anterior, Este encabezado contiene una compleja barra de navegación con categorías como ventas, ropa, zapatos y más. Estas pestañas sin duda ayudarán a los compradores a encontrar lo que están buscando. Sin embargo, cuando se desplaza por la página, el encabezado desaparece. Los usuarios pueden encontrar esto frustrante porque les piden que regresen a la parte superior de la página para acceder al menú de navegación. Afortunadamente, un encabezado pegajoso ofrece una solución simple. Si se queda o “pegue” en la parte superior de su página, un encabezado pegajoso puede mejorar drásticamente su sitio:

Ejemplo de encabezado pegajoso Cuando el diseño de su sitio incluye un encabezado pegajoso, sus usuarios pueden saltar rápidamente a nuevas páginas sin perder el tiempo. Además, con este elemento fijo, puede incluir su logotipo al frente y al centro en cualquier momento. Esta función puede ayudar a los usuarios a recordar más fácilmente la marca y puede alentarlos a permanecer en su sitio por más tiempo. Cuando debe considerar usar un encabezado pegajoso, los visitantes tendrán menos probabilidades de perder al explorar sitios más altos con un encabezado pegajoso. Como tal, es posible que desee aprovechar esta función si su sitio tiene muchas páginas. Por lo tanto, a menudo verá encabezados pegajosos en los sitios de comercio electrónico. Un encabezado pegajoso puede ser particularmente útil si desea incluir una función de búsqueda. De esta manera, a medida que los usuarios ejecutan y se dan cuenta de que no encuentran lo que están buscando, pueden introducir rápidamente una consulta en la barra de búsqueda. Además, un encabezado pegajoso puede cambiar el juego si ejecuta un blog monetizado que le muestra todas las publicaciones en la página inicial. En general, este encabezado puede asegurarle que su sitio sea mantenido y escalable. Sin embargo, si su sitio solo tiene una página, no tiene mucho sentido girar el encabezado de esta manera. Además, si tiene una buena cantidad de páginas en su sitio, pero cada una es relativamente corta, probablemente ni siquiera necesite un encabezado pegajoso.

En general, un encabezado pegajoso reduce el tiempo de desplazamiento y aumenta el grado de uso y la navegación del sitio. Si no está seguro de si esta función beneficiaría a su sitio, es posible que desee hacer una auditoría de página rápida y luego decidir. Cómo crear un encabezado pegajoso elemental para este tutorial, lo guiaremos a través de los pasos para crear un encabezado pegajoso elemental. Asumiremos que ya tiene el complemento elemental instalado y activado en su sitio. Cubriremos cómo puede hacer este encabezado con la versión gratuita y con Elementor Pro. ¡Probablemente estará encantado de descubrir que no tendrá que aprender HTML o editar el código significativo para hacerlo! Cómo crear un encabezado pegajoso usando (gratuito) La versión gratuita de Elementor ofrece algunas funciones fuertes para construir la página. Sin embargo, si desea realizar cambios en sus encabezados y sótanos, necesitará algunas herramientas adicionales (también gratuitas). ¡Dado esto, veamos cómo puede crear un encabezado pegajoso con la primaria! Paso 1: Instale y active sus complementos esenciales Afortunadamente, algunas herramientas de confianza pueden extender fácilmente la versión gratuita de Elementor. Explore el tablero de WordPress para encontrar la primera herramienta. Vaya a complementos> Agregar nuevo y busque el elemento de elemento suplementos utilizando la función de búsqueda:
Instale y active ElementsKit Instalar y active este complemento como suele hacer. Cuando termine este proceso, se le dirigirá a la página principal de los complementos:
El complemento ahora está instalado ahora, haga clic en el nuevo Agregar nuevamente para localizar el efecto de encabezado adhesivo para la barra de búsqueda: efectos de encabezado adhesivo para el elemento, repita el proceso de instalación y activación para esta herramienta y ¡está listo para el siguiente paso! Paso 2: Cree su menú antes de que pueda hacer cualquier tipo de encabezado, necesitará un menú de navegación. Haremos un menú simple con los elementos más comunes. Incluirá un logotipo, páginas y una llamada de acción (CTA).
Para crear su propio menú en el tablero de WordPress, vaya a buscar> menús. Cerca del campo Nombre del menú, dale un nombre descriptivo. Lo llamaremos “menú de encabezado pegajoso”:

Dé un nombre a su menú de encabezado, asegúrese de elegir el encabezado como ubicación de pantalla. También puede seleccionar el cuadro para agregar automáticamente nuevas páginas al menú. A continuación, deberá agregar algunas páginas al menú. En la sección Página de mano izquierda, marque las casillas para cualquier página que desee incluir, luego haga clic en Agregar en el menú:

Agregue páginas al menú de encabezado pegajoso y luego verá sus páginas transferidas en su menú correcto. Continúe y haga clic en el menú de salvación en la parte inferior derecha de la pantalla:

Guarde el menú de encabezado pegajoso como puede ver, agregamos algunas páginas básicas, incluidos contáctenos, sobre y la página de ejemplo. Es posible que desee reordinar sus páginas para que la secuencia se vea intuitiva para los visitantes. Paso 3: Cree su encabezado ahora su menú de navegación existe, pero no puede acceder a él en ningún lado. Eso es porque tienes que crear un cabezazo para él. Para hacer esto, vaya a la pestaña Elementskit en el menú izquierdo. Si aún no lo ha hecho, tendrá que hacer clic en algunas páginas de “inicio” en este momento. Probablemente todos tengan diferentes preferencias, así que elija las funciones que desea activar. Sin embargo, asegúrese de que el módulo de pie de página del encabezado se encienda: habilite sus titulares en el kit Elements ahora, vaya a ElementsKit> Subsol Shot:
Agregue una nueva plantilla que esta página estará vacía, porque no tiene plantillas de titulares o sótanos. Haga clic en Agregar Nou a la parte superior de la pantalla para crear la primera plantilla de encabezado:

Complete la configuración de plantilla en la pantalla de arriba, ingrese un nombre descriptivo y asegúrese de que el encabezado esté seleccionado como tipo. Debido a que usa la versión gratuita, este encabezado aparecerá en todo el sitio. Asegúrese de cambiar el interruptor de activación/desactivado a encendido y haga clic en Guardar cambios. Ahora lo llevarán de regreso a la página de plantilla, donde puede ver la nueva plantilla de encabezado enumerada:

La nueva plantilla de encabezado ya está disponible para su uso, también puede notar un icono verde activo cerca de este encabezado. Sin embargo, aún no está en vivo. Para completar el encabezado, coloque el cursor sobre él en la lista de plantillas y haga clic en Editar en el elemento, incluso bajo su nombre. Esto lo llevará a la pantalla Elemoror Builder. Aquí, haga clic en el icono ElementsKit: haga clic en el icono ElementsKit en la siguiente pantalla, seleccione la pestaña Secciones:

Seleccione la pestaña “Secciones”. Desplácese un poco hacia abajo para encontrar una sección de encabezado que le guste, luego haga clic en Insertar. Elegí el encabezado – Sección 5:

Ingrese el encabezado donde desee como puede ver, nuestro menú de navegación no es visible. Así que sigamos adelante y agréguelo a nuestra plantilla de encabezado. Para hacer esto, pase el cursor sobre la sección del menú de navegación en su encabezado en este caso, está en el centro:

Coloque el cursor sobre la sección del menú de envío en el encabezado, haga clic en esta área y la configuración del menú debe aparecer en el panel izquierdo. Ahora busque el campo Seleccionar menú. En el menú desplegable, elija el menú que creó anteriormente:

Elija el menú creado antes en este momento, debería ver el menú poblado en la plantilla de encabezado. Haga clic en Actualizar en la esquina inferior izquierda y su encabezado estándar se completa. Veamos cómo funciona en acción:

Nuevo encabezado Como puede ver, nuestro encabezado se ve muy bien. Sin embargo, desaparece cuando corremos. Veamos cómo podemos hacer que se quede. Paso 4: Haga su lápiz labial para nuestro paso final, navegue a ElementsKit> Header de encabezado> Editar con Elementor. Luego seleccione el encabezado y haga clic en el icono central con seis puntos: haga clic en el icono puntuado al pasar el mouse sobre él, verá que esto le permite editar la sección. Después de hacer clic en él, las opciones de edición aparecerán en el panel izquierdo. Haga clic en la pestaña avanzada y desplácese hacia abajo hasta los efectos de encabezado pegajoso. Aparecerá un mensaje de advertencia que dice que el complemento no controla el encabezado pegajoso, pero puede ignorarlo. Debido a que agregué el efecto de encabezado pegajoso para el elemento, funcionará muy bien. Ahora active la primaria de encabezado pegajoso cambiando el interruptor a encendido:

Active la elemental de encabezado Lipic Según su tema, su encabezado pegajoso puede parecer transparente. Si este es el caso, es posible que desee hacer un cambio estilístico.

Regístrese para el boletín

¿Quieres saber cómo aumentar nuestro tráfico por más del 1000%? ¡Únase a las más de 20,000 personas que reciben nuestro boletín semanal con los consejos de WordPress!

Suscríbase ahora

En el panel de edición de la sección, bajo estilo, acceda al fondo> color y asegúrese de haber seleccionado un tono que se destace de su fondo normal:

Haga un cambio estilístico si es necesario y luego haga clic en Actualizar. Ahora puede obtener una vista previa de su sitio para verificar el resultado final:

¡Encabezado pegajoso en acción, esto es! Este es un encabezado elemental simple, pero puede llevar fácilmente su sitio al siguiente nivel. Cómo crear un encabezado pegajoso usando Elementor Pro cuando usa Elementor Pro, crear un encabezado pegajoso es un poco más simple. Puede agregar esta función a su sitio en solo tres simples pasos. Paso 1: Cree su menú para crear su menú, navegar> menús en el tablero de WordPress: cree un menú Dé su menú.

Nombre su menú y seleccione una ubicación en este momento, debe tener algunas páginas existentes en su sitio. Seleccione las páginas que desea incluir en el menú del panel izquierdo. Luego haga clic en Adición al menú, seguido del menú de rescate:
Seleccione las páginas para incluir en el menú ahora sus páginas deben estar pobladas en el lado derecho, debajo de la estructura del menú. Paso 2: cree su encabezado a continuación, tendremos que crear nuestra base. Hagamos un encabezado clásico. Para comenzar, ubique la pestaña Elementor en la barra lateral izquierda. Incluso a continuación, vaya a plantillas> Builder de temas. La siguiente página se verá así:
Encuentre “plantillas” en “Builder de temas”, como probablemente pueda ver, con Elementor Pro, puede comenzar a diseñar fácilmente cada elemento. Haga clic en el icono más ( +) del elemento de encabezado. Ahora debería ver una ventana emergente que muestre varios bloques de encabezado desde los que puede elegir:

Elija entre varios bloques de encabezado si tiene una plantilla de encabezado preexistente, puede seleccionarla en mis plantillas. De lo contrario, es posible que desee usar uno de los bloques de secciones que se incluyen con Elementor Pro. Una vez que haya realizado la selección, simplemente revise el bloque deseado y haga clic en Insertar: ingrese el bloque deseado aquí, verá que este bloque viene con su propio logotipo, pero nuestro menú de navegación se ha poblado automáticamente. Ahora haga clic en Publicación:
Haga clic en “Agregar condición” en la configuración de publicación La siguiente pantalla le pedirá que determine la configuración de publicación. Aquí, seleccione Agregar condición para decidir dónde desea mostrar el encabezado:

¿Luchas con tiempos no funcionales y problemas de WordPress? ¡Kinsta es la solución de alojamiento diseñada para ahorrarle tiempo! Revise nuestras características

Seleccione el lugar donde desee mostrar la plantilla que probablemente desee seleccionar todo el sitio junto a las incluye. También puede excluir ciertas áreas del sitio haciendo clic en la flecha junto a las incluye y cambiando la alternativa. Cuando esté satisfecho con sus selecciones, haga clic en Guardar y cerrar. En este momento, aparecerá un mensaje emergente en la esquina inferior derecha de la pantalla. Si no desaparece antes de que pueda hacer clic en él, seleccione la opción de ver su sitio en vivo. Alternativamente, regrese al tablero de WordPress y presente su sitio haciendo clic en el icono de la casa en la esquina superior izquierda y luego seleccionando el sitio:

El encabezado ya está disponible como puede ver, nuestro encabezado funciona ahora, pero cuando corremos por la página, desaparece. ¡Veamos qué podemos hacer a este respecto! Paso 3: ¡Haga su encabezado pegajoso ahora para ver cómo crear un encabezado pegajoso elemental con el instrumento Pro! Vaya a plantillas> Builder de temas y seleccione el encabezado que acaba de crear. Luego haga clic en Edición junto al icono del lápiz en la siguiente pantalla. Esto lo traerá de vuelta al editor elemental. Coloque el cursor sobre la plantilla del encabezado, luego haga clic en el icono de seis puntos en el centro. Esto abrirá su panel editar la sección a la izquierda: haga clic en la opción puntuada para editar ahora, navegue por la pestaña avanzada y localice la sección Efectos de movimiento. Aquí, active los efectos del desfile cambiando al encendido:

Cambie la opción “Efectos de contaminación” en “activado” y luego, desplácese hacia abajo en la sección Efectos de movimiento para encontrar el campo pegajoso. En el menú Drop -down, seleccione TOP:

Seleccione “Up” en el menú Drop -down de la opción “Sticky”. Ahora haga clic en Actualizar. Tenga en cuenta que, dependiendo del esquema de color de su tema, su encabezado elemental Lipic puede parecer transparente:

El encabezado pegajoso funciona ahora correctamente si este es el caso y no le gusta cómo se ve, siempre puede cambiar su color de fondo. En el panel editar la sección, vaya a estilo> fondo y seleccione clásicamente como tipo de fondo. Ahora seleccione un nuevo color de fondo para la plantilla de encabezado. Querrá elegir un tono que sea complementario al resto de la página, pero para crear un hermoso contraste:

Edite el encabezado pegajoso, si corresponde porque esto es solo un ejemplo, simplemente elegimos un color gris para que el encabezado sea menos transparente. Ahora haga clic en Actualizar para guardar sus cambios. Continuar y obtener una vista previa del resultado final: ¡vea cualquier cambio hecho esto! Probablemente desee cambiar el estilo y los colores según su marca. Solo asegúrese de guardar siempre los cambios cuando haya terminado. Cómo usar CSS para mejorar su encabezado Sticky Elementer cuando implementa un encabezado elemental adhesivo en su sitio web, puede sentirse como un levantamiento significativo para el diseño de su sitio. Sin embargo, puede estar interesado en personalizaciones de funciones adicionales o más dinámicas. Ahora que sabe cómo crear un encabezado de base pegajoso, veamos cómo llevar su diseño al siguiente nivel. Puede hacer esto usando el código de hojas de estilo cascading (CSS) en WordPress. Si eres un principiante o no tienes experiencia en la codificación, no te preocupes. La mejora del diseño es fácil de hacer con el elemento. Para hacer esto, vaya a plantillas> Builder de temas> Encabezado:

Agregue CSS personalizado para cambiar el encabezado a la sección de edición> Avanzado> CSS personalizado, puede agregar un fragmento CSS pequeño para hacer cambios estilísticos. ¡Tipos de encabezados pegajosos Elementor aquí hay algunas mejoras populares que puede considerar para su elemento de encabezado pegajoso! Encabezado pegajoso transparente Algunos temas pueden establecer automáticamente los encabezados pegajosos en transparente. Sin embargo, si desea hacer esto utilizando CSS, puede usar un fragmento de código como este: ¡efectos selectores-estado {Color de fondo: RGBA (133,130,255.0.5)! Color 4s facilidad; } Selector.-element-sticky-efects> .- element-continer {min-height: 80px; } Selector> .- Elemento-contenidor {Transición: Min-HETHT 1S ELECHE! } Simplemente copie e inserte este código en el campo CSS personalizado y ajuste los campos a sus preferencias. Este fragmento cambia el color de fondo, la transparencia y la altura del encabezado, con un efecto de animación:

CSS para personalizar el fondo del encabezado Las posibilidades solo de este tipo son infinitas. El encabezado lipídico que encoge otra opción popular es un encabezado que se vuelve más pequeño a medida que los visitantes corren. Aquí está el código que necesitará para este tipo de elemento de encabezado pegajoso: Header.sticky-Header {-heeight: 90px; -Opacy: 0.90; –shink-me: 0.80; -Sticky-Background-Color: #0E41E5; -Transición: .3s Facilia-Out; Transición: Lima de fondo de fondo (-Transición), Var de imagen de fondo (-Transición), Fackdrop-Porter Var (-Transición), Opacidad VAR (-Transición); } Header.sticky-Header.Elector-Sticky-Effects {Background-Color: Lime (-Sticky-Background-Color)! IMAGEN DE ANTECEDENTES: ¡Ninguna! Importante; Opacidad: Lime (-opacidad)! -Webkit-backdrop-filter: blur (10px); Filtro de fondo: Blur (10px); } Header.sticky-Header> .- Element-Container {Transition: Min-Height var (-transition); } Header.Testyky-Header.Elector-Sticky-Effects> .- Element-Container {min-height: calc (var (-headkt) * var (-shrink-me)! Importante; Altura: calc (var (-header-height) * var (-shrink-me)); } Header.testyky-header.-element-nav-menu.-element-weitem {Transition: padding var (-transition); } Header.sticky-Header.Elector-Sticky-Effects.-element-nav-menu.-element-titm {bottom: 10px! Importante; TOP DEL PARTIR: 10PX! IMPORTANTE; } Header.sticky-Header> .- Container .logo img {Transition: max-width var (-transition); } Header.Testyky-Header.Elector-Sticky-Effects .logo img {max-width: calc (100% * lima (-shink-me));
} Si no se siente cómodo con un código tan extendido, es posible que desee consultar a la guía elemental para hacer un encabezado pegajoso que se está reduciendo.Con este diseño, alcanzará este efecto: nuevo efecto de encabezado, aunque este encabezado tiene una nota sutil, su refinamiento puede darle a su diseño una sensación más profesional.Fade-In / Fade-Out Además de estas opciones de moda, también existe la función de Fade-In / Fade-Out (también llamada “Revelar”).Se ve como esto:

Fade in Fade Out para este efecto, no tendrá que alcanzar ningún código en absoluto.Simplemente explore su encabezado en el generador de temas.Luego vaya a la sección de edición> Avanzado> Efectos de movimiento> Efectos del desfile: