4 einfache Methoden (3 ohne Code)

Der Header ist das erste Element Ihrer Website, das die meisten Besucher sehen. In der Regel werden hier das Logo und das Menü Ihrer Website platziert, und es ist ein fester Bestandteil jeder Seite. Wenn Sie nicht wissen, wie Sie den WordPress-Header bearbeiten, werden Sie es schwer haben, ️ einen starken ersten Eindruck zu hinterlassen.

Mit WordPress können Sie den Header Ihrer Website auf verschiedene Arten bearbeiten. Nahezu jedes Design verfügt über ein einzigartiges Header-Design, das Sie manuell anpassen können. Alternativ können Sie eine Reihe von Tools verwenden, die von der größeren WordPress-Community bereitgestellt werden.

In diesem Artikel zeigen wir Ihnen vier Möglichkeiten , den WordPress-Header zu bearbeiten , sowohl mit als auch ohne Plugins. Lass uns zur Arbeit gehen!

Inhaltsverzeichnis:

1. Bearbeiten Sie die Kopfzeile mit dem Customizer
2. Vollständige Website-Bearbeitung verwenden (und ein kompatibles Design)
3. Bearbeiten Sie die Kopfzeile mit einem WordPress-Seitenersteller
4. Fügen Sie mithilfe eines Plugins benutzerdefinierten Code zum Header hinzu

1. Bearbeiten Sie die Kopfzeile mit dem Customizer

Der WordPress Customizer ist ein integriertes Tool, mit dem Sie globale Elemente Ihrer Website bearbeiten können. Sie können den Customizer verwenden, um die Kopfzeile, Fußzeile, Typografie, Menüs und andere wichtige Aspekte Ihrer Website zu bearbeiten.

Um auf den Customizer zuzugreifen, gehen Sie zu Ihrem Dashboard und klicken Sie auf Aussehen > Anpassen . Der Customizer zeigt links ein Menü mit Optionen und rechts eine Vorschau Ihrer Website an:

Beachten Sie, dass Sie möglicherweise ein blockfähiges Design verwenden, wenn Sie die WordPress Customizer-Option in Ihrem Dashboard nicht sehen. Um den Header für diese Art von Design zu bearbeiten, müssen Sie die vollständige Site-Bearbeitung verwenden, die wir im nächsten Abschnitt behandeln werden.

Im Customizer solltest du eine Option sehen, die sich auf deine Kopfzeile bezieht. Manchmal ist dies sofort sichtbar, wie im obigen Beispiel. In anderen Fällen müssen Sie möglicherweise zu einem Untermenü wechseln. Zum Beispiel setzen einige Themen die Header-Optionen in die Layout -Optionen oder ähnliches.

Sobald Sie die Header-Optionen Ihres Designs gefunden haben, hängen die Auswahlmöglichkeiten, die Sie jetzt sehen, davon ab, welches Design Sie verwenden. Zum Beispiel enthält unser Neve-Design Optionen zum Ändern Ihres Logos, der Kopfzeilenfarbe und des in diesem Abschnitt angezeigten Menüs:

Neve bietet auch eine Auswahl an Elementen, die Sie per Drag-and-Drop in die Kopfzeile einfügen können. Wählen Sie eines der Elemente unter Verfügbare Komponenten aus und ziehen Sie es in die Kopfzeilen unten im Customizer. Neve ermöglicht es Ihnen, bis zu drei Reihen von Elementen für eine Kopfzeile hinzuzufügen und Elemente an jeder gewünschten Position zu platzieren:

Wenn Sie mit der Konfiguration Ihres Headers zufrieden sind, speichern Sie die Änderungen an Ihrem Design, indem Sie oben im Customizer auf die Schaltfläche „ Veröffentlichen “ klicken.

Beachten Sie, dass alle Änderungen, die Sie mit dem Customizer vornehmen, nur für Ihr aktives Design gelten. Wenn Sie das Design ändern, müssen Sie den WordPress-Header erneut bearbeiten.

2. Verwenden Sie die vollständige Site-Bearbeitung (und ein kompatibles Design)

Full Site Editing ist eine neuere Funktion, mit der Sie Themenvorlagen mit dem Blockeditor bearbeiten können. Dies funktioniert nur für blockfähige Themes, daher kann es auf Ihrer Website verfügbar sein oder nicht.

