Aktualisiert - 23. September 2026
Elementor-Header-Vorlagen für jede Art von Website
43 fertige Elementor-Header aus der Master Addons Bibliothek, sortiert nach der Art der Seite, die sie passen: SaaS Produkte, lokale Service-Unternehmen, Online-Shops, kontaktlastige Mehrzeilen-Layouts und Minimalmenüs Öffnen Sie jede Karte, um den Live-Header in einem neuen Tab auszuprobieren, dann fügen Sie ihn aus dem Reiter Header der Master Addons Vorlagenbibliothek ein und zeigen Sie ihn mit dem Theme Builder auf Ihrer gesamten Seite an.
Bewertet mit 4,5 von 5 von 212 WordPress.org-Rezensenten30.000+ Standorte aktiv
SaaS- und Tech-Elementor-Header-Vorlagen
Header aus dem SaaS und Tech-Kits Die meisten folgen einem Muster: Logo links, vier oder fünf Links, und rechts eine Probe - oder Demo-Taste Finix, Clowdify und Techbyte verwenden dunkle Balken, und Lead Lift sitzt auf einem cremefarbenen.
Header-Vorlagen für Unternehmen und lokale Dienste
Kopfzeilen für Reinigungsfirmen, Zahnärzte, Klempner, Therapiekliniken, 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.
E-Commerce- und Shop-Header-Vorlagen
Store-Header mit Such-, Warenkorb- und Kontosymbolen. Sartivo öffnet einen Shop-nach-Kategorie-Dropdown und zwei der Layouts platzieren ein Verkaufsangebot oder einen Aktionslink im Header selbst.
Top-Bar- und Multi-Row-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.
Adressleistenkopfzeile
Kostenlos
Abgewinkelter Menü-Header
Kostenlos
Kontakt Info Header mit Suche
Kostenlos
Leiter der Kreativagentur
Kostenlos
Schwimmende Menü-Header
Kostenlos
Beginnen Sie mit der Kontaktleisten-Header
Kostenlos
Kopfzeile der Medizinischen Klinik
Kostenlos
Dreireihige zentrierte Kopfzeile
Kostenlos
Kopfzeile für Besuche, Anrufe und Post
KostenlosMinimale, zentrierte und Menü-Knopf-Header
Einzeilige und ungewöhnliche Layouts, darunter ein Menü, das um ein zentriertes Logo herum aufgeteilt ist, eine Leiste mit einer einzigen Menüschaltfläche, ein gestapeltes zentriertes Logo und einige schlichte Logo- und Links-Balken.
Was ist eine Elementor-Header-Vorlage?
Eine Elementor-Header-Vorlage ist ein als Elementor-Vorlage gespeicherter vorgefertigter Header-Abschnitt (Logo, Navigationsmenü, Buttons und oft eine obere Leiste), den Sie in einen Theme Builder-Header einfügen, in Ihrem Logo und Ihren Links austauschen und er erscheint oben auf jeder von Ihnen gewählten Seite.
Eine Seitenvorlage ändert eine Seite Eine Headervorlage ändert jede Seite auf einmal, so dass es in der Regel das erste ist, was auf einer neuen Elementor-Site eingerichtet wird, direkt nach den globalen Farben und Schriftarten.
Was eine Header-Vorlage normalerweise beinhaltet
| Teil | Was es tut |
|---|---|
| Logo | Links zurück zur Startseite Ersetzen Sie das Demo-Logo durch Ihr eigenes Bild oder Ihren eigenen Seitentitel. |
| Navigationsmenü | Ihre Hauptseiten, mit Dropdowns, wo das Design sie hat. |
| Call-to-action-taste | Eine Hauptaktion, wie z. B. kostenlose Testversion starten, einen Termin buchen oder ein Angebot erhalten. |
| Obere Leiste | Telefon, E-Mail, Adresse, Öffnungszeiten oder soziale Symbole über der Hauptzeile. |
| Hilfssymbole | Such, Warenkorb, Wunschliste oder Kontosymbole, meist auf den Shop-Headern. |
So fügen Sie Ihrer Website eine Header-Vorlage hinzu
Der Master Addons Theme Builder platziert den Header, sodass Sie hierfür kein Elementor Pro benötigen.
- 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, richten Sie das Menü auf Ihr eigenes WordPress-Menü und ändern Sie den Schaltflächentext und den Link.
- Öffnen Sie die Bedingungen Tab, eingestellt Einschließen > Gesamte Website 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 Screenshot für jeden Schritt hat, einschließlich wie man eine Seite ausschließt oder einer Landingpage einen eigenen Header gibt.
Welches Header-Layout passt zu Ihrer Website?
| 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 |
| Restaurant | Kontakt-Top-Bar und eine Book A Table-Taste | Kulinarisch |
| Online-shop | Such, Warenkorb - und Kontosymbole, Kategorie-Dropdown | Sartivo, Bar Store-Header suchen |
| Agentur oder Klinik mit vielen Seiten | Zwei oder drei Reihen mit Kontaktdaten und einer vollständigen Menüleiste | Dreireihige zentrierte Kopfzeile, medizinische Klinikkopfzeile |
| Portfolio- oder Markenseite | Zentriertes Logo oder eine Menütaste, die die Leiste sauber hält | Zentrierter Logo-Stacked-Header, Menü-Tasten-Header |
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.
Klebeköpfe
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.
Pro-Header-Vorlagen
Karten mit der Kennzeichnung PRO benötigen eine Master Addons Pro Lizenz.18 der 43 Header sind Pro, einschließlich der Header aus den neueren Kits wie Cleanery, Finix, Nexis und Sartivo Dieselbe Lizenz sperrt die vollständigen Seitenvorlagen frei, von denen diese Header stammen Vorlagenkits Seite.
Wählen Sie eine Kopfzeile aus und stellen Sie sie einmal ein
Wählen Sie die Kategorie, die zu Ihrer Seite passt, öffnen Sie zwei oder drei Live-Demos nebeneinander und fügen Sie die passende ein. Nachdem die Theme Builder-Bedingung festgelegt ist, nimmt jede Seite den neuen Header auf und Sie bearbeiten ihn nur an einer Stelle.
Elementor-Header-Vorlagen: 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 Einschließen > Gesamte Site und speichern.
Benötige ich Elementor Pro, um diese Header-Vorlagen zu verwenden?
Nein. Der Master Addons Theme Builder platziert den Header auf Ihren Seiten, 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, die alle auf dieser Seite angezeigt werden.