Sie möchten den WordPress Header ausblenden, weil eine Landing Page ohne Menü besser konvertiert oder das Design ohne Kopfzeile ruhiger wirkt.

Dafür gibt es nicht eine Lösung, sondern sechs, und die meisten Anleitungen im Netz empfehlen ausgerechnet die schlechteste davon.

Dieser Artikel geht alle Wege durch, sagt Ihnen bei jedem, wo er scheitert, und zeigt am Ende, was Sie tun, wenn der Header trotzdem noch da ist.

Warum Sie den WordPress Header ausblenden wollen

Der Header ist der obere Bereich Ihrer Website mit Logo, Hauptmenü und oft einem Such-Icon, auf einer normalen Unterseite orientieren sich Besucher daran.

Auf einer Landing Page ist er ein Ausgang, denn jeder Menüpunkt dort oben ist eine Einladung, die Seite zu verlassen, bevor der Besucher das Formular ausgefüllt hat.

Genau deshalb blenden viele Betreiber den Header nicht global aus, sondern gezielt auf einzelnen Seiten.

Erst entscheiden: global oder nur auf einer Seite?

Beide Fälle brauchen unterschiedliche Methoden, und wer das verwechselt, blendet versehentlich den Header der gesamten Website aus.

Global ausblenden betrifft jede einzelne Seite und ergibt eigentlich nur dann Sinn, wenn Sie den Theme-Header durch einen eigenen Header-Builder ersetzen, etwa den Theme Builder von Elementor Pro oder Divi.

Seitenweise ausblenden betrifft nur die Seiten, die Sie ausdrücklich benennen.

Dafür brauchen Sie die Seiten-ID, und die finden Sie in der Adresszeile Ihres Browsers, während Sie die Seite im Backend bearbeiten.

Dort steht ein Abschnitt wie post=42, und 42 ist Ihre ID.

Diese Zahl brauchen Sie bei fast jeder Methode, notieren Sie sie also sofort.

Weg 1: Nachsehen, ob Ihr Theme es schon kann

Bevor Sie CSS schreiben oder ein Plugin installieren, prüfen Sie die Theme-Optionen, denn viele Themes bringen einen fertigen Schalter mit.

Astra zeigt im Seiteneditor in der rechten Seitenleiste die Option „Disable Primary Header“.

OceanWP liefert dieselbe Funktion über das Plugin „Ocean Extra“ nach, GeneratePress, Kadence und Hello Elementor arbeiten nach dem gleichen Prinzip.

Der große Vorteil: diese Einstellung wird in der Datenbank gespeichert, nicht in einer Theme-Datei, und überlebt damit jedes Theme-Update ohne Child-Theme.

Der Nachteil ist ebenso klar.

Ältere oder Nischen-Themes haben diese Option schlicht nicht, und manche Themes erlauben das Ausblenden nur global statt seitenweise.

Weg 2: Den WordPress Header ausblenden im Page Builder

Wer seine Seiten ohnehin mit einem Page Builder baut, ist hier am schnellsten.

Elementor

Elementor bietet zwei Varianten, eine davon kostenlos.

a) Elementor Canvas (kostenlos):

Öffnen Sie die Seite im Editor, klicken Sie in den Seiteneinstellungen auf „Template“ und wählen Sie „Elementor Canvas“.

Damit verschwinden Header, Footer und Sidebar des Themes auf einen Schlag, übrig bleibt ausschließlich Ihr Elementor-Inhalt.

Genau das ist auch der Haken: Canvas entfernt den kompletten Theme-Rahmen, also auch den Footer, den Sie vielleicht behalten wollten.

b) Theme Builder (Elementor Pro):

Gehen Sie auf „Templates“ und dort auf „Theme Builder“, dann auf „Header“.

Über die „Display Conditions“ legen Sie fest, wo dieser Header erscheinen soll, etwa „Show on all pages except“ und dann Ihre Landing Page.

Das ist die granularste Lösung, erfordert aber die bezahlte Pro-Version, denn im kostenlosen Elementor-Editor gibt es keinen Schalter „Header ausblenden“.

Divi

Am schnellsten geht es in Divi über die Page Attributes, wo Sie als Template „Blank Page“ wählen, was Header und Footer gleichzeitig entfernt.

