Le guide ultime des en-têtes Elementor épinglés

Que vous soyez un aspirant développeur web ou un entrepreneur en eCommerce, vos sites web partagent probablement certains éléments essentiels. Par exemple, chaque site a besoin d’un en-tête clair pour aider les visiteurs à naviguer entre les différentes pages. Cependant, si vous utilisez un constructeur de pages comme Elementor pour réduire le codage, vous vous demandez peut-être s’il est encore possible de réaliser un en-tête épinglé Elementor sophistiqué mais convivial.

Heureusement, l’utilisation d’un en-tête Elementor peut offrir à vos utilisateurs un moyen simplifié d’explorer votre site web. Avec ce constructeur de pages populaire, vous pouvez créer une grande variété d’en-têtes qui ne disparaissent pas lorsque les utilisateurs font défiler un site. C’est cette caractéristique qui les rend « épinlgés ».

Dans cet article, nous verrons comment fonctionne un en-tête épinlgé et quels sont les avantages de son utilisation. Nous vous montrerons ensuite comment créer un en-tête Elementor épinlgé avec les versions gratuite et professionnelle de l’outil. Enfin, nous vous proposerons des options de personnalisation supplémentaires pour vos en-têtes épinlgés à l’aide de CSS. C’est parti !

Introduction aux en-têtes épinlgés d’Elementor

Aucun site web n’est identique à un autre. Cependant, il existe quelques caractéristiques que les sites web de qualité ont en commun.

Si vous exploitez un site à plusieurs pages, l’un de ces éléments est un en-tête. Il s’agit de la barre horizontale située en haut de toute page qui contient des informations utiles.

Généralement, un en-tête comprend votre menu de navigation avec des pages telles que À propos ou Nous contacter:

Lorsque les visiteurs explorent votre page, ils s’attendent probablement à un en-tête organisé pour les guider sur votre site. L’expérience utilisateur (UX) étant la clé du succès d’un site web, il serait sage de créer un en-tête intuitif et simple. C’est là qu’un en-tête épinglé, conçu avec Elementor, peut faire une grande différence.

Comment fonctionne un en-tête épinglé

Avant d’apprendre comment fonctionne un en-tête Elementor épinglé, vérifions comment se comporte un en-tête standard lorsque vous faites défiler une page :

Comme vous pouvez le voir dans l’exemple ci-dessus, cet en-tête contient une barre de navigation complexe avec des catégories telles que Soldes, Vêtements, Chaussures, et plus encore. Ces onglets aideront sans aucun doute les acheteurs à trouver ce qu’ils recherchent. Cependant, lorsque vous faites défiler la page vers le bas, l’en-tête disparaît.

Les utilisateurs peuvent trouver cela frustrant, car cela les oblige à revenir en haut de la page pour accéder au menu de navigation. Heureusement, un en-tête épinglé offre une solution simple.

En restant ou en « collant » en haut de votre page, un en-tête épinglé peut améliorer considérablement l’UX de votre site web :

Lorsque la conception de votre site comprend un en-tête épinglé, vos utilisateurs peuvent rapidement passer à de nouvelles pages sans perdre de temps à les faire défiler.

De plus, avec cet élément fixe, vous pouvez inclure votre logo à l’avant et au centre à tout moment. Cette caractéristique peut aider les utilisateurs à se souvenir plus facilement de votre marque et les encourager à rester plus longtemps sur votre site.

Quand vous devriez envisager d’utiliser un en-tête épinglé

Les visiteurs seront moins susceptibles de se perdre lorsqu’ils exploreront des sites plus grands avec un en-tête épinglé. En tant que tel, vous voudrez peut-être tirer parti de cette fonctionnalité si votre site web comporte de nombreuses pages. C’est pourquoi vous verrez souvent des en-têtes épinglés sur des sites eCommerce.

Un en-tête épinglé peut être particulièrement utile si vous souhaitez inclure une fonction de recherche dans votre en-tête. Ainsi, lorsque les utilisateurs font défiler les pages et se rendent compte qu’ils ne trouvent pas ce qu’ils cherchent, ils peuvent rapidement saisir une requête dans la barre de recherche.

En outre, un en-tête épinglé peut changer la donne si vous gérez un blog monétisé qui affiche tous vos articles sur la page d’accueil. En général, cet en-tête peut garantir que votre site web est maintenable et évolutif.

