Table des matières
Un modèle d'en-tête Elementor est la barre supérieure d'un site Web enregistré comme un design prêt à l'emploi : le logo, le menu, un bouton et souvent une barre de contact au-dessus d'eux Vous l'ajoutez une fois avec un générateur de thème et il s'affiche sur chaque page.
Ce billet recueille les 43 modèles d'en-tête Elementor dans la bibliothèque Master Addons, regroupés selon le type de site qui leur convient Chacun a une capture d'écran et une démo en direct qui s'ouvre dans un nouvel onglet Ils installent à partir de l'onglet En-têtes du Bibliothèque de modèles Master Addons et allez sur tout le site à travers le Constructeur de thèmes Master Addons1, vous n'avez donc pas besoin d'Elementor Pro pour les utiliser.
Sautez à ce que vous êtes venu chercher :
- Comment ajouter un modèle d'en-tête Elementor: cinq étapes avec le Theme Builder
- 43 modèles d'en-tête par type de site: SaaS, entreprise locale, magasin, multi-rangées et minimal
- Quelle disposition d'en-tête correspond à votre site: une table rapide pour la rétrécir
- Questions fréquemment posées
Comment ajouter un modèle d'en-tête Elementor à votre site
Un en-tête est un modèle de Theme Builder : il apparaît sur chaque page, et vous le modifiez en un seul endroit La création d'en-têtes dans le Master Addons Theme Builder est gratuite, et les étapes ci-dessous fonctionnent avec le plugin gratuit et l'élémenteur principal.
Dans la vidéo ci-dessous, l'un de ces en-têtes va directement dans un modèle de générateur de thèmes, puis en direct sur l'ensemble du site Si vous préférez lire, les mêmes étapes sont écrites sous celui-ci.
- Dans votre tableau de bord, rendez-vous sur Additions principales → Créateur de thèmes, cliquez Ajouter un nouveau modèle(en), définissez le type sur En-tête et cliquez Modifier avec Elementor.
- Dans l'éditeur, cliquez sur le Modèles de modules complémentaires principaux bouton, ouvrez le En-têtes onglet, choisissez un design et cliquez Insérer.
- Remplacer le logo, pointer le Widget de menu Nav dans votre propre menu WordPress et modifiez le texte et le lien du bouton.
- Ouvrir le conditions onglet, ensemble Inclure → Site entier et économisez.
- Si votre thème imprime toujours son propre en-tête au-dessus du nouveau, désactivez l'en-tête du thème dans ses paramètres.
Le guide du créateur de thème en-tête couvre les mêmes étapes avec une capture d'écran pour chacune, y compris comment exclure une page ou donner à une page de destination son propre en-tête Le même générateur de thèmes gère également le bas de la page, comme indiqué dans notre guide modification du pied de page dans WordPress avec Elementor. Si vous avez également besoin d'un pied de page, notre Modèles de pied de page d'élémenteur post a 34 designs, chacun avec une démo live.
43 Modèles d'en-tête d'élément par type de site
Les 43 designs répartis en cinq groupes Sautez vers celui le plus proche de votre site et ouvrez deux ou trois démos côte à côte avant de choisir.
| Type d'en-tête | Dessins | Ce qu'ils partagent | Où |
|---|---|---|---|
| SaaS et technologie | 14 | Menu court et un bouton d'essai ou de démonstration | Sauter |
| Service aux entreprises et local | 7 | Numéro de téléphone et un bouton de réservation | Sauter |
| eCommerce et boutique | 6 | Icônes de recherche, de panier et de compte | Sauter |
| Barre supérieure et multirangée | 9 | Barre de contact au-dessus du logo et du menu | Sauter |
| Minimal et centré | 7 | Une ligne, peu de liens, logo centré ou divisé | Sauter |
Modèles d'en-tête SaaS et Tech Elementor
La plupart d'entre eux proviennent du SaaS et des kits technologiques et partagent un motif : logo à gauche, quatre ou cinq liens et un bouton d'essai ou de démonstration à droite. Finix, Clowdify et Techbyte utilisent des barres sombres et Lead Lift repose sur une crème.
1. Shiftflow : Modèle d'en-tête du tableau de travail Elementor
Conçu pour un tableau d'emploi : Accueil, emplois et poste Un emploi se trouvent à droite d'une barre blanche, suivi d'un bouton Poster un emploi gratuit décrit.
2. Techbyte : Modèle d'en-tête de technologie sombre Elementor
Dark navy, avec le nom de la marque à gauche et trois liens à droite Il n'y a pas de bouton, donc il convient mieux à un portfolio ou à un site de projet qu'à une page de vente.
3. Tecpart : Modèle d'en-tête de société informatique Elementor
Un en-tête de services informatiques dont la liste déroulante Toutes les pages contient neuf pages intérieures, le niveau supérieur n'a donc besoin que de trois liens supplémentaires. La capture d'écran montre la liste déroulante ouverte.
4. Clowdify : Modèle d’en-tête de pilule Elementor SaaS
L'en-tête entier est une pilule noire arrondie avec de l'espace autour. Les fonctionnalités, les prix, l'intégration et la connexion client se trouvent à côté d'un bouton Commencer maintenant.
5. Craftova : Modèle d'en-tête Elementor SaaS
Six liens, une étude de cas parmi eux, et un bouton Démarrer l'essai gratuit décrit Il convient à un produit avec plus de pages que le menu SaaS habituel à trois liens.
6. Finix : Modèle d'en-tête SaaS sombre Elementor
Noir avec une marque de logo vert, trois liens au milieu et un bouton d'essai gratuit Start souligné Avec seulement trois liens, l'œil va droit au procès.
7. Grip : Modèle d'en-tête d'agence d'élément
Un en-tête d'agence avec un gros mot-symbole, À propos, Études de cas et Contact, et un bouton Travailler avec nous où un site SaaS ferait son essai.
8. Klyro : Modèle d'en-tête de démonstration du logiciel Elementor
Cinq liens sur une barre gris pâle et un bouton Demander une démo gratuite, pour les logiciels vendus via un appel de démonstration.
9. Lead Lift : modèle d'en-tête de démarrage de l'élémenteur
Une barre de crème avec un texte en gras et une pilule noire qui dit Commencez l'essai gratuit C'est le plus chaud des en-têtes SaaS ici.
10. Nexis : Modèle d'en-tête Elementor SaaS
Cinq maillons espacés au milieu, un logo vert foncé et un bouton Commencer maintenant avec une bordure claire.
11. Optivue : modèle d'en-tête Elementor SaaS
Trois liens centrés dans une barre blanche et un bouton d'essai libre Start arrondi à droite Il y a très peu à lire, donc le bouton fait le travail.
12. Sabrion : Modèle d'en-tête de connexion Elementor SaaS
Tarification, À propos et Contact à côté du logo, puis un lien de connexion et un bouton Démarrer 14 jours d'essai gratuit La connexion reste en texte brut pour ne pas concurrencer l'essai.
13. Sempla : Modèle d'en-tête Elementor SaaS
Caractéristiques, À propos de nous, Tarifs et témoignages à côté du logo, avec connexion et démarrage maintenant regroupés à droite.
14. Zaplyte : Modèle d'en-tête d'application Elementor
Les liens se trouvent juste après le logo plutôt qu'au milieu, ce qui laisse un espace ouvert avant le bouton Commencer maintenant.
Modèles d'en-tête de service professionnel et local
En-têtes pour les entreprises de nettoyage, les dentistes, les plombiers, une clinique de thérapie, un restaurant et une agence immobilière La plupart ajoutent une barre supérieure avec un numéro de téléphone ou des liens sociaux, et le bouton principal réserve un rendez-vous, un appel ou une table.
15. HomeAxis : Modèle d'en-tête immobilier Elementor
Icônes sociales, une adresse e-mail et un numéro de téléphone dans une barre supérieure en citron vert La rangée principale comporte six liens et un bouton Get a Quote correspondant avec une flèche.
16. Balanciq : Modèle d’en-tête de clinique de thérapie élémentaire
Accueil, À propos, Service, Thérapeutes et Contact avec un bouton Start Your Journey arrondi Couleurs douces et beaucoup d'espace, ce qui convient à une clinique.
17. Nettoyeur : Modèle d’en-tête du service de nettoyage des éléments
Les icônes sociales, une adresse municipale et un numéro de téléphone partagent une barre supérieure mince La rangée principale comporte cinq liens et un bouton vert Réserver un rendez-vous.
18. Nettoyage : modèle d’en-tête d’entreprise de nettoyage d’éléments
Une barre supérieure bleue demande à “Need une aide au nettoyage rapide ?” à côté d'un numéro d'appel-utilisateur. En dessous se trouvent cinq liens et un bouton Prendre rendez-vous dans le même bleu.
19. Culinaire : Modèle d’en-tête de restaurant Elementor
Un bar à dessus olive avec téléphone, e-mail et icônes sociales au-dessus d'une rangée principale crème Le livre A Table est la seule action qu'il demande.
20. Dentaire : Modèle d’en-tête de clinique dentaire élémentaire
Le numéro de téléphone se trouve juste à côté du bouton Réserver un rendez-vous, afin qu'un patient puisse appeler ou réserver au même endroit.
21. Plumbiq : Modèle d’en-tête de service de plomberie d’éléments
Appelez-nous et les icônes sociales remplissent la barre supérieure, avec cinq liens ci-dessous et un bouton bleu Demander un appel gratuit.
Modèles d'en-têtes de commerce électronique et de boutique
En-têtes de magasin avec icônes de recherche, de panier et de compte Sartivo ouvre une liste déroulante de catégorie, et deux des mises en page mettent une offre de vente ou un lien promotionnel à l'intérieur même de l'en-tête.
22. En-tête Blue Store avec recherche : modèle d'en-tête de magasin Elementor
Une rangée supérieure bleue avec des icônes sociales, un logo centré, un champ de recherche et un panier La rangée de menus en dessous se termine par un hamburger pour des liens supplémentaires.
23. Centered Logo Shop : Modèle d'en-tête de boutique d'éléments
Sous une adresse bleue et une barre de téléphone, le menu se trouve à gauche, le logo au milieu et recherche et panier à droite.
24. Dark Top Bar Shop : modèle d'en-tête de boutique Elementor
Sa barre supérieure sombre offre une consultation gratuite et un numéro de téléphone Vous trouverez ci-dessous le logo, six liens et un bouton de recherche.
25. Promo Banner Store : modèle d'en-tête promotionnel du magasin Elementor
Trois lignes : une ligne de message avec des icônes de compte et sociales, le logo à côté d'une large bannière d'offre et une barre de menu bleue avec recherche, panier et liste de souhaits.
26. Search Bar Store : modèle d'en-tête de recherche Elementor eCommerce
La recherche prend le milieu de la ligne de logo, avec la liste de souhaits et le panier à droite et un lien 70 % de réduction sur l'électronique dans la barre de menus.
27. Sartivo : Modèle d'en-tête de magasin de mode Elementor
Un en-tête de boutique de mode avec un lien Boutique par catégorie, un dropdown Toutes les pages, un logo centré et des icônes de compte et de recherche La capture d'écran montre le dropdown ouvert.
Modèles de barres supérieures et d'en-têtes à plusieurs rangées
En-têtes construits à partir de deux ou trois rangées : une barre de contact avec téléphone, e-mail ou heures d'ouverture, une rangée de logos et une barre de menus. Ils conviennent aux agences, cliniques et sociétés de services qui souhaitent avoir des coordonnées sur chaque page.
28. Barre d'adresse : Modèle d'en-tête de barre supérieure de l'élémenteur
Barre supérieure grise avec une adresse et des icônes sociales, puis le logo, six liens et un bouton Join Now bleu.
29. Menu en angle : modèle d'en-tête de rendez-vous avec l'élémentateur
Les heures d'ouverture et trois petits liens utilitaires se trouvent au-dessus d'une barre de menu bleue inclinée qui se termine par un bouton blanc Prendre rendez-vous.
30. En-tête d'informations de contact avec recherche : modèle d'en-tête d'informations de contact d'élémenteur
Une barre bleue avec adresse, connexion et icônes sociales, une rangée de logos avec Call Us et les heures d'ouverture, et une barre de menus bleue encadrée avec un champ de recherche.
31. Agence créative : modèle d'en-tête d'agence créative Elementor
Le logo obtient son propre grand bloc bleu sur la gauche Un numéro de téléphone et des icônes sociales courent sur le dessus, avec le menu en dessous.
32. Menu flottant : Modèle d'en-tête de menu flottant d'élémenteur
Une barre bleue contient le téléphone, l'e-mail et les heures d'ouverture La boîte de menu blanche ci-dessous chevauche le haut de la page, qui fonctionne bien sur une image de héros.
33. Démarrer Barre de contact : Modèle d'en-tête de barre de contact de l'élémenteur
Téléphone et email dans une barre supérieure lumineuse avec un bloc solide Get Started à droite, puis le logo, le menu et une icône de panier.
34. Clinique médicale : Modèle d’en-tête de clinique médicale d’élémenteur
Le logo se trouve sur un panneau bleu diagonal Le téléphone et l'e-mail vont dans la barre supérieure, et les icônes de recherche et de panier terminent le menu.
35. Three-Row Centred : Modèle d'en-tête à trois rangées d'éléments
E-mail, téléphone et connexion dans la barre supérieure, un logo centré avec un panier et des icônes sociales de chaque côté, et une barre de menu bleue pleine largeur en bas.
36. Visite, appel et courrier : modèle d'en-tête des coordonnées de l'élémenteur
Visitez-nous, appelez-nous et envoyez-nous un e-mail à côté du logo, avec une barre de menu bleue en dessous contenant la connexion et l'inscription.
Modèles d'en-tête minimaux et centrés
Des mises en page simples et inhabituelles : un menu divisé autour d'un logo centré, une barre avec un seul bouton Menu, un logo centré empilé et quelques barres de logo et de liens simples.
37. Empilé de logo centré : modèle d'en-tête de logo centré sur l'élémenteur
Le logo se trouve sur le dessus avec le menu centré en dessous, une mise en page qui convient aux blogs et aux sites de portfolio.
38. Fire Away Split : modèle d'en-tête de menu divisé par élément
Le menu est divisé en deux, avec trois liens de chaque côté d'un logo centré.
39. Bouton de menu : Modèle d'en-tête du bouton de menu Élémenteur
Logo à gauche, icônes sociales au milieu et un bouton Menu bleu à droite Il fonctionne pour les sites avec seulement une poignée de pages.
40. En-tête minimal avec icônes sociales : modèle d'en-tête minimal Elementor
Une barre blanche avec le logo, six liens, un bouton de recherche et trois icônes sociales.
41. Modèle d'en-tête d'appel à l'action à angle violet : modèle d'en-tête d'appel à l'action de l'élémenteur
Logo et menu en blanc, se terminant par un panneau violet incliné contenant un bouton Télécharger.
42. Connectez-vous : modèle d'en-tête simple de l'élémenteur
Logo, six liens et un lien de connexion avec une icône. Avec si peu de choses dedans, il tombe dans presque tous les sites.
43. Simple Dropdown : modèle d'en-tête de menu déroulant Élémenteur
Juste le logo, un menu avec des flèches déroulantes et une icône fermée à droite, sur une barre blanche unie.
Quelle disposition d'en-tête correspond à votre site ?
| Votre site | En-tête qui fonctionne habituellement | Commencer par |
|---|---|---|
| SaaS ou application | Menu court avec Tarifs et fonctionnalités, un lien de connexion et un bouton d'essai | Sempla, Sabrion, Nexis |
| Entreprise de services locaux | Numéro de téléphone visible, bouton de réservation à droite | Dentaire, Plumbiq, Nettoyant |
| Restaurant | Barre supérieure de contact et bouton Réserver une table | Culinaire |
| Boutique en ligne | Icônes de recherche, de panier et de compte, liste déroulante de catégories | Sartivo, Recherche Bar Store |
| Agence ou clinique avec de nombreuses pages | Deux ou trois rangées avec coordonnées et une barre de menu complète | Clinique médicale centrée sur trois rangées |
| Site de portefeuille ou de marque | Logo centré ou un bouton Menu qui maintient la barre propre | Logo centré empilé, bouton de menu |
Exemples d'en-tête de site Web : ce que partagent les bons
- Ils donnent au visiteur un bouton principal Nexis, Finix et Optivue ont chacun un seul appel à l'action, et Sempla stylise sa deuxième action, Login, comme un lien simple pour que les deux ne s'affrontent pas.
- Ils gardent le menu court La plupart des en-têtes ici montrent trois à six liens, et Tecpart met le reste de ses pages dans une liste déroulante Toutes les pages.
- Les entreprises locales affichent un numéro de téléphone Dental, Cleanery et Plumbiq le mettent dans l'en-tête, où un client qui préfère appeler peut le trouver sans faire défiler.
- Les magasins mettent la recherche dans l'en-tête Chaque disposition de boutique ici l'a, et la plupart ajoutent une icône de panier à côté.
- Les barres sombres utilisent du texte clair et un bouton souligné, comme le font Finix et Clowdify, afin que les deux restent lisibles.
Rendre l'en-tête collant
Un en-tête qui reste en haut pendant que les visiteurs défilent maintient le menu et le bouton à portée de main sur les longues pages Vous pouvez rendre n'importe lequel de ces en-têtes collant, et les étapes sont dans notre guide pour création d'un en-tête collant dans Elementor. Sur un site web d'une page(en), associez l'en-tête collant à des liens de menu qui sautent à chaque section.
En-tête, section, page ou kit : de quel modèle avez-vous besoin ?
Un modèle d'en-tête couvre une partie du site Si vous construisez le reste aussi, la même bibliothèque a Modèles de section d'élémentateur pour les bandes simples telles que les prix ou la FAQ, complet Modèles de pages d'éléments pour les pages complètes, et kits de modèles cela regroupe un en-tête, un pied de page et chaque page dans un style correspondant.
Les en-têtes marqués Pro dans la bibliothèque nécessitent un Licence Master Addons Pro(en), qui débloque également les kits complets dont beaucoup de ces en-têtes proviennent.
Questions fréquemment posées
Qu'est-ce qu'un modèle d'en-tête Elementor ?
Une section d'en-tête prête à l'emploi enregistrée en tant que modèle Elementor Il contient le logo, le menu, les boutons et souvent une barre supérieure, et vous l'insérez dans un en-tête Theme Builder pour qu'il s'affiche sur chaque page.
Comment utiliser un modèle d'en-tête dans Elementor ?
Créez un modèle d'en-tête dans Master Addons → Theme Builder, ouvrez-le dans Elementor, insérez un design dans l'onglet En-têtes de la bibliothèque de modèles Master Addons, puis définissez la condition pour inclure → Site entier et enregistrez.
Ai-je besoin d'Elementor Pro pour utiliser ces modèles d'en-tête ?
Non. Le constructeur de thèmes Master Addons place l'en-tête sur vos pages et son générateur d'en-tête est gratuit dans le plugin Master Addons, Elementor Pro n'est donc pas requis.
L'en-tête fonctionnera-t-il sur les téléphones ?
Ouvrez la démo en direct sur votre téléphone ou rétrécissez la fenêtre de votre navigateur pour voir comment le menu se comporte sur un petit écran avant d'en choisir un.
Puis-je utiliser un en-tête différent sur une page ?
Oui. Créez un deuxième modèle d'en-tête et définissez sa condition pour inclure → Singulier → Pages pour cette page, puis excluez la page de votre en-tête principal.
Pourquoi je vois deux en-têtes après l'importation ?
Votre thème est toujours en train d'imprimer son propre en-tête Éteignez-le dans les paramètres du thème ou dans Customizer, ou utilisez un thème qui cache son en-tête lorsqu'un en-tête Theme Builder est actif.
Combien de modèles d'en-tête Master Addons inclut-il ?
L'onglet En-têtes de la bibliothèque de modèles Master Addons comporte 43 conceptions, et chacune d'entre elles se trouve sur cette page.
Choisissez un en-tête, définissez-le une fois
Commencez par le groupe qui correspond à votre site et insérez le design qui vous convient Si vous changez d'avis plus tard, ouvrez le même modèle de Theme Builder, supprimez l'ancien design et insérez-en un nouveau. Les conditions d'affichage restent telles quelles.
Lecture connexe: comment importer un modèle Elementor, Modèles de section d'élémentateur, Modèles de pied de page d'élémenteur et Guide propre de l'élémenteur pour construire un en-tête avec des conteneurs.
