Sieht Ihre Website für die Besucher ansprechend genug aus? Oder ist es nur eine normale Website unter Millionen von anderen! Möchten Sie, dass sich Ihre Website von der Masse abhebt? Möchten Sie, dass jede Seite Ihrer Website anders aussieht und ein anderes Gefühl vermittelt? Was, wenn ich sage, dass der Schlüssel zur Lösung all dieser Probleme in Ihren eigenen Händen liegt? Und dieser Schlüssel ist – Custom Header!! Ja, Sie haben es richtig gelesen. Lassen Sie uns sehen, wie…

Eine Kopfzeile ist das wichtigste visuelle Element Ihrer Website, das die oberste Position einnimmt. Es ist das erste, was ein Besucher sieht, wenn er auf Ihrer Website landet. Die Kopfzeile Ihrer Website ist das Erkennungszeichen Ihrer Website, das auf allen Seiten der Website gleich bleibt. Sie können ihn nutzen, um einen guten und dauerhaften Eindruck bei den Besuchern zu hinterlassen. Sie können sich abheben und das Vertrauen der Benutzer gewinnen, indem Sie bemerkenswerte, selbstdarstellende benutzerdefinierte Kopfzeilen erstellen. Ein benutzerdefinierter Header in WordPress ist eine Funktion, mit der Sie das Header-Bild zusammen mit dem Hinzufügen von Text, Widgets usw. anpassen können. Sie können diese Elemente auch nach Ihrem Bedarf anpassen, um das beste Bild Ihrer Website zu zeigen. Hier bei Templatetoaster Website Builder Software, überprüfen Sie, wie benutzerdefinierte Header mit WordPress Theme Builder zu erstellen.

WordPress Custom Header: Warum brauchen Sie eigentlich einen?

Der Header ist eines der wichtigsten Elemente Ihrer Website. Er ist eine Geste, die viel über Ihre Website aussagt. In der Regel enthält er ein Bild oder ein Video, um die Aufmerksamkeit des Besuchers zu wecken. Nach Angaben der Nielsen Norman Group verweilt ein Besucher nur 10-20 Sekunden auf Ihrer Website. Der Header sollte also ansprechend sein, um das Interesse der Besucher zu wecken.

Ein benutzerdefinierter Header in WordPress bietet Ihnen mehr Kontrolle und Flexibilität. Sie können ein Header-Bild drehen, in der Größe verändern oder zuschneiden und auch das Logo, den Text oder die Widgets neu positionieren. Sie können ihn so gestalten, dass er das Aussehen Ihrer Website kontrastiert. Sie müssen es als Angebot an die Zielgruppe verwenden. Versuchen Sie, Ihre Tagline in der benutzerdefinierten Kopfzeile in WordPress zu zitieren. Denn Sie haben keine zweite Chance, einen guten ersten Eindruck zu hinterlassen. Ein gut strukturierter Header sollte die Frage beantworten, warum Sie einzigartig sind, was Ihre Website alles bietet usw.

Ein benutzerdefinierter Header ist also wichtig, da er als Gesicht Ihrer Website fungiert. Er sollte in der Lage sein, dem Publikum den Kern und die Stimmung Ihrer Website zu vermitteln. Sie können für jede Seite einen anderen WordPress-Header verwenden. Zum Beispiel können Sie die Merkmale Ihres Produkts in die Kopfzeile der Seite „Über uns“ einfügen und den Rest der Seiten ohne Merkmale. Das kann Wunder bewirken!

Wie fügt man einen benutzerdefinierten Header zu WordPress hinzu?

Die Standard-WordPress-Themes ermöglichen Ihnen die Verwendung benutzerdefinierter Header. Sie können Ihre eigenen benutzerdefinierten Header-Bilder nach Ihren Wünschen einfügen. Das Einrichten eines benutzerdefinierten WordPress-Header-Bildes erfordert ein paar Anstrengungen. Das Hinzufügen eines benutzerdefinierten Headers zu den Standard-WordPress-Themes erfolgt im Wesentlichen in zwei Schritten