Toutefois, si votre site ne comporte qu’une seule page, il n’est pas très judicieux de transformer votre en-tête de cette manière. En outre, si vous avez une bonne quantité de pages sur votre site web, mais que chacune d’entre elles est relativement courte, vous n’avez probablement pas besoin non plus d’un en-tête épinglé.

Dans l’ensemble, un en-tête épinglé réduit le temps de défilement et augmente la convivialité et la navigation du site. Si vous n’êtes pas sûr que cette fonctionnalité soit bénéfique pour votre site web, vous pouvez faire un audit rapide de la longueur de vos pages et décider ensuite.

Comment créer un en-tête Elementor épinglé

Dans ce tutoriel, nous allons vous guider à travers les étapes de la création d’un en-tête Elementor épinglé. Nous supposerons que vous avez déjà installé et activé l’extension Elementor sur votre site.

Nous allons vous expliquer comment créer cet en-tête avec la version gratuite et la version Pro d’Elementor. Vous serez probablement heureux d’apprendre que vous n’aurez pas besoin d’apprendre le langage HTML ou de modifier le code de manière significative pour le faire !

Comment créer un en-tête épinglé à l’aide d’Elementor (gratuit)

La version gratuite d’Elementor offre des fonctionnalités puissantes pour la création de pages. Toutefois, si vous souhaitez apporter des modifications à vos en-têtes et pieds de page, vous aurez besoin de quelques outils supplémentaires (également gratuits).

Dans cette optique, voyons comment créer un en-tête épinglé à l’aide d’Elementor !

Étape 1 : Installez et activez vos plugins essentiels

Heureusement, quelques outils fiables peuvent facilement étendre les fonctionnalités de la version gratuite d’Elementor.

Naviguez vers votre tableau de bord WordPress pour trouver votre premier outil. Allez dans Extensions > Ajouter et recherchez ElementsKit Elementor addons en utilisant la fonction de recherche :

Installez et activez cette extension comme vous le feriez habituellement. Lorsque vous aurez terminé ce processus, vous serez amené à votre page principale des extensions :

Maintenant, cliquez à nouveau sur Ajouter pour localiser l’extension Sticky Header Effects for Elementor avec la barre de recherche :

Répétez le processus d’installation et d’activation de cet outil, et vous êtes prêt pour l’étape suivante !

Étape 2 : Créez votre menu

Avant de pouvoir faire n’importe quel type d’en-tête, vous aurez besoin d’un menu de navigation. Nous allons créer un menu simple avec les éléments les plus courants. Il comprendra un logo, des pages et un appel à l’action (CTA).

Pour créer votre propre menu dans votre tableau de bord WordPress, allez dans Apparence > Menus. À côté du champ Nom du menu, donnez au vôtre un nom descriptif. Nous allons appeler le nôtre « Sticky Header Menu » :

Veillez à choisir En-tête comme Emplacement d’affichage. Vous pouvez également cocher la case pour ajouter automatiquement de nouvelles pages à votre menu.

Ensuite, vous devrez ajouter des pages à votre menu. Dans la section Pages à gauche, cochez les cases des pages que vous souhaitez inclure, puis cliquez sur Ajouter au menu:

Vous verrez ensuite vos pages transférées dans votre menu à droite. Allez-y et cliquez sur Enregistrer le menu en bas à droite de votre écran :

Comme vous pouvez le voir, nous avons ajouté quelques pages de base, notamment Contact Us, About, et Sample Page. Vous voudrez peut-être réorganiser vos pages pour que la séquence soit intuitive pour les visiteurs.

Étape 3 : Créez votre en-tête

Votre menu de navigation existe maintenant, mais vous ne pouvez y accéder nulle part. C’est parce que vous devez créer un en-tête pour lui.

Pour cela, allez dans l’onglet ElementsKit dans votre menu de gauche. Si vous ne l’avez pas encore fait, vous devrez cliquer sur quelques pages de démarrage à ce stade.

Chacun aura probablement des préférences différentes, alors prenez votre temps pour sélectionner les fonctionnalités que vous souhaitez activer. Toutefois, assurez-vous que le module Header Footer est sur ON :

Maintenant, allez dans ElementsKit > Header Footer:

Cette page sera vide puisque vous n’avez pas encore de modèle d’en-tête ou de pied de page. Cliquez sur Ajouter en haut de votre écran pour créer votre premier modèle d’en-tête :

Dans l’écran ci-dessus, saisissez un nom descriptif et assurez-vous que l’option En-tête est sélectionnée comme Type. Puisque vous utilisez la version gratuite, cet en-tête apparaîtra sur l’ensemble du site.

