Cómo usar encabezado fijo y efectos de desplazamiento con Elementor

Un encabezado es generalmente lo primero que ve una persona cuando visita su sitio web y sirve como base para explorarlo.

Ya sea que tenga un sitio web de comercio electrónico, un sitio web personal, un sitio web para la educación, un foro comunitario o un sitio web para los medios de comunicación, el encabezado es lo que hace que navegar sea fácil y agradable de usar.

Los encabezados fijos son cada vez más populares entre los diseñadores web para organizar y estructurar un sitio web para mejorar la navegación del usuario.

Le mostraremos cómo hacer su encabezado adhesivo usando Elementor en este tutorial.

Los encabezados fijos permiten a los usuarios ver el encabezado de la página y la sección del menú independientemente de qué tan abajo se desplace.

• Paso 1: hacer un menú
• Paso 2: Crea tu encabezado en Elementor
• Paso 3: usar Elementor para hacer una plantilla de encabezado
• PASO 4: Cómo hacer que su encabezado Elementor sea pegajoso
• Paso 5: personaliza nuestro CSS
• Conclusión

Paso 1: hacer un menú

Para agregar un encabezado adhesivo a su sitio web, vaya a wp-admin > Apariencia > Menús y cree un Menú principal. En el encabezado, escriba la sección que desea mostrar.

Paso 2: Crea tu encabezado en Elementor

Vaya a Plantillas de Elementor > Generador de temas cuando haya terminado de construir el menú principal. Seleccione el área de encabezado en la página del generador de temas y haga clic en " Agregar nuevo encabezado ".

Asigne un nombre a la plantilla de encabezado y haga clic en " Crear plantilla " en la pantalla emergente.

Serás llevado a la página de edición de Elementor después de eso. Puede utilizar una de las plantillas de encabezado prefabricadas o diseñar la suya propia desde cero.

Comenzaremos desde cero con nuestro encabezado adhesivo Elementor en este tutorial.

Puede ver varios widgets de encabezado en el editor de Elementor antes de comenzar a diseñar una plantilla. Podemos diseñar rápida y fácilmente un encabezado usando estas secciones.

Paso 3: usar Elementor para hacer una plantilla de encabezado

Crea un diseño de dos columnas. Asegúrese de que el ancho del contenido de la sección esté configurado en " Encuadrado ".

En la configuración de ancho de contenido en la sección de edición de Elementor, establezca el ancho de la primera columna en 20% en la columna " Editar ".

Coloque el logotipo del sitio de su sitio web en la primera columna y alinéelo a la izquierda.

Agregue un menú de navegación en la segunda columna y seleccione el menú principal que creó en el paso 1. Alinee el menú de navegación a la derecha.

Vamos a mantener el encabezado simple para este tutorial. Puede hacer que su encabezado sea más detallado agregando un color de fondo, efectos de animación flotantes, botones y otros elementos.

PASO 4: Cómo hacer que su encabezado Elementor sea pegajoso

Ahora que hemos creado nuestro encabezado Elementor básico, es hora de convertirlo en un encabezado Sticky.

Para ello, vaya a la sección Editar (sección Cabecera completa). Seleccione Avanzado > Efectos de movimiento en el menú desplegable.

Seleccione " adherente a la parte superior " en efectos de movimiento, luego " dispositivos " donde desea que aparezca el encabezado adhesivo.

Un encabezado fijo casi siempre es indeseable en dispositivos del tamaño de una tableta y casi siempre es indeseable en las pantallas de los dispositivos móviles. Como resultado, haga clic en la "x" junto a ambas opciones en Sticky On, dejando solo "Escritorio" seleccionado.

Cuando esté satisfecho con su trabajo, haga clic en “ Publicar ”; esto activará el encabezado adhesivo, pero no reemplazará el encabezado de su tema actual en este momento.

Elementor le solicita que agregue una condición para su encabezado después de que lo haya publicado. Puede mostrar el encabezado donde quiera en el sitio agregando condiciones.

Queríamos que este encabezado apareciera en todo el sitio, omitiendo la página 404. Como resultado, incluimos todo el sitio en la elección y omitimos la página 404.

Como puede ver, usar Elementor para crear su encabezado Sticky personalizado es simple e indoloro.

Haga que su encabezado adhesivo Elementor se vea mucho mejor Usando CSS personalizado Elementor le permite personalizar un encabezado adhesivo agregando una clase CSS para hacerlo más elegante.

Puede personalizar la altura del encabezado adhesivo, el color de fondo, la transición y los efectos adhesivos aquí.

Regrese al área de edición para hacer que su encabezado fijo sea más elegante (sección de encabezado completo). Seleccione Avanzado > Efectos de movimiento en el menú desplegable.

Establezca el “ Compensación de efectos ” en 100 en este caso. Cuando un visitante usa su sitio web, esta es la distancia de desplazamiento donde ocurre el efecto de desplazamiento.

Establezca la compensación de movimiento en 100.

Tenga en cuenta que las opciones de Efectos de compensación solo funcionarán si se utiliza CSS personalizado. En consecuencia, si no está agregando ningún CSS personalizado propio, puede omitir la última opción.

Antes de publicar el último encabezado fijo, opcionalmente puede agregar condiciones al último encabezado fijo. amp ejemplo de una condición de encabezado fijo es donde desea que se muestre el encabezado fijo. amp ejemplo , puede elegir el criterio " sitio completo ".

Ahora querrá incluir CSS personalizado en su sitio web. El CSS personalizado es bastante flexible y puede incluir lo que desee si está familiarizado con su funcionamiento.

