Un en-tête collant reste épinglé en haut de l'écran pendant que le visiteur défile Votre logo, menu et bouton d'appel à l'action restent joignables, peu importe jusqu'où quelqu'un va, c'est pourquoi presque tous les sites SaaS et agences en expédient un.
Ce guide montre comment créer un en-tête collant dans Elementor en utilisant le gratuit Constructeur de thèmes Master Addons[traduction], vous n'aurez donc pas besoin d'Elementor Pro. Et pendant que j'utilise ici des addons principaux, la méthode est universelle : construire l'en-tête comme modèle, puis définir sa position de conteneur sur Fixed. Tout constructeur d'en-tête qui vous permet de modifier l'en-tête dans Elementor suit les trois mêmes clics.
La version 2020 de ce message vous a dit de déposer un ID CSS sur une section et de le coller dans le widget du menu de navigation C'était l'ère des sections Elementor utilise les conteneurs Flexbox comme disposition par défaut depuis la 3.6, et le contrôle de position se trouve maintenant juste dans le panneau, donc toute la danse de l'ID CSS a disparu.
Quel en-tête collant est en réalité
Deux comportements différents sont appelés du même nom, et les mélanger est la raison pour laquelle les gens finissent par chasser pour un cadre qui n'existe pas.
UN en-tête fixe est à l'écran à partir du moment où la page se charge et ne s'en va jamais C'est ça position: fixed fait, et c'est ce que nous construisons ici.
UN en-tête collant sur défilement s'assoit en haut normalement, fait défiler, puis glisse de nouveau lorsque le visiteur fait défiler vers le haut Vous le verrez appelé défilement intelligent ou cache-sur-défilement Il a besoin d'un effet de défilement, et Elementor garde ceux en Pro.
Pour la plupart des sites l'en-tête fixe est celui que vous voulez réellement, et c'est celui que vous pouvez construire gratuitement.
Le problème : votre en-tête défile
Voici le point de départ Un en-tête Elementor normal se trouve en haut de la page comme n'importe quel autre conteneur.
Faites défiler un peu vers le bas et c'est parti. Logo, menu, bouton Demander une démonstration gratuite, tout cela en haut de l'écran. Ainsi, un visiteur qui arrive à votre section de tarification et souhaite cliquer sur Contact doit faire défiler vers le haut pour retrouver le menu.
C'est tout le problème qu'un en-tête collant résout.
Avant de commencer
Vous avez besoin d'Elementor gratuit, version 3.6 ou plus récente, pour que les Conteneurs soient allumés.
Vous avez également besoin d'un modèle d'en-tête pour appliquer le paramètre. Le propre générateur de thèmes d'Elementor est uniquement pro, alors prenez-en un gratuit : Additions maîtres comprend un gratuit générateur d'en-tête404, archives et modèles uniques de son constructeur de thèmes gère également les pieds de page, les 404, les archives et les modèles uniques.
Vous avez déjà un modèle d'en-tête d'un autre plugin ? passez à l'étape 2. le paramètre de position est natif Elementor, il se comporte donc de la même manière d'où que vienne votre en-tête.
Étape 1 : Ouvrez votre modèle d'en-tête dans Elementor
Aller à Additions principales > Constructeur de thèmes. Vos modèles sont répertoriés par type. Le mien a un en-tête et un pied de page, tous deux actifs, tous deux configurés pour être affichés sur l'ensemble du site.
Pas encore d'en-tête ? Cliquez Ajouter un nouveau modèle(en anglais), définissez le type sur En-tête, activez l'activation et définissez la condition sur l'ensemble du site. Le documents du constructeur d'en-tête couvrez-le, et le flux est le même que celui que j'ai traversé dans le guide pour éditer le pied de page dans Elementor.
Survolez le modèle d'en-tête et appuyez sur Modifier avec Elementor. L'en-tête s'ouvre sur sa propre toile.
Étape 2 : Sélectionnez le conteneur d'en-tête
Les gens se trompent constamment sur celui-ci, alors soyez précis ici : vous voulez le conteneur extérieur de l'en-tête Pas le logo, pas le widget du menu nav, et pas un conteneur imbriqué niché à l'intérieur.
Le moyen fiable d'être sûr est le Structure panneau, l'icône des calques dans la barre supérieure Cliquez sur le conteneur de niveau supérieur dans cet arbre et tout l'en-tête doit être surligné Si seulement le logo ou le menu s'allume, vous avez saisi un élément enfant, et la position de réglage dessus épinglera ce widget à l'écran au lieu de votre en-tête Cela semble bizarre, et c'est la première chose de vérifier si votre résultat est bizarre.
Étape 3 : Réglez la position du conteneur sur Corrigé
Avec le conteneur d'en-tête sélectionné, ouvrez le Avancé onglet et développez le Disposition section. Le Position dropdown a trois options.
La valeur par défaut est ce que vous avez maintenant : l'en-tête défile avec la page Absolute épingle l'en-tête à la page plutôt qu'à l'écran, donc il défile toujours, ce qui est pour les en-têtes superposés, pas les en-têtes collants Fixed le pins it à la fenêtre, et c'est celui que vous voulez.
Choisir Fixé20, et le panneau se dilate avec les commandes d'orientation.
Réglez l'orientation horizontale vers la gauche avec un décalage de 0et orientation verticale vers le haut avec un décalage de 0. Zéro sur les deux colles l'en-tête tout en haut à gauche de la fenêtre d'affichage Augmentez le décalage vertical si vous préférez que l'en-tête flotte un peu en dessous du bord supérieur.
Elementor vous lancera également un avertissement : Le positionnement “Custom n'est pas considéré comme une bonne pratique pour la conception Web réactive et ne doit pas être utilisé trop fréquemment.” Ignorez-le C'est une mise en garde générale contre la diffusion d'éléments fixes et absolus à travers une mise en page, et un en-tête fixe est le cas du manuel où c'est le bon appel Vérifiez simplement la vue mobile quand vous avez terminé, sur laquelle je reviendrai.
Étape 4 : Augmentez l’indice z
Toujours dans la section Mise en page, trouvez le Z-Index mettez-le sur le terrain et réglez-le sur quelque chose de confortablement élevé. J'utilise 99.
Z-index décide quel élément se trouve au-dessus lorsque deux se chevauchent Un en-tête fixe est garanti pour chevaucher le contenu de votre page lorsque le visiteur défile, et si son indice z est trop bas, le contenu défile directement sur celui-ci C'est le bug classique où l'en-tête est techniquement collant mais les curseurs, les popups et les images le traversent.
Si quelque chose couvre toujours l'en-tête, augmentez le numéro. Il suffit de battre ce qu'il perd, et de nombreux plugins curseurs et popup définissent leur propre indice z par milliers.
Étape 5 : Publier
Frapper Publier.
Ouvrez le site en direct et faites défiler L'en-tête reste verrouillé en haut de l'écran tout au long.
S'il défile toujours sur le front-end mais regarde juste dans l'éditeur, effacez votre cache avant de commencer le débogage Un plugin de mise en cache servira volontiers l'ancien en-tête CSS pendant un certain temps.
Trois choses qui brisent un en-tête fixe, et les correctifs
Les étapes ci-dessus permettent de pincer l'en-tête Ce qui suit est ce qui sépare un en-tête collant qui survit au contact avec un site réel de celui que vous arrachez une semaine plus tard.
1. L'en-tête devient transparent et le contenu transparaît
Un élément fixe est retiré du flux normal de page, de sorte qu'il cesse d'hériter d'un arrière-plan de quoi que ce soit Si vous ne définissez jamais une couleur d'arrière-plan sur l'en-tête, le contenu de votre page défile dessous il s'affiche directement, et votre texte de menu se transforme en soupe illisible au moment où une image passe derrière.
Sélectionnez le conteneur d'en-tête, allez à Style > Arrière-plan, et donnez-lui une couleur unie Si vous voulez vraiment un en-tête transparent, c'est un look valide, mais concevez ensuite la première section pour travailler derrière.
2. La première section se cache derrière l'en-tête
Même cause racine Un en-tête fixe ne prend plus de place dans la mise en page, donc la première section glisse vers le haut pour combler le vide qu'elle a laissé et une partie de celui-ci finit piégée derrière l'en-tête.
Ajoutez un remplissage supérieur à votre première section, correspondant à peu près à la hauteur de l'en-tête Si l'en-tête mesure 80 px, donnez au héros 80 px de remplissage supérieur Si vous n'êtes pas sûr de sa taille, cliquez avec le bouton droit sur l'en-tête à l'avant et inspectez-le ; la hauteur est juste là dans les outils du navigateur.
3. Il mange l'écran sur mobile
Les écrans de téléphone sont courts Un en-tête qui semble bien sur un moniteur de bureau peut avaler une partie sérieuse de la fenêtre d'affichage d'un téléphone, puis suivre le visiteur sur chaque page.
Passez à la vue mobile en mode réactif d'Elementor et coupez le remplissage vertical de l'en-tête Les commandes de position sont également par appareil, vous pouvez donc recaler Position sur Défaut sur mobile seulement et laissez l'en-tête défiler là-bas Sur une longue page d'article qui est généralement le meilleur appel Si vous exécutez des points d'arrêt personnalisés, le Plugin Breakpoints personnalisé vous permet d'ajuster cela à vos largeurs réelles d'appareil.
Est-ce que cela fonctionne avec d'autres plugins d'en-tête ?
Oui, et c'est la partie qui mérite d'être comprise. Position : Fixed est un contrôle natif Elementor[TRADUCTION] ?pas une fonctionnalité de Master Addons Master Addons fait exactement un travail ici : vous donner un modèle d'en-tête gratuit qui s'ouvre dans Elementor Une fois que vous êtes dans l'éditeur, la partie collante est simple Elementor.
Donc, si vous construisez des en-têtes avec un autre générateur de thème, ou si votre thème est livré avec un en-tête Élémenteur-éditable de son propre, le même Avancé > Mise en page > Position > Chemin fixe s'applique La seule chose qui change est où vous allez ouvrir l'en-tête pour l'édition.
Une alternative sans saut : position collante avec Custom CSS gratuit
Le positionnement fixe soulève l'en-tête hors du flux de page, c'est pourquoi vous devez remplir la première section pour que rien ne se cache derrière. Si vous souhaitez sauter cette étape, CSS position: sticky est l'alternative Il garde l'en-tête dans le flux et ne le pins qu'une fois qu'il atteint le sommet, il n'y a donc pas de saut de contenu à corriger.
Le catch est l'endroit où vous ajoutez le CSS La boîte CSS personnalisée par élément d'Elementor est une fonctionnalité Pro, mais les modules complémentaires Master gratuits Extension CSS personnalisée vous donne la même boîte sans frais Sélectionnez le conteneur d'en-tête, ouvrez son champ CSS personnalisé et collez ceci :
selector {
position: sticky;
top: 0;
z-index: 99;
}selector est un raccourci Elementor pour l'élément que vous modifiez, vous n'avez donc pas besoin d'un identifiant ou d'une classe. Un gotcha : si un conteneur parent l'a fait overflow: hidden« Le collant arrête silencieusement de fonctionner, si clair que de l'ancêtre si l'en-tête refuse de pincer. Le comportement complet est documenté dans le Référence MDN sur la position CSS.
Comparaison des méthodes d'en-tête autocollantes gratuites
Trois de ces itinéraires sont gratuits, et chacun correspond à un besoin différent Vie fixe dans le propre contrôle de position d'Elementor. Les modules complémentaires principaux Extension de positionnement n'a pas d'option Correction, mais cela aide à l'intérieur de l'en-tête : pousser un logo ou un badge avec des décalages relatifs ou absolus, avec des valeurs distinctes par appareil.
| Méthode | Code Besoins | Coût | Saut de contenu | Meilleur pour |
|---|---|---|---|---|
| Position fixe (onglet Élémenteur avancé) | Non | Gratuit | A besoin d'un correctif de remplissage | En-tête toujours visible |
| position : collant (CSS personnalisé) | Un extrait | Gratuit | Aucun | Disposition propre, pas de saut |
| Effets de défilement collants Elementor Pro | Non | Payé | Manipulé | Masquer sur défilement et rétrécir |
| Plugin d'en-tête collant dédié | Non | Gratuit | Manipulé | Effets de défilement prédéfinis |
Ajout de rétrécissement ou de changement de couleur sur le défilement
Vous voulez que l'en-tête rétrécisse ou échange de couleur une fois que le visiteur fait défiler ? cela lit la distance de défilement, ce que CSS ne peut pas faire seul Quelques lignes de JavaScript à travers le Extension JS personnalisée dans Master Addons Pro, vous pouvez basculer une classe sur l'en-tête au-delà d'un seuil de défilement, puis vous stylisez cette classe en CSS personnalisé. C'est plus de travail qu'un plugin qui expédie l'effet, alors pesez l'effort avant de le construire à la main.
Faire en sorte que l'en-tête mérite d'être collé
Une fois collé à l'écran, l'en-tête est visible 100 % du temps, donc ça vaut le coup d'un second passage.
Coupez d'abord la hauteur Un en-tête haut qui ne disparaît jamais devient ennuyeux rapidement, et chaque pixel que vous enregistrez est un pixel de contenu que le visiteur peut voir Ensuite, regardez ce qu'il contient : un emplacement permanent à l'écran est un bon foyer pour votre meilleur lien, qu'il s'agisse d'une démo, d'un prix ou d'un bouton de contact.
Grand site? Les Master Addons Widget du menu Navigation crée des méga menus, afin que vous puissiez garder toute la structure à un clic sans que l'en-tête ne s'allonge Et gardez un œil sur le poids, puisque l'en-tête se charge désormais sur chaque page et ne se décharge jamais Le Guide de vitesse de l'élémenteur vaut le détour si votre temps de chargement est déjà serré.
Si vous préférez ne pas construire un en-tête à partir de zéro, le Bibliothèque de modèles Master Addons a des en-têtes prêts à l'emploi que vous pouvez importer puis rendre collants avec les mêmes étapes, et le Kits de modèles expédiez des en-têtes et des pieds de page correspondants pour un site entier.
Questions fréquemment posées
Puis-je créer un en-tête collant dans Elementor free ?
Oui. La position : le contrôle fixe fait partie de l'élémenteur gratuit. Vous n'avez besoin que d'un modèle d'en-tête auquel l'appliquer, et le constructeur de thèmes Master Addons vous en offre un gratuitement. Le propre générateur de thèmes d'Elementor et ses effets de défilement collants sont les parties Pro uniquement.
Quelle est la différence entre un en-tête fixe et un en-tête collant ?
Un en-tête fixe est toujours visible depuis le chargement de la page et ne défile jamais Un en-tête collant sur défilement défile, puis recule lorsque le visiteur défile vers le haut Position : Fixed vous donne le premier Le second a besoin des effets de défilement d'Elementor Pro.
Pourquoi mon contenu se cache-t-il derrière l'en-tête collant ?
Un en-tête fixe est supprimé du flux normal de la page, de sorte que la section ci-dessous glisse vers le haut en dessous. Ajoutez un remplissage supérieur à votre première section, correspondant à peu près à la hauteur de l'en-tête, et définissez une couleur d'arrière-plan unie sur le conteneur d'en-tête.
Pourquoi le contenu de ma page défile-t-il sur le haut de mon en-tête ?
L'indice z est trop bas Dans l'onglet Avancé sous Mise en page, définissez Z-Index sur 99 (ou supérieur) sur le conteneur d'en-tête afin qu'il s'empile au-dessus de tout le reste sur la page.
Dois-je utiliser un en-tête collant sur mobile ?
Souvent pas. Un en-tête fixe mange peu d'espace vertical sur un téléphone. Les commandes de position de l'élémenteur sont par appareil, alors passez à la vue mobile et remettez la position en valeur par défaut, ou du moins réduisez le remplissage de l'en-tête.
Envelopper
Créer un en-tête collant dans Elementor est trois paramètres sur un élément Sélectionnez le conteneur d'en-tête, définissez Position sur Corrigé avec zéro décalage, augmentez l'indice z. Tout après cela est un nettoyage : donnez à l'en-tête un arrière-plan solide, tamponnez la première section pour que rien ne se cache derrière et vérifiez ce que vous ressentez sur un téléphone avant de l'appeler terminé.
Tout cela fonctionne sur Elementor gratuit La seule chose dont vous avez besoin est un modèle d'en-tête à modifier, ce qui est gratuit Constructeur de thèmes dans Master Addons fournit, avec le pied de page, 404, archive, et des modèles uniques Si vous voulez plus tard le reste de la boîte à outils, c'est ce que le Pro plans couverture, mais rien dans ce tutoriel n'en a besoin.
Lecture connexe: comment modifier le pied de page dans WordPress avec Elementor, comment créer un arrière-plan asymétrique dans Elementor, et comment créer un site Web d'une page avec Elementor.