Assurez-vous de basculer l’interrupteur Activer/Désactiver sur ON et cliquez sur Enregistrer les changements. Maintenant, vous serez ramené à votre page de modèles, où vous pouvez voir votre nouveau modèle d’en-tête listé :

Vous pouvez également remarquer une icône verte Active à côté de cet en-tête. Cependant, il n’est pas encore en ligne.

Pour compléter votre en-tête, survolez-le dans la liste des modèles, et cliquez sur Modifier dans Elementor, juste en dessous de son nom. Cela vous amènera à l’écran Elementor Builder.

Ici, cliquez sur l’icône ElementsKit:

Sur l’écran suivant, sélectionnez l’onglet Sections:

Faites défiler un peu vers le bas pour trouver une section d’en-tête qui vous plaît, puis cliquez sur Insérer. Nous avons choisi En-tête – Section 5:

Comme vous pouvez probablement le constater, notre menu de navigation n’est pas visible. Alors allons-y et ajoutons-le à notre modèle d’en-tête. Pour cela, survolez la section du menu de navigation de votre en-tête. Dans ce cas, c’est juste au centre :

Cliquez sur cette zone, et vos Réglages de menu devraient apparaître dans le panneau de gauche. Maintenant, localisez le champ Sélectionner le menu. Dans la liste déroulante, choisissez le menu que vous avez créé plus tôt :

À ce stade, vous devriez voir le menu s’afficher dans votre modèle d’en-tête. Cliquez sur Mise à jour dans le coin inférieur gauche de l’écran, et votre en-tête standard est terminé.

Voyons comment cela fonctionne en action :

Comme vous pouvez le voir, notre en-tête est superbe. Cependant, il disparaît lorsque nous faisons défiler la page vers le bas. Voyons comment nous pouvons le faire tenir.

Étape 4 : épingler votre en-tête

Pour notre dernière étape, allez dans ElementsKit > En-tête et pied de page > Modifier avec Elementor. Sélectionnez ensuite votre en-tête et cliquez sur l’icône centrale avec six points :

Lorsque vous la survolez, vous verrez que cela vous permet de modifier la section. Une fois que vous aurez cliqué dessus, vos options d’édition apparaîtront dans le panneau de gauche.

Cliquez sur l’onglet Avancé et faites défiler la page jusqu’à Effets d’en-tête épinglés. Il y aura un message d’avertissement indiquant que l’extension ne contrôle pas l’en-tête épinglé, mais vous pouvez ne pas en tenir compte. Puisque nous avons également ajouté l’extension Sticky Header Effects for Elementor, il fonctionnera parfaitement.

Activez maintenant l’en-tête épinglé d’Elementor en basculant l’interrupteur sur ON :

En fonction de votre thème, votre en-tête épinglé peut sembler transparent. Si c’est le cas, vous voudrez peut-être effectuer un changement stylistique.

Dans votre panneau Modifier la section, sous Style, allez dans Arrière-plan > Couleur et assurez-vous d’avoir sélectionné une nuance qui se démarquera de votre arrière-plan normal :

Cliquez ensuite sur METTRE À JOUR. Vous pouvez maintenant prévisualiser votre site pour vérifier le résultat final :

C’est tout ! Il s’agit d’un simple en-tête Elementor épinglé, mais il peut facilement faire passer votre site au niveau supérieur.

Comment créer un en-tête épinglé à l’aide d’Elementor Pro

Lorsque vous utilisez Elementor Pro, la création d’un en-tête épinglé est un peu plus simple. Vous pouvez ajouter cette fonctionnalité à votre site en seulement trois étapes faciles.

Étape 1 : Créez votre menu

Pour créer votre menu, allez dans Apparence > Menus dans votre tableau de bord WordPress :

Donnez à votre menu un nom descriptif, sélectionnez Menu principal à côté de Emplacement, et cliquez sur Créer un menu:

À ce stade, vous devriez avoir quelques pages existantes sur votre site web. Sélectionnez les pages que vous souhaitez inclure dans votre menu dans le panneau de gauche.

Cliquez ensuite sur Ajouter au menu, puis sur Enregistrer le menu:

Maintenant, vos pages devraient apparaître sur le côté droit sous Structure du menu.

Étape 2 : Créez votre en-tête

Ensuite, nous devons créer notre base. Faisons un en-tête classique.

