So passen Sie Header in WordPress an: Anfängerhandbuch

Suchen Sie nach einer einfachen Möglichkeit, den WordPress-Header anzupassen?

Da sich Ihre Kopfzeile oben auf jeder Seite befindet, spielt sie eine wesentliche Rolle beim Branding Ihrer Website, beim Navigieren Ihrer Besucher und beim Bewerben Ihrer wichtigsten Inhalte.

Um den Header Ihrer Website optimal zu nutzen, benötigen Sie jedoch eine Möglichkeit, ihn zu bearbeiten, was viele Themen nicht bieten.

In diesem Beitrag werden wir einige verschiedene Taktiken vorstellen, mit denen Sie den Header in WordPress sowohl über einfache Drag-and-Drop-Schnittstellen als auch über Ihren eigenen Code anpassen können.

Die einfachste Möglichkeit ist, das Astra-Thema und seinen Drag-and-Drop-Header-Builder zu verwenden, aber wir werden auch einige andere Taktiken teilen, die mit jedem WordPress-Thema funktionieren.

Was ist der WordPress-Header?

Der WordPress-Header ist der Teil Ihrer Website, der oben auf jeder Seite angezeigt wird. Typischerweise enthält es mindestens zwei Elemente:

• Logo/Identität der Website
• Navigationsmenü(e)

So sieht zum Beispiel der Header im Astra-Blog aus. Sie können sehen, dass es das Astra-Logo sowie zwei separate Navigationsmenüs enthält:

Je nach Bedarf können Sie auch andere Elemente wie Social-Media-Symbole, ein Suchfeld, Werbeaktionen, Ihre Telefonnummer und andere Informationen einfügen.

Wenn Sie jemals sehen müssen, wie es funktioniert, ist der WordPress-Header in der Kopfzeile enthalten.PHP-Datei in Ihrem WordPress-Theme.

So passen Sie den WordPress-Header mit Astra an

Wenn Sie die volle Kontrolle über Ihren WordPress-Header haben möchten, können Sie mit dem kostenlosen Astra-Thema Ihren WordPress-Header per Drag & Drop und ohne Code vollständig anpassen.

Sie können Ihre Änderungen sofort in einer Live-Vorschau Ihrer Website sehen und ganz einfach verschiedene Arten von Inhalten hinzufügen, z. B. Schaltflächen, soziale Symbole, ein Suchfeld und mehr.

Um zu beginnen, sollten Sie das Astra-Design installieren und aktivieren. Sie können auch eine der Hunderten von vorgefertigten Demo-Sites importieren, um schnell zum Laufen zu kommen. Wenn Sie bei einem dieser Schritte Hilfe benötigen, Wir haben viele Anleitungen, die Ihnen helfen:

• So installieren Sie Astra
• So importieren Sie Starter-Sites

Sobald Sie Ihre grundlegende Site bereit haben, können Sie Ihren Header mit Astra anpassen.

1. Öffnen Sie den Astra Header Builder

Gehen Sie zunächst zu Darstellung → Anpassen in Ihrem WordPress-Dashboard, um den nativen WordPress-Customizer zu starten. Wählen Sie dann die Option Header Builder:

Sobald Sie den Header Builder starten, sehen Sie eine Reihe neuer Optionen, mit denen Sie das Layout Ihrer Kopfzeile steuern können:

2. Hinzufügen und Organisieren von Header-Inhalten

Jetzt zum Spaß – Hinzufügen von Inhalten. Sie können sehen, dass Sie drei Zeilen im Header Builder haben. Jede Zeile steuert den Inhalt für einen anderen Teil der Kopfzeile:

1. Über dem Header
2. Primärer Header – Hier platzieren Sie Ihren „Hauptinhalt“.
3. Unter Kopfzeile

Sie möchten unbedingt Inhalte in den primären Header aufnehmen, und dann haben Sie die Möglichkeit, Inhalte entsprechend Ihren Anforderungen darüber oder darunter hinzuzufügen.

Um Inhalte hinzuzufügen, können Sie auf die Stelle klicken, an der Sie Inhalte hinzufügen möchten. Dies öffnet eine Reihe von Optionen:

• Primäres Menü
• Sekundäres Menü
• Logo
• Schaltfläche
• Suche
• Soziales
• HTML 1
• HTML 2

Beachten Sie, dass beim Hinzufügen von Inhalten weniger Optionen angezeigt werden. Sie können Ihr Logo beispielsweise nur einmal hinzufügen, sodass diese Option verschwindet, sobald Sie Ihrem Header bereits ein Logo hinzugefügt haben:

Sobald Sie Inhalte hinzugefügt haben, können Sie auf diesen Inhalt klicken, um die Einstellungen zu öffnen. Wenn Sie beispielsweise eine Schaltfläche hinzufügen, können Sie den Text und den Link der Schaltfläche steuern.

Sie können auch die Designeinstellungen öffnen, um die Dinge weiter anzupassen:

Wenn Sie Ihren Inhalt neu anordnen oder in eine andere Zeile verschieben möchten, müssen Sie ihn nur per Drag & Drop verschieben:

3. Header-Layout anpassen

Oben haben wir Ihnen gezeigt, wie Sie die einzelnen Elemente in Ihrem Header anpassen können. Sie haben auch mehrere Optionen, um Ihre Kopfzeile als Ganzes anzupassen.

Zunächst können Sie auf die Registerkarte Design des Haupt-Header-Builders gehen, um die Breite und den Abstand Ihrer Kopfzeile zu steuern. Sie können auch auf das Zahnradsymbol für jede Kopfzeile klicken, um deren Höhe und Design anzupassen:

4. Experimentieren Sie mit verschiedenen Arten von Kopfzeilen

Je nachdem, ob Sie die kostenlose Version von Astra oder Astra Pro verwenden, erhalten Sie auch Zugriff auf zusätzliche Arten von Kopfzeilen, z. B. transparente Kopfzeilen (kostenlos) und klebrige Kopfzeilen (Pro).

Sie können den gleichen Header- und Footer-Builder wie oben verwenden, um Ihre transparente oder klebrige Kopfzeile zu entwerfen. Sie sehen diese Optionen im Abschnitt Header-Typen. Sie können darauf klicken, um die Einstellungen zu erweitern und diese verschiedenen Header-Typen zu entwerfen:

Drei weitere Möglichkeiten zum Anpassen des WordPress-Headers

Während der Drag-and-Drop-Header-Builder von Astra die einfachste Möglichkeit zum Anpassen des WordPress-Headers bietet, gibt es auch andere Taktiken, die Sie verwenden können, unabhängig davon, welches Thema Sie verwenden.

Hier sind einige der besten Strategien…

1. Verwenden Sie die Customizer-Einstellungen Ihres Themas

Die meisten WordPress-Themes geben Ihnen eine gewisse Kontrolle über den Header Ihrer Website im nativen WordPress-Customizer. Es ist unwahrscheinlich, dass Sie den Detaillierungsgrad erhalten, den Astra Ihnen bietet, aber Sie erhalten einige Optionen, um zu steuern, wie Ihr Header aussieht und funktioniert.

Diese Optionen variieren je nach Thema, aber Sie können sie normalerweise öffnen, indem Sie auf das blaue Stiftsymbol neben Elementen in Ihrer Kopfzeile klicken. Zum Beispiel können Sie im neuen Twenty Twenty-One-Standarddesign sehen, dass Sie Ihre anpassen können:

• Logo
• Überschrift der Website
• Menü

Wenn Sie zusätzliche Hilfe benötigen, können Sie die Dokumentation Ihres Theme-Entwicklers konsultieren.

2. Verwenden Sie Elementor und ein kostenloses benutzerdefiniertes Header-Plugin

Wenn Sie mit Elementor nicht vertraut sind, handelt es sich um ein visuelles Drag-and-Drop-Design-Tool, mit dem Sie Inhalte auf Ihrer Website erstellen können. Mit dem kostenlosen Elementor – Header, Footer & Blocks Template Custom Header WordPress Plugin können Sie die kostenlose Version von Elementor verwenden, um Ihren eigenen WordPress Custom Header zu entwerfen.

Dieses Plugin funktioniert perfekt mit dem kostenlosen Astra-Thema sowie mit jedem anderen WordPress-Thema, das Sie möglicherweise verwenden.

Um loszulegen, installieren und aktivieren Sie das kostenlose Plugin von WordPress.org . Sie müssen auch die kostenlose Version von Elementor installieren, wenn Sie dies noch nicht getan haben.

Sobald Sie das getan haben, gehen Sie zu Aussehen → Kopfzeile Fußzeile & Blöcke und klicken Sie auf Neu hinzufügen:

Geben Sie Ihrer Vorlage einen Namen und wählen Sie Header unter Template-Typ. Sie können auch die Optionen Anzeige auf oder Benutzerrollen verwenden, um Ihre Kopfzeile auf bestimmte Inhalte / Benutzer auszurichten.