1. Erstellen und bearbeiten Sie Ihr Bild

Wählen Sie zunächst ein verlockendes Bild aus. Es sollte einfach und einzigartig sein. Sie können viele kostenlose Bilder im Internet finden. Weitere Einzelheiten finden Sie auf 16 Websites, auf denen Sie kostenlose Bilder erhalten. Sobald Sie Ihr Header-Bild ausgewählt haben, müssen Sie es nur noch bearbeiten.

Sie können einige der nützlichen Desktop-Bearbeitungsprogramme oder kostenlose webbasierte Bearbeitungsprogramme verwenden. Sie können das ausgewählte Bild mit GIMP, paint.net usw. verjüngen. GIMP ist eine kostenlose und quelloffene Bildbearbeitungssoftware. Sie bietet Ihnen viele ausgefeilte Werkzeuge, um Ihrem Bild einen besonderen Touch zu verleihen. Paint.net hingegen erleichtert die Bearbeitung von Bildern unter Windows. 2. Laden Sie die benutzerdefinierte Kopfzeile hoch

Um das Kopfzeilenbild hochzuladen, loggen Sie sich in Ihr WordPress-Dashboard ein. Navigieren Sie auf der linken Seite zu Erscheinungsbild → Kopfzeile.

Es öffnet sich ein Kopfzeilen-Medienfenster auf der linken Seite des Bildschirms. Gehen Sie zu Header Image und klicken Sie auf die Schaltfläche Add New Image.

Dadurch wird die Bildergalerie geöffnet, in der Sie das Bild auswählen können. Sie können hier auch Ihr eigenes Bild durchsuchen. Wählen Sie das Bild aus und schneiden Sie es bei Bedarf zu. Legen Sie es als benutzerdefiniertes Kopfzeilenbild fest. Sie sind fertig.

Wie passt man die Kopfzeile in WordPress an?

Wenn Sie das benutzerdefinierte Kopfzeilenbild des WordPress-Themas hochgeladen haben, können Sie es bearbeiten, um Videos, Text, Widgets, soziale Symbole usw. einzufügen. Sie können jedes Standard-WordPress-Theme verwenden. Hier erhalten Sie einen Beispielcode zum Bearbeiten der benutzerdefinierten Kopfzeile im Twenty Seventeen-Theme.

1. Fügen Sie einen Textbereich zum Header hinzu

Mit dem Standard-Theme können Sie nur den Titel der Website ändern. Aber um einen Textbereich hinzuzufügen, müssen Sie einen Code in die Datei header-image.php schreiben. Fügen Sie den folgenden Code hinzu, um einen Textbereich in der Kopfzeile zu erhalten

Nach dem Hinzufügen dieses Codes sehen Sie einen separaten Textbereich in der Kopfzeile, wie unten gezeigt

2. Soziale Symbole hinzufügen

Um soziale Symbole in der Kopfzeile hinzuzufügen, fügen Sie den folgenden Code in die site-branding.php nach der Klasse wrap ein.

Sie müssen auch CSS angeben, wenn Sie die sozialen Symbole in Ihrem eigenen Stil gestalten wollen.

Sie erhalten dann die gewünschten Ergebnisse wie gezeigt

3. Fügen Sie ein Widget zum Header hinzu

Wenn Sie Ihre Website mit Widgets ausstatten wollen, müssen Sie eine Funktion in der Datei function.php definieren. Sie können diesen Code am Ende der Datei einfügen.

Nachdem Sie das getan haben, fügen Sie diesen HTML-Code in die Datei header-image.php ein, um das spezifische Widget im Frontend anzuzeigen.

Nun gehen Sie zu Erscheinungsbild → Widgets. Von hier aus können Sie jedes beliebige Widget zu Ihrer benutzerdefinierten Kopfzeilenposition hinzufügen. Zum Beispiel wird das Such-Widget hinzugefügt, indem Sie es einfach auf die benutzerdefinierte Header-Position ziehen.