Pour commencer, localisez l’onglet Elementor dans votre colonne latérale de gauche. Juste en dessous, allez dans Modèles > Constructeur de thème. La page suivante ressemblera à ceci :

Comme vous pouvez probablement le constater, avec Elementor Pro, vous pouvez facilement commencer à concevoir chaque élément de votre site.

Cliquez sur l’icône plus (+) sur l’élément En-tête. Vous devriez maintenant voir une popup qui affiche plusieurs blocs d’en-tête parmi lesquels vous pouvez choisir :

Si vous avez un modèle d’en-tête préexistant, vous pouvez le sélectionner sous l’onglet Mes modèles. Sinon, vous pouvez utiliser l’un des blocs de section fournis avec Elementor Pro.

Lorsque vous avez fait votre sélection, il suffit de passer la souris sur le bloc souhaité et de cliquer sur Insérer:

Ici, vous verrez que ce bloc est accompagné de son propre logo, mais que notre menu de navigation s’est automatiquement rempli. Maintenant, cliquez sur PUBLIER :

L’écran suivant vous invite à déterminer vos Réglages de publication. Ici, sélectionnez Ajouter une condition pour décider où vous voulez afficher votre en-tête :

Vous voudrez probablement sélectionner Site entier à côté de INCLURE. Vous pouvez également exclure certaines zones du site en cliquant sur la flèche à côté de INCLURE et en passant à l’alternative. Lorsque vous êtes satisfait de vos sélections, cliquez sur Enregistrer et fermer.

À ce stade, un message contextuel apparaîtra dans le coin inférieur droit de votre écran. S’il ne disparaît pas avant que vous puissiez cliquer dessus, sélectionnez l’option permettant de visualiser votre site en direct.

Vous pouvez également retourner à votre tableau de bord WordPress et visualiser votre site en cliquant sur l’icône de la maison dans le coin supérieur gauche, puis en sélectionnant Visiter le site:

Comme vous pouvez le constater, notre en-tête est maintenant fonctionnel, mais lorsque nous faisons défiler la page vers le bas, il disparaît. Voyons ce que nous pouvons faire à ce sujet !

Étape 3 : Épinglez votre en-tête

Voyons maintenant comment créer un en-tête Elementor épinglé avec l’outil pro !

Allez dans Modèles > Constructeur de thème et sélectionnez l’en-tête que vous venez de créer. Ensuite, cliquez sur Modifier à côté de l’icône du crayon sur l’écran suivant. Cela vous ramènera à l’éditeur Elementor.

Passez la souris sur votre modèle d’en-tête, puis cliquez sur l’icône à six points au centre. Cela ouvrira votre panneau de modification de section sur la gauche :

Maintenant, naviguez vers l’onglet Avancé et localisez la section Effets de mouvement. Ici, activez les effets de défilement en basculant le commutateur sur ON:

Ensuite, faites défiler la section Effets de mouvement pour trouver le champ Épinglé. Dans le menu déroulant, sélectionnez Haut :

Maintenant, cliquez sur METTRE À JOUR. Gardez à l’esprit que, selon la palette de couleurs de votre thème, votre en-tête Elementor épinglé peut sembler transparent :

Si c’est le cas, et que vous n’aimez pas son apparence, vous pouvez toujours changer la couleur de votre arrière-plan. Dans votre panneau Modifier la section, allez dans Style > Arrière-plan et sélectionnez Classique comme type d’arrière-plan.

Maintenant, sélectionnez une nouvelle couleur d’arrière-plan pour votre modèle d’en-tête. Vous voudrez choisir une nuance qui soit complémentaire au reste de la page mais qui crée également un joli contraste :

Puisqu’il ne s’agit que d’un exemple, nous allons simplement choisir une couleur grise pour rendre notre en-tête moins transparent.

Maintenant, cliquez sur METTRE À JOUR pour enregistrer vos modifications. Allez-y et prévisualisez votre résultat final :

C’est terminé ! Vous voudrez probablement modifier le style et les couleurs en fonction de votre marque. Veillez simplement à toujours enregistrer vos modifications lorsque vous avez terminé.

Comment utiliser le CSS pour améliorer votre en-tête Elementor épinglé

Lorsque vous implémentez un en-tête Elementor épinglé sur votre site web, vous pouvez avoir l’impression que la conception de votre site s’est considérablement améliorée. Cependant, vous êtes peut-être intéressé par d’autres personnalisations ou des fonctionnalités plus dynamiques.

