Wie Sie mit dem Site-Editor und dem Customizer einen WordPress Header bearbeiten + nützliche Tipps

WordPress Header tragen dazu bei, einen ersten Eindruck bei den Besuchern zu hinterlassen. Daher kann das Wissen, wie Sie einen WordPress Header bearbeiten, die Markenidentität verbessern, die Navigation optimieren oder das Erscheinungsbild Ihrer Website auffrischen.

Mit WordPress können Benutzer ihre Header mit dem Customizer und Site Editor leicht bearbeiten. Beide Optionen sind schnell und anfängerfreundlich, so dass Sie je nach Ihren persönlichen Vorlieben und Ihrem WordPress-Theme wählen sollten.

Lassen Sie uns besprechen, wie Sie auf diese Tools zugreifen können, und einige Tipps zur Erstellung effektiver Header ausprobieren.

Wie Sie einen WordPress Header bearbeiten

Die Schritte zum Anpassen des Headers in WordPress hängen von dem von Ihnen verwendeten Theme und der Version der Kernsoftware ab. Sie beeinflussen die Funktionen und Tools, die für die Erstellung eines benutzerdefinierten Headers zur Verfügung stehen.

Die beiden gängigsten Methoden zum Erstellen von benutzerdefinierten Headern sind der Site Editor und der Customizer. Für dieses Tutorial werden wir die neueste WordPress 6.5-Version verwenden.

Wie Sie mit dem Site-Editor den WordPress Header bearbeiten

Der WordPress-Standard-Editor ist mit Gutenberg ab Version 5.0 integriert. Er nutzt Blöcke zum Hinzufügen von Website-Elementen wie Überschriften, Absätzen, Listen und Bildern.

Beachten Sie, dass nicht alle Themes mit dem Gutenberg-Editor kompatibel sind, da er nur mit einem Block-Theme funktionieren kann.

So passen Sie Ihre Header mit dem Site-Editor an:

1. Navigieren Sie zu Design → Anpassen auf Ihrem WordPress-Dashboard.
2. Sobald der Site-Editor gestartet ist, wählen Sie Header-Bild im Menü der linken Seitenleiste.
3. Scrollen Sie hinunter zum Abschnitt Template-Teile und wählen Sie Header. Die Anzahl der Header-Template-Teile hängt von Ihrem gewählten Blocktheme ab.

4. Wählen Sie die Header, die Sie anpassen möchten, und klicken Sie dann auf die Schaltfläche Bearbeiten, um den vollständigen Bearbeitungsmodus des Headers zu öffnen.

5. In der Oberfläche des Header-Editors können Sie die Blöcke der Headervorlage anpassen, ersetzen oder neue Blöcke hinzufügen.

Jedes Gutenberg-kompatible Theme verwendet unterschiedliche Standardelemente in den Header-Vorlagen. Klicken Sie auf die Schaltfläche Listenansicht, um alle Blöcke der Vorlage zu sehen, die Sie gerade bearbeiten.

In diesem Beispiel verwenden wir das Twenty Twenty-Four-Blocktheme, das eine Gruppe von Blöcken in dem Standard-Header verwendet. Wenn Ihr gewählter Template-Teil dies ebenfalls verwendet, zeigt ein Klick auf den Pfeil alle gruppierten Blöcke an.

Wenn Sie den Header ganz löschen möchten, können Sie ihn löschen, indem Sie Gruppe aus der Liste auswählen und auf die Schaltfläche Gruppenoptionen klicken. Wählen Sie anschließend Löschen.

Verwenden Sie den Block-Inserter, um dem Header neue Elemente hinzuzufügen, z. B. eine Website-Tagline oder eine Suchleiste. Die Schaltfläche mit dem Pluszeichen finden Sie, wenn Sie den Mauszeiger über die Headervorlage oder in der oberen Symbolleiste des Site-Editors bewegen.

Suchen Sie dann nach verfügbaren Blöcken, die Sie zu Ihrem Header hinzufügen können. Ziehen Sie die neu hinzugefügten Elemente per Drag & Drop an die gewünschte Position. Sie können dies auch über die Listenansicht tun, während Sie die Änderungen direkt auf der rechten Seite des Bildschirms in der Vorschau sehen.

Da das Twenty Twenty-Four-Theme bereits über die wichtigsten Header-Elemente verfügt, lassen wir sie so, wie sie sind. In den folgenden Schritten werden wir den Titel der Website, das Logo und das Navigationsmenü im vollständigen Site-Editor personalisieren.

Den Website-Titel ändern

Ändern Sie den Standard-Website-Titel im Bearbeitungsmodus der Headervorlage, indem Sie den Block Website-Titel auswählen.

