What’s the very first thing you notice while visiting a website? The header, right? Yes! We’re all the same!
L'en-tête est la toute première chose qui attire l'attention des visiteurs sur votre site. Vous pouvez considérer l’en-tête comme l’épine dorsale de tout site Web.
Peu importe que vous possédiez un site de commerce électronique, un site de blog, un réseau social, un forum ou un site de portfolio personnel, vous devez ajouter un menu transparent Elementor simple et facile à naviguer.
However, adding a simple header with the menu isn’t enough now! You must customize the header to provide the best user experience to your audience. And you can do that by making the Elementor transparent header background and sticky!
Dans cet article, je vais vous montrer la méthode la plus avancée mais la plus rapide pour ajouter un en-tête collant transparent dans WordPress avec Elementor !
Créons un en-tête collant Elementor qui fera que les visiteurs aimeront votre site Web à première vue.
Saviez-vous qu'avec Elementskit, vous pouvez créer un en-tête transparent Elementor personnalisé pour Elementor en quelques minutes ? Allons essayez Elementskit gratuitement
Quick Overview: How to Create a Sticky Elementor Transparent Header
Creating a sticky Elementor transparent header can easily be done with the use of a plugin like ElementsKit. You can build a header template, enable the sticky option so it stays at the top while scrolling, and remove the background color to make it transparent over page content.
Steps to Create a Sticky Elementor Transparent Header:
✅ Create a menu first – Go to Appearance → Menus in WordPress and create a primary menu.
✅ Create a header template in ElementsKit – Go to ElementsKit → Header Footer → Add New, choose “Header”, set its title and display condition, and activate it.
✅ Edit with Elementor – Click Edit with Elementor to start customizing the header.
✅ Choose a header design – Open the ElementsKit header library, pick a design, and insert it into your header.
✅ Stick the Elementor transparent menu – In the Advanced tab, open ElementsKit collant and set the header to Sticky → Top.
✅ Make the header transparent over content – In the Style tab under Menu Wrapper, remove the background color (e.g., set to #00000000) and adjust header‑over‑content settings.
✅ Test the header – Add sections under the header and scroll the page to confirm it stays fixed and transparent.
Par exemple, you can design a homepage with a full‑width hero image, then build a header using ElementsKit, set it to stick at the top, remove its background color, and it stays fixed and transparent over the hero when scrolling.
Résumé
A sticky transparent header is a fixed, see-through navigation bar that improves usability while allowing page content to remain visible underneath.
Qu’est-ce qu’un en-tête transparent collant dans WordPress ?
Un en-tête transparent collant définit un en-tête qui reste fixe et transparent lorsque quelqu'un fait défiler vers le bas ou vers le haut. Cet en-tête vous permet de visualiser de manière transparente l'arrière-plan de votre site lorsque vous le faites défiler.
Choses dont vous aurez besoin
Pour suivre ce blog tutoriel, vous aurez besoin de –
- Un site WordPress
- Générateur de pages Elementor
- ElementsKit
- 5 à 10 minutes de votre temps.
Vous avez tout ? Super, vous êtes prêt à partir.
Concevons un arrière-plan d'en-tête transparent Elementor !
Vous pouvez créer un en-tête via un nouveau modèle d'en-tête ou une nouvelle page. Mais je préfère toujours créer une nouvelle page pour concevoir un en-tête collant transparent à l’aide d’Elementor.
Une fois que vous avez terminé la conception de l'en-tête, vous pouvez simplement copier-coller le modèle dans le modèle d'en-tête. C’est facile, n’est-ce pas ?
Passons au guide sur la façon de créer un en-tête transparent collant dans WordPress avec Elementor.
Étape #1 : créez d'abord un menu
Pour ajouter un en-tête collant Elementor, vous devez d’abord commencer par créer un menu. Pour créer un nouveau menu, accédez à wp-admin > Apparence > Menus.
Once you’re done creating the menu, give the menu name “Primary” or anything you want and click on “Save Menu”. If you’ve created a menu already, It will look somewhat like this –
Vous remarquerez peut-être le «Mégamenu» ci-dessus. Fondamentalement, c'est l'une des fonctionnalités les plus utiles d'ElementsKit. Si vous souhaitez ajouter de nombreuses catégories ou options dans la section menu, vous pouvez utiliser cette fonctionnalité Megamenu.
⭐ ⭐ consultez un guide détaillé sur comment créer un mégamenu dans Elementor.
Step#2 : Créer un modèle d'en-tête
Go to the “En-tête Pied de page” section of your ElementsKit. Add a New Header Template by clicking on “Ajouter un nouveau».
Les paramètres du modèle apparaîtront maintenant. Ici, vous devez effectuer les tâches suivantes :
- Donnez un titre à l'en-tête.
- From the “Taper” setting dropdown, choose “Header”
- Choisissez la condition que vous préférez. J'ai choisi « Site entier » dans la liste déroulante.
- Activez le modèle d'en-tête en activant l'interrupteur.
Étape #3 : Modifier avec Elementor
Lorsque vous avez terminé toutes les tâches mentionnées ci-dessus, cliquez sur le bouton « Modifier avec Elementor » en bas à gauche.
Étape #4 : Choisissez une conception d'en-tête
Dans cette section, vous pouvez choisir une conception d'en-tête dans la bibliothèque d'en-têtes intégrée d'ElementsKit.
To proceed, click on the ElementsKit icon, choose a beautiful design, and click the ‘Insérer’ button to import the header in Elementor.
Étape #5 : Collez le menu transparent Elementor
We’ve already selected our header design. Now, it’s time to stick the header on the top position. Browse the ‘Advanced’ tab of Elementor for this task. From the advanced tab, find “ElementsKit collant”. Make the menu Sticky at the Top from the dropdown.
Note that you can choose to make the header sticky until a certain section. In that case, define the Collant jusqu'à. You can also apply Sticky Offset to the header ranging from 0 to 100.
Étape #6 : Créer l'en-tête Elementor Transparent sur le contenu
Now, hop into the ‘Style’ tab. From the “Menu Wrapper” section, set the Elementor transparent menu height of your choice.
Choose the menu wrapper background type ‘Classic’ and remove color by using the slider to the left end. You can also put the color code manually. In that case, enter #00000000 to get a transparent background. Moreover, you can also adjust the Elementor header over content from the content tab.
Pour rendre l'en-tête plus raffiné et attrayant, vous pouvez également exploiter l'un des paramètres suivants :
Étape #7 : tests l'en-tête transparent Elementor
Eh bien, nous avons conçu cet en-tête transparent en utilisant Elementor et un autre Plugin complémentaire d’en-tête transparent Elementor appelé ElementsKit. Il est maintenant temps de vérifier le résultat.
Vous pouvez ajouter quelques sections supplémentaires sous l'en-tête pour avoir une meilleure compréhension de la transparence. Dans ce tutoriel, j'ai ajouté deux images sous la section d'en-tête. Voici le résultat final.
C'est ça! Nous avons créé avec succès un arrière-plan d’en-tête transparent Elementor. Vous pouvez désormais copier cet en-tête et l’appliquer à n’importe quelle page de votre site Web.
Encore confus? Regardez cette vidéo tutorielle :
Différentes conceptions d'en-tête pour les utilisateurs d'ElementsKit
ElementsKit est livré avec de nombreuses conceptions d'en-tête intégrées prêtes à l'emploi. Tous ces éléments sont élégants, uniques et aident l’utilisateur à naviguer sur l’ensemble de votre site Web.
Jetez un œil à quelques conceptions d’en-tête d’ElementsKit.
Illustration 1 – En-tête collant Elementor
Illustration 2 – En-tête collant Elementor
Illustration 3 – En-tête collant Elementor
Illustration 4 – En-tête collant Elementor
Illustration 5 – En-tête collant Elementor
Ces designs ne sont-ils pas géniaux ? Oui, vous pouvez accéder à une vaste liste de designs premium comme celui-ci en utilisant ElementsKit.
Pourquoi devriez-vous utiliser un Transparent En-tête collant Elementor ?
Que vous aimiez ou non ces en-têtes transparents collants pour Elementor, vous devez l’essayer. Ces en-têtes magnifiques et tendance ajoutent une grande valeur à votre site Web. Ici, j'ai répertorié les quatre principales raisons qui justifient l'utilisation d'un en-tête transparent et collant pour votre site Web.
Une meilleure image de marque
Des milliers d'entreprises ont apposé leur logo sur l'en-tête principal. Pensez-vous que c'est juste une coïncidence ?
Non!
UN un rapport de Lucidpress montre que la présentation cohérente du logo d'une marque augmente chiffre d'affaires d'environ 33 pour cent. Cela signifie que vous pouvez augmenter les revenus de votre entreprise uniquement en affichant le logo de la marque au public.
Si vous mettez le logo sur un en-tête collant pour Elementor, il sera visible sur l’ensemble du site Web. Ainsi, les gens remarqueront votre logo plus longtemps. Cela rendra votre marque familière à davantage de personnes et augmentera vos revenus.
Meilleure expérience utilisateur
Un en-tête collant permet aux utilisateurs de parcourir votre site Web plus rapidement. Ils peuvent trouver les informations souhaitées avec un minimum d'effort.
En revanche, l’utilisation d’un en-tête fixe nécessite plus de temps pour que les utilisateurs trouvent les informations. Personne ne veut faire défiler vers le haut tout le temps pour utiliser votre en-tête principal. En conséquence, les utilisateurs quittent votre site Web.
Eh bien, vous pourriez coller l'en-tête en haut. Mais ce n’est pas la fin de votre devoir. De nos jours, la plupart des gens naviguent sur des sites Web via un appareil mobile. Si vous collez l'en-tête en haut, cela tue de l'espace et affiche moins de contenu. Ce n'est pas convivial.
Pour résoudre ce problème, vous devez utiliser l’en-tête transparent Elementor. Ainsi, vous pouvez garder l’en-tête visible et également montrer plus de contenu aux visiteurs. C'est juste une situation gagnant-gagnant pour les deux, n'est-ce pas ?
Améliore le classement des moteurs de recherche
En tant que webmaster, vous savez probablement que les moteurs de recherche se soucient également beaucoup de l’expérience utilisateur. C'est l'un des facteurs de classement les plus importants de Google. Cela signifie que seul un en-tête collant vous aidera à améliorer le classement de votre site Web sur Google et à attirer plus de clients potentiels.
Vous voulez perdre vos clients ? Je ne pense pas!
Avez-vous déjà rencontré des difficultés pour naviguer sur un site Web ?
Eh bien, j'y ai souvent été confronté !
Faire toujours défiler vers le haut est la chose la plus fastidieuse ou extrêmement ennuyeuse à faire lors de la visite d'un site Web. Si vous ne voulez pas créer de tracas supplémentaires pour votre public, vous devriez jeter l'en-tête standard dès maintenant.
Au lieu de cela, concevez un en-tête transparent personnalisé Elementor et offrez une expérience de navigation plus fluide à vos clients. En outre, vous pouvez également rendre la navigation très conviviale avec navigation sur une page WordPress.
Expert Insights
Transparent sticky headers look great, but need careful design. Here are quick expert tips:
Ensure Readability
- Use contrasting text colors or subtle shadows so your menu is always visible.
- Adjust colors when the header overlaps different backgrounds.
Smart Transparency
- Use partial transparency (80–90%) instead of fully clear.
- Consider adding a subtle background when users scroll.
Test Responsiveness
- Check the header on desktop, tablet, and mobile.
- On mobile, use a smaller header or hamburger menu to save space.
Keep it Simple
- Limit menu items and highlight key links.
How to Change the Header Color on Scroll?
Transitioning a transparent header to a solid color as the user scrolls is one of the most effective ways to keep navigation readable against varying page content. You can achieve this dynamic effect natively within the ElementsKit ecosystem without writing custom CSS.
Follow these exact steps to apply the background color change:
Activate the Module: First, ensure the core functionality is active by navigating to ElementsKit > Modules in your WordPress dashboard and toggling the Contenu collant module to ON.
Access the Header: Open your header template via “Edit with Elementor” and click the handle for the main header section or container.
Enable Sticky Top: Accédez au Avancé tab, expand the ElementsKit collant panel, and select Haut from the drop-down menu. This ensures the header remains fixed at the top of the viewport.
Set the Scroll Offset: Assign an Compenser value (for example, 50px). This dictates the exact scroll distance required before the transparent background switches to your new color.
Assign the New Color: Within the same ElementsKit Sticky panel, locate the background color option—typically found just under the Collant jusqu'à settings. Select the solid color you want the header to become once the offset distance is reached.
Publish and Test: Click update and test the live page. Your header will load completely transparent over your hero section, then seamlessly transition to the solid background color once the user scrolls past your designated offset point.
Foire aux questions (FAQ)
Quels sont les éléments d’un en-tête idéal ?
Un bon en-tête doit inclure certains éléments essentiels qui rendent la navigation fluide et flexible. Voici les éléments nécessaires d’un en-tête idéal :
- Logo
- Barre de recherche
- Détails du contact
- Changer de langue
- Le menu de navigation
- Icônes des médias sociaux
- Appel à l'action
- Icône du panier
Comment rendre l’en-tête transparent collant pour différents types d’appareils ?
Heureusement, vous pouvez choisir le type d'appareil sur lequel vous souhaitez conserver l'en-tête collant. Vous avez la liberté absolue de définir si vous souhaitez définir l'en-tête transparent pour les utilisateurs de mobiles, de tablettes ou d'ordinateurs de bureau. Si vous souhaitez activer l'en-tête transparent pour tous les types d'appareils, assurez-vous d'avoir activé l'en-tête pour tous les appareils.
Qu'est-ce qui fait un bon en-tête ?
Un bon en-tête doit être facile à lire et inclure toutes les pages essentielles de votre site. En outre, le contraste des couleurs et les polices jouent également un rôle important pour le rendre visible. Vous devez le rendre extensible plutôt que d'inclure trop d'éléments dans l'en-tête. L'inclusion d'éléments essentiels constitue également un bon en-tête qui conserve avec succès l'identité de la marque et établit une navigation sans effort.
Avez-vous besoin d'utiliser du CSS personnalisé pour définir l'en-tête Elementor Sticky ?
No. If you use ElementsKit pro, you’ll get almost everything you want from the ElementsKit Sticky settings. You are not required to use any custom CSS to build a transparent sticky header for Elementor. However, if you still want to add custom CSS, just leverage “Add kit-sticky-effects Class Offset” and a functional theme to get your work done with CSS code.
Pouvez-vous utiliser un en-tête Elementor collant mais non transparent ?
Oui, vous pouvez le faire. si vous souhaitez rendre l'en-tête collant sans le rendre transparent, définissez simplement l'en-tête collant sur « haut », puis changez la couleur d'arrière-plan avec celle de votre choix dans les paramètres « Couleur d'arrière-plan collant ».
Exigez-vous qu’Elementor Pro utilise l’en-tête Elementor Sticky ?
No, if you have the free version of Elementor with ElementsKit Pro, you are all set to make your Elementor header both transparent and sticky. Also, you can make any website element sticky.
Alors dépêchez-vous et créez un en-tête collant pour Elementor dans votre site WordPress avec ElementsKit. Lorsque vous pouvez rendre votre en-tête à la fois collant et transparent, pourquoi rater cette occasion ?
Derniers mots
À présent, vous devez avoir compris à quel point vous bénéficierez uniquement de l’utilisation d’un arrière-plan d’en-tête transparent Elementor. Ajoutez dès aujourd’hui un en-tête adhésif transparent à votre site Web et tirez le meilleur parti de votre site Web.
J'espère que vous pourrez concevoir de nombreux en-têtes adhésifs transparents personnalisés avec Module complémentaire Elementor ElementsKit et Elementor en suivant cette directive.
Si vous avez d'autres questions concernant l'en-tête transparent collant pour Elementor, faites-le nous savoir dans la section commentaires. Nous attendons avec impatience de résoudre vos problèmes.
Passe une bonne journée!
Laisser un commentaire