Für strukturierte Fälle nutzen Sie „Divi“ und dort den „Theme Builder“: Sie legen eigene Header-Templates an und weisen sie über „Use On“ und „Exclude From“ einzelnen Seiten oder Kategorien zu, das Auge-Symbol blendet Header und Footer gezielt aus.

Falls Sie in Divi doch mit CSS arbeiten, lautet der Selektor #main-header, seitenspezifisch also .page-id-xxxx #main-header { display: none; }, und dazu lesen Sie bitte den Abschnitt zu display:none weiter unten.

WPBakery

WPBakery hat seit Version 7.0 den „Blank Page Wizard“, der beim Anlegen einer neuen Seite fragt, ob Sie eine „Blank Page“ ohne Header, Footer und Sidebar oder das normale „Theme Layout“ wollen.

Nachträglich ändern Sie das in den Seiteneinstellungen in der Editor-Toolbar.

Ältere WPBakery-Versionen unter 7.0 hatten diese Funktion noch nicht, wenn Sie den Wizard also nicht sehen, prüfen Sie zuerst Ihre Version.

Weg 3: Block-Themes und Full Site Editing

Hier hat sich gegenüber älteren Anleitungen am meisten verändert.

Seit WordPress 5.9 gibt es Block-Themes, und in denen steckt der Header nicht mehr in einer header.php, sondern in einem Template Part namens parts/header.html, der komplett visuell bearbeitet wird.

Was das für Sie bedeutet?

Sie brauchen in einem Block-Theme in der Regel keinen Code mehr, um den Header loszuwerden.

1. Editor öffnen: Klicken Sie im Dashboard auf „Design“ und dann auf „Editor“.
2. Template anlegen: Gehen Sie auf „Templates“, klicken Sie auf das Plus und wählen Sie die Seite aus, für die der Header verschwinden soll.
3. Header-Block entfernen: Löschen Sie im neuen Template den Header-Template-Part oder ersetzen Sie ihn durch einen leeren Block.
4. Speichern: Klicken Sie auf „Speichern“ und bestätigen Sie im Dialog, welche Änderungen übernommen werden sollen.

Übersehen Sie diesen Speichern-Dialog nicht, denn der Site Editor fragt getrennt nach, ob Template und Template Part gesichert werden sollen!

Ein übersehener Haken ist einer der häufigsten Gründe, warum im Frontend nichts passiert.

Der Vorteil dieser Methode: Änderungen im Site Editor landen in der Datenbank und überstehen Theme-Updates, ganz ohne Child-Theme.

Ein Punkt bleibt jedoch heikel, denn viele Page-Builder-Plugins sind mit Block-Themes nicht vollständig kompatibel, Elementor und WPBakery eingeschlossen, prüfen Sie das also vor der Kombination.

Beide Theme-Arten im Überblick:

Aspekt	Klassisches Theme	Block-Theme (FSE)
Header definiert in	header.php	parts/header.html
Bearbeitung über	Customizer, Code	Site Editor
Header ausblenden	CSS, PHP, Template-Datei	Template ohne Header-Part
Code-Kenntnisse nötig	Oft ja	Oft nein
Update-sicher	Nur per Child-Theme	Ja, in der Datenbank gespeichert
Page-Builder-Kompatibilität	Gut	Teils eingeschränkt

Weg 4: CSS, und warum display:none die schlechteste Lösung ist

Die meistzitierte Anleitung im Netz lautet: ab in den Customizer, .site-header { display: none; } eintragen, fertig.

Das funktioniert, und genau deshalb steht es überall, doch Sie sollten wissen, was Sie sich einhandeln.

display: none versteckt den Header ausschließlich optisch.

Im HTML-Quelltext ist er weiterhin vollständig vorhanden, mit allen Menüpunkten, Logo-Tags, Bildpfaden und etwaigem Schema-Markup, wer den Quelltext öffnet, sieht also alles.

Google rendert Seiten mit einem Chromium-basierten System, liest das CSS und verarbeitet display: none.

Laut Googles Spam-Richtlinien wird zwischen legitim verstecktem Inhalt wie Tabs und Akkordeons und versteckten Inhalten zur Manipulation unterschieden, wobei Ersteres verarbeitet, tendenziell aber geringer gewichtet wird als sichtbarer Inhalt.

