Comment créer un en-tête transparent Sticky Elementor en étapes simples

Quelle est la toute première chose que vous remarquez en visitant un site Web ?

L'en-tête, non ?

Oui! Nous sommes tous pareils !

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.

Cependant, ajouter un simple en-tête avec le menu ne suffit plus maintenant ! Vous devez personnaliser l'en-tête pour offrir la meilleure expérience utilisateur à votre public. Et vous pouvez le faire en créant un arrière-plan d'en-tête transparent et collant pour Elementor !

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

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 –

1. Un site WordPress
2. Générateur de pages Elementor
3. ElementsKit
4. 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.

Une fois que vous avez fini de créer le menu, donnez le nom du menu « Primaire » et cliquez sur « Enregistrer le menu ». Si vous avez déjà créé un menu, il ressemblera à ceci :

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

Accédez à la section « En-tête de pied de page » de votre ElementsKit. Ajoutez un nouveau modèle d'en-tête en cliquant sur « 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.
• Dans la liste déroulante des paramètres « Type », choisissez « En-tête »
• 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.

Pour continuer, cliquez sur l'icône ElementsKit, choisissez un beau design et cliquez sur le bouton « Insérer » pour importer l'en-tête dans Elementor.

Étape #5 : Collez le menu transparent Elementor

Nous avons déjà sélectionné notre conception d'en-tête. Il est maintenant temps de placer la tête en première position. Parcourez l'onglet « Avancé » d'Elementor pour cette tâche. Dans l’onglet avancé, recherchez « ElementsKit Sticky ». Rendez le menu collant en haut dans la liste déroulante.

Notez que vous pouvez choisir de rendre l’en-tête collant jusqu’à une certaine section. Dans ce cas, définissez le Sticky Until. Vous pouvez également appliquer Sticky Offset à l'en-tête allant de 0 à 100.

Étape #6 : Créer l'en-tête Elementor Transparent sur le contenu

Maintenant, allez dans l'onglet « Style ». Dans la section « Menu Wrapper », définissez la hauteur du menu transparent Elementor de votre choix.

Choisissez le type d'arrière-plan du wrapper de menu « Classique » et supprimez la couleur à l'aide du curseur situé à l'extrémité gauche. Vous pouvez également mettre le code couleur manuellement. Dans ce cas, saisissez #00000000 pour obtenir un fond transparent. De plus, vous pouvez également ajuster l'en-tête Elementor sur le contenu à partir de l'onglet Contenu.

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!

Navigation plus facile

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.

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!

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 :

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 ?

Non. Si vous utilisez ElementsKit pro, vous obtiendrez presque tout ce que vous voulez dans les paramètres ElementsKit Sticky. Vous n'êtes pas obligé d'utiliser un CSS personnalisé pour créer un en-tête transparent et collant pour Elementor. Cependant, si vous souhaitez toujours ajouter du CSS personnalisé, utilisez simplement « Ajouter un décalage de classe kit-sticky-effects » et un thème fonctionnel pour effectuer votre travail avec le code CSS.

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 ?

Non, si vous disposez de la version gratuite d'Elementor avec ElementsKit Pro, vous êtes prêt à rendre votre en-tête Elementor à la fois transparent et collant.

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 ?