So bearbeiten Sie den Header in WordPress

Kürzlich bat uns einer unserer Leser um eine Schritt-für-Schritt-Anleitung zum Bearbeiten des Headers in WordPress, da er nichts finden konnte, das ihm von Grund auf weiterhilft.

Obwohl dies etwas sehr Grundlegendes ist, dachten wir, dies sei eine ausgezeichnete Gelegenheit, denen zu helfen, die neu in ihrer WordPress-Reise sind.

Lassen Sie uns also ohne weitere Umschweife darauf eingehen, wie Sie den Header Ihrer WordPress-Website bearbeiten und ihn ansprechender gestalten können.

So bearbeiten Sie den Header in WordPress

Mit der neuesten Version von WordPress können Sie den interaktiven und benutzerfreundlichen Website-Editor verwenden, um Ihre Website anzupassen und zu branden und ganz einfach eine benutzerdefinierte Kopfzeile zu erstellen.

Da die meisten neuen WP-Installationen das Twenty Twenty-Four Theme verwenden, ist der Website-Editor für verschiedene Anpassungen der Kopfzeile sehr hilfreich:

• Schriftarten
• Farben
• Button-Styling
• Und mehr

Schritt 1: Greifen Sie auf den Website-Editor zu

Navigieren Sie von Ihrem WordPress-Dashboard einfach zu Design und klicken Sie dann im Menü auf die Option Editor.

Dies leitet Sie zum Website-Editor weiter, wo Sie das Erscheinungsbild Ihrer Website mit dem Block-Editor anpassen können. Öffnen Sie die Optionen unter Muster.

Nun müssen Sie nur noch nach unten scrollen, bis Sie den Abschnitt Vorlagenteile sehen, und dann auf Kopfzeile klicken, um dessen Optionen zu öffnen.

Klicken Sie auf der rechten Seite des Bildschirms auf das Kopfzeilenbild, um die im Website-Editor verfügbaren Anpassungsoptionen zu öffnen, und klicken Sie auf das Bearbeiten-Symbol.

Sie werden nun zum Block-Editor von WordPress weitergeleitet, wo Sie mit dem Hinzufügen Ihres Logos, Ihrer Navigation, Social-Media-Icons und bei Bedarf sogar einer CTA-Schaltfläche beginnen können.

Schritt 2: Fügen Sie Ihr Website-Logo hinzu

Sobald Sie sich im Block-Editor für die Kopfzeile Ihrer Website befinden, klicken Sie auf das Symbol für die Listenansicht, damit Sie leicht erkennen können, welche Elemente in der WordPress-Kopfzeile enthalten sind.

Erweitern Sie alle Blöcke in der Listenansicht, klicken Sie auf das erste Reihe-Element und stellen Sie die Ausrichtung auf Volle Breite ein, um mit der Anpassung der Kopfzeilen-Vorlage zu beginnen.

Klicken Sie nun einfach in der Listenansicht auf die Option Website-Logo und klicken Sie im Vorschaufenster der Kopfzeile auf das Symbol Hochladen.

Sie können Ihr Logo entweder über den Tab Dateien hochladen hochladen oder einfach die Datei aus Ihrer vorhandenen Mediathek auswählen.

Bei Bedarf können Sie die Größenänderungspunkte verwenden, um die Abmessungen und die Größe des Website-Logos entsprechend Ihren spezifischen Bedürfnissen oder Anforderungen zu ändern.

Gut gemacht! Das ist alles, was Sie tun müssen, um Ihr Website-Logo in die Kopfzeile hochzuladen. Nun kommen wir zum nächsten Schritt: dem Hinzufügen Ihres Website-Titels!

Schritt 3: Fügen Sie den Website-Titel hinzu

Das Hinzufügen des Website-Titels in Ihrer Website-Kopfzeile ist genauso einfach wie das Hochladen Ihres Website-Logos im WordPress-Theme. Klicken Sie einfach in der Listenansicht auf Website-Titel.

Klicken Sie dann, ähnlich wie wir zuvor das Website-Logo geändert haben, auf den Block mit der Aufschrift „Website-Titel schreiben…“ und fügen Sie Ihren Website-Titel darin ein.

Wie Sie sehen können, nimmt der Header Ihres Themes nun langsam Gestalt an. Im nächsten Schritt werden wir einige Navigationselemente zu Ihrem Header hinzufügen.