Der resultierende Header wird in etwa so aussehen

4. Das Logo neu positionieren

Sie können ein Logo zu den Standard-WordPress-Optionen hinzufügen. Navigieren Sie zu Erscheinungsbild → Kopfzeile → Kopfzeilenmedien → Abschnitt Logo. Legen Sie hier ein Logo fest, indem Sie auf die Option „Logo auswählen“ klicken.

Um es jedoch neu zu positionieren, müssen Sie zusätzliche CSS schreiben. Im Twenty Seventeen-Theme wird das Logo standardmäßig unten links positioniert, wie unten gezeigt

Hier sehen Sie ein Beispiel-CSS, um das Logo in der Mitte zu positionieren. Sie können es aber auch an einer beliebigen Stelle in der Kopfzeile platzieren.

.custom-logo-link {padding-right: 2em;position: absolute;left: 500px;top: 0px;}

5. Video zum Header hinzufügen

Schließlich können Sie auch ein Video zu Ihrem WordPress-Header hinzufügen. Zum Glück müssen Sie dafür keinen Code hinzufügen. WordPress bietet Ihnen eine Standardoption, um ein Video oder ein Hintergrundbild hinzuzufügen.

Um ein Video zum Header hinzuzufügen, navigieren Sie zu Darstellung → Header → Header Media → Header Video. Hier klicken Sie auf die Schaltfläche Video auswählen, wie unten gezeigt. Dann können Sie das Video, das Sie in der Kopfzeile haben möchten, von Ihrem Computer aus suchen. Alternativ können Sie auch die URL des Videos angeben, wenn es online ist. Veröffentlichen Sie es einfach.

So sieht Ihr Header-Video aus

Auch können Sie ein Header-Hintergrundbild hinzufügen, indem Sie ein beliebiges Header-Bild aus dem Bereich Header-Medien auswählen.

Sie können verschiedene WordPress-Header pro Seite einrichten, z. B. einige mit einem Hintergrundbild, einige mit einem Video oder Widgets usw. Es hängt alles von Ihrer Wahl und Kreativität ab.

Wie erstellt man einen benutzerdefinierten Header in WordPress von Grund auf mit TemplateToaster?

Sie sollten gute Kenntnisse in PHP, HTML, CSS haben, um mit Template-Dateien zu arbeiten. Wenn Sie ein Anfänger sind und nicht wissen, wie man Code schreibt, können Sie sich auf TemplateToaster WordPress Theme Builder verlassen. Sie brauchen keine Kodierung, um WordPress benutzerdefinierte Header-Vorlage zu erstellen. Nur ein paar Klicks auf Drag & Drop-Schnittstelle und Sie sind bereit mit Ihrem benutzerdefinierten Header. Sehen wir uns an, wie man mit TemplateToaster

einen benutzerdefinierten Header zu WordPress hinzufügt: Laden Sie zunächst TemplateToaster herunter und installieren Sie es. Nach erfolgreicher Installation erhalten Sie den CMS-Auswahlbildschirm wie unten gezeigt. Wählen Sie hier WordPress aus

Dann erhalten Sie den nächsten Bildschirm, um eine Vorlage von Grund auf zu erstellen oder eine Mustervorlage zu verwenden. Wählen Sie Start from Scratch und klicken Sie auf Modify.

Dann werden Sie zur Hauptschnittstelle der Software weitergeleitet, von wo aus Sie mit der Gestaltung Ihrer individuellen Kopfzeile beginnen können.

1. Benutzerdefinierte Kopfzeile über die gesamte Breite

Sie erhalten den Hauptbildschirm der Software wie unten dargestellt. Von hier aus können Sie eine Kopfzeile in voller Breite einstellen. Gehen Sie zu Kopfzeile → Breite → Volle Breite.

2. Logo neu positionieren

Auf der Registerkarte Kopfzeile klicken Sie auf die Option Logo. Daraufhin wird eine Logogalerie geöffnet. Sie können ein Logobild aus der Musterbibliothek auswählen oder Ihr eigenes benutzerdefiniertes Bild durchsuchen. Damit wird das Logo festgelegt.

