Wie man Header und Footer mit Elementor in WordPress bearbeitet

Elementor ist ein visueller Seitenersteller für WordPress, mit dem Sie benutzerdefinierte Kopf- und Fußzeilen über eine Drag-and-Drop-Oberfläche gestalten, ersetzen und verwalten können – ohne PHP-Template-Bearbeitung oder Child-Theme. Die zwei primären Methoden sind der Elementor Pro Theme Builder, der Kopf- und Fußzeilen-Templates nativ verwaltet, und das kostenlose Plugin Elementor Header & Footer Builder, das diese Funktionalität für Nutzer der kostenlosen Version repliziert.

Beide Methoden fügen Ihr benutzerdefiniertes Template in die Template-Hierarchie von WordPress ein, indem sie die Standard-Ausgabe header.php und footer.php des Themes überschreiben. Das Verständnis dieses Unterschieds ist wichtig, wenn Sie Konflikte mit Ihrem aktiven Theme oder Ihrer Caching-Schicht debuggen.

Voraussetzungen vor dem Start

Bevor Sie ein Template bearbeiten, überprüfen Sie Folgendes:

• Ihre WordPress-Installation läuft auf Version 6.0 oder höher (Elementors Mindestanforderung gemäß aktueller stabiler Releases).
• Sie haben ein Child-Theme aktiv, wenn Ihr übergeordnetes Theme eine eigene Kopf-/Fußzeilen-Logik mitbringt. Das direkte Bearbeiten eines übergeordneten Themes führt dazu, dass Änderungen beim nächsten Theme-Update verloren gehen.
• Das PHP-Speicherlimit ist auf mindestens 256 MB gesetzt. Elementors Editor ist speicherintensiv, und ein niedriges Limit verursacht stille Speicherfehler. Überprüfen Sie wp-config.php oder die php.ini Ihres Servers.
• Sie haben vor dem Testen von Änderungen jeden vollständigen Seiten-Cache geleert. Gecachtes HTML liefert den alten Kopf-/Fußbereich, unabhängig davon, was Sie in Elementor gespeichert haben.

Wenn Ihre WordPress-Website in einer VPS Hosting-Umgebung läuft, haben Sie direkten Zugriff auf php.ini und können memory_limit = 256M festlegen, ohne sich auf ein Hosting-Kontrollpanel verlassen zu müssen.

Methode 1: Elementor Pro Theme Builder

Elementor Pros Theme Builder ist die kanonische, vollständig unterstützte Lösung. Er bietet Ihnen granulare Anzeigebedingungen, dynamische Inhalts-Tags und direkte Integration mit WooCommerce-Elementen.

Schritt 1: Elementor Pro installieren und aktivieren

Kaufen Sie Elementor Pro auf der offiziellen Elementor-Website. Sie erhalten eine ZIP-Datei und einen Lizenzschlüssel.

Navigieren Sie in Ihrem WordPress-Dashboard zu Plugins > Neu hinzufügen > Plugin hochladen. Wählen Sie die ZIP-Datei aus, klicken Sie auf Jetzt installieren und dann auf Aktivieren. Gehen Sie nach der Aktivierung zu Elementor > Lizenz und verbinden Sie Ihren Lizenzschlüssel. Sowohl das kostenlose Elementor-Core-Plugin als auch Elementor Pro müssen gleichzeitig aktiv sein – Pro ist ein Add-on, kein eigenständiges Plugin.

Schritt 2: Den Theme Builder öffnen

Navigieren Sie zu Templates > Theme Builder. Die Oberfläche ist in Abschnitte unterteilt: Header, Footer, Single, Archive, Search Results und Error 404. Jeder Abschnitt kann mehrere Templates mit unterschiedlichen Anzeigebedingungen enthalten, was es Ihnen ermöglicht, auf Landing Pages einen anderen Header als bei Blog-Beiträgen anzuzeigen.

Schritt 3: Das Header-Template erstellen oder bearbeiten