Alternativ können Sie ihn auch über das Einstellungen-Menü in Ihrem WordPress-Dashboard ändern, wodurch auch der Header-Block automatisch angepasst wird.

Das Website-Logo hinzufügen

Es gibt mehrere Möglichkeiten, das Logo in WordPress zu ändern, einschließlich der Verwendung des Site-Editors. Da dieses Theme standardmäßig ein Logo anzeigt, ersetzen Sie einfach den Platzhalter, indem Sie den Block Website-Logo im Header auswählen.

Klicken Sie auf die Schaltfläche Website-Logo hinzufügen in der Mitte des Blocks.

Daraufhin erscheint ein Popup-Fenster mit der Mediathek. Laden Sie die neue Bilddatei hoch und vergessen Sie nicht, den Alt-Text hinzuzufügen, bevor Sie auf Auswählen klicken.

Sie sehen nun das Logo der Website in Ihrem benutzerdefinierten Header. Ändern Sie seine Größe, indem Sie die Auswahlpunkte nach innen und außen ziehen, bis es Ihnen passt. Wenn Sie Ihr Logo neu positionieren möchten, verwenden Sie die Richtungstasten in der Symbolleiste des Blockeditors.

Das Navigationsmenü hinzufügen

Das von Ihnen gewählte WordPress-Theme kann ein bestimmtes Navigationsmenü im Kopfbereich anzeigen. Das Twenty Twenty-Four-Theme verwendet zum Beispiel den Navigations-Block, mit dem Sie die Struktur und das Design des Menüs direkt bearbeiten können.

Wählen Sie den Navigations-Block im Header aus, um den Menüeintrag zu bearbeiten und klicken Sie auf die Schaltfläche Block hinzufügen.

Dadurch wird automatisch ein Link-Platzhalter erstellt, den Sie mit jeder Seite Ihrer Website verbinden können.

Um die Bearbeitung des Navigationsmenüs zu erleichtern, wählen Sie den Block aus und klicken Sie auf die Schaltfläche Einstellungen , um das Konfigurationspanel zu öffnen.

Dort können Sie die Link-Einstellungen ändern, einschließlich der Bearbeitung der Beschriftung, der URL, des Attributs und des Designs. Wenn Sie ein benutzerdefiniertes CSS zur Gestaltung des Menüs haben, können Sie es ebenfalls hinzufügen.

Wenn Sie ein Dropdown-Menü erstellen möchten, navigieren Sie zu den Optionen Individueller Link und wählen dann Link zum Untermenü hinzufügen aus. Alternativ können Sie auch ein Untermenü aus dem Block-Inserter hinzufügen.

Wenn Sie mit den Änderungen fertig sind, vergessen Sie nicht, auf Speichern zu klicken, bevor Sie den Header-Editor schließen.

Wie Sie mit dem Customizer einen WordPress Header bearbeiten

Wenn Sie eine ältere WordPress-Version oder ein klassisches Theme verwenden, verwenden Sie den Customizer, um die Header-Vorlage zu ändern. Je nach aktiviertem Theme können sich die Schritte zum Zugriff auf den WordPress-Customizer unterscheiden.

Zum Beispiel haben das Standard-Theme Twenty Twenty-One und ältere Themes nur die Option Website-Identität, um das Website-Logo und den Titel im Header anzupassen.

Auf der anderen Seite haben die beliebtesten Themes von Drittanbietern wie Astra und Neve spezielle Header-Optionen, die mehr Flexibilität für die Anpassung von Website-Elementen bieten, wie das Hinzufügen von Social Media-Icons, wenn Sie auf den Premium-Tarif upgraden.

Für dieses Tutorial werden wir das Astra-Theme verwenden. Die Schritte zum Zugriff auf den WordPress-Customizer sind jedoch dieselben – navigieren Sie zu Design → Anpassen.

Der Customizer des Astra-Themes verfügt über einen Drag-and-Drop-Theme-Builder mit einer benutzerfreundlichen Oberfläche. Auf der linken Seite können Sie die zu bearbeitenden Website-Elemente auswählen. In der Zwischenzeit können Sie auf der rechten Seite des Bildschirms eine Vorschau der Änderungen sehen.

Um mit der Bearbeitung des Headers Ihrer Website zu beginnen, wählen Sie Header Builder aus der Liste.

Sie sehen die zu bearbeitenden Headervorlagen auf der linken Seite und den Headerersteller auf der rechten unteren Seite des Bildschirms.

Es sind standardmäßig drei Header verfügbar. Sie können ein neues Header-Element hinzufügen, indem Sie mit dem Mauszeiger über die leere Fläche fahren und auf die angezeigte Plus-Schaltfläche klicken.

Sie können auch die vorhandenen Headerelemente per Drag & Drop an die gewünschte Position verschieben. Sobald Sie alles so platziert haben, wie Sie es wünschen, können Sie mit der Personalisierung beginnen.

Den Website-Titel und das Logo ändern

Um die Registerkarte Allgemeine Einstellungen zu öffnen, klicken Sie auf das Menü Website-Titel & -Logo im Header-Konfigurationsmenü.

Klicken Sie auf die Schaltfläche Logo ändern, um die WordPress-Mediathek anzuzeigen und das Logo Ihrer Website hochzuladen. Passen Sie dann die Breite des Header-Bildes an, wie Sie möchten.

Sie können den Bildplatzhalter auch entfernen, wenn Sie Ihrem Header kein Logo hinzufügen möchten.

Wenn Sie im Panel nach unten scrollen, sehen Sie die allgemeine Konfiguration Website-Titel. Dort können Sie den Text bearbeiten, seine Sichtbarkeit auf verschiedenen Geräten verwalten, eine Tagline hinzufügen und wählen, ob beide Elemente im Header angezeigt oder ausgeblendet werden sollen.

Im unteren Teil des Konfigurationsfensters können Sie das Website-Symbol bearbeiten. Besucher sehen dieses Bild in ihren Browsern, wenn sie auf Ihrer Website navigieren.

Sie können das Aussehen des Titels, des Logos und des Slogans der Website konfigurieren, indem Sie auf die Registerkarte Design im Konfigurationsbereich wechseln.

Das Navigationsmenü hinzufügen

Um das Navigationsmenü in Ihrem neuen Header zu ändern, klicken Sie auf die Option Primäres Menü im Konfigurationspanel. Wie für den Website-Titel und das Logo können Sie auch für das Menü die Einstellungen Allgemein und Design anpassen.

Wenn Sie die Menüeinträge in Header ändern möchten, klicken Sie auf Menü von hier aus konfigurieren, um die Menüeinstellungen direkt im Panel zu öffnen. Auf diese Weise können Sie das Menü ändern und gleichzeitig eine Vorschau der Änderungen auf der Live-Site sehen.

Alternativ wird Ihre Konfiguration über Design → Menüs auch automatisch an den Header des Themes angepasst.

Stellen Sie sicher, dass Sie auf Veröffentlichen klicken, bevor Sie den Theme-Builder verlassen, damit alle Änderungen an dem Header übernommen werden.

Warum der WordPress Header wichtig ist

Da sich der Header einer WordPress-Website ganz oben befindet, spielt er eine zentrale Rolle bei der Gestaltung der Benutzererfahrung.

Ein benutzerdefinierter WordPress Header kann die folgenden Vorteile für Ihre Website mit sich bringen:

• Navigationsdrehscheibe. Der Header beherbergt oft das Navigationsmenü, das den Besuchern hilft, das Gesuchte effizient zu finden.
• Aushängeschild der Marke. Ob es sich um Ihr Logo, Ihren Slogan oder Ihr Farbschema handelt, der Header ist der Ort, an dem Ihre Markenidentität im Mittelpunkt steht.
• Ästhetische Wirkung. Neben der Funktionalität tragen benutzerdefinierte Header zur optischen Attraktivität Ihrer Website bei. Ein gut gestalteter Header erhöht die Benutzeraktivität und lässt Ihre Website professioneller aussehen.

Mit einfachen Worten: Ihr WordPress Header wirkt sich auf die Benutzerfreundlichkeit (UX) Ihrer Website aus, da er beeinflusst, wie die Besucher auf Ihrer Website navigieren. Außerdem wirkt er sich auf Ihre Suchmaschinenoptimierung (SEO) aus, da er den Bot-Crawlern die notwendigen Indexierungsinformationen liefert.

Tipps für einen effektiven WordPress Header

Halten Sie Ihren WordPress Header mit den folgenden Tipps funktionell und optisch ansprechend:

Machen Sie ihn einheitlich

Ihr Header spielt eine wichtige Rolle bei der Navigation auf Ihrer Website. Deshalb sollten Sie sicherstellen, dass die Einheitlichkeit des Erscheinungsbildes mit den besten Web-Design-Verfahren übereinstimmt.

Ganz gleich, ob die Besucher zu Ihrer Homepage, einem Blogbeitrag oder einer Produktseite navigieren, ein einheitlicher Header auf allen Seiten sorgt für ein nahtloses Nutzererlebnis. Ein einheitlicher Header trägt dazu bei, dass die Besucher Ihre Website besser erkennen und ihr vertrauen.

Denken Sie außerdem daran, den Header zu bearbeiten, wenn sich Ihr neuer Website-Inhalt auf dieses Element auswirkt. Wenn Sie zum Beispiel eine neue Seite erstellen, vergessen Sie nicht, das Navigationsmenü zu bearbeiten.

Einige WordPress-Themes passen den Header-Bereich nach jeder Aktualisierung Ihrer Website automatisch an. Bei anderen ist dies nicht der Fall. Daher ist es wichtig, die Änderung des Headers im Nachhinein noch einmal zu überprüfen.

Halten Sie den Headerbereich einfach

Der Header ist zwar ein wesentlicher Aspekt Ihrer Website, aber ein Überladen kann kontraproduktiv sein. Eine der besten bewährten Verfahren für die Gestaltung des Headers ist daher, ihn minimalistisch zu halten.

Durch die Straffung des Headers wird die Benutzerfreundlichkeit Ihrer Website gewährleistet. Auf diese Weise können sich die Besucher leichter auf die wichtigsten Elemente konzentrieren – wie Ihr WebWebsite-Logo, den Titel, den Slogan und die Navigationsmenüs.

Wenn Sie der Meinung sind, dass ein Website-Element viel Platz beansprucht, sollten Sie es in einem anderen Website-Bereich platzieren. Es ist zum Beispiel nicht ideal, einen großen Suchblock in einen Header mit einem großen Navigationsmenü einzufügen.

Verwenden Sie hochwertige Bilder

Wir empfehlen Ihnen, ein Logo in Ihrem WordPress Header-Bildbereich anzuzeigen. Es dient als visueller Anker, um die Wiedererkennung Ihrer Marke zu fördern.

Entscheiden Sie sich für hochauflösende Bilder, um ein professionelles Erscheinungsbild zu gewährleisten, denn ein unscharfes Logo kann den optischen Gesamteindruck Ihrer Website beeinträchtigen. Verwenden Sie hochwertige Bilddateien, um einen unvergesslichen ersten Eindruck bei den Besuchern zu hinterlassen.

Lassen Sie Ihr Logo professionell gestalten oder verwenden Sie ein KI-Logo Maker-Tool, das Ihnen dabei hilft.

Achten Sie auf die Mobiloptimierung

Fast 60 % der Internetsuchen werden mit einem Mobilgerät durchgeführt. Im Idealfall sollten mobile Nutzer ihre Bildschirme nicht vergrößern müssen, um eine Website zu durchsuchen. Daher sollte die mobile Version Ihrer Website einfach zu lesen und zu navigieren sein.

Ein mobiloptimierter Header sorgt für eine nahtlose Darstellung auf verschiedenen Bildschirmgrößen. Die Pflege einer mobiloptimierten Website ist auch einer der SEO-verbessernden Faktoren.

Achten Sie darauf, responsive WordPress-Themes oder Seitenerstellungsprogramme für die Erstellung Ihrer Website zu wählen. Auf diese Weise kann es einfacher sein, die Responsivität Ihrer benutzerdefinierten Header zu erhalten.

Wenn Sie die Reaktionsfähigkeit Ihrer Website überprüfen möchten, verwenden Sie Tools wie den Mobile-Friendly-Test der Google Search Console.

Fazit

Wenn Sie lernen, wie Sie Ihren Header in WordPress ändern können, können Sie das Aussehen und die Funktionalität der Website verbessern. Glücklicherweise erfordert die Änderung mit dem Site Editor und Customizer nur einige einfache Schritte.

Wir haben nicht nur die Schritte zur Bearbeitung Ihrer Header mit beiden Tools beschrieben, sondern auch, wie Sie Ihren WordPress-Header effektiv pflegen können. Im Folgenden eine kleine Zusammenfassung:

• Achten Sie auf einen einheitlichen Header Ihrer Website, um ein professionelles Erscheinungsbild zu erreichen.
• Erstellen Sie einen übersichtlichen Headerbereich, der sich auf die wichtigsten Elemente konzentriert – wie Ihr WebWebsite-Logo, den Titel, den Slogan und die Navigationsmenüs.
• Laden Sie hochwertige Header-Bilder hoch, um das Branding Ihrer Website zu verbessern.
• Verwenden Sie ein mobiles WordPress-Theme für Ihren Header, damit er für verschiedene Bildschirmgrößen geeignet ist.

Nutzen Sie schließlich zuverlässige WordPress-Hostingdienste, um sicherzustellen, dass Ihre Website immer verfügbar ist und schnell lädt.

Wie Sie einen WordPress Header bearbeiten FAQ

Lesen Sie die am häufigsten gestellten Fragen, um mehr über die Anpassung von WordPress Headern zu erfahren.