Hemos completado la limpieza; ahora pasamos a las complejidades del sitio web, incluida la adición del código CSS personalizado. Demostraremos tanto los fundamentos como las técnicas avanzadas para obtener efectos de encabezado adhesivo gratuitos para Elementor. Si está utilizando Elementor 2.9 o superior, puede usar las Reglas de estilo globales para incorporar este CSS en su sitio.

Siga los procedimientos que se describen a continuación para incluir el CSS personalizado:

• Para acceder al menú de hamburguesas, ubíquelo en la esquina superior izquierda del menú de Elementor y selecciónelo.
• Seleccione Elegir estilos de tema en el menú desplegable debajo de la sección Estilo global.
• Seleccione CSS personalizado en el menú desplegable en esa sección (el color cambiará a azul de su color rojo genético anterior).

Después de eso, pegue el código CSS a continuación.

header.sticky-header {--header-height: 90px; - opacidad: 0,90; - encogerme: 0,80; - color-de-fondo-pegajoso: # 0e41e5; - transición: .3s entrada-salida fácil; transición: var de color de fondo (- transición), var de imagen de fondo (- transición), var de filtro de fondo (- transición), var de opacidad (- transición); } header.sticky-header.elementor-sticky - effects {background-color: var (- sticky-background-color)! important; imagen de fondo: ninguna! importante; opacidad: var (- opacidad)! importante; -webkit-backdrop-filter: desenfoque (10px); filtro de fondo: desenfoque (10px); } header.sticky-header> .elementor-container {transición: altura mínima var (- transición); } header.sticky-header.elementor-sticky - efectos> .elementor-container {min-height: calc (var (- header-height) * var (- shrink-me))! important; altura: calc (var (- altura del encabezado) * var (- encogerme)); } header.sticky-header .elementor-nav-menu .elementor-item {transición: varilla de relleno (- transición); } header.sticky-header.elementor-sticky - efectos .elementor-nav-menu .elementor-item {padding-bottom: 10px! important; padding-top: 10px! important; } header.sticky-header> .elementor-container .logo img {transición: var de ancho máximo (- transición); } header.sticky-header.elementor-sticky - efectos .logo img {max-width: calc (100% * var (- shrink-me)); } 

Paso 5: personaliza nuestro CSS

Las instrucciones enumeradas anteriormente lo guiarán a través del proceso de creación de un encabezado adhesivo decreciente en Elementor. Si desea conocer más detalles sobre cómo personalizar aún más el encabezado, puede consultar el código CSS que se proporciona a continuación, que le permitirá ser más creativo con el diseño del encabezado. Dependiendo de sus necesidades, puede personalizar el encabezado fijo de Elementor cambiando numerosas configuraciones y haciéndolo más o menos pegajoso. Le recomendamos que utilice un editor de código para incorporar este cambio de CSS directamente en Elementor. Puede utilizar Visual Studio Code o Atom, que le ayudarán a armar el código rápidamente y aprovechar los beneficios. Estos editores son de uso gratuito y se puede acceder a ellos desde varios sistemas, incluidos Windows, Mac OS X y Linux.

Esta sección demostrará cómo puede ajustar los efectos del encabezado de encogimiento de Elementor usando la hoja de estilo CSS. Si solo realiza un cambio en la propiedad personalizada, se cambiará inmediatamente para que coincida con el resto del código CSS.

Las opciones de personalización para el encabezado decreciente están disponibles en un total de cinco formas diferentes. No todas las variables deben personalizarse, pero tiene la opción de hacerlo si así lo desea. Tan pronto como haya decidido qué variables le gustaría modificar, solo puede modificar esas variables y dejar el resto de los parámetros sin cambios.

Aquí están las cinco variables CSS, con los valores predeterminados para cada variable mostrados en rojo.

El color de fondo adhesivo es # 0e41e5 y la altura del encabezado es 90px. Otras opciones de estilo incluyen: opacidad de 0,90, encogimiento de 0,80, opacidad de 0,90 y transición fácil de entrada / salida de 300 ms.

Las propiedades personalizadas son los elementos que aparecen después de la doble guión “-” en nuestra ex amp código le, y se puede encontrar una lista de ellos en la parte superior de nuestra s amp el código. Todo lo que se requiere es ajustar el valor que aparece después de los dos puntos y antes del punto y coma en la oración.

Para ex amp le, si se desea aumentar la altura de la cabecera a 100px, así es como se vería antes y después de cambiar la altura:

Antes, la altura del encabezado era de 90 píxeles; después, la altura del encabezado era de 100 píxeles.

Con Elementor, puede diseñar un menú de encabezado fijo de varias maneras diferentes. No solo puede construir un encabezado fijo gratuito de Elementor, sino que también puede personalizar el encabezado agregándole CSS personalizado. Es posible obtener instrucciones detalladas sobre cómo construir un encabezado Elementor adhesivo decreciente usando Elementor y modificar su CSS con esta guía paso a paso.

Elementor incluye una variedad de plantillas de encabezado; cada uno es distinto y elegante y ayuda a sus espectadores a navegar por su sitio web.

Con Elementor, tiene control total sobre el estilo de los encabezados de su sitio web. Para ex amp le, puede colocar el logo del sitio en el centro de la página y el menú principal por debajo de ella. Puede agregar un encabezado sobre el encabezado principal para mostrar el número de teléfono, los enlaces a las redes sociales y otra información.

Éstos son sólo algunos ex amp les de las numerosas opciones de diseño de cabecera disponibles para los usuarios Elementor.

Conclusión

Incluir un encabezado fijo en su sitio web puede facilitar que los visitantes recorran su sitio y aumenten los clics en todas las áreas de su sitio.

Elementor elimina la necesidad de generar manualmente encabezados fijos con Javascript y CSS, que antes era necesario. Crear un encabezado fijo para su sitio web nunca ha sido más sencillo de lo que es ahora, gracias a los encabezados fijos de Elementor.