Klicken Sie auf den Tab Header und dann auf Neu hinzufügen. Ein Modal fordert Sie auf, das Template zu benennen (zum Beispiel Main Header) und optional einen vorgefertigten Block aus Elementors Template-Bibliothek auszuwählen.

Im Elementor-Canvas sind die am häufigsten verwendeten Widgets für einen Header:

• Site Logo – ruft das unter Darstellung > Anpassen > Website-Identität festgelegte Logo ab und hält es mit dem WordPress-Core synchron.
• Nav Menu – verweist auf jedes unter Darstellung > Menüs registrierte Menü. Sie können Hover-Zustände, Dropdowns und das Verhalten des mobilen Hamburger-Menüs direkt in den Widget-Einstellungen gestalten.
• Search Form – fügt eine Live-Sucheingabe hinzu. Für Pro-Nutzer kann diese mit benutzerdefinierten Beitragstypen verknüpft werden.
• Button – nützlich für CTA-Elemente wie „Angebot anfordern” oder Login-Links.
• Cart (WooCommerce) – zeigt ein dynamisches Warenkorb-Symbol mit Artikelanzahl an, wenn WooCommerce aktiv ist.

Kritischer Fallstrick: Wenn Sie einen Section (oder Container im Flexbox-Modus) ziehen und seine Breite auf Full Width setzen, erstreckt sich der Header-Hintergrund korrekt über den Viewport. Wenn Sie ihn bei Boxed belassen, endet die Hintergrundfarbe an der Inhaltsbreite und lässt den rohen Seitenhintergrund an den Seiten sichtbar – ein häufiger visueller Fehler, der neuen Nutzern unterläuft.

Schritt 4: Den klebrigen Header konfigurieren

Um den Header beim Scrollen oben im Viewport zu fixieren:

1. Klicken Sie auf den Abschnitt/Container, der Ihr gesamtes Header-Layout umschließt.
2. Öffnen Sie den Tab Erweitert im linken Panel.
3. Aktivieren Sie unter Bewegungseffekte die Option Sticky und setzen Sie sie auf Oben.
4. Legen Sie optional einen Sticky On-Breakpoint fest, um die Sticky-Funktion auf Mobilgeräten zu deaktivieren, wo sie zu viel vertikalen Bildschirmplatz beansprucht.

Sonderfall: Sticky-Header interagieren schlecht mit der WordPress-Adminleiste, wenn ein Nutzer eingeloggt ist. Die Adminleiste fügt oben einen Versatz von 32px hinzu. Elementor behandelt dies in den meisten Fällen automatisch, aber wenn Sie einen benutzerdefinierten z-index auf dem Sticky-Abschnitt verwenden, überprüfen Sie, ob er die Adminleiste nicht überlappt, indem Sie den Test im eingeloggten Zustand durchführen.

Schritt 5: Anzeigebedingungen für den Header festlegen

Nach dem Klicken auf Veröffentlichen fordert Elementor Sie sofort auf, Anzeigebedingungen zu definieren. Dies ist eine der leistungsstärksten und am häufigsten missverstandenen Funktionen.

Sie können mehrere Bedingungen mit Einschließen– und Ausschließen-Regeln kombinieren. Zum Beispiel: die gesamte Website einschließen, aber die Checkout-Seite ausschließen – ein gängiges Muster für WooCommerce-Shops, die einen ablenkungsfreien Checkout-Header wünschen.

Klicken Sie auf Speichern & Schließen, wenn Sie fertig sind.

Schritt 6: Das Footer-Template erstellen oder bearbeiten

Der Footer-Workflow spiegelt den Header-Workflow genau wider. Klicken Sie im Theme Builder auf den Tab Footer und dann auf Neu hinzufügen.

Häufige Footer-Widgets und Layout-Muster:

• Text Editor– oder Heading-Widget für Copyright-Hinweise. Verwenden Sie den dynamischen Tag [current_year] über Elementors dynamisches Inhaltssystem, um das Jahr nicht manuell aktualisieren zu müssen.
• Icon List– oder Social Icons-Widget für Social-Media-Links.
• Nav Menu-Widget für eine sekundäre Footer-Navigation (Datenschutzrichtlinie, Nutzungsbedingungen, Sitemap-Links).
• Image-Widget für Zahlungsabzeichen oder Vertrauenssiegel.
• Shortcode-Widget zum Einbetten von Ausgaben aus Drittanbieter-Plugins (z. B. ein Cookie-Consent-Shortcode).