Schritt 4: Fügen Sie die Website-Navigation hinzu

Um Ihre Seiten zum Header hinzuzufügen, klicken Sie einfach in der Listenansicht auf Navigation und dann auf die Option Bearbeiten für dessen Block.

Dies führt Sie zur speziellen Block-Editor-Seite für das Navigation-Element, wo Sie über das Plus-Symbol neue Seiten und deren Links hinzufügen können.

Dies vervollständigt das Aussehen Ihres Headers, aber wie Sie sehen können, wirkt er zu einfach und es gibt viel Raum für Verbesserungen!

Lassen Sie uns nun etwas Styling zu Ihrem Header hinzufügen, um ihn optisch ansprechender zu gestalten und die Farbgebung Ihrer Website abzustimmen.

Schritt 5: Ändern Sie die Hintergrundfarbe

Eine der grundlegendsten Änderungen, die Sie am Header vornehmen können, ist die Änderung seiner Hintergrundfarbe. Klicken Sie dazu auf die erste Zeile und öffnen Sie deren Einstellungen.

Sie sehen nun die Block-Optionen für die ausgewählte Zeile. Alles, was Sie jetzt tun müssen, ist auf das Stile-Symbol neben dem Zahnrad (Einstellungen)-Symbol zu klicken.

Dies öffnet zahlreiche Optionen für die ausgewählte Zeile, wo Sie Farbe, Hintergrundbild, Typografie und Abmessungen ändern können.

Sie können diese erkunden, um Ihren Header ansprechender zu gestalten. Da wir nur die Farbe ändern mussten, haben wir Weiß für den Text und Schwarz für den Hintergrund gewählt.

Wie Sie sehen können, sieht der Header im Frontend jetzt viel besser aus und verleiht der Website ein vollständigeres Aussehen.

Möchten Sie weitere Änderungen am Header vornehmen, wie z. B. das Einfügen von Social-Media-Icons und einer CTA-Schaltfläche? Nun, der Prozess ist einfach!

Schritt 6: Fügen Sie Social-Media-Icons und eine CTA-Schaltfläche hinzu

Um Social-Media-Icons und eine CTA-Schaltfläche hinzuzufügen, müssen Sie eine neue Zeile hinzufügen. Klicken Sie auf das Plus (+)-Symbol und wählen Sie den Zeilen-Block aus.

Ziehen Sie als Nächstes den neu hinzugefügten Zeilen-Block über die vorhandene Zeile, damit Sie ihn frei anpassen können, ohne den vorhandenen Header zu beeinträchtigen.

Klicken Sie danach auf die Schaltfläche (+) innerhalb der neuen Zeile und suchen Sie nach dem Block Social Icons und wählen Sie ihn aus.

Ähnlich wie wir Seiten in der Navigation hinzugefügt haben, klicken Sie auf die Schaltfläche (+), um Social Media Widgets für die von Ihnen bevorzugten Plattformen einzufügen.

Sobald Sie fertig sind, wählen Sie die Zeile erneut aus der Listenansicht aus und klicken Sie erneut auf die Schaltfläche (+), um einen Button-Block zu Ihrem Header hinzuzufügen.

Alles, was Sie jetzt tun müssen, ist, Ihrer Schaltfläche einen Text wie „Jetzt buchen!“ zu geben und den Link zu aktualisieren, um eine Weiterleitung für Website-Besucher einzurichten.

Um alles zusammenzufügen, wählen Sie die Zeile erneut aus und stellen Sie die Ausrichtung auf Volle Breite ein, wie wir es bei der ersten Zeile getan haben.

Um diesem Abschnitt dann ein ansprechenderes Aussehen zu verleihen, verwenden Sie das Menü Elemente-Ausrichtung ändern und wählen Sie die Option Elemente rechts ausrichten.

Und da haben Sie es! Ihre Kopfzeile ist nun vollständig und sieht perfekt aus. Klicken Sie einfach oben auf die Schaltfläche Speichern, um keine Änderungen zu verlieren.

Schritt 7: Fügen Sie Logos zu E-Mail-Vorlagen hinzu (optional)

Erwägen Sie, Ihr Logo zu einer E-Mail-Vorlage hinzuzufügen, um einheitliches Branding zu erzielen, das sich auch auf die von Ihrer WordPress-Website gesendeten E-Mails auswirkt.