Wenn Sie auf das Logobild doppelklicken, öffnet sich eine Registerkarte Format, wie unten gezeigt. Von hier aus können Sie einen Link zum Logobild angeben oder seine Position festlegen. Sie können es neu positionieren, indem Sie eine benutzerdefinierte linke und obere Position angeben oder ein Positionskürzel auswählen. In diesem Beispiel ist das Logo vertikal-mittig positioniert.

3. Hintergrundbild hinzufügen

Wählen Sie die Option Hintergrund auf der Registerkarte Kopfzeile, um ein Hintergrundbild für die Kopfzeile festzulegen. Es wird eine Bildergalerie geöffnet. Sie können auch Ihr eigenes benutzerdefiniertes Kopfzeilenbild über die Option „Weitere Bilder“ aufrufen.

Gleichermaßen können Sie ein Vordergrund-Kopfzeilenbild hinzufügen, indem Sie auf die Option „Bild“ auf der Registerkarte „Kopfzeile“ klicken.

4. Textbereich zur Kopfzeile hinzufügen

Wenn Sie die Tagline und relevante Informationen in der Kopfzeile anzeigen möchten, können Sie einen Textbereich verwenden. In den Textbereich können Sie einfachen Text, Schaltflächen, Listen usw. einfügen. Klicken Sie auf die Option Textbereiche.

Fügen Sie Inhalte hinzu und gestalten Sie sie durch einen Doppelklick. Ein Doppelklick öffnet eine Editor-Registerkarte zum Bearbeiten des Inhalts.

5. Widget zur Kopfzeile hinzufügen

Sie können mit einem einzigen Klick einen Widget-Bereich zur Kopfzeile hinzufügen. Gehen Sie zur Registerkarte Widgetbereiche und klicken Sie auf die Option Widgetbereiche → Kopfzeile. Sie können auch die Typografie für dieses Widget festlegen und es durch einfaches Ziehen an eine beliebige Stelle in der Kopfzeile verschieben. Nach dem Export können Sie Inhalte hinzufügen.

6. Social Icons zur Kopfzeile hinzufügen

Das Hinzufügen von Social Media Icons zur Kopfzeile ist wirklich einfach. Klicken Sie auf der Registerkarte „Kopfzeile“ auf die Option „Social Icons“. Es öffnet sich eine Galerie mit sozialen Symbolen, aus der Sie ein Bild nach Ihrem Bedarf auswählen können. Sie können hier auch Ihr eigenes Symbol suchen.

Alle Symbole für soziale Medien sind hier verfügbar. Sie können die Icons nach Ihren Anforderungen behalten. Sie können hier Icons für Facebook, Twitter und Google+ einfügen.

7. Video zur Kopfzeile hinzufügen

Um ein Video hinzuzufügen, klicken Sie auf die Option Video hinzufügen. Von hier aus können Sie ganz einfach ein Kopfzeilen-Hintergrundvideo hochladen.

Schlusswort

Sie haben jetzt gelernt, wie man eine benutzerdefinierte Kopfzeile in WordPress erstellt. Es wird definitiv das Aussehen Ihrer Website verändern. Für welche Lösung Sie sich entscheiden, ist ganz Ihnen überlassen. Hoffentlich hat Ihnen der Beitrag gefallen. Wenn Sie Fragen haben, können Sie im Kommentarbereich unten posten.

Related reading: WordPress 101 Tutorial

Die besten WordPress-Hosting-Anbieter

Wie man die WordPress-Version überprüft

Wie man die WordPress-Login-Url findet

Wie man WordPress installiert

Welches WordPress-Theme ist das

Wie ändere ich die WordPress-Sprache

Wie erstelle ich eine benutzerdefinierte WordPress-Anmeldeseite

Wie erstelle ich ein WordPress-Theme von Grund auf

Wie behebe ich, dass das WordPress-Seiten-Update nicht funktioniert