Cómo crear cabeceras adhesivas Elementor - Guía para principiantes

Una cabecera suele ser lo primero que ve un usuario cuando visita su sitio web y es la columna vertebral de cómo un usuario navega por su sitio web.

Tanto si tiene un sitio web de comercio electrónico, un sitio personal, un sitio web educativo, un foro comunitario o un sitio web de medios de comunicación. La cabecera facilita la navegación y hace que sea un placer utilizarla.

Hoy en día, podemos ver cómo muchos diseñadores web adoptan las cabeceras adhesivas como una forma de organizar y estructurar un sitio web para una mejor navegación del usuario. En uno de nuestros artículos, ya hablamos de lo fácil que es crear cabeceras personalizadas con Elementor.

En este artículo, le mostraremos cómo crear su propia cabecera adhesiva con Elementor.

Si no lo sabe, con Elementor puede crear una cabecera adhesiva para su sitio web sin utilizar una sola línea de código.

Empecemos.

Cómo crear cabeceras adhesivas con Elementor

Las cabeceras adhesivas permiten al usuario acceder a la cabecera de la página y a la sección del menú por mucho que se desplace hacia abajo.

Paso 1: Crear el menú

Para añadir un encabezado adhesivo a su sitio web en primer lugar, es necesario crear Menú principal en su wp-admin > Apariencia > Menús. Añada la sección que desea mostrar en la cabecera.

Paso 2: Creación de la cabecera en Elementor

Después de crear el menú principal, vaya a Elementor Plantillas > Creador de temas. En la página del constructor de temas seleccione Sección de cabecera y haga clic en "Añadir nueva cabecera".

En la pantalla emergente, dé un nombre a la plantilla de cabecera y haga clic en "Crear plantilla".

Después de eso, serás redirigido a la página del editor Elementor. Aquí podrá elija una plantilla de cabecera predefinida o cree el suyo propio desde cero.

Para esta guía, vamos a crear nuestra cabecera adhesiva Elementor desde cero.

Antes de empezar a crear una plantilla, puedes ver algunos widgets de cabecera en el editor Elementor. Utilizando estas secciones podemos crear una cabecera de forma rápida y sencilla.

Paso 3: Creación de una plantilla de cabecera en Elementor

Añadir un estructura de dos columnas. Asegúrese de que el ancho del contenido de la sección es "En caja".

 En virtud de la "Columna "Editar establecer el ancho de la primera columna en 20%.

Ahora añada la dirección de su sitio web Logotipo del sitio a la primera columna, y seleccione alineación a la izquierda.

En la segunda columna, añada un Menú de navegación y seleccione el menú principal que creó en el paso 1. Alinee el menú de navegación a la derecha.

Para esta guía, vamos a crear un encabezado sencillo. Puedes crear un diseño más detallado para tu cabecera añadiendo un color de fondo, efectos de animación, botones y mucho más.

Paso 4: Cómo hacer que su cabecera Elementor sea adhesiva.

Después de crear nuestra cabecera básica Elementor, ha llegado el momento de convertirla en una cabecera Sticky.

Para ello, haga clic en el botón Editar sección (Toda la sección de cabecera). Ir a Avanzado > Efectos de movimiento.

En efectos de movimiento, seleccione "pegajoso hasta la cima" y seleccione el "dispositivos" donde quieras mostrar la cabecera adhesiva y pulsa sobre el botón "Publicar" botón.

Tras la publicación, Elementor le pide que Añadir una condición para su cabecera. Básicamente, mediante la adición de condiciones que puede mostrar cabecera donde quieras en el sitio.

Aquí queríamos mostrar este encabezado en todo el sitio, excluyendo la Página 404. Por lo tanto, hemos incluido el Todo el sitio en el menú desplegable y Página 404 excluida.

Como puede ver, crear su cabecera adhesiva personalizada con Elementor es rápido y sencillo.

Haz que tu cabecera adhesiva Elementor sea mucho más elegante usando CSS personalizado

Elementor le da la libertad de personalizar una cabecera adhesiva para hacerla más elegante mediante añadir la clase CSS.

Aquí puede añadir Altura, Color de fondo, Transición y Efectos adhesivos a la cabecera adhesiva.

Para que tu cabecera adhesiva tenga más estilo, vuelve a la opción Editar sección (Toda la sección de cabecera). Ir a Avanzado > Efectos de movimiento.

Aquí conjunto "Desplazamiento de efectos" a 100. Esta es la distancia de desplazamiento en la que se produce el efecto de desplazamiento cuando un visitante utiliza su sitio web.

Ahora desplácese hacia abajo y haga clic en "CSS personalizado". Añade la clase CSS que aparece a continuación. Puede editar este CSS para añadir sus propios números.

CSS personalizado:

selector.elementor-sticky–-effects { 
background-color: rgb(255, 220, 168) !important; 
}
selector { 
transition: background-color 3s ease !important; 
}
selector.elementor-sticky–-effects >.elementor-container { 
min-height: 80px; 
}
selector > .elementor-container { 
transition: min-height 1s ease !important; 
}

Este es el aspecto de la cabecera pegajosa después de añadir la clase CSS.

Diferentes opciones de diseño de cabecera para usuarios de Elementor

Elementor viene con una gama de plantillas de cabecera fuera de la caja, cada uno es único, elegante y ayuda a sus usuarios a navegar fácilmente su sitio web.

Con ElementorSi lo desea, puede diseñar las cabeceras de su sitio web como quiera. Por ejemplo, puede añadir el logotipo del sitio en el centro y el menú principal debajo del logotipo. Puede añadir una cabecera más por encima de la cabecera principal para mostrar el número de teléfono, botones sociales y mucho más.

Estas son sólo algunas de las diferentes opciones de diseño de cabecera para los usuarios de Elementor.

En Tema Astra Pro es altamente flexible y compatible con todos los constructores de páginas/temas populares. Si combina Astra Pro con su creador de páginas favorito, podrá crear cualquier tipo de sitio web con esta potente combinación.

Astra Pro le ofrece la posibilidad de crear un encabezado adhesivo y un encabezado transparente. Junto con opciones para alinear también el logotipo del sitio y las secciones del menú donde quieras.

Si no utiliza Astra Pro sin embargo, ¡es el momento adecuado para cambiar!

Conclusión

Añadir un encabezado adhesivo puede ayudar a los usuarios de su sitio web a navegar por él más fácilmente y a dirigir los clics a todos los aspectos de su sitio.

Elementor resuelve el problema de tener que crear cabeceras adhesivas manualmente utilizando Javascript y CSS. Gracias a Elementor sticky headers no podría ser más fácil crear una cabecera adhesiva para su sitio web.

Empezar a utilizar Elementor con el más compatible Astra Pro tema. Y construir cualquier tipo de sitio web que desee.

Si tienes alguna duda sobre el encabezado adhesivo, háznoslo saber en la sección de comentarios 🙂 .