Comment utiliser l'entête sticky et les effets de défilement avec Elementor

Un en-tête est généralement la première chose qu'une personne voit lorsqu'elle visite votre site Web, et elle sert de base à la façon dont elle l'explore.

Que vous ayez un site Web de commerce électronique, un site Web personnel, un site Web pour l'éducation, un forum communautaire ou un site Web pour les médias, l'en-tête est ce qui le rend simple à parcourir et agréable à utiliser.

Les en-têtes collants deviennent de plus en plus populaires parmi les concepteurs de sites Web pour organiser et structurer un site Web afin d'améliorer la navigation des utilisateurs.

Nous allons vous montrer comment créer votre en-tête collant à l'aide d'Elementor dans ce didacticiel.

Les en-têtes collants permettent aux utilisateurs d'afficher l'en-tête et la section de menu de la page, quelle que soit la distance à laquelle ils défilent.

• Étape 1 : faire un menu
• Étape 2: Création de votre en-tête dans Elementor
• Étape 3 : Utilisation d'Elementor pour créer un modèle d'en-tête
• ÉTAPE 4: Comment rendre votre en-tête Elementor collant
• Étape 5 : personnaliser notre CSS
• Conclusion

Étape 1 : faire un menu

Pour ajouter un en-tête collant à votre site Web, accédez à wp-admin > Apparence > Menus et créez un menu principal. Dans l'en-tête, tapez la section que vous souhaitez afficher.

Étape 2: Création de votre en-tête dans Elementor

Accédez à Modèles Elementor > Générateur de thèmes lorsque vous avez terminé de créer le menu principal. Sélectionnez la zone d'en-tête sur la page du générateur de thème et cliquez sur « Ajouter un nouvel en-tête ».

Donnez un nom au modèle d'en-tête et cliquez sur " Créer un modèle " sur l'écran contextuel.

Vous serez ensuite redirigé vers la page d'édition d'Elementor. Vous pouvez soit utiliser l'un des modèles d'en-tête prédéfinis, soit concevoir le vôtre à partir de zéro.

Nous partirons de zéro avec notre en-tête autocollant Elementor dans ce didacticiel.

Vous pouvez voir divers widgets d'en-tête dans l'éditeur Elementor avant de commencer à concevoir un modèle. Nous pouvons rapidement et facilement concevoir un en-tête à l'aide de ces sections.

Étape 3 : Utilisation d'Elementor pour créer un modèle d'en-tête

Créez une mise en page à deux colonnes. Assurez-vous que la largeur du contenu de la section est définie sur « Boxed ».

Dans les paramètres de largeur du contenu dans la section d'édition d'Elementor, définissez la largeur de la première colonne sur 20 % sous la colonne " Modifier ".

Placez le logo du site de votre site Web dans la première colonne et alignez-le sur la gauche.

Ajoutez un menu de navigation dans la deuxième colonne et sélectionnez le menu principal que vous avez créé à l'étape 1. Alignez le menu de navigation sur la droite.

Nous allons garder l'en-tête simple pour ce tutoriel. Vous pouvez rendre votre en-tête plus détaillé en ajoutant une couleur d'arrière-plan, des effets d'animation en survol, des boutons et d'autres éléments.

ÉTAPE 4: Comment rendre votre en-tête Elementor collant

Maintenant que nous avons créé notre en-tête Elementor de base, il est temps de le transformer en un en-tête Sticky.

Pour ce faire, rendez-vous dans la section Modifier (section En-tête entier). Sélectionnez Avancé > Effets de mouvement dans le menu déroulant.

Sélectionnez " collant vers le haut " sous les effets de mouvement, puis " appareils " où vous souhaitez que l'en-tête collant apparaisse.

Un en-tête collant est presque toujours indésirable sur les appareils de la taille d'une tablette, et il est presque toujours également indésirable sur les écrans mobiles. Par conséquent, cliquez sur le « x » à côté des deux options sous Sticky On, en ne laissant que « Bureau » sélectionné.

Lorsque vous êtes satisfait de votre travail, cliquez sur « Publier » ; cela activera l'en-tête collant, mais il ne remplacera pas votre en-tête de thème actuel pour le moment.

Elementor vous invite à ajouter une condition pour votre en-tête après l'avoir publié. Vous pouvez afficher l'en-tête où vous le souhaitez sur le site en ajoutant des conditions.

Nous voulions que cet en-tête apparaisse sur l'ensemble du site, en omettant la page 404. En conséquence, nous avons inclus l'ensemble du site dans le choix en laissant de côté la page 404.

Comme vous pouvez le voir, utiliser Elementor pour créer votre en-tête Sticky personnalisé est simple et indolore !

Améliorez l'apparence de votre en-tête Elementor Sticky Using CSS personnalisé Elementor vous permet de personnaliser un en-tête collant en ajoutant une classe CSS pour le rendre plus élégant.

Vous pouvez personnaliser la hauteur de l'en-tête, la couleur d'arrière-plan, la transition et les effets collants ici.

Revenez à la zone d'édition pour rendre votre en-tête collant plus élégant (section En-tête entier). Sélectionnez Avancé > Effets de mouvement dans le menu déroulant.

Réglez le « Effects Offset » sur 100 dans ce cas. Lorsqu'un visiteur utilise votre site Web, il s'agit de la distance de défilement où l'effet de défilement se produit.

Réglez le décalage de mouvement sur 100.

Veuillez garder à l'esprit que les options d'effets de décalage ne fonctionneront que si le CSS personnalisé est utilisé. Par conséquent, si vous n'ajoutez aucun CSS personnalisé, vous pouvez ignorer la dernière option.

Avant de publier le dernier en-tête collant, vous pouvez éventuellement ajouter des conditions au dernier en-tête collant. Un exemple de condition d'en-tête collant est l'endroit où vous voulez que l'en-tête collant soit affiché amp A titre d'exemple amp le critère « site entier ».

Vous voudrez maintenant inclure du CSS personnalisé sur votre site Web. Le CSS personnalisé est assez flexible et vous pouvez inclure ce que vous voulez si vous connaissez son fonctionnement.

Nous avons terminé le nettoyage; nous passons maintenant aux subtilités du site Web, y compris l'ajout du code CSS personnalisé. Nous démontrerons à la fois les principes fondamentaux et les techniques avancées pour obtenir des effets d'en-tête collants gratuits pour Elementor. Si vous utilisez Elementor 2.9 ou une version ultérieure, vous pouvez utiliser les règles de style globales pour incorporer ce CSS dans votre site.

Suivez les procédures décrites ci-dessous pour inclure le CSS personnalisé :

• Pour accéder au menu hamburger, localisez-le dans le coin supérieur gauche du menu Elementor et sélectionnez-le.
• Sélectionnez Choisir les styles de thème dans le menu déroulant sous la section Style global.
• Sélectionnez CSS personnalisé dans le menu déroulant de cette section (la couleur passera au bleu par rapport à sa couleur rouge génétique précédente).

Après cela, collez le code CSS ci-dessous.

header.sticky-header { --header-height: 90px; --opacité : 0.90 ; --shrink-me: 0.80; --sticky-background-color: #0e41e5; --transition : .3s facilité d'entrée-sortie ; transition : couleur d'arrière-plan var(--transition), image d'arrière-plan var(--transition), toile de fond-filtre var(--transition), opacité var(--transition); } header.sticky-header.elementor-sticky--effects { background-color: var(--sticky-background-color) !important; image d'arrière-plan : aucune !important; opacité : var(--opacité) !important; -webkit-backdrop-filter : blur (10px) ; toile de fond-filtre : blur (10px) ; } header.sticky-header > .elementor-container { transition: min-height var(--transition); } header.sticky-header.elementor-sticky--effects > .elementor-container { min-height: calc(var(--header-height) * var(--shrink-me))!important; hauteur: calc(var(--header-height) * var(--shrink-me)); } header.sticky-header .elementor-nav-menu .elementor-item { transition: padding var(--transition); } header.sticky-header.elementor-sticky--effects .elementor-nav-menu .elementor-item { padding-bottom: 10px!important; padding-top : 10px!important; } header.sticky-header > .elementor-container .logo img { transition: max-width var(--transition); } header.sticky-header.elementor-sticky--effects .logo img { max-width: calc(100% * var(--shrink-me)); } 

Étape 5 : personnaliser notre CSS

Les instructions énumérées ci-dessus vous guideront tout au long du processus de création d'un en-tête collant décroissant dans Elementor. Si vous souhaitez en savoir plus sur la façon de personnaliser davantage l'en-tête, vous pouvez consulter le code CSS fourni ci-dessous, qui vous permettra d'être plus créatif avec la conception de l'en-tête. Selon vos besoins, vous pouvez personnaliser l'en-tête collant Elementor en modifiant de nombreux paramètres et en le rendant plus ou moins collant. Nous vous recommandons d'utiliser un éditeur de code pour intégrer cette modification CSS directement dans Elementor. Vous pouvez utiliser Visual Studio Code ou Atom, qui vous aideront à assembler le code rapidement et à en récolter les avantages. Ces éditeurs sont libres d'utilisation et sont accessibles à partir de divers systèmes, notamment Windows, Mac OS X et Linux.

Cette section montrera comment vous pouvez ajuster les effets de l'en-tête de rétrécissement Elementor en utilisant la feuille de style CSS. Si vous n'apportez qu'une seule modification à la propriété personnalisée, elle sera immédiatement modifiée pour correspondre au reste du code CSS.

Les options de personnalisation de l'en-tête décroissant sont disponibles de cinq manières différentes. Toutes les variables ne doivent pas être personnalisées, mais vous avez la possibilité de le faire si vous le souhaitez. Dès que vous avez décidé quelles variables vous souhaitez modifier, vous ne pouvez modifier que ces variables et laisser le reste des paramètres inchangés.

Voici les cinq variables CSS, avec les valeurs par défaut pour chaque variable affichées en rouge.

La couleur de fond collante est #0e41e5 et la hauteur de l'en-tête est de 90px. Les autres options de style incluent : opacité de 0,90, rétrécissement de 0,80, opacité de 0,90 et transition d'entrée/sortie de facilité de 300 ms.

Les propriétés personnalisées sont les éléments qui apparaissent après le double tiret « - » dans notre ex amp le code, et vous pouvez les trouver répertoriés en haut de notre s amp le code. Il suffit d'ajuster la valeur qui apparaît après les deux points et avant le point-virgule dans la phrase.

Ex amp le, si vous voulez augmenter la hauteur de l' en- tête de 100px, voici à quoi il ressemblerait avant et après modification de la hauteur:

Avant, la hauteur de l'en-tête était de 90 pixels ; après, la hauteur de l'en-tête était de 100 pixels.

En utilisant Elementor, vous pouvez concevoir un menu d'en-tête collant de plusieurs manières différentes. Non seulement vous pouvez créer un en-tête autocollant Elementor gratuit, mais vous pouvez également personnaliser l'en-tête en y ajoutant du CSS personnalisé. Il est possible d'obtenir des instructions détaillées sur la façon de construire un en-tête Elementor collant décroissant à l'aide d'Elementor et de modifier votre CSS avec ce guide étape par étape.

Elementor inclut une variété de modèles d'en-tête ; chacun est distinct et élégant et aide vos téléspectateurs à naviguer sur votre site Web.

Avec Elementor, vous avez un contrôle total sur le style des en-têtes de votre site Web. Ex amp le, vous pouvez placer le logo du site dans le centre de la page et le menu principal en dessous. Vous pouvez ajouter un en-tête au-dessus de l'en-tête principal pour afficher le numéro de téléphone, les liens vers les réseaux sociaux et d'autres informations.

Voici quelques amp des nombreuses options de conception d'en-tête disponibles pour les utilisateurs d'Elementor.

Conclusion

L'inclusion d'un en-tête collant sur votre site Web peut faciliter la navigation des visiteurs sur votre site et augmenter le nombre de clics vers toutes les zones de votre site.

Elementor élimine le besoin de générer manuellement des en-têtes persistants avec Javascript et CSS, ce qui était auparavant requis. Créer un en-tête collant pour votre site Web n'a jamais été aussi simple qu'aujourd'hui, grâce aux en-têtes collants Elementor.