Maintenant que vous savez comment créer un en-tête épinglé de base, voyons comment faire passer votre conception au niveau supérieur. Pour ce faire, vous pouvez utiliser le code des feuilles de style en cascade (CSS) dans WordPress.

Si vous êtes un débutant ou si vous n’avez pas d’expérience dans le codage, ne vous inquiétez pas. Améliorer vos designs est un jeu d’enfant avec Elementor.

Pour cela, allez dans Modèles > Constructeur de thème > En-tête :

Dans la section Édition > Avancé > CSS personnalisé, vous pouvez ajouter un petit extrait CSS pour apporter des modifications stylistiques.

Types d’en-têtes Elementor épinglés

Voici quelques améliorations populaires que vous pourriez envisager pour votre en-tête Elementor épinglé !

En-tête épinglé transparent

Certains thèmes peuvent automatiquement définir des en-têtes épinglés transparents. Toutefois, si vous souhaitez le faire à l’aide de CSS, vous pouvez utiliser un extrait de code tel que celui-ci :

selector.elementor-sticky--effects{ background-color: rgba(133,130,255,0.5) !important }

selector{ transition: background-color 4s ease !important; }

selector.elementor-sticky--effects >.elementor-container{ min-height: 80px; }

selector > .elementor-container{ transition: min-height 1s ease !important; }

Il suffit de copier et de coller ce code dans le champ CSS personnalisé et d’ajuster les champs selon vos préférences. Ce code modifie la couleur d’arrière-plan, la transparence et la hauteur de votre en-tête, avec un effet d’animation :

Les possibilités de ce seul type sont infinies.

En-tête collant rétrécissant

Un autre choix populaire est un en-tête qui s’agrandit et se rétrécit au fur et à mesure que les visiteurs le font défiler. Voici le code dont vous aurez besoin pour ce type d’en-tête Elementor épinglé :

header.sticky-header {
    --header-height: 90px;
    --opacity: 0.90;
    --shrink-me: 0.80;
    --sticky-background-color: #0e41e5;
    --transition: .3s ease-in-out;

    transition: background-color var(--transition),
                background-image var(--transition),
                backdrop-filter var(--transition),
                opacity var(--transition);
}
header.sticky-header.elementor-sticky--effects {
    background-color: var(--sticky-background-color) !important;
    background-image: none !important;
    opacity: var(--opacity) !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: 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;
    height: 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));
}

Si vous n’êtes pas à l’aise avec une telle quantité de code, vous pouvez consulter le guide d’Elementor sur la création d’un en-tête rétractable.

Avec cette conception, vous obtiendrez cet effet :

Bien que cet en-tête ait une touche subtile, sa sophistication peut donner à votre design un aspect plus professionnel.

Fondu entrée/sortie

En plus de ces options tendance, il y a aussi la fonction de fondu en entrée ou fondu en sortie (également appelée « révéler »). Cela ressemble à quelque chose comme ceci :

Pour cet effet, vous n’aurez pas besoin de toucher au moindre code. Il suffit de naviguer jusqu’à votre en-tête dans votre constructeur de thème. Puis allez dans Modifier la section > Avancé > Effets de mouvement > Effets de défilement:

Ici, cliquez sur l’icône du crayon à côté du champ Transparence et changez la direction en Fondu d’entrée ou Fondu de sortie. Ensuite, ajustez votre design selon vos préférences.

Il existe de nombreuses options pour ces effets de transparence, nous vous recommandons donc de consulter la documentation d’Elementor. Ainsi, vous serez en mesure d’obtenir le look exact que vous souhaitez.

Résumé

Travailler avec un constructeur de sites web de confiance est une excellente alternative au paiement d’un développeur web pour créer votre site. En utilisant certains des meilleurs logiciels de conception de sites web, vous pouvez facilement réaliser les éléments essentiels de tout site web. Il s’agit notamment d’en-têtes épinglés pratiques mais magnifiques.

Un en-tête épinglé peut créer une expérience plus agréable pour vos utilisateurs. Vous pouvez choisir parmi différents styles d’en-têtes dynamiques, notamment transparents et rétrécissants. Mieux encore, vous pouvez réaliser ces superbes en-têtes à la fois avec Elementor Pro et sa version gratuite.

La conception de votre site web est l’une des premières étapes de son lancement. Cependant, vous aurez d’abord besoin d’un hébergement fiable. Consultez les plans d’hébergement infogéré de Kinsta pour voir comment nous pouvons optimiser les performances de votre site !