Um zu sehen, ob Ihr Design die vollständige Seitenbearbeitung unterstützt, öffnen Sie das Menü „ Darstellung “ und suchen Sie nach der Option „ Editor “:

Wählen Sie das aus Option und der Blockeditor wird geöffnet. Sie bearbeiten jedoch Ihre Themenvorlagen und nicht Ihre einzelnen Seiten oder Beiträge.

Standardmäßig öffnet der Editor die Homepage-Vorlage, die ein Header -Element enthalten sollte:

Beachten Sie, dass einige Blöcke nur als Platzhalter angezeigt werden, wenn Sie die vollständige Site-Bearbeitung verwenden. Das liegt daran, dass dieses Tool nicht zum Bearbeiten einzelner Blöcke, sondern ganzer Layouts dient.

Beim Bearbeiten der Kopfzeile haben Sie die volle Kontrolle darüber, welche Blöcke und Elemente enthalten sein sollen. Wenn Sie das Listenansicht- Tool öffnen, können Sie eine Aufschlüsselung der Blöcke sehen, die die Kopfzeile derzeit enthält:

In diesem Stadium können Sie wählen, ob Sie Blöcke zur Kopfzeile hinzufügen oder daraus entfernen möchten. Um einen vorhandenen Block zu entfernen oder zu bearbeiten, wählen Sie ihn aus und verwenden Sie das Kontextmenü, das dabei auf dem Bildschirm erscheint:

Wenn Sie einen Block auswählen, können Sie ihn auch mit dem Block bearbeiten Einstellungsmenü auf der rechten Seite des Bildschirms. Dieses Menü enthält normalerweise Styling-Optionen, und sie variieren je nachdem, welchen Block Sie bearbeiten:

Um einen neuen Block hinzuzufügen, wählen Sie das Header -Element aus und suchen Sie nach dem Pluszeichen -Symbol. Diese Schaltfläche öffnet ein Menü, in dem Sie auswählen können, welcher Block hinzugefügt werden soll:

Eine weitere nützliche Funktion des Full Site Editors ist, dass Sie Menüs visuell bearbeiten können. Wählen Sie dazu einfach ein Menü mit dem Navigationsblock aus. Sie sehen die Option, neue Links hinzuzufügen, ein neues Menü zu erstellen und zwischen bestehenden zu wechseln:

Wenn Sie mit den Änderungen an Ihrer Kopfzeile zufrieden sind, klicken Sie auf Speichern . Dadurch werden die Änderungen an der Kopfzeilenvorlage des Designs gespeichert und automatisch auf Ihrer Website wiedergegeben.

3. Bearbeiten Sie die Kopfzeile mit einem WordPress-Seitenersteller

Einige WordPress Page Builder-Plugins bieten Optionen zum Bearbeiten des WordPress-Headers. Elementor Pro enthält beispielsweise ein Theme Builder-Tool, auf das Sie mit einer Premium-Lizenz zugreifen können.

Wenn Sie keinen Zugriff auf Elementor Pro haben, können Sie eine kostenlose Erweiterung eines Drittanbieters verwenden, z. B. das Elementor Header & Footer Builder-Plugin auf WordPress.org.

Wir zeigen Ihnen jedoch, wie Sie dies mit Elementor Pro und seiner Theme Builder-Funktion tun.

In der Praxis funktioniert der Elementor Theme Builder ähnlich wie Full Site Editing.

Um auf den Theme Builder zuzugreifen, gehen Sie zu Vorlagen > Theme Builder . Wählen Sie die Header -Optionen unter SITE PARTS und suchen Sie rechts nach vorhandenen Vorlagen. Es sollte nur eine Kopfzeilenvorlage vorhanden sein, und Sie können daneben auf die Schaltfläche Bearbeiten klicken:

Dadurch wird der Elementor-Editor gestartet. Von hier aus können Sie den Header mit Elementor-Blöcken erstellen oder vorgefertigte Vorlagen importieren. Wenn Sie auf das Ordnersymbol im Hauptteil des Editors klicken, können Sie sehen, auf welche Header-Vorlagen Sie Zugriff haben:

Wenn Sie Elementor verwenden, empfehlen wir Ihnen, diese Vorlagen zu nutzen. Auf diese Weise können Sie mit mehreren Kopfzeilenstilen experimentieren, die Sie bearbeiten können, indem Sie Module hinzufügen oder anpassen:

Wenn Sie mit der Verwendung von Elementor nicht vertraut sind, können Sie mit diesem Seitenersteller Module über das Menü auf der linken Seite auswählen. Sie können diese Module auf Ihre Seite ziehen, die in einer Vorschau auf der rechten Seite des Bildschirms angezeigt wird.

Wenn Sie den Theme Builder verwenden, bearbeiten Sie nur eine bestimmte Theme-Vorlage. Sie können jedoch weiterhin die gesamte Palette an Modulen und Konfigurationsoptionen nutzen, die Elementor bietet.

Nachdem Sie die Kopfzeilenvorlage bearbeitet haben, speichern Sie sie mit der Schaltfläche „ Veröffentlichen “. Dann fordert Elementor Sie auf, auszuwählen, auf welchen Seiten die Vorlage angezeigt werden soll:

Sofern Sie nicht bereits für eine Premium-Lizenz von Elementor bezahlen, rechtfertigt das Theme Builder-Tool den Kauf möglicherweise nicht für sich allein. Es macht genau das, was Full Site Editing tut, aber zu einem höheren Preis. Der Hauptunterschied besteht darin, dass Sie die größere Auswahl an Modulen von Elementor verwenden können, und wenn Sie Elementor bereits verwenden, ist es einfacher sicherzustellen, dass Ihr Header-Design mit dem Rest Ihrer Website übereinstimmt.

4. Fügen Sie mithilfe eines Plugins benutzerdefinierten Code zum Header hinzu

Normalerweise ist die Verwendung von Plugins der einfachste Weg, um Anpassungen in WordPress zu implementieren. Bei Headern ist dies jedoch normalerweise nicht der Fall. Wenn Sie ein Plugin wünschen, mit dem Sie Kopfzeilen visuell bearbeiten können, müssen Sie einen Seitenersteller verwenden. Die meisten Seitenersteller, die diese Funktionalität anbieten, sind kostenpflichtig, wie wir im vorherigen Abschnitt besprochen haben.

Kostenlose Plugins, mit denen Sie den Header anpassen können, bieten normalerweise nur eine einfachere Möglichkeit, benutzerdefinierten Code hinzuzufügen. Die Alternative besteht darin, Ihre Designdateien manuell mit einem untergeordneten Design zu bearbeiten, was einschüchternd (und riskant) sein kann, es sei denn, Sie haben Erfahrung in der Webentwicklung.

Ein fantastisches Beispiel für ein solches Plugin ist der Header Footer Code Manager. Mit diesem Tool können Sie HTML-, CSS- und JavaScript-Snippets zur Kopf- und/oder Fußzeile hinzufügen und auswählen, auf welchen Seiten diese Snippets geladen werden:

Sobald das Plugin aktiv ist, gehen Sie im Dashboard auf die Seite HFCM > Neue Snippets hinzufügen . Hier können Sie auswählen, welche Art von Snippet Sie hinzufügen möchten, wo es angezeigt werden soll und ob es der Kopf- oder Fußzeile hinzugefügt werden soll:

Wenn Sie dem Header neue Elemente hinzufügen möchten, müssen Sie HTML verwenden. Um den Stil des Headers und der darin enthaltenen Elemente zu ändern, sollten Sie CSS-Snippets verwenden.

Der Hauptnachteil dieses Ansatzes besteht darin, dass Sie den Header-Code überprüfen müssen, um zu sehen, welche Klassen und IDs verwendet werden, um ihnen CSS hinzuzufügen. Dies kann ein zeitaufwändiger Prozess sein, wenn Sie neue Codeausschnitte hinzufügen, überprüfen, ob die Änderungen funktionieren, und den Code optimieren, bis Sie mit den Ergebnissen zufrieden sind.

Passen Sie den WordPress-Header noch heute an

Haben Sie Fragen zur Bearbeitung Ihres Headers in WordPress? Lassen Sie uns im Kommentarbereich unten darüber sprechen!