Inhaltsverzeichnis
Eine Elementor-Header-Vorlage ist die oberste Leiste einer Website, die als vorgefertigtes Design gespeichert ist: das Logo, das Menü, eine Schaltfläche und oft eine Kontaktleiste darüber. Sie fügen es einmal mit einem Theme-Builder hinzu und es wird auf jeder Seite angezeigt.
Dieser Beitrag sammelt die 43 Elementor-Header-Vorlagen in der Master Addons-Bibliothek, gruppiert nach der Art der Seite, die sie passen Jedes hat einen Screenshot und eine Live-Demo, die sich in einem neuen Tab öffnet Sie installieren von der Registerkarte Header des Master Addons Vorlagenbibliothek und gehen Sie ortsweit durch die Master Addons Theme Builder, so dass Sie nicht Elementor Pro benötigen, um sie zu verwenden.
Springen Sie zu dem, wofür Sie gekommen sind:
- So fügen Sie eine Elementor-Header-Vorlage hinzu: fünf Schritte mit dem Theme Builder
- 43 Header-Vorlagen nach Site-Typ: SaaS, lokales Geschäft, Shop, mehrreihig und minimal
- Welches Header-Layout zu Ihrer Website passt: eine schnelle Tabelle, um es einzugrenzen
- Häufig gestellte Fragen
So fügen Sie Ihrer Website eine Elementor-Header-Vorlage hinzu
Ein Header ist eine Theme Builder-Vorlage: Er erscheint auf jeder Seite, und Sie bearbeiten ihn an einer Stelle Das Erstellen von Headern im Master Addons Theme Builder ist kostenlos, und die folgenden Schritte funktionieren mit dem kostenlosen Plugin und dem Kernelementor.
Im Video unten geht einer dieser Header direkt in eine Theme Builder Vorlage und dann live auf der ganzen Seite, wer lieber lesen möchte, unter dem sind die gleichen Schritte ausgeschrieben.
- Gehen Sie in Ihrem Dashboard zu Master-Addons → Theme BuilderKlicken Sie Neue Vorlage hinzufügenSetzen Sie den Typ auf Kopfzeile und klicken Mit Elementor bearbeiten.
- Klicken Sie im Editor auf die Master-Addons-Vorlagen Knopf, öffnen Sie die Kopfzeilen Tab, wählen Sie ein Design aus und klicken Sie Einfügen.
- Ersetzen Sie das Logo, zeigen Sie auf die Nav-Menü-Widget Im eigenen WordPress-Menü und ändern Sie den Buttontext und Link.
- Öffnen Sie die Bedingungen Tab, eingestellt Einschließen → Gesamte Seite Und sparen.
- Wenn Ihr Theme immer noch einen eigenen Header über dem neuen ausgibt, schalten Sie den Theme-Header in seinen Einstellungen aus.
Die Header Theme Builder-Anleitung Deckt die gleichen Schritte mit einem Screenshot für jeden ab, einschließlich der Art und Weise, wie man eine Seite ausschließt oder einer Zielseite einen eigenen Header gibt. Derselbe Theme Builder behandelt auch den unteren Teil der Seite, wie in unserem Leitfaden gezeigt Bearbeitung der Fußzeile in WordPress mit Elementor. Wenn Sie zusätzlich eine Fußzeile benötigen, wird unser Elementorfußvorlagen Post hat 34 Designs mit jeweils einer Live-Demo.
43 Elementor-Header-Vorlagen nach Site-Typ
Die 43 Designs teilen sich auf fünf Gruppen, springt zu dem, der eurer Seite am nächsten liegt und öffnet zwei oder drei Demos nebeneinander, bevor ihr wählt.
| Header-typ | Entwürfe | Was sie teilen | Wo |
|---|---|---|---|
| SaaS und Tech | 14 | Kurzes Menü und eine Test - oder Demo-Taste | Sprung |
| Geschäftlicher und lokaler Service | 7 | Telefonnummer und einen Buchungsbutton | Sprung |
| E-Commerce und Shop | 6 | Symbole für Suche, Warenkorb und Konto | Sprung |
| Obere Leiste und mehrreihig | 9 | Kontaktleiste über dem Logo und Menü | Sprung |
| Minimal und zentriert | 7 | Eine Zeile, wenige Links, zentriertes oder geteiltes Logo | Sprung |
SaaS- und Tech-Elementor-Header-Vorlagen
Die meisten davon stammen aus den SaaS- und Tech-Kits und haben ein gemeinsames Muster: Logo auf der linken Seite, vier oder fünf Links und eine Test- oder Demo-Taste auf der rechten Seite. Finix, Clowdify und Techbyte verwenden dunkle Balken und Lead Lift sitzt auf einem cremefarbenen.
1. Shiftflow: Header-Vorlage für Elementor-Jobboards
Für eine Jobbörse gebaut: Home, Jobs und Post A Job sitzen rechts auf einer weißen Leiste, gefolgt von einer umrissenen Schaltfläche Post a Job for Free.
2. Techbyte: Elementor Dark Tech Header Vorlage
Dunkelmarine, links der Markenname und rechts drei Links, da gibt es keinen Button, passt also besser zu einer Portfolio - oder Projektseite als zu einer Verkaufsseite.
3. Tecpart: Header-Vorlage für Elementor IT-Unternehmen
Ein IT-Services-Header, dessen All Pages-Dropdown neun innere Seiten fasst, die oberste Ebene benötigt also nur noch drei weitere Links Der Screenshot zeigt den Dropdown offen an.
4. Clowdify: Elementor SaaS-Pillenkopfvorlage
Der ganze Header ist eine abgerundete schwarze Pille mit Platz drumherum Features, Pricing, Integration und Customer Login sitzen neben einem Get Started Now Button.
5. Craftova: Elementor SaaS Header-Vorlage
Sechs Links, darunter Case Study, und ein umrissener Start Free Trial Button. Es passt zu einem Produkt mit mehr Seiten als das übliche dreigliedrige SaaS-Menü.
6. Finix: Elementor dunkles SaaS-Header-Template
Schwarz mit grüner Logo-Markierung, drei Links in der Mitte und umrissenem Start free trial Button Mit nur drei Links geht der Blick direkt zur Testversion.
7. Griff: Header-Vorlage der Elementoragentur
Ein Agentur-Header mit einem großen Wortzeichen, About, Case Studies und Contact, und einer Work with us-Taste, auf der eine SaaS-Site getestet werden würde.
8. Klyro: Elementor-Software-Demo-Header-Vorlage
Fünf Links auf einer hellgrauen Leiste und einer Anforderungs-kostenlosen Demo-Schaltfläche für Software, die über einen Demo-Aufruf verkauft wird.
9. Lead Lift: Header-Vorlage für den Elementor-Start
Eine Cremeleiste mit fett gedrucktem Linktext und einer schwarzen Pille, auf der Start free trial steht Es ist der wärmste der SaaS-Header hier.
10. Nexis: Elementor SaaS Header-Vorlage
Fünf Links in der Mitte verteilt, ein tiefgrünes Logo und eine Get Started Now-Taste mit hellem Rand.
11. Optivue: Elementor SaaS Header-Vorlage
Drei Links zentriert in einem weißen Balken und rechts ein abgerundeter Start free trial Button Es gibt sehr wenig zu lesen, also macht der Button die Arbeit.
12. Sabrion: Elementor SaaS Login-Header-Vorlage
Preise, Über und Kontakt neben dem Logo, dann ein Login-Link und ein Start 14 Days Free Trial Button Login bleibt Klartext, damit es nicht mit der Testversion konkurriert.
13. Sempla: Elementor SaaS Header-Vorlage
Funktionen, Über uns, Preise und Testimonial neben dem Logo, mit Login und Get Started Now auf der rechten Seite gruppiert.
14. Zaplyte: Header-Vorlage der Elementor-App
Die Links sitzen direkt nach dem Logo statt in der Mitte, wodurch vor dem Button Jetzt loslegen Freiraum bleibt.
Vorlagen für Kopfzeilen für Geschäfts- und lokale Dienste
Kopfzeilen für Reinigungsfirmen, Zahnärzte, Klempner, eine Therapieklinik, ein Restaurant und eine Immobilienagentur Die meisten fügen eine Top-Bar mit einer Telefonnummer oder sozialen Links hinzu, und der Haupt-Button bucht einen Termin, einen Anruf oder einen Tisch.
15. HomeAchse: Elementor Immobilien Header Vorlage
Soziale Symbole, eine E-Mail-Adresse und eine Telefonnummer fahren in einer Limettenleiste Die Hauptreihe hat sechs Links und einen passenden Get a Quote Button mit Pfeil.
16. Balanciq: Header-Vorlage für die Klinik für Elementortherapie
Home, About, Service, Therapeuten und Kontakt mit abgerundetem Start Your Journey Button Weiche Farben und viel Platz, was zu einer Klinik passt.
17. Cleaner: Header-Vorlage für Elementorreinigungsdienste
Soziale Symbole, eine Straßenadresse und eine Telefonnummer teilen sich eine schlanke obere Leiste Die Hauptreihe hat fünf Links und einen grünen Button Book An Appointment.
18. Reinigungs: Header-Vorlage für Elementorreinigungsunternehmen
Eine blaue obere Leiste fragt neben einer Call-us-Nummer “Brauche schnelle Reinigungshilfe?” darunter sind fünf Links und ein Button Termin vereinbaren im gleichen Blau.
19. Kulinarik: Elementor Restaurant Header Vorlage
Eine olivfarbene Topbar mit Telefon, E-Mail und sozialen Symbolen über einer Hauptreihe mit Creme. Book A Table ist die einzige Aktion, die er verlangt.
20. Dental: Elementor Zahnklinik Header-Vorlage
Die Telefonnummer befindet sich direkt neben der Schaltfläche Book An Appointment, sodass ein Patient an derselben Stelle anrufen oder buchen kann.
21. Plumbiq: Header-Vorlage für Elementor-Sanitärdienste
Rufen Sie uns an und soziale Symbole füllen die obere Leiste mit fünf Links unten und einer blauen Schaltfläche für einen kostenlosen Anruf anfordern.
E-Commerce und Shop-Header-Vorlagen
Store-Header mit Such-, Warenkorb- und Kontosymbolen Sartivo öffnet einen Kategorie-Dropdown und zwei der Layouts platzieren ein Verkaufsangebot oder einen Aktionslink im Header selbst.
22. Blue Store Header mit Suche: Elementor Store Header Vorlage
Eine blaue obere Reihe mit sozialen Symbolen, einem zentrierten Logo, einem Suchfeld und einem Warenkorb Die Menüzeile darunter endet in einem Hamburger für Extra-Links.
23. Zentrierter Logo Shop: Elementor Shop Header Vorlage
Unter einer blauen Adress - und Telefonleiste sitzt links das Menü, in der Mitte das Logo, rechts Such - und Warenkorb.
24. Dark Top Bar Shop: Elementor Shop-Header-Vorlage
Seine dunkle obere Leiste bietet eine kostenlose Beratung und eine Telefonnummer Unten finden Sie das Logo, sechs Links und einen Suchbutton.
25. Promo Banner Store: Elementor Store Promo-Header-Vorlage
Drei Zeilen: eine Nachrichtenzeile mit Konto- und sozialen Symbolen, das Logo neben einem breiten Angebotsbanner und eine blaue Menüleiste mit Suche, Warenkorb und Wunschliste.
26. Suche Bar Store: Elementor eCommerce-Suchkopfvorlage
Die Suche erfolgt in der Mitte der Logo-Reihe, mit Wunschliste und Warenkorb auf der rechten Seite und einem Link mit 70% Rabatt auf Elektronik in der Menüleiste.
27. Sartivo: Header-Vorlage für Elementor-Modegeschäfte
Ein Fashion Store Header mit einem Shop by Category Link, einem All Pages Dropdown, einem zentrierten Logo und Account und Suchsymbolen Der Screenshot zeigt den Dropdown offen an.
Obere Leiste und mehrreihige Header-Vorlagen
Header aus zwei oder drei Reihen: eine Kontaktleiste mit Telefon, E-Mail oder Öffnungszeiten, eine Logo-Reihe und eine Menüleiste Sie passen zu Agenturen, Kliniken und Dienstleistungsunternehmen, die auf jeder Seite Kontaktdaten wünschen.
28. Adressleiste: Header-Vorlage für die obere Elementorleiste
Graue obere Leiste mit Adresse und sozialen Symbolen, dann das Logo, sechs Links und eine blaue Join Now-Schaltfläche.
29. Winkelmenü: Header-Vorlage für Elementortermine
Über einer abgewinkelten blauen Menüleiste, die in einem weißen Button Termin vereinbaren endet, sitzen Öffnungszeiten und drei kleine Versorger-Links.
30. Kontakt Info Header mit Suche: Elementor Kontakt Info Header Vorlage
Eine blaue Leiste mit Adresse, Login und sozialen Symbolen, eine Logo-Reihe mit Call Us und Öffnungszeiten sowie eine boxed blaue Menüleiste mit Suchfeld.
31. Creative Agency: Header-Vorlage für Elementor-Kreativagentur
Das Logo bekommt links einen eigenen großen blauen Block, oben verlaufen eine Telefonnummer und soziale Icons, darunter das Menü.
32. Floating Menu: Elementor Floating Menü Header Vorlage
Eine blaue Leiste fasst Telefon, E-Mail und Öffnungszeiten, die weiße Menübox unten überlappt den Seitenanfang, was gut über ein Heldenbild funktioniert.
33. Beginnen Sie mit der Kontaktleiste: Header-Vorlage für die Elementor-Kontaktleiste
Telefon und E-Mail in einer hellen oberen Leiste mit einem soliden Startblock auf der rechten Seite, dann das Logo, das Menü und ein Warenkorb-Symbol.
34. Medizinische Klinik: Header-Vorlage für Elementor-Klinik
Das Logo sitzt auf einem diagonalen blauen Panel Telefon und E-Mail gehen in die obere Leiste, Such - und Kartonsymbole beenden das Menü.
35. Dreireihig zentriert: Elementor-Vorlage für dreireihige Header
E-Mail, Telefon und Anmeldung in der oberen Leiste, ein zentriertes Logo mit einem Warenkorb und sozialen Symbolen auf beiden Seiten und eine blaue Menüleiste über die gesamte Breite unten.
36. Visit, Call and Mail: Header-Vorlage für Elementor-Kontaktdaten
Besuchen Sie uns, rufen Sie uns an und senden Sie uns eine E-Mail. Neben dem Logo reihen sich Blöcke an, mit einer blauen Menüleiste darunter, in der Anmelden und Registrieren gespeichert sind.
Minimale und zentrierte Header-Vorlagen
Einzeilige und ungewöhnliche Layouts: ein Menü, das um ein zentriertes Logo herum aufgeteilt ist, eine Leiste mit einer einzigen Menüschaltfläche, ein gestapeltes zentriertes Logo und ein paar schlichte Logo- und Links-Balken.
37. Zentriertes Logo Gestapelt: Elementorzentrierte Logo-Header-Vorlage
Das Logo sitzt oben, das Menü ist darunter zentriert, ein Layout, das zu Blogs und Portfolioseiten passt.
38. Fire Away Split: Elementor Split-Menü-Header-Vorlage
Das Menü ist in zwei Teile geteilt, mit drei Links auf jeder Seite eines zentrierten Logos.
39. Menü-Taste: Elementor-Menü-Taste Header-Vorlage
Logo links, Social Icons in der Mitte und ein blauer Menü-Button rechts Es funktioniert für Seiten mit nur einer Handvoll Seiten.
40. Minimaler Header mit sozialen Symbolen: Elementor minimale Header-Vorlage
Ein weißer Balken mit dem Logo, sechs Links, ein Suchbutton und drei soziale Symbole.
41. Lila Winkel CTA: Elementoraufruf-zu-Aktion-Header-Vorlage
Logo und Menü auf Weiß, endend in einem abgewinkelten violetten Panel, das eine Download-Schaltfläche enthält.
42. Anmelden: Elementor einfache Header-Vorlage
Logo, sechs Links und ein Sign In Link mit einem Icon Mit so wenig drin, fällt es in fast jede Seite.
43. Einfache Dropdown: Elementor Dropdown-Menü-Header-Vorlage
Nur das Logo, ein Menü mit Dropdown-Pfeilen und einem Close-Icon rechts, auf einem schlichten weißen Balken.
Welches Header-Layout passt zu Ihrer Seite?
| Ihre Seite | Kopfzeile, die normalerweise funktioniert | Beginnen Sie mit |
|---|---|---|
| SaaS oder App | Kurzes Menü mit Preisen und Funktionen, einem Anmeldelink und einem Testbutton | Sempla, Sabrion, Nexis |
| Lokales Dienstleistungsgeschäft | Telefonnummer sichtbar, Buchungsbutton rechts | Zahnmedizin, Plumbiq, Reinigungskraft |
| Gaststätte | Kontakt-Top-Bar und eine Book A Table-Taste | Kulinarisch |
| Online-shop | Such, Warenkorb - und Kontosymbole, Kategorie-Dropdown | Sartivo, Bar Store suchen |
| Agentur oder Klinik mit vielen Seiten | Zwei oder drei Reihen mit Kontaktdaten und einer vollständigen Menüleiste | Dreistufige, medizinische Klinik |
| Portfolio- oder Markenseite | Zentriertes Logo oder eine Menütaste, die die Leiste sauber hält | Zentriertes Logo gestapelt, Menü-Taste |
Beispiele für Website-Header: Was die Guten teilen
- Sie geben dem Besucher einen Hauptknopf Nexis, Finix und Optivue haben jeweils einen einzigen Call-to-Action, und Sempla gestaltet seine zweite Aktion, Login, als einfachen Link, damit die beiden nicht gegeneinander antreten.
- Sie halten das Menü kurz Die meisten Kopfzeilen hier zeigen drei bis sechs Links, und Tecpart legt den Rest seiner Seiten in einem Dropdown für alle Seiten.
- Lokale Unternehmen zeigen eine Telefonnummer an Dental, Cleanery und Plumbiq setzen es in die Kopfzeile, wo ein Kunde, der lieber anrufen möchte, es finden kann, ohne zu scrollen.
- Geschäfte setzen Suche in die Kopfzeile Jedes Shop-Layout hier hat es, und die meisten fügen ein Warenkorb-Symbol daneben hinzu.
- Dunkle Balken verwenden hellen Text und eine umrissene Schaltfläche, wie es Finix und Clowdify tun, sodass beide lesbar bleiben.
Den Header klebrig machen
Eine Kopfzeile, die oben bleibt, während Besucher scrollen, hält das Menü und die Schaltfläche auf langen Seiten in Reichweite. Sie können jede dieser Kopfzeilen klebrig machen, und die Schritte finden Sie in unserem Leitfaden Erstellen eines Sticky-Headers in Elementor. Auf einem Einseitige WebseiteKoppeln Sie den Sticky-Header mit Menülinks, die zu jedem Abschnitt springen.
Kopfzeile, Abschnitt, Seite oder Kit: Welche Vorlage benötigen Sie?
Eine Header-Vorlage deckt einen Teil der Seite ab, wenn Sie auch den Rest bauen, hat dieselbe Bibliothek Elementor-Abschnittvorlagen Für Single-Bands wie Preisgestaltung oder FAQ, voll Elementor-Seitenvorlagen Für vollständige Seiten und Vorlagenkits Das bündelt eine Kopfzeile, eine Fußzeile und jede Seite in einem passenden Stil.
Header, die in der Bibliothek mit Pro gekennzeichnet sind, benötigen eine Master Addons Pro Lizenz, wodurch auch die vollständigen Kits freigeschaltet werden, von denen viele dieser Header stammen.
Häufig gestellte Fragen
Was ist eine Elementor-Header-Vorlage?
Ein vorgefertigter Header-Abschnitt, der als Elementor-Vorlage gespeichert wurde. Es enthält das Logo, das Menü, die Schaltflächen und oft eine obere Leiste, und Sie fügen ihn in einen Theme Builder-Header ein, sodass er auf jeder Seite angezeigt wird.
Wie verwende ich eine Header-Vorlage in Elementor?
Erstellen Sie eine Header-Vorlage in Master-Addons → Theme Builder, öffnen Sie sie in Elementor, fügen Sie ein Design aus der Registerkarte Header der Master-Addons-Vorlagenbibliothek ein, setzen Sie dann die Bedingung auf → Gesamte Site einschließen und speichern.
Benötige ich Elementor Pro, um diese Header-Vorlagen zu verwenden?
Nr. Der Master Addons Theme Builder platziert den Header auf Ihren Seiten und sein Header-Builder ist im Master Addons-Plugin kostenlos, sodass Elementor Pro nicht erforderlich ist.
Funktioniert der Header auf Telefonen?
Öffnen Sie die Live-Demo auf Ihrem Telefon oder schränken Sie Ihr Browserfenster ein, um zu sehen, wie sich das Menü auf einem kleinen Bildschirm verhält, bevor Sie eines auswählen.
Kann ich auf einer Seite einen anderen Header verwenden?
Ja. Erstellen Sie eine zweite Header-Vorlage und stellen Sie deren Bedingung auf Einschließen → Singular → Seiten für diese Seite ein, und schließen Sie die Seite dann aus Ihrem Hauptheader aus.
Warum sehe ich nach dem Import zwei Header?
Ihr Theme druckt immer noch seinen eigenen Header Schalten Sie ihn in den Theme-Einstellungen oder Customizer aus, oder verwenden Sie ein Theme, das seinen Header ausblendet, wenn ein Theme Builder-Header aktiv ist.
Wie viele Header-Vorlagen enthält Master Addons?
Die Registerkarte Kopfzeilen der Master Addons-Vorlagenbibliothek hat 43 Designs, und jedes davon befindet sich auf dieser Seite.
Wählen Sie einen Header aus und legen Sie ihn einmal fest
Beginnen Sie mit der Gruppe, die zu Ihrer Seite passt, und fügen Sie das passende Design ein, wenn Sie Ihre Meinung später ändern, öffnen Sie dieselbe Theme Builder-Vorlage, löschen Sie das alte Design und fügen Sie ein neues ein Die Anzeigebedingungen bleiben so, wie sie sind.
Verwandte Lektüre: So importieren Sie eine Elementor-Vorlage, Elementor-Abschnittvorlagen, Elementorfußvorlagen und Elementoreigener Leitfaden zum Bau eines Headers mit Containern.