Es ist einfach, die Funktionsweise von E-Mail-Benachrichtigungen in WPForms zu ändern. Gehen Sie zuerst zu WPForms » Einstellungen und klicken Sie auf die Registerkarte E-Mail.

Wählen Sie im Abschnitt Vorlage einen Stil, der am besten zu Ihrem Branding passt, und klicken Sie auf die Schaltfläche Auswählen, um ihn anzuwenden.

Danach navigieren Sie zum Abschnitt Kopfzeilenbild und klicken auf die Schaltfläche Bild hochladen, um Ihr Website-Logo zu E-Mails hinzuzufügen.

Nachdem Sie Ihr Bild hochgeladen haben, wählen Sie die gewünschte Größe für das Bild aus einem Dropdown-Menü aus, das in Ihren E-Mail-Benachrichtigungen verwendet werden soll.

Klicken Sie anschließend einfach auf den Link E-Mail-Vorlagen-Vorschau unter dem Dropdown-Menü für Typografie.

Ein neuer Tab wird in Ihrem Browser geöffnet, in dem Sie eine Vorschau Ihrer Benachrichtigungs-E-Mail-Vorlage mit Ihrem Website-Logo sehen können!

FAQs zur Bearbeitung der Kopfzeile in WordPress

Das Erlernen der Bearbeitung der Kopfzeile in WordPress ist ein beliebtes Thema bei unseren Lesern. Hier sind Antworten auf einige häufig gestellte Fragen dazu.

Wie passe ich meine Kopfzeile in WordPress an?

Um Ihre Kopfzeile in WordPress anzupassen, navigieren Sie zu Ihrem Dashboard und gehen Sie zu Darstellung > Anpassen. Hier finden Sie den Abschnitt Kopfzeile. Klicken Sie darauf, um verschiedene Optionen zu erkunden, wie z. B. das Ändern des Logos, das Anpassen des Kopfzeilenlayouts, der Farben und anderer Elemente. Einige Themes bieten zusätzliche Kopfzeilenoptionen, die Sie an Ihren Stil anpassen können.

Wie bearbeite ich Kopfzeilen-Schaltflächen in WordPress?

Die Bearbeitung von Kopfzeilen-Schaltflächen in WordPress beinhaltet normalerweise den Zugriff auf den Customizer über Darstellung > Anpassen. Suchen Sie dort nach den Einstellungen für Kopfzeile oder Menü. Sie können Schaltflächen bearbeiten, indem Sie ihren Text, Links und Stile ändern oder neue Elemente hinzufügen, wenn Ihr Theme dies unterstützt. Bei Bedarf können Sie auch benutzerdefinierten Code hinzufügen, um Kopfzeilen-Schaltflächen zu bearbeiten.

Wie setze ich meine Kopf- und Fußzeile in WordPress zurück?

Um Ihre Kopf- und Fußzeile in WordPress zurückzusetzen, gehen Sie zu Darstellung > Anpassen und wählen Sie den Abschnitt Kopfzeile oder Fußzeile. Suchen Sie in diesen Einstellungen nach einer Zurücksetzungsoption. Wenn keine vorhanden ist, müssen Sie möglicherweise Änderungen manuell rückgängig machen oder ein Plugin verwenden, das Zurücksetzungsfunktionen bietet.

Als Nächstes erfahren Sie, wie Sie ein mehrstufiges Formular in Elementor erstellen

Haben Sie sich jemals gefragt, wie Sie das Benutzerengagement und die Lead-Generierung auf Ihrer Website mit einem mehrstufigen Formular in Elementor steigern können? Diese Formulare führen Benutzer Schritt für Schritt durch den Prozess, wodurch er weniger überwältigend und benutzerfreundlicher wird.

Erstellen Sie jetzt Ihr WordPress-Formular

Bereit, Ihr Formular zu erstellen? Beginnen Sie noch heute mit dem einfachsten WordPress-Formular-Builder-Plugin. WPForms Pro enthält viele kostenlose Vorlagen und bietet eine 14-tägige Geld-zurück-Garantie.

Wenn Ihnen dieser Artikel geholfen hat, folgen Sie uns bitte auf Facebook und Twitter für weitere kostenlose WordPress-Tutorials und Anleitungen.