Das Credo von WordPress lautet, dass jeder eine Webseite erstellen kann, und das stimmt auch. Aber das bedeutet nicht, dass jeder mit Leichtigkeit alles erreichen kann, was er will. Es gibt einige Optionen, die in den WordPress-Funktionen oder -Themes nicht standardmäßig vorhanden oder nur schwer zu finden sind. Das Ausblenden des Headers einer Seite ist oft eine davon.
In diesem Tutorial zeigen wir Ihnen, wie Sie einen Header in WordPress ausblenden können. Es gibt mehrere Möglichkeiten, dies zu tun, und wir werden unser Bestes tun, um alle davon abzudecken. Einige der Lösungen werden themen- oder Page Builder-spezifisch sein, während andere allgemeiner sind, also scrollen Sie ruhig nach unten zu dem Abschnitt, den Sie benötigen.
Hier ist, worüber wir sprechen werden:
- Wie man die Theme-Einstellungen verwendet, um den Header mit Gutenberg auszublenden
- Wie man die Theme-Einstellungen verwendet, um den Header mit Elementor auszublenden
- Wie man mit CSS den Header ausblendet
Inhalt
Wie man die Theme-Einstellungen verwendet, um den Header mit Gutenberg auszublenden
Wenn du den Header für eine beliebige Seite auf deiner Webseite ausblenden möchtest, solltest du als erstes prüfen, ob dein Theme eine eingebaute Option zum Ausblenden des Headers für jede Seite hat. Wir zeigen Ihnen, wie das bei unserem kostenlosen Qi-Theme mit dem Gutenberg-Seiteneditor funktioniert, aber die Option kann bei verschiedenen Themes an unterschiedlichen Stellen erscheinen.
Zu Beginn erstellen wir eine Seite wie jede andere Seite, geben ihr einen Titel und füllen sie mit einem zufällig generierten lorem ipsum Text, aber das ist nicht so wichtig.
Viele Themes haben einen Befehl oder eine Option, mit der der Header einer Seite einfach ausgeblendet werden kann. Unseres hat das nicht, aber es gibt eine Abhilfe: die Landing Page-Vorlage. Landing Pages enthalten in der Regel keine Header, und wenn Ihr Theme eine Landing Page-Vorlage enthält, ist es sehr wahrscheinlich, dass es sich um eine Seitenvorlage ohne Header handelt.
Für unsere Demonstration werden wir das Layout der Seite in Qi Landing ändern, indem wir es aus dem Modell Menü auswählen und auf Veröffentlichen klicken. Das gewünschte Steuerelement befindet sich im Menü auf der rechten Seite.
Auf einer Webseite enthält eine Landing Page in der Regel keinen Header, weshalb auch das Qi Landing Seitenlayout keinen Header verwendet. Wenn Sie nicht das Qi-Theme verwenden, ist es wahrscheinlich, dass es ein Layout gibt, das das Wort „Landing“ enthält und keinen Header hat. So sieht unsere (sehr minimale) Seite aus:
Natürlich kann es sein, dass diese Art von Layout bei Ihnen nicht funktioniert. Nein, keine Sorge: Ihr Theme könnte ein ganz anderes Layout verwenden, und selbst wenn es sehr ähnlich ist, können Sie CSS verwenden, um den Header allein zu entfernen.
Auch lesen:
- Yoast SEO Plugin Erfahrungen & Anleitung
- Elementor Erfahrungen: Das Page Builder Plugin im Test
- Die besten Amazon Affiliate WordPress Plugins
Wie man die Theme-Einstellungen verwendet, um den Header mit Elementor auszublenden
Wenn Sie den Elementor-Seiteneditor verwenden, können Sie immer noch den gleichen Workaround wie oben beschrieben verwenden. Elementor behält die gewünschten Einstellungen in den Registerkarten für die Seiteneinstellungen bei, obwohl es Themes geben kann, die mit Elementor anders funktionieren. Um auf die Seitenlayout-Steuerungen zuzugreifen, klicken Sie auf das Getriebe -Symbol in der unteren rechten Ecke des Bildschirms und suchen Sie den Einstellungen -Tab des Seiteneinstellungen -Menüs.
Aus dem Seitenlayout Menü im Allgemeine Einstellungen Abschnitt des Tabs, wählen Sie das Qi Landing Layout. Wie wir bereits im vorherigen Abschnitt erwähnt haben, kann es sein, dass Sie, wenn Sie nicht unser Qi-Theme verwenden, einen anderen Namen für ein Layout ohne Header haben. Es besteht jedoch eine gute Chance, dass ein Landing Page-Layout keinen Header enthält.
Unsere Elementor-Vorschau sieht ähnlich aus wie unsere Gutenberg-Vorschau-Seite:
Abhängig von der Bildschirmbreite erhält man genau dieses Ergebnis.
Mit CSS den Header ausblenden
Unabhängig davon, welches Theme oder welchen Seiteneditor Sie verwenden, gibt es eine Möglichkeit, die eingebauten Funktionen von WordPress zu nutzen, um einen Header auf einer Seite auszublenden, und zwar mit dem WordPress Theme Customizer.
Bevor Sie jedoch damit beginnen, Code zu Ihrer Webseite hinzuzufügen, müssen Sie einige Dinge beachten. Erstens ist es riskant, CSS direkt in Ihre Webseite einzufügen, da es Ihre Webseite beschädigen und es für einen neuen Benutzer schwierig machen kann, sie wiederherzustellen. Deshalb empfehlen wir Ihnen, ein Backup Ihrer Webseite Backup Ihrer Webseite und ein Child-Theme zu erstellen, anstatt direkt Änderungen am Code Ihrer Webseite vorzunehmen.
Sie müssen auch die ID der Seite kennen, deren Header Sie ausblenden möchten. Dazu müssen Sie das Inspektionswerkzeug Ihres Browsers verwenden.
Während Sie Ihre Seite in Ihrem Browser betrachten, aktivieren Sie Ihr Inspektionstool (F12 für PC-Benutzer, Command + Option + I für Mac-Benutzer) und suchen Sie den <body -Tag. Es enthält den Abschnitt page-id . Bei uns lautet die Seiten-ID 2536, aber bei Ihnen wird sie höchstwahrscheinlich anders lauten.
Um den Header und Footer von einer Seite zu entfernen, deren ID Sie kennen, navigieren Sie zu Erscheinungsbild/Anpassen in Ihrem WordPress-Dashboard.
Nachdem Sie den Customizer aufgerufen haben, suchen Sie den Zusätzliches CSS -Abschnitt und fügen Sie den folgenden Code dort ein:
.page-id-2536 header, .page-id-2536 footer
{
Display: none !important;
}
Natürlich müssen Sie 2536 durch die Seiten-ID ersetzen, für die Sie den Header ausblenden möchten.
Und so sieht unsere Seite ohne Kopfzeile jetzt aus, nachdem wir mit CSS das überflüssige Element entfernt haben:
Zusammenfassung
Wie Sie sehen, gibt es Möglichkeiten, den Header einer Seite auszublenden, wenn Sie es nicht wollen. Egal, ob du unser eigenes Qi-Theme verwendest (und wir sehen keinen Grund, warum du das nicht möchtest) oder nicht, und egal, ob du Elementor, Gutenberg oder CSS verwendest, das Ausblenden eines Headers ist nicht sehr schwierig und mit unserer Anleitung kannst du es mit Leichtigkeit und innerhalb von Minuten tun. Nur zur Erinnerung: Überprüfe die Funktionen deines Themes, bevor du auf CSS zurückgreifst, da die Wahrscheinlichkeit groß ist, dass du die gewünschten Funktionen bereits in deinem Theme eingebaut hast.