Legen Sie Anzeigebedingungen nach derselben Logik wie beim Header fest und klicken Sie dann auf Speichern & Schließen.

Methode 2: Elementor Header & Footer Builder (Kostenlos)

Wenn Sie die kostenlose Elementor-Version nutzen, bietet das Plugin Elementor Header & Footer Builder von Brainstorm Force nahezu identische Funktionalität, ohne eine Pro-Lizenz zu erfordern.

Schritt 1: Das Plugin installieren

Gehen Sie zu Plugins > Neu hinzufügen, suchen Sie nach Elementor Header & Footer Builder und installieren Sie das Plugin von Brainstorm Force (überprüfen Sie den Autor – es gibt ähnlich benannte Plugins). Klicken Sie auf Aktivieren.

Kompatibilitätshinweis: Dieses Plugin funktioniert mit den meisten gängigen Themes, erfordert jedoch, dass Ihr aktives Theme die Hooks header.php und footer.php unterstützt. Themes, die vollständig auf blockbasiertem Full Site Editing (FSE) aufgebaut sind – wie Twenty Twenty-Three und Twenty Twenty-Four – verwenden ein anderes Template-System und reagieren möglicherweise nicht auf die Injektionsmethode dieses Plugins. Wechseln Sie in diesem Fall entweder zu einem klassischen Theme wie Astra, GeneratePress oder Hello Elementor, oder upgraden Sie auf Elementor Pro.

Schritt 2: Ein Header-Template erstellen

Navigieren Sie zu Darstellung > Elementor Header & Footer Builder und klicken Sie auf Neu hinzufügen.

Im Template-Erstellungs-Modal:

• Setzen Sie den Typ auf Header.
• Geben Sie ihm einen beschreibenden Namen.
• Klicken Sie auf Template erstellen.

Sie werden in den Standard-Elementor-Editor weitergeleitet. Der Designprozess ist identisch mit Elementor Pro – verwenden Sie dieselben Widgets (Site Logo, Nav Menu, Button usw.).

Schritt 3: Anzeigeregeln zuweisen

Scrollen Sie nach dem Veröffentlichen im WordPress-Bearbeitungsbildschirm des Templates (nicht im Elementor-Canvas) nach unten, um die Meta-Box Anzeigeregeln zu finden. Diese ist von Elementor Pros Anzeigebedingungen-Modal getrennt und funktioniert über Standard-WordPress-Post-Meta.

Optionen umfassen:

• Gesamte Website
• Bestimmte Seiten (einzeln ausgewählt)
• Alle einzelnen Seiten
• Alle Archivseiten

Das Anzeigeregelsystem des kostenlosen Plugins ist weniger granular als das von Elementor Pro – Sie können nicht nach Nutzer-Login-Status, benutzerdefinierten Beitragstyp-Archiven oder Ausschlussregeln filtern. Für die meisten kleinen Websites ist dies ausreichend.

Schritt 4: Ein Footer-Template erstellen

Kehren Sie zu Darstellung > Elementor Header & Footer Builder zurück, klicken Sie auf Neu hinzufügen und setzen Sie den Typ auf Footer. Der Design- und Anzeigeregel-Zuweisungsprozess ist identisch mit dem oben beschriebenen Header-Workflow.

Vergleich: Elementor Pro Theme Builder vs. Kostenloses Plugin

Erweiterte Anpassungstechniken

Responsives Header- und Footer-Design

Elementors Editor verfügt über drei Viewport-Modi, die über Symbole am unteren Rand des Canvas zugänglich sind: Desktop, Tablet und Mobil. Jede Abstands-, Schriftgröße- und Sichtbarkeitseinstellung kann pro Breakpoint überschrieben werden.

Praktischer Workflow:

1. Gestalten Sie zunächst das Desktop-Layout.
2. Wechseln Sie zur Tablet-Ansicht und passen Sie Spalten-Stacking, Schriftgrößen und Abstände an.
3. Wechseln Sie zur Mobil-Ansicht. Blenden Sie sekundäre Navigationselemente über Erweitert > Responsiv > Auf Mobil ausblenden aus. Ersetzen Sie das vollständige Navigationsmenü durch einen Hamburger-Toggle, indem Sie den Breakpoint des Nav-Menu-Widgets auf Mobile setzen.

Verwenden Sie niemals dieselben Abstandswerte für alle Breakpoints. Ein 40px oben/unten Abstand auf dem Desktop wirkt auf einem 375px breiten Smartphone-Bildschirm beengend. Setzen Sie den mobilen Abstand auf 15px oder 20px.

Einen transparenten oder scroll-ausgelösten Header hinzufügen

Ein gängiges Designmuster ist ein transparenter Header über einem Hero-Bild, der beim Scrollen undurchsichtig wird. Elementor Pro handhabt dies über die Sticky-Einstellungen in Kombination mit einem Scroll-Effekt:

1. Setzen Sie den Hintergrund des Header-Abschnitts auf None (transparent).
2. Aktivieren Sie Sticky unter Bewegungseffekte.
3. Aktivieren Sie unter den Sticky-Einstellungen Transparenzeffekte und legen Sie die Hintergrundfarbe im gescrollten Zustand fest.

Für das kostenlose Plugin benötigen Sie benutzerdefiniertes CSS. Fügen Sie Folgendes zu Darstellung > Anpassen > Zusätzliches CSS hinzu:

/* Transparent header on load */
.hfe-header {
    background-color: transparent !important;
    transition: background-color 0.3s ease;
}

/* Solid header after scroll — requires a JS class toggle */
.hfe-header.scrolled {
    background-color: #ffffff !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

Fügen Sie dann ein kleines JavaScript-Snippet über ein Plugin wie Code Snippets hinzu:

window.addEventListener('scroll', function () {
    const header = document.querySelector('.hfe-header');
    if (window.scrollY > 50) {
        header.classList.add('scrolled');
    } else {
        header.classList.remove('scrolled');
    }
});

Dynamische Tags im Footer verwenden (Pro)

Elementor Pros dynamische Tags ermöglichen es Ihnen, Live-Daten in Footer-Text einzufügen, ohne Werte fest zu kodieren. Der praktischste Anwendungsfall ist das Copyright-Jahr:

1. Fügen Sie ein Text Editor-Widget zu Ihrem Footer hinzu.
2. Klicken Sie auf das dynamische Tag-Symbol (das Datenbank-Symbol) neben dem Textfeld.
3. Wählen Sie Website > Aktuelles Jahr.

Die Ausgabe wird als aktuelles vierstelliges Jahr dargestellt und aktualisiert sich automatisch am 1. Januar – keine manuellen Bearbeitungen erforderlich. Sie können statischen Text und dynamische Tags im selben Widget kombinieren: © [dynamic: Current Year] Your Company Name. All rights reserved.

Leistungsüberlegungen

Benutzerdefinierte Elementor-Header und -Footer laden auf jeder Seite zusätzliches CSS und JavaScript. Überprüfen Sie die Auswirkungen:

• Verwenden Sie das Plugin Query Monitor, um zu überprüfen, wie viele Datenbankabfragen Ihr Header-Template pro Seitenaufruf hinzufügt.
• Führen Sie ein Lighthouse-Audit vor und nach der Aktivierung des benutzerdefinierten Headers durch. Ein schlecht strukturierter Header mit nicht optimierten Bildern kann 200–400ms zum Largest Contentful Paint (LCP) hinzufügen, wenn das Logo-Bild nicht ordnungsgemäß skaliert oder im WebP-Format bereitgestellt wird.
• Wenn Sie ein CDN verwenden, leeren Sie den CDN-Cache nach jedem Header-/Footer-Update. Veraltete CDN-Knoten liefern weiterhin das alte Template-HTML.

In einer VPS mit cPanel-Umgebung können Sie Object-Caching mit Redis oder Memcached konfigurieren, um den Datenbankabfrage-Overhead zu reduzieren, den Elementors Template-Auflösung bei jeder Anfrage hinzufügt.

Häufige Probleme beheben

Header wird nach dem Veröffentlichen nicht angezeigt:

Die häufigste Ursache ist eine fehlende oder widersprüchliche Anzeigebedingung. Gehen Sie zu Templates > Theme Builder > Header, öffnen Sie das Template, klicken Sie auf Veröffentlichen und überprüfen Sie, ob die Anzeigebedingungen die Seite einschließen, die Sie testen. Überprüfen Sie auch, ob Ihr aktives Theme keinen fest kodierten get_header()-Aufruf enthält, der Elementors Hook umgeht.

Footer überlappt den Seiteninhalt:

Dies bedeutet normalerweise, dass der Abschnitt des Footer-Templates einen negativen oberen Rand hat oder der Haupt-Inhalts-Wrapper des Themes keinen unteren Abstand hat. Untersuchen Sie das Element in den Browser-DevTools und identifizieren Sie, welche CSS-Regel die Überlappung verursacht.

Elementor-Editor lädt nicht (weißer Bildschirm oder Ladekreis):

Erhöhen Sie das PHP-Speicherlimit vorübergehend auf 512 MB zur Diagnose. Deaktivieren Sie außerdem alle Plugins außer Elementor Core und Pro und aktivieren Sie sie dann einzeln wieder, um einen Konflikt zu identifizieren.

Sticky-Header springt auf Mobilgeräten:

iOS Safari hat bekannte Probleme mit position: sticky und dynamischen Viewport-Höhenänderungen, die durch das Erscheinen/Verschwinden der Browser-Oberfläche beim Scrollen verursacht werden. Verwenden Sie position: fixed mit einem kompensierenden padding-top am Seiten-Body als Workaround, oder setzen Sie die Sticky-Option auf Desktop-only.

Benutzerdefinierter Header erscheint nicht auf WooCommerce-Seiten:

WooCommerce registriert eigene Seitentypen (Shop, Warenkorb, Checkout, Mein Konto). In Elementor Pros Anzeigebedingungen müssen Sie WooCommerce > Shop Page oder WooCommerce > All WooCommerce Pages explizit einschließen – sie werden in einigen Theme-Konfigurationen nicht durch die generische Bedingung „Gesamte Website” abgedeckt.

Hosting-Umgebung und Leistung

Die Leistung Ihres mit Elementor erstellten Headers und Footers ist direkt mit der Antwortzeit Ihres Servers verknüpft. Elementor speichert Template-Daten als Post-Meta in der WordPress-Datenbank und generiert CSS-Dateien auf dem Server. Bei Shared Hosting mit begrenztem I/O kann die CSS-Regenerierung nach einem Template-Update still ablaufen und Ihre Website mit veralteten Styles zurücklassen.

Für WordPress-Produktionswebsites, die Elementor verwenden, bietet eine VPS Hosting-Umgebung mit mindestens 2 CPU-Kernen und 4 GB RAM den nötigen Spielraum für reibungslose Editor-Leistung und schnelle CSS-Generierung. Wenn Sie einen WooCommerce-Shop mit benutzerdefiniertem Header und Footer betreiben, eliminieren Dedizierte Server den Ressourcenwettbewerb vollständig.

Unabhängig von Ihrem Hosting-Tarif sollten Sie Ihre WordPress-Installation immer mit einem gültigen SSL-Zertifikat kombinieren. Mixed-Content-Warnungen – ausgelöst, wenn HTTP-Assets innerhalb einer HTTPS-Seite geladen werden – beschädigen Elementors Editor-Oberfläche und führen dazu, dass Assets in Ihrem Header (Logos, Icons) in einigen Browsern nicht geladen werden.

Entscheidungsmatrix: Welche Methode sollten Sie verwenden?

Praktische Checkliste vor dem Go-Live

• Überprüfen Sie, ob die Anzeigebedingungen alle beabsichtigten Seitentypen abdecken, einschließlich 404- und Suchergebnisseiten.
• Testen Sie Header und Footer auf einem echten Mobilgerät, nicht nur in der Browser-DevTools-Emulation.
• Stellen Sie sicher, dass das Logo ein WebP-Bild verwendet und explizite width– und height-Attribute im Image-Widget gesetzt sind, um Layout-Verschiebungen (CLS) zu verhindern.
• Überprüfen Sie, ob alle Navigationsmenü-Links nach der Veröffentlichung des Templates korrekt aufgelöst werden.
• Leeren Sie alle Caching-Schichten: serverseitigen Cache, CDN-Cache und Browser-Cache.
• Führen Sie Lighthouse auf Desktop und Mobil aus, um sicherzustellen, dass keine LCP- oder CLS-Regressionen auftreten.
• Wenn Sie Elementor Pro dynamische Tags verwenden, überprüfen Sie, ob diese die korrekte Ausgabe anzeigen, wenn sie als ausgeloggter Nutzer betrachtet werden.
• Bestätigen Sie, dass der dynamische Tag für das Copyright-Jahr im Footer aktiv und nicht fest kodiert ist.
• Testen Sie das Sticky-Header-Verhalten mit sichtbarer WordPress-Adminleiste (eingeloggter Zustand).
• Überprüfen Sie, ob WooCommerce-Seiten (falls zutreffend) durch die korrekte Anzeigebedingung abgedeckt sind.

FAQ

Kann ich Elementor verwenden, um Header und Footer ohne Elementor Pro zu bearbeiten?

Ja. Installieren Sie das kostenlose Plugin Elementor Header & Footer Builder von Brainstorm Force. Es integriert sich in den kostenlosen Elementor-Editor und ermöglicht es Ihnen, benutzerdefinierte Header und Footer mit Anzeigeregeln zu gestalten, allerdings mit weniger Targeting-Optionen als Elementor Pros Theme Builder.

Warum wird mein Elementor-Header nach dem Veröffentlichen nicht auf meiner WordPress-Website angezeigt?

Die häufigste Ursache ist eine nicht konfigurierte oder falsche Anzeigebedingung. Öffnen Sie das Template im Theme Builder, klicken Sie auf Veröffentlichen und stellen Sie sicher, dass die Anzeigebedingung mindestens auf Gesamte Website oder den spezifischen Seitentyp gesetzt ist, den Sie ansprechen. Überprüfen Sie auch, ob kein Theme-seitiger Header in den Template-Dateien eines übergeordneten Themes fest kodiert ist.

Ersetzt Elementors benutzerdefinierter Header den Standard-Header des Themes?

Ja. Wenn eine Anzeigebedingung zutrifft, hängt sich Elementor in elementor/theme/before_do_header ein und ersetzt die get_header()-Ausgabe des Themes vollständig. Das ursprüngliche header.php des Themes wird für diese Seiten umgangen.

Verlangsamt ein benutzerdefinierter Elementor-Header meine Website?

Das kann er, wenn er nicht optimiert ist. Elementor lädt pro Template eine eigene CSS-Datei. Stellen Sie sicher, dass das Logo ein komprimiertes WebP-Bild ist, vermeiden Sie das Laden unnötiger Widgets und aktivieren Sie Elementors Option Verbessertes Asset-Laden unter Elementor > Einstellungen > Erweitert, um nur das CSS für tatsächlich auf jeder Seite verwendete Widgets zu laden.

Kann ich in WordPress mit Elementor verschiedene Header für verschiedene Seiten haben?

Ja, mit Elementor Pro. Erstellen Sie mehrere Header-Templates und weisen Sie jedem eine spezifische Anzeigebedingung zu – zum Beispiel einen Header für die Homepage, einen anderen für Blog-Beiträge und einen minimalen Header für die Checkout-Seite. Der Pro Theme Builder wertet Bedingungen in Prioritätsreihenfolge aus, sodass spezifischere Bedingungen allgemeinere überschreiben.