Für den Header allein ist das SEO-Risiko überschaubar, weil Logo und Navigation keine primären Ranking-Faktoren sind.

Das eigentliche Problem ist technischer Natur.

Google PageSpeed Insights und Lighthouse empfehlen maximal 1.500 DOM-Elemente pro Seite, und ein Header mit Mega-Menü, Logo, Such-Icon und mehreren Navigationsebenen bringt schnell 50 bis 200 davon mit.

Mit display: none sind diese Elemente alle noch da.

Sie verzögern das JavaScript-Parsing, erhöhen den Speicherverbrauch des Browsers und können die Core Web Vitals belasten, vor allem TBT und LCP.

Sie verstecken also Ballast, statt ihn loszuwerden.

Nutzen Sie CSS deshalb als Übergangslösung, nicht als Dauerlösung für jede Landing Page.

Wenn es doch CSS sein muss: den richtigen Selektor finden

Der Selektor .site-header stimmt längst nicht bei jedem Theme, gängig sind außerdem header, #header, #masthead und bei Divi #main-header.

Raten Sie nicht, sondern sehen Sie nach:

1. Inspektor öffnen: Rechtsklick auf den Header im Frontend, dann „Untersuchen“ beziehungsweise „Inspect“.
2. Container identifizieren: Suchen Sie im markierten HTML das äußerste Element, das den gesamten Header umschließt, meist ein <header>-Tag mit Klasse oder ID, und übernehmen Sie diese als Selektor.

Danach tragen Sie den Code unter „Design“ und dann „Zusätzliches CSS“ ein:

/* Global auf der gesamten Website */
.site-header {
  display: none;
}

/* Nur auf der Seite mit der ID 42 */
.page-id-42 .site-header {
  display: none;
}

Die Klasse .page-id-42 kommt von WordPress selbst, denn die Funktion body_class() hängt sie automatisch an das <body>-Tag, Sie müssen also nur die richtige ID einsetzen.

Beachten Sie: Ein Theme-Update kann die Header-Klasse ändern, und dann ist Ihr Header ohne Vorwarnung wieder sichtbar.

Weg 5: functions.php im Child-Theme

Diese Methode versteckt den Header nicht, sie verhindert, dass er überhaupt entsteht: kein HTML, kein DOM-Node, keine Performance-Last und kein Abstandsproblem.

Der Code gehört in die functions.php Ihres Child-Themes:

add_action( 'template_redirect', function() {
    if ( is_page( 42 ) ) {
        add_filter( 'get_header', '__return_false' );
    }
});

Statt is_page( 42 ) setzen Sie den Conditional Tag ein, der zu Ihrem Fall passt:

Tag	Trifft zu auf
is_page( 42 )	Seite mit ID 42
is_page( 'kontakt' )	Seite mit Slug „kontakt“
is_page( array(1,2,3) )	Mehrere Seiten gleichzeitig
is_front_page()	Startseite
is_home()	Blog-Index
is_single()	Alle Beiträge
is_single( 99 )	Beitrag mit ID 99
is_singular( 'produkt' )	Custom Post Type
is_category( 'news' )	Kategoriearchiv
is_tax()	Beliebige Taxonomie

Zwei Einschränkungen sollten Sie kennen.

Erstens funktioniert das nur zuverlässig im Child-Theme, denn im Parent-Theme ist Ihr Code nach dem nächsten Update weg.

Zweitens rufen manche Themes get_header() gar nicht direkt auf, sondern über eigene Hooks, und dann greift der Filter nicht, sodass nur Weg 6 bleibt.

Weg 6: Ein eigenes Page Template

Das ist die sauberste Variante, wenn Sie dauerhaft einen Seitentyp ohne Header brauchen, etwa für alle Landing Pages.

Legen Sie im Verzeichnis Ihres Child-Themes eine Datei page-no-header.php an:

<?php
/**
 * Template Name: Ohne Header
 */
?>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<?php
while ( have_posts() ) :
    the_post();
    the_content();
endwhile;
?>
<?php wp_footer(); ?>
</body>
</html>

get_header() wird hier gar nicht erst aufgerufen, deshalb existiert der Header auf dieser Seite nicht.