Veröffentlichen Sie dann Ihren Header und klicken Sie auf Bearbeiten mit Elementor, um den Visual Builder zu öffnen:

Jetzt können Sie Ihren Header mithilfe der visuellen Drag-and-Drop-Oberfläche von Elementor vollständig anpassen. Das Plugin bietet Ihnen auch neue Kopf- und Fußzeilen & Und Widgets, mit denen Sie wichtige Site-Elemente wie das Logo Ihrer Site oder ein Navigationsmenü hinzufügen können:

Um mehr über die Verwendung von Elementor zu erfahren, lesen Sie unser vollständiges Elementor-Tutorial oder Elementor Review.

3. Verwenden Sie benutzerdefinierten Code (Erweitert)

Wenn Sie ein fortgeschrittener Benutzer sind, können Sie den WordPress-Header auch mit Ihrem eigenen Code anpassen. Dazu benötigen Sie mindestens Kenntnisse in HTML, PHP und CSS, sodass dies keine Option für nicht-technische Benutzer ist.

Wenn Sie diese Programmiersprachen nicht kennen, sollten Sie sich an eine der vorherigen Methoden in dieser Liste halten.

Die Verwendung von Code zum Anpassen Ihrer Kopfzeile besteht aus zwei Teilen:

• HTML / PHP – dies steuert den tatsächlichen Inhalt in Ihrem Header.
• CSS – Dies steuert das Styling Ihres Headers.

Wie bereits erwähnt, befindet sich der Header-Inhalt Ihrer Site im Header.PHP-Datei. Um den Inhalt Ihres Headers anzupassen, müssen Sie direkt mit dieser Datei arbeiten. Oder einige Themes, wie Astra, bieten auch Hooks, mit denen Sie der Kopfzeile Inhalt hinzufügen können.

Im Astra Visual Studio-Handbuch sehen Sie, dass Sie eine Reihe von Optionen zum Anpassen der Kopfzeile haben:

Wenn Sie die Kopfzeile Ihres Themas bearbeiten möchten.PHP-Datei direkt, sollten Sie ein untergeordnetes Thema verwenden, um sicherzustellen, dass Sie Ihre Änderungen nicht überschreiben, wenn Sie Ihr Thema aktualisieren.

Wenn Sie andererseits Hooks verwenden, müssen Sie kein untergeordnetes Thema verwenden, solange Sie ein Plugin wie Astra Hooks oder Code Snippets verwenden. Wenn Sie Ihre Hooks direkt zu den Funktionen Ihres Themas hinzufügen.PHP-Datei sollten Sie jedoch weiterhin ein untergeordnetes Thema verwenden.

Mit Astra Pro haben Sie auch die Möglichkeit, Haken mithilfe der benutzerdefinierten Layoutfunktion von Astra Pro hinzuzufügen.

Das Nette an den benutzerdefinierten Layouts von Astra Pro ist, dass Sie mithilfe von Anzeigeregeln genau steuern können, wann die Änderungen angezeigt werden. Sie können Ihrem Header beispielsweise benutzerdefinierten Inhalt hinzufügen, der nur angemeldeten Benutzern angezeigt wird.

So passen Sie den Inhalt Ihres Headers an – aber was ist mit dem Styling?

Um das Styling Ihrer Kopfzeile anzupassen, können Sie den Stil bearbeiten.CSS-Datei direkt, wenn Sie ein untergeordnetes Thema verwenden. Oder Sie können den zusätzlichen CSS-Bereich im WordPress-Customizer verwenden, um dem Header Ihre eigenen benutzerdefinierten Stile hinzuzufügen.

Passen Sie Ihren WordPress-Header heute an

Ihr WordPress-Header spielt eine wesentliche Rolle für den Erfolg Ihrer Website. Es hilft, Ihre Website zu brandmarken, Ihre Besucher zu wichtigen Inhalten zu führen, wichtige Informationen oder soziale Profile zu bewerben und vieles mehr.

Der einfachste Weg, die volle Kontrolle über den Header Ihrer Website zu erlangen, ist die Verwendung des kostenlosen Astra-Themas. Mit Astra erhalten Sie Zugriff auf einen visuellen Drag-and-Drop-Header-Builder. Sie benötigen keinen Code oder externe Plugins – Sie erhalten 100% Kontrolle über Ihren Header direkt im WordPress Customizer.

In anderen Situationen können Sie auch die Customizer–Einstellungen eines anderen Themas, das Elementor – Header, Footer & Blocks Template Plugin oder Ihren eigenen Code verwenden, wenn Sie über technische Kenntnisse verfügen.