Cómo usar encabezados fijos 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 educación, un foro comunitario o un sitio web para los medios, el encabezado es lo que hace que navegar sea sencillo y agradable de usar.

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

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

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

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

Paso 1: hacer un menú

Para agregar un encabezado fijo 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 > Creador de temas cuando haya terminado de construir el menú principal. Seleccione el área Encabezado en la página del creador 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.

Después de eso, serás llevado a la página de edición de Elementor. Puedes utilizar una de las plantillas de encabezado prediseñadas o diseñar la tuya propia desde cero.

Comenzaremos desde cero con nuestro encabezado fijo de 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 crear 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.

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

PASO 4: Cómo hacer que el encabezado de Elementor sea adhesivo

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

Para hacerlo, vaya a la sección Editar (sección Encabezado completo). Seleccione Avanzado > Efectos de movimiento en el menú desplegable.

Seleccione " pegajoso en la parte superior " debajo de efectos de movimiento, luego " dispositivos " donde desea que aparezca el encabezado fijo.

Un encabezado fijo casi siempre no es deseable en dispositivos del tamaño de una tableta, y casi siempre tampoco es deseable en las pantallas de los 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 fijo, 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 haberlo publicado. Puede mostrar el encabezado donde desee 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 fijo de Elementor se vea mucho mejor usando CSS personalizado Elementor le permite personalizar un encabezado fijo agregando una clase CSS para hacerlo más elegante.

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

Regrese al área Editar para darle más estilo a su encabezado adhesivo (sección Encabezado completo). Seleccione Avanzado > Efectos de movimiento en el menú desplegable.

En este caso, establezca el “ Desplazamiento de efectos Cuando un visitante utiliza su sitio web, esta es la distancia de desplazamiento donde se produce el efecto de desplazamiento.

Establezca el desplazamiento 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 agrega ningún CSS personalizado propio, puede omitir la última opción.

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

Ahora querrás incluir CSS personalizado en tu sitio web. El CSS personalizado es bastante flexible y puedes incluir lo que quieras si estás 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 utilizar 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 de esa sección (el color cambiará a azul desde su color rojo genético anterior).

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

encabezado.sticky-header { --header-height: 90px; --opacidad: 0,90; --encogerme: 0,80; --color-de-fondo-pegajoso: #0e41e5; --transición: .3s facilidad de entrada y salida; 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 { color de fondo: var(--color de fondo-sticky) !importante; imagen de fondo: ninguna! Importante; opacidad: var(--opacidad) !importante; -webkit-fondo-filtro: desenfoque (10px); filtro de fondo: desenfoque (10px); } encabezado.sticky-header > .elementor-container { transición: min-height var(--transition); } encabezado.sticky-header.elementor-sticky--efectos > .elementor-container { altura mínima: calc(var(--altura-encabezado) * var(--shrink-me))!importante; altura: calc(var(--altura-encabezado) * var(--shrink-me)); } header.sticky-header .elementor-nav-menu .elementor-item { transición: relleno var(--transition); } encabezado.sticky-header.elementor-sticky--efectos .elementor-nav-menu .elementor-item { padding-bottom: 10px!important; padding-top: 10px!importante; } header.sticky-header > .elementor-container .logo img { transición: var de ancho máximo (--transición); } encabezado.sticky-header.elementor-sticky--efectos .logo img { ancho máximo: 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 fijo 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 adhesivo de Elementor cambiando numerosas configuraciones y haciéndolo más o menos adhesivo. 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 crear 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 reductor de Elementor utilizando la hoja de estilos 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 tienes la opción de hacerlo si así lo deseas. Una vez que haya decidido qué variables desea modificar, sólo podrá 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 fijo es #0e41e5 y la altura del encabezado es 90px. Otras opciones de estilo incluyen: opacidad de 0,90, reducción de 0,80, opacidad de 0,90 y transición de entrada y salida gradual de 300 ms.

Las propiedades personalizadas son los elementos que aparecen después del doble guión “–” en nuestro código de amp , y puede encontrarlos enumerados en la parte superior de nuestro código de amp . 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.

Por amp , si desea aumentar la altura del encabezado a 100 px, así es como se verá 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, puedes diseñar un menú de encabezado fijo de varias maneras diferentes. No solo puede crear un encabezado adhesivo Elementor gratuito, sino que también puede personalizar el encabezado agregándole CSS personalizado. Es posible obtener instrucciones detalladas sobre cómo construir un encabezado de 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 los visitantes a navegar por su sitio web.

Con Elementor, tienes control total sobre el estilo de los encabezados de tu sitio web. Por amp , puede colocar el logotipo del sitio en el centro de la página y el menú principal debajo. Puede agregar un encabezado encima del encabezado principal para mostrar el número de teléfono, enlaces de redes sociales y otra información.

Éstos son sólo algunos amp de las numerosas opciones de diseño de encabezado disponibles para los usuarios de 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 tan sencillo como ahora, gracias a los encabezados fijos de Elementor.