wp_head() und wp_footer() löschen Sie dagegen auf keinen Fall heraus, denn über diese beiden Funktionen laden Ihre Plugins ihre Styles und Skripte!

Ohne sie sieht die Seite kaputt aus und Formulare, Analytics oder Cookie-Banner funktionieren nicht mehr.

Nach dem Speichern öffnen Sie eine Seite im Editor und wählen unter „Template“ den Eintrag „Ohne Header“, für jede weitere Seite ist das dann ein Klick.

Welche Plugins sich dafür 2026 eignen

Reine „Header ausblenden“-Plugins gibt es zwar, sie sind aber meistens veraltet und werden nicht mehr gepflegt.

Falls Sie in einer älteren Anleitung noch über das „Hide Header“-Plugin stolpern: Dieser Weg ist überholt, nutzen Sie stattdessen einen Code-Manager, der Ihre CSS- oder PHP-Snippets theme-unabhängig verwaltet.

WPCode (früher „Insert Headers and Footers“) liegt bei Version 2.3.9 mit über 3 Millionen aktiven Installationen und wurde zuletzt vor zwei Wochen aktualisiert.

Es verwaltet PHP-, CSS-, JS- und HTML-Snippets mit Conditional Logic nach Seite, Benutzerrolle, Gerät oder URL.

Damit setzen Sie den Code aus Weg 4 und Weg 5 ein, ohne die functions.php anzufassen, und eine Code-Validierung verhindert, dass ein Tippfehler Ihre Website abschießt.

Der Code liegt in der Datenbank und ist damit update-sicher, auch ohne Child-Theme.

Header Footer Code Manager von DraftPress liegt bei Version 1.1.46, hat über 600.000 aktive Installationen und wurde vor zwei Monaten aktualisiert.

Es läuft ab WordPress 4.9, ist getestet bis WordPress 7.0.4 und erlaubt unbegrenzte Snippets, steuerbar pro Seite, Beitrag, Kategorie, Schlagwort oder Custom Post Type und auf Wunsch nur für Desktop oder nur für Mobil.

Wenn der Header trotzdem noch da ist

Der Header ist weg, aber der Abstand bleibt

Der weiße Streifen dort, wo der Header war, ist der häufigste Ärger nach der CSS-Methode.

Die Ursache liegt fast nie am Header, sondern an einem padding-top am Body oder am Content-Bereich, das einen sticky Header ausgleichen sollte.

Ergänzen Sie Ihr CSS also:

.page-id-42 .site-header { display: none; }
.page-id-42 body { padding-top: 0 !important; }
.page-id-42 .site-content { margin-top: 0 !important; }

Bei Block-Themes sitzt dieser Abstand oft am Header-Template-Part selbst, und dann entfernen Sie ihn im Site Editor statt per CSS.

Im Editor ist der Header weg, im Frontend nicht

Erstens der Cache, denn Ihr Caching-Plugin liefert noch das alte HTML aus.

Zweitens ein falscher Selektor, den Sie im Browser-Inspektor in zehn Sekunden prüfen.

Drittens ein CDN wie Cloudflare, das die alte Version ausliefert, obwohl WordPress längst die neue erzeugt.

Die Änderung ist nach dem Theme-Update verschwunden

Dann wurde die Datei des Parent-Themes bearbeitet und nicht die des Child-Themes.

Bearbeiten Sie functions.php und header.php ausschließlich im Child-Theme, und falls noch keines existiert, reichen als Minimal-Setup eine style.css mit dem passenden Kommentar-Header und eine functions.php.

Wollen Sie sich das sparen, speichern Sie den Code stattdessen in WPCode, denn dort liegt er theme-unabhängig in der Datenbank.

Das Caching-Plugin liefert hartnäckig die alte Version

Arbeiten Sie diese Reihenfolge ab:

1. Gesamten Cache leeren: Im Caching-Plugin den kompletten Cache leeren, nicht nur den für eine einzelne URL. Bei WP Rocket unter „WP Rocket“ und dann „Dashboard“ den Cache leeren. Bei LiteSpeed Cache über „LiteSpeed“ und dann „Purge All“.
2. CSS-Cache separat leeren: Manche Plugins minifizieren und cachen CSS getrennt vom HTML, deshalb reicht das HTML-Leeren allein oft nicht.
3. Browser-Cache leeren: Mit Strg+Shift+R beziehungsweise Cmd+Shift+R neu laden.
4. CDN leeren: Bei Cloudflare unter „Caching“, dann „Configuration“ und dort „Purge Everything“.

Im Block-Theme bleibt der Header trotz gelöschtem Template Part

Neben dem Cache gibt es hier zwei typische Ursachen: Entweder wurde im Site Editor der Speichern-Dialog übersehen, oder es sind mehrere Templates für dieselbe Seite aktiv und das Template mit Header überschreibt das ohne Header.

Prüfen Sie unter „Design“ und „Editor“ in der Template-Liste, welches Template für diese Seite tatsächlich greift.

FAQ

Wie blende ich den Header nur auf einer Seite aus?

Am saubersten über ein eigenes Page Template ohne get_header() oder über einen Conditional Tag wie is_page( 42 ) in der functions.php Ihres Child-Themes.

Ohne Code geht es über die Theme-Option, in Elementor mit dem Canvas-Template, in Divi mit dem Blank-Page-Template und in WPBakery mit dem Blank Page Wizard.

Was ist der Unterschied zwischen Header ausblenden und Header entfernen?

Ausblenden bedeutet display: none, der Header ist also unsichtbar, steht aber vollständig im Quelltext und im DOM.

Entfernen bedeutet, dass er gar nicht erst gerendert wird, etwa über ein Page Template ohne get_header(), und dann existiert er im HTML schlicht nicht.

Ist display:none schlecht für SEO?

Für den Header allein ist das Risiko überschaubar, weil Logo und Navigation keine primären Ranking-Faktoren sind.

Google verarbeitet versteckte Inhalte, gewichtet sie aber tendenziell geringer als sichtbare, und die versteckten Elemente zählen weiterhin zur DOM-Größe, für die Lighthouse maximal 1.500 Elemente empfiehlt.

Warum ist der Abstand nach dem Ausblenden des Headers noch da?

Weil nicht der Header den Abstand erzeugt, sondern ein padding-top am Body oder ein margin-top am Content-Bereich, das einen sticky Header ausgleichen sollte.

Setzen Sie diese Werte für die betroffene Seite zusätzlich auf 0, bei Block-Themes direkt am Template Part im Site Editor.

Warum ist mein WordPress Header nach dem Update wieder sichtbar?

Weil die Anpassung im Parent-Theme lag und überschrieben wurde, oder weil das Update die Header-Klasse geändert hat und Ihr CSS-Selektor nun ins Leere greift.

Arbeiten Sie im Child-Theme oder legen Sie den Code in WPCode ab, dann ist er update-sicher.

Wie entferne ich den Header im Full Site Editor?

Unter „Design“ und „Editor“ ein Template für die Zielseite anlegen, den Header-Template-Part darin löschen und speichern.

Achten Sie dabei auf den Speichern-Dialog, der Template und Template Part getrennt abfragt.

Kann ich den Header ohne Plugin ausblenden?

Ja, über die Theme-Option, über „Zusätzliches CSS“ im Customizer, über die functions.php Ihres Child-Themes oder über ein eigenes Page Template.

Ein Plugin wie WPCode lohnt sich nur, wenn Sie kein Child-Theme anlegen wollen und Ihre Snippets trotzdem update-sicher speichern möchten.

Und wenn nichts davon greift

Steht der Header nach Theme-Option, Page Builder, CSS und Child-Theme immer noch, arbeitet Ihr Theme vermutlich mit eigenen Hooks statt mit get_header().

Dann bleibt das eigene Page Template, weil dort nichts aufgerufen wird, was einen Header erzeugen könnte.

Und deaktivieren Sie testweise alle Caching-Ebenen, bevor Sie weitersuchen, denn oft war die Lösung längst korrekt und nur nicht sichtbar.

Sie haben es geschafft!

Wie Sie Ihre Seiten konsequent auf Ihre Besucher ausrichten, lesen Sie in unserem Beitrag zu Customer Centricity.

Welche Werkzeuge Ihnen bei der weiteren Optimierung helfen, zeigen wir Ihnen in unserer Übersicht zu SEO-Tools.

Sie möchten das nicht selbst umsetzen? Wir übernehmen das für Sie, mehr dazu auf unserer Seite Website erstellen lassen.