Comment utiliser les effets d'en-tête collant et 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 il 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 destiné à l'éducation, un forum communautaire ou un site Web destiné aux médias, l'en-tête est ce qui rend la navigation simple et agréable à utiliser.

Les en-têtes collants sont 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 profondeur de défilement.

• Étape 1 : créer un menu
• Étape 2 : Création de votre en-tête dans Elementor
• Étape 3 : Utiliser 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 : créer 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, saisissez 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 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 allons repartir de zéro avec notre en-tête collant Elementor dans ce tutoriel.

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

Étape 3 : Utiliser 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 « Encadré ».

Dans les paramètres de largeur du contenu dans la section Elementor Edit, 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 à 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 didacticiel. 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 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 » à l'endroit 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 indésirable sur les écrans mobiles également. Par conséquent, cliquez sur le « x » à côté des deux options sous Sticky On, 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 l'en-tête de votre 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’intégralité du site dans le choix en laissant de côté la page 404.

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

Améliorez l'apparence de votre en-tête collant Elementor en utilisant du 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 ici la hauteur, la couleur d'arrière-plan, la transition et les effets collants de l'en-tête collant.

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 à laquelle l'effet de défilement se produit.

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

Veuillez garder à l'esprit que les options Effets de décalage ne fonctionneront que si un 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 amp condition d’en-tête collant est l’endroit où vous souhaitez que l’en-tête collant soit affiché. A titre d'exemple amp vous pouvez choisir le critère « site entier ».

Vous souhaiterez 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 êtes familier avec son fonctionnement.

Nous avons terminé le nettoyage ; 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 supérieur, 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 ; --rétréci-moi : 0,80 ; --sticky-background-color : #0e41e5 ; --transition : facilité d'entrée et de sortie de 0,3 s ; 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(--opacity) !important; -webkit-backdrop-filter : flou (10 px ); filtre de fond : flou (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 { largeur maximale : calc(100% * var(--shrink-me)); } 

Étape 5 : personnaliser notre CSS

Les instructions répertorié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. En fonction de 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 bénéfices. Ces éditeurs sont gratuits et 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 rétrécissant 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 au total. 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 pouvez uniquement modifier 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 d’arrière-plan collant est #0e41e5 et la hauteur de l’en-tête est de 90 pixels. Les autres options de style incluent : opacité de 0,90, rétrécissement de 0,80, opacité de 0,90 et transition facilité d'entrée/sortie de 300 ms.

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

Par amp , si vous souhaitez augmenter la hauteur de l'en-tête à 100 px, voici à quoi cela ressemblerait avant et après avoir modifié 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 collant 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 peaufiner votre CSS avec ce guide étape par étape.

Elementor comprend 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. Par amp , vous pouvez placer le logo du site au 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 permettre aux visiteurs de parcourir facilement votre site et d'augmenter les clics vers toutes les zones de votre site.

Elementor élimine le besoin de générer manuellement des en-têtes collants 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.