Cree un encabezado adhesivo que se encoge con Elementor

¿Desea crear un encabezado que se haga más pequeño a medida que se carga la página? Incluso si no planea usar este efecto, vale la pena pensar si sería una buena adición a su sitio web.

Aquí, le enseñaremos exactamente cómo utilizar Elementor Pro para reducir el encabezado de su sitio de WordPress. Con la ayuda de algunos CSS personalizados, le mostraremos exactamente lo que debe hacer para realizar el trabajo.

¿Qué es un encabezado que se reduce ??

Un encabezado que se reduce es exactamente el mismo encabezado que ves cuando aparece un sitio web, pero se vuelve un poco más pequeño cuando comienzas a desplazarte. Para empezar, hay un encabezado superior estándar. El encabezado se "encogerá" a medida que el usuario se desplaza hacia abajo en la página, y puede ajustar cuánto se encoge y qué tan translúcido se vuelve.

Aunque se vuelve más pequeño, el encabezado sigue ahí cuando se desplaza hacia abajo en la página. Hay varias opciones, como ocultar completamente el encabezado y solo revelarlo cuando el usuario se desplaza hacia arriba.

Create Amazing Websites

Con el mejor generador de páginas gratuito Elementor

Empezar ahora

Cómo crear un encabezado de reducción

Cuando tenga listo su encabezado prefabricado, estará listo. El resto de la publicación lo guiará para reducirlo. Necesitará mucho CSS personalizado. Sin embargo, le daremos el código que necesita y le mostraremos cómo cambiarlo para que coincida con su sitio.

Editar con Elementor

Para comenzar, edite la plantilla de encabezado con Elementor Theme Builder.

Para editar su plantilla de encabezado usando Elementor, vaya a Templates Theme Builder en su tablero de WordPress y seleccione Editar con Elementor.

Limpieza básica de CSS

Deberá limpiar un poco su encabezado antes de aplicar el código CSS que verá en las siguientes secciones.

El primer paso es acceder a la configuración de la sección de cabecera. Establezca el menú desplegable Etiqueta HTML en el encabezado de la pestaña Diseño.

No debe haber una altura mínima y la alineación vertical debe establecerse en el medio en la pestaña de diseño.

Vaya a la pestaña Avanzado y cambie la clase CSS de la sección de encabezado a encabezado fijo.

Finalmente, abra el widget de imagen que contiene su logotipo y seleccione la opción Avanzado en el menú desplegable. Luego, en el área Clases de CSS de la imagen de su logotipo, ingrese logo:

Efectos de movimiento para hacer que su encabezado se pegue

La funcionalidad de efectos de movimiento de Elementor se puede usar para mantener su encabezado en la parte superior de la página mientras los espectadores se desplazan hacia abajo.

Puede acceder a la configuración del encabezado de la sección haciendo clic en ellos. Luego, haga clic en la página Avanzado y verifique las opciones de Efectos de movimiento

• Suponga que Top está seleccionado en Sticky en el menú desplegable.

• Elimine cualquier otro dispositivo que no esté en la lista de la casilla "Sticky On".

• El Desplazamiento de efectos debe establecerse en 90 (la altura de su encabezado).

CSS personalizado

El último paso antes de terminar es agregar el código CSS personalizado. Este es el código básico que usará. Veremos cómo personalizarlo en las siguientes secciones:

El siguiente código CSS:

• Para acceder al menú de hamburguesas, vaya a la esquina superior izquierda de la interfaz de Elementor y haga clic en él.

• El estilo de tema se puede seleccionar en el menú desplegable Estilo global.

• Seleccione CSS personalizado (será azul en lugar del rojo "normal" de Elementor una vez que se haya abierto la interfaz de estilo de tema)

/***
* class: .sticky-header
*/
header.sticky-header {
	--header-height: 100px;
	--shrink-header-to: 0.6;
	--transition: .45s cubic-bezier(.4, 0, .2, 1);
	background-color: rgba(244, 245, 248, 1);
	transition: background-color var(--transition),
				backdrop-filter var(--transition),
				box-shadow var(--transition);
}

/***
* Sticky header activated
*/
header.sticky-header.elementor-sticky--effects {
	background-color: rgba(244, 245, 248, .8);
	box-shadow: 0px 4px 33px 1px rgba(0, 0, 0, .07);
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	backdrop-filter: saturate(180%) blur(20px);
}
header.sticky-header > .elementor-container {
	min-height: var(--header-height);
	transition: min-height var(--transition);
}
header.sticky-header.elementor-sticky--effects > .elementor-container {
	min-height: calc( var(--header-height) * var(--shrink-header-to) );
}

/***
* Shorter header on mobile (70px instead of 100px)
*/
@media only screen and (max-width: 767px) {
	header.sticky-header {
		--header-height: 70px;
	}
}

/***
* class: .logo
*/
header.sticky-header .logo img {
	transition: transform var(--transition);
}
header.sticky-header.elementor-sticky--effects .logo img {
	transform: scale(.8);
}

Personalizar CSS

Este CSS se puede personalizar para satisfacer sus necesidades específicas, así que veamos cómo hacerlo ahora. Se recomienda usar un editor de código como Visual Studio Code o Atom en lugar de editar CSS directamente en la interfaz de Elementor. Los usuarios de Windows, Mac y Linux pueden beneficiarse de estos editores de código abierto.

Las propiedades personalizadas de CSS serán nuestra herramienta de elección (o variables de CSS). Estos controles le permiten ajustar con precisión el efecto de encabezado decreciente. Si realiza un solo cambio en una propiedad personalizada, todo el código CSS se actualizará para reflejar ese cambio.

Hay un total de cinco factores que puede ajustar, en total. ¡Ni siquiera tiene que cambiarlos si no quiere –, solo manténgalos como están si le gusta la forma en que funcionan!

Para ayudarlo, hemos incluido las cinco variables CSS y sus valores predeterminados a continuación:

• –header-height: 90px;
• –opacidad: 0,90;
• –reducir-encabezado-a: 0,80;
• –sticky-background-color: #0e41e5;
• –transición: 300 ms de entrada y salida;

Si observa nuestro código de ejemplo, notará que hemos incluido algunas propiedades personalizadas en lugar del guión doble "–". Después de los dos puntos y antes del punto y coma, todo lo que queda por hacer es hacer una pequeña edición.

Cambiar la altura del encabezado a 100 px, por ejemplo, aparecería así antes y después:

• Antes : –header-height: 90px;
• Después : –header-height: 100px;

Vamos a presentarnos con estas variables.

Color de fondo fijo (--sticky-background-color)

El color de fondo del encabezado "reducido", que se muestra cuando los visitantes se desplazan hacia abajo, está controlado por la propiedad Color de fondo fijo. Cambiar el color no tiene que coincidir con el color de su encabezado si no es lo que prefiere.

En la plantilla de la Agencia Digital, por ejemplo, el fondo del encabezado tiene un degradado al principio. El color del encabezado cambia a un azul sólido a medida que los visitantes se desplazan hacia abajo y el encabezado se vuelve más pequeño (puede ver esto en el video de ejemplo desde el principio).

Altura del encabezado (--altura del encabezado)

En Elementor, el atributo Altura del encabezado determina la altura de su encabezado: debe coincidir con la altura de la sección de su encabezado. Establecer esto en 90 px fue un buen punto de partida en las instrucciones.

Sin embargo, si decide modificar la altura, asegúrese de hacerlo en la propiedad CSS, así como en la configuración de la sección de encabezado.

Para evitar problemas con el efecto de reducción, no recomendamos alturas de encabezado superiores a 100 px.

Opacidad (--opacidad)

El grado en que su encabezado decreciente es translúcido está controlado por la propiedad Opacidad:

• 0 significa que el encabezado será invisible.

• 1 significa que no habrá ningún encabezado visible (sin transparencia)

La opacidad se establece en 0,9 en nuestro código de ejemplo, lo que la hace casi completamente opaca. Este número se puede cambiar para adaptarse a sus necesidades. Reduzca el valor a cero para hacerlo más obvio.

Reducir encabezado a (--shrink-header-to)

Cuando un visitante comienza a desplazarse hacia abajo, el atributo Shrink Me determina cuánto se reducirán su encabezado y logotipo. Esto significa que su encabezado y logotipo disminuirán a 80% de su tamaño inicial, por ejemplo.

Transición (--transición)

Si el atributo Transición se establece en "reducido", el encabezado se reducirá de su tamaño original a ese valor.

Es mejor dejar algo como está, pero tiene la opción de cambiarlo si es necesario.

Entonces, el CSS actualizado para el encabezado de reducción será:

header.sticky-header {
	--header-height: 100px; /* Set your own header height */
	--shrink-header-to: 0.6; /* Shrinks to 60%, values: 0.1 to 1 */
	--transition-timing: .45s cubic-bezier(.4, 0, .2, 1); /* values: .1s to 0.5s (or more), replace "cubic-bezier(.4, 0, .2, 1)" with "ease" if you need a simpler transition */
	background-color: rgba(244, 245, 248, 1); /* Set your own background color */

	transition: background-color var(--transition-timing),
				backdrop-filter var(--transition-timing),
				box-shadow var(--transition-timing);
}
header.sticky-header.elementor-sticky--effects {
	background-color: rgba(244, 245, 248, .8); /* Set your own background color on scroll */
	box-shadow: 0px 4px 33px 1px rgba(0, 0, 0, .07); /* Delete this line if you don't want shadow on scroll */
	-webkit-backdrop-filter: saturate(180%) blur(20px); /* Delete this line if you don't use transparency on scroll */
	backdrop-filter: saturate(180%) blur(20px); /* Delete this line if you don't use transparency on scroll */
}
header.sticky-header > .elementor-container {
	min-height: var(--header-height);
	transition: min-height var(--transition-timing);
}
header.sticky-header.elementor-sticky--effects > .elementor-container {
	min-height: calc( var(--header-height) * var(--shrink-header-to) );
}

/***
* class: .logo
* Add the class "logo" to your logo to scale your logo to 80% on scroll
*/
header.sticky-header .logo img,
header.sticky-header .logo.elementor-widget-theme-site-logo img,
header.sticky-header .logo .elementor-icon svg {
	transition: transform var(--transition-timing);
}
header.sticky-header.elementor-sticky--effects .logo img,
header.sticky-header.elementor-sticky--effects .logo.elementor-widget-theme-site-logo img,
header.sticky-header.elementor-sticky--effects .logo .elementor-icon svg {
	transform: scale(.80); /* Shrinks logo to 80%, values: 0.10 to 1 */
}
header.sticky-header .logo .elementor-icon svg {
	width: auto;
}

pensamientos finales

Es muy fácil trabajar con Elementor , ya que se ha convertido en uno de los creadores de páginas más buscados por toneladas de desarrolladores web en todo el mundo. Tener un diseño tan interactivo atraerá más visitantes a su sitio. Si tiene alguna pregunta, sientase con libertad de preguntar. Tenemos una gran cantidad de tutoriales de Elementor en nuestro sitio, revíselos y díganos qué deberíamos cubrir a continuación.