Créer un en-tête collant rétrécissant avec Elementor

Rifat Élémentaire Apr 4, 2022

Voulez-vous créer un en-tête qui devient plus petit au fur et à mesure que la page se charge ? Lorsqu'un visiteur fait défiler la page, un en-tête rétréci sera un bel effet pour impressionner le visiteur. Même si vous ne prévoyez pas d'utiliser cet effet, cela vaut la peine de se demander s'il serait un bon ajout à votre site Web.

Ici, nous vous apprendrons exactement comment utiliser Elementor Pro pour réduire l'en-tête de votre site WordPress. Avec l'aide de quelques CSS personnalisés, nous vous montrerons exactement ce que vous devez faire pour faire le travail.

Qu'est-ce qu'un en-tête rétrécissant?

Un en-tête rétréci est exactement le même en-tête que vous voyez lorsqu'un site Web apparaît, mais il devient un peu plus petit lorsque vous commencez à faire défiler. Pour commencer, il y a un en-tête supérieur standard. L'en-tête "rétrécira" au fur et à mesure que l'utilisateur fait défiler la page, et vous pouvez ajuster son rétrécissement et sa translucidité.

Bien qu'il devienne plus petit, l'en-tête est toujours là lorsque vous faites défiler la page. Il existe différentes options, telles que l'enfouissement complet de l'en-tête et sa révélation uniquement lorsque l'utilisateur revient en arrière.

Créer des sites Web incroyables

Avec le meilleur constructeur de page Elementor

Commencer Maintenant

Avantages d'un en-tête rétractable

Si vous utilisez un en-tête rétrécissant, vous aurez plus de place pour votre contenu lui-même. Il y a moins de concurrence pour attirer l'attention de l'en-tête complet, ce qui signifie que vous pouvez vous concentrer sur votre contenu principal.

Si vous masquez totalement l'en-tête lorsqu'un utilisateur fait défiler vers le bas, vous ne pourrez pas donner aux utilisateurs l'accès à l'ensemble de votre menu de navigation à tout moment.

Dans une certaine mesure, cela vous donne plus d'espace pour votre contenu tout en vous permettant d'afficher votre menu complet. Pour couronner le tout, cet effet est esthétiquement agréable et ajoute un petit bonus visuel supplémentaire pour les visiteurs de votre site Web lorsqu'ils l'explorent.

Comment créer un en-tête rétrécissant

Lorsque vous avez votre premadeheader prêt, vous êtes prêt à partir. Le reste du post vous guidera pour le réduire. Vous aurez besoin de beaucoup de CSS personnalisés. Cependant, nous vous donnerons le code dont vous avez besoin et vous montrerons comment le modifier pour qu'il corresponde à votre site.

Modifier avec Elementor

Pour commencer, modifiez le modèle d'en-tête avec Elementor Theme Builder.

Pour modifier votre modèle d'en-tête à l'aide d'Elementor, accédez à Templates Theme Builder dans votre tableau de bord WordPress et sélectionnez Modifier avec Elementor.

Entretien ménager CSS de base

Vous devrez nettoyer un peu votre en-tête avant d'appliquer le code CSS que vous verrez dans les sections suivantes.

La première étape consiste à accéder aux paramètres de la section d'en-tête. Définissez la liste déroulante Balise HTML sur l'en-tête de l'onglet Mise en page.

Il ne doit pas y avoir de hauteur minimale et l'alignement vertical doit être défini au milieu dans l'onglet de mise en page.

Accédez à l'onglet Avancé et modifiez la classe CSS de la section d'en-tête en stick-header.

Enfin, ouvrez le widget d'image contenant votre logo et sélectionnez l'option Avancé dans le menu déroulant. Ensuite, dans la zone CSS Classes de votre image de logo, saisissez logo:

Effets de mouvement pour faire coller votre en-tête

La fonctionnalité Motion Effects d'Elementor peut être utilisée pour garder votre en-tête en haut de la page pendant que les spectateurs défilent vers le bas.

Vous pouvez accéder aux paramètres d'en-tête de la section en cliquant dessus. Ensuite, cliquez sur la page Avancé et consultez les options d'effets de mouvement

  • Supposons que Top est sélectionné sous Sticky dans le menu déroulant.
  • Veuillez éliminer tous les autres appareils qui ne sont pas répertoriés dans la case "Sticky On".
  • Le décalage des effets doit être réglé sur 90 (la hauteur de votre en-tête).

CSS personnalisé

La dernière étape avant de terminer consiste à ajouter le code CSS personnalisé. Voici le code de base que vous utiliserez. Nous verrons comment le personnaliser dans les sections suivantes:

Le code CSS suivant va:

  • Pour accéder au menu hamburger, accédez au coin supérieur gauche de l'interface Elementor et cliquez dessus.
  • Le style de thème peut être sélectionné dans le menu déroulant Style global.
  • Sélectionnez CSS personnalisé (il sera bleu au lieu de l'élément "normal" ou rouge une fois l'interface de style de thème ouverte)
/***
* 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);
}

Personnaliser CSS

Ce CSS peut être personnalisé pour répondre à vos besoins spécifiques, alors voyons maintenant comment procéder. L'utilisation d'un éditeur de code tel que Visual Studio Code ou Atom est recommandée plutôt que l'édition CSS directement dans l'interface Elementor. Les utilisateurs Windows, Mac et Linux peuvent tous bénéficier de ces éditeurs open source.

Les propriétés personnalisées CSS seront notre outil de choix (ou variables CSS). Ces commandes vous permettent d'affiner l'effet d'en-tête décroissant. Si vous apportez une seule modification à une propriété personnalisée, l'intégralité du code CSS sera mis à jour pour refléter cette modification.

Il y a un total de cinq facteurs que vous pouvez ajuster, au total. Vous n'avez même pas besoin de les changer si vous ne voulez pas –, gardez-les tels quels si vous aimez la façon dont ils fonctionnent!

Pour vous aider, nous avons inclus les cinq variables CSS et leurs valeurs par défaut ci-dessous:

  • – hauteur d'en-tête: 90px;
  • –opacité: 0,90;
  • –shrink-header-à: 0,80;
  • –sticky-background-color: #0e41e5;
  • –transition: 300ms d'entrée et de sortie;

Si vous regardez notre exemple de code, vous remarquerez que nous avons inclus quelques propriétés personnalisées à la place du double tiret "–". Après les deux-points et avant le point-virgule, il ne reste plus qu'à faire une petite modification.

Changer la hauteur de l'en-tête à 100 pixels, par exemple, apparaîtrait comme ceci avant et après:

  • Avant : –header-height: 90px;
  • Après : –header-height: 100px;

Commençons par ces variables.

Couleur de fond collante (--sticky-background-color)

La couleur de fond de l'en-tête "rétréci", qui s'affiche lorsque les visiteurs défilent vers le bas, est contrôlée par la propriété Sticky Background Color. Changer la couleur ne doit pas nécessairement correspondre à la couleur de votre en-tête si ce n'est pas ce que vous préférez.

Dans le modèle Digital Agency, par exemple, l'arrière-plan de l'en-tête a d'abord un dégradé. La couleur de l'en-tête devient un bleu uni lorsque les visiteurs défilent vers le bas et l'en-tête devient plus petit (vous pouvez le voir dans l'exemple vidéo depuis le début).

Hauteur d'en-tête (--header-height)

Dans Elementor, l'attribut Header Height détermine la hauteur de votre en-tête - il doit correspondre à la hauteur de votre section d'en-tête. Le régler à 90 pixels était un bon point de départ dans l'instruction.

Cependant, si vous décidez de modifier la hauteur, assurez-vous de le faire dans la propriété CSS ainsi que dans les paramètres de la section d'en-tête.

Pour éviter les problèmes d'effet de rétrécissement, nous ne préconisons pas des hauteurs d'en-tête supérieures à 100 pixels.

Opacité (--opacité)

Le degré auquel votre en-tête décroissant est translucide est contrôlé par la propriété Opacity:

  • 0 signifie que l'en-tête sera invisible.
  • 1 signifie qu'il n'y aura aucun en-tête visible (pas de transparence)

L'opacité est définie sur 0,9 dans notre exemple de code, ce qui le rend presque entièrement opaque. Ce nombre peut être modifié selon vos besoins. Réduisez la valeur à zéro pour la rendre plus évidente.

Réduire l'en-tête à (--shrink-header-to)

Lorsqu'un visiteur commence à défiler vers le bas, l'attribut Shrink Me détermine de combien votre en-tête et votre logo vont rétrécir. Cela signifie que votre en-tête et votre logo seront réduits à 800x025 de leur taille initiale, par exemple.

Transition (--transition)

Si l'attribut Transition est défini sur « rétréci », l'en-tête passera de sa taille d'origine à cette valeur.

Il est préférable de laisser quelque chose tel quel, mais vous avez la possibilité de le modifier si nécessaire.

Ainsi, le CSS mis à jour pour l'en-tête rétrécissant sera -

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;
}

Mettre fin aux pensées

Il est très facile de travailler avec Elementor car il est devenu l'un des constructeurs de pages les plus recherchés par des tonnes de développeurs Web à travers le monde. Avoir un tel design interactif attirera plus de visiteurs sur votre site. Si vous avez des questions, n'hésitez pas à les poser. Nous avons un grand nombre de tutoriels Elementor sur notre site, allez les vérifier et faites-nous savoir ce que nous devrions couvrir ensuite.

Divi WordPress Theme