El encabezado de un sitio web es la primera pieza de información percibida por visitantes de tu sitio Le permite resaltar el logotipo de su marca, organizar las páginas de su sitio y proporcionar otras funciones importantes (búsqueda, conexión, etc.). Además de esto, es necesario tener un encabezado flotante y transparente ya que mejora la experiencia del usuario.

En este artículo le mostraremos cómo crear un encabezado y hacerlo transparente con Elementor. Pero antes veremos qué es una cabecera flotante y transparente.

¿Qué es un encabezado flotante y transparente?

Un encabezado flotante es una barra de navegación que siempre permanece fija incluso cuando el visitante se desplaza hacia abajo en la página web. Es muy adecuado para sitios que tienen páginas con artículos extensos, reseñas y sitios de una sola página. Y su aspecto transparente te permite ver el color de fondo de la página así como su contenido.

¿Por qué usar encabezados flotantes y transparentes?

Los sitios web modernos utilizan cada vez más encabezados flotantes y transparentes porque tienen un impacto visual en el visitantes del sitio. Las razones para su adopción van dirigidas a:

• Aumentar el conocimiento de su marca,
• Mejora la experiencia del usuario,
• Mejorar la navegación

Descubrir Cómo crear un título de dos colores en Elementor

Fijar y hacer un encabezado transparente con Elementor

Para crear un encabezado transparente y flotante, debe tener ambas versiones deElementor (Pro y Lite). De lo contrario, descargue el (Elementor, Elementor Pro) antes de comenzar.

Una vez instalado, siga los siguientes pasos.

paso 1: crea un menú con Elementor

Para crear un menú, siga estos pasos:

• seleccionar sucesivamente Apariencia >> Menús
• Nombra el menú
• Indicar la ubicación del menú
• Validar haciendo clic en el botón Guardar menú

• Revisa las páginas, artículos o publicaciones en el grupo Añadir elementos de menú
• Cliquez sur Añadir al Menú para agregar los elementos marcados al menú
• Finalmente haga clic en Guardar Menú

Lire aussi Elementor: cómo mostrar texto encima de una imagen

Paso 2: seleccione la plantilla de encabezado de la biblioteca de plantillas de Elementor

Usuarios deElementor Pro tiene acceso a una biblioteca de plantillas listas para usar útiles para diseñar diferentes secciones de un Sitio web. También encontrará una variedad de plantillas de encabezado aquí. Para hacer esto,

• Ir sucesivamente a Modelos >> Agregar

• Verá una ventana emergente modal
• seleccionar en cabeza
• Finalmente haga clic en Crea una plantilla

A partir de ese momento, se muestra la biblioteca. Por defecto, muestra bloques de encabezado. Navegue a través de las plantillas ofrecidas, luego inserte la plantilla que le interese.

La plantilla de encabezado se abrirá en el lienzo de Elementor.

Paso 3: Pin de cabecera con Elementor

Para anclar el encabezado, siga estos pasos:

• Haga clic en el botón Editar sección de encabezado
• Luego selecciona la pestaña Avancé
• Después efecto de movimiento

• Tire hacia abajo del menú Alfiler y seleccione el valor En alto, esto congelará el encabezado de su sitio a medida que el visitante se desplaza por las páginas.
• De forma predeterminada, el encabezado se anclará automáticamente en medios como computadoras de escritorio, tabletas y dispositivos móviles.

también navegar Elementor: Cómo exportar e importar plantillas

Paso 4: Haz que el encabezado sea transparente con Elementor

Para lograr esto, repita el siguiente método:

• ir a estilo >> fondo >> selector de color

• Luego cambia la opacidad del fondo.

Si desea que el encabezado sea completamente transparente, cambie el tipo de fondo seleccionando el tipo clásico. Por lo tanto, los menús de navegación serán invisibles debido al contraste de color del texto (blanco).

Para remediar esta situación, haga lo siguiente:

• Haga clic sucesivamente en Modificar Menú de navegar >> estilos
• Luego en el selector de color
• Elige el color deseado (en nuestro caso, no hubo necesidad de cambiarlo).

Una vez hecho esto, puede publicar su página web. Pero antes de eso, veamos cómo reemplazar los menús de navegación en nuestra plantilla con los que creamos. Recuerde que el nombre asignado a nuestro es menú de encabezado (ver paso 1):

• Seleccione la pestaña contenido
• Luego modifique el MENÚ seleccionando el nombre de su encabezado

Y ahí lo tienes :).

Conclusión

Los encabezados transparentes y flotantes pueden serle útiles en varios casos. Esperamos que este artículo haya podido satisfacer sus necesidades sobre cómo crear encabezados transparentes y flotantes con Elementor. Si tiene alguna otra inquietud con respecto a este tema, háganoslo saber en los comentarios.