Sehen Sie den lächelnden Kerl “WP Buffs” (mit anderen Worten unser Logo) und die Navigationsoptionen in diesem Blog-Beitrag? Dies ist der Header unserer WordPress-Site. Es ist ein universelles Element, das sich auf jeder Seite und jedem Beitrag Ihrer Website befindet und häufig als erster Eindruck Ihres Besuchers dient. Es spielt keine Rolle, ob Ihre Website ein Blog, ein Online-Shop, eine digitale Geldbörse oder etwas ganz anderes ist – der WordPress-Header ist äußerst wichtig.
Während es wichtig ist, Ihre Website zu 99,9% sicher zu halten und Ladezeiten von weniger als 1 Sekunde zu erreichen, ist der Header das erste, was die Leute sehen, wenn sie auf Ihrer Website landen. Der Schlüssel zum Aufbau von Vertrauen und Erfolg liegt darin, Ihren Besuchern einen guten ersten Eindruck zu vermitteln.
Neue WordPress-Standardthemen bieten wunderschöne Header-Bilder zur Auswahl. Das Thema Twenty Seventeen hat sogar ein Video auf seiner Homepage. Wenn Sie jedoch möchten, dass Ihre Website auffällt, müssen Sie in der Lage sein, Ihren eigenen benutzerdefinierten WordPress-Header zu erstellen. Es gibt zwar viele großartige WordPress-Tutorials, einige konzentrieren sich jedoch nur auf den Header. Um Ihnen zu helfen, haben wir eine Liste mit Möglichkeiten zum Anpassen von WordPress-Headern zusammengestellt.
1. Benutzerdefiniertes WordPress-Header-Bild
In vielen Standard-WordPress-Designs können Sie Ihr eigenes benutzerdefiniertes WordPress-Header-Bild hochladen. Sie müssen jedoch eine bestimmte Abmessung oder Größe haben, damit sie gut funktionieren. Mit neueren Designs können Sie die Größe Ihres Header- und Logo-Bilds ändern, drehen und zuschneiden. Möglicherweise gibt es jedoch noch Einschränkungen.
Dies empfehlen wir. Angenommen, Sie möchten diese Hintergrundgrafik für Ihre Kopfzeile verwenden, indem Sie unsere eigene Website als Beispiel verwenden. Sie können fast jedes Bild auf einer Website herunterladen, indem Sie mit der rechten Maustaste darauf klicken. Sie erhalten eine Nachricht mit der Aufforderung “Bild speichern unter”. Sobald Sie das Header-Bild auf Ihre eigene Site heruntergeladen haben, können Sie dessen Abmessungen abrufen. Auf diese Weise können Sie die Größe Ihres bevorzugten Bilds an die Spezifikationen eines benutzerdefinierten WordPress-Header-Bildes anpassen.
Was passiert, wenn das benutzerdefinierte WordPress-Header-Bild nicht heruntergeladen wird?
Einige Bilder und Logos sind im Website-Code versteckt und bieten nicht die Möglichkeit, mit der oben beschriebenen Methode zu speichern. Unser Header-Bild fällt tatsächlich in diese Kategorie! Es gibt jedoch eine Möglichkeit, sie zu erhalten. Klicken Sie mit der rechten Maustaste erneut auf das Bild, indem Sie dasselbe Bild von unserer Website und Safari verwenden. Sie erhalten eine Option zu “Inspizieren”. Sobald Sie darauf klicken, öffnet Ihr Browser ein Bedienfeld und markiert das ausgewählte Element zur Überprüfung. Grundsätzlich können Sie sehen, wie das Bild hinzugefügt wurde. Was Sie wirklich wollen, ist eine URL oder einen Hyperlink zu finden, der in einem Bildformat endet. Am häufigsten sind .jpg und .png, aber es gibt auch andere. Kopieren Sie einfach diesen Link und fügen Sie ihn in ein neues Fenster ein. Sie können das Bild nun wie oben beschrieben speichern.
Sie sind sich immer noch nicht sicher, welche Größe für ein benutzerdefiniertes WordPress-Header-Bild am besten geeignet ist? Wenn Sie Ihr Bild für die Anzeige auf Desktop- oder Laptop-Computern optimieren, sollten Sie ein Bild mit einer Breite von 1920 Pixel verwenden. Wenn Ihre Website nur von einem mobilen Gerät angezeigt werden soll, müssen Sie ein Bild mit einer Breite von 480 Pixel verwenden. Wenn Sie diese Abmessungen korrekt festlegen, wird sichergestellt, dass Ihre Header-Bilder für Ihre Besucher schnell geladen werden.
Benutzerdefiniertes WordPress-Header-Bild für jede Seite
Was ist, wenn Sie für jede Seite Ihrer WordPress-Site ein anderes Headerbild oder eine andere Logo-Farbe wünschen? Sie können ein kostenloses benutzerdefiniertes WordPress-Header-Plugin wie WP Header Images verwenden. Sie können jeder Webseite Ihre eigenen benutzerdefinierten WordPress-Header-Bilder hinzufügen. Sie können auch benutzerdefinierte Header-Bilder für Blog-Posts, benutzerdefinierte Posts und sogar WooCommerce-Produkte hinzufügen.
Installieren Sie einfach das Plugin und gehen Sie zu Einstellungen> WP-Header-Bilder. Anschließend werden die Menü-Navigationsoptionen extrahiert. Wählen Sie einfach das Bild aus, das Sie zu jeder Seite hinzufügen möchten. Sie können sich auch ein Video-Tutorial des Erstellers auf YouTube ansehen.
Inhaltsaktualisierung
Kostenlose WordPress-Sicherheitscheckliste
(4 Seiten) Die 21-Stufen-Checkliste für
Sichern Sie eine zu 99,9% sichere WordPress-Website
herunterladen
2. Verwenden eines benutzerdefinierten WordPress Plugin-Headers
Um noch mehr Kontrolle über Ihren WordPress-Header zu erhalten, sollten Sie ein Premium-WordPress-Plugin für benutzerdefinierte Header wie Popping Sidebars & Widgets verwenden. Sie haben die Möglichkeit, Widgets oder eine kleine Box mit einem bestimmten Abschnitt zu erstellen. Sie können Text, ein Formular, Optionen für soziale Medien und mehr enthalten. Mit diesem Plugin können Sie diese Widgets jedoch zum Header hinzufügen.
Sie können Ihren ursprünglichen Header übergeben oder sogar Ihre Widgets darauf veröffentlichen. Das Plugin funktioniert auch für mobile Geräte. Widgets können in einer Sprache, Vorlage, einem Beitrag, einer Kategorie, einem Tag, WooCommerce, BuddyPress und sogar in WPML-Sprachen angezeigt werden. Mit diesem Plugin können Sie auch Widgets in Ihrer Seitenleiste oder Fußzeile veröffentlichen.
3. So bearbeiten Sie den Header in WordPress-Designs mithilfe von Code
Alle WordPress-Header in Designs haben Standardeinstellungen, die über den mitgelieferten Code vorgenommen werden. Sie können jedoch bearbeitet werden, wenn Sie keine Angst haben, während des Codierens ein wenig zu kopieren und einzufügen. Um die Datei zu finden, die Ihren Header enthält, rufen Sie Ihr WordPress-Dashboard auf. Dann geh zu Aussehen> Editor. Sie sehen nun die Dateien, aus denen Ihre Site besteht. Der Header ist in der Datei enthalten, die im folgenden Screenshot unterstrichen ist. Diese Datei enthält hauptsächlich die WordPress-Header-Funktionen, die wir hier nicht sehen werden.
Die markierte Datei ist die gewünschte. Sie können das Wort “Header” in der Datei suchen, um zu sehen, welche Einstellungen aktuell sind. WICHTIGER HINWEIS: KOPIEREN UND EINFÜGEN SIE IHRE ORIGINALDATEI IN EIN PROGRAMM, WENN SIE DIE GEFUNDENEN DATEIEN BEARBEITEN ERSCHEINUNGSBILD> HERAUSGEBER.
Was wir aber wirklich wollen, ist, den Header in Ihrem WordPress-Theme zu bearbeiten. Eines der besten Dinge an WordPress ist, dass immer mehr Themen eine Art Live-Customizer haben. Mit diesen können Sie Ihre Site in einem linken Bereich bearbeiten, während Sie Ihre Änderungen vor dem Speichern anzeigen. Viele davon bieten eine benutzerdefinierte CSS-Option. Sie können hier viele Änderungen kopieren und einfügen, indem Sie Folgendes verwenden:
. Header {
Weißer Hintergrund;}
Dies würde die Hintergrundfarbe des Headers in Weiß ändern. Eine hexadezimale Farbe kann ebenfalls verwendet werden.
Weitere Befehle zum Anpassen des WordPress-Headers
Sie können auch eine Menge anderer Befehle hinzufügen, indem Sie “background: white;” oder indem Sie eine Zeile darunter hinzufügen. Dazu gehören, ohne darauf beschränkt zu sein:
- Schriftart: kursiv; – Ändern Sie den Schriftstil in Kursivschrift.
- Hintergrundopazität: .5; Ändern Sie die Deckkraft des Hintergrunds. 0 steht für einen vollständig transparenten Hintergrund. 1 ist für eine, die überhaupt nicht transparent ist.
- Schriftgröße: 20px; Ändern Sie die Schriftgröße in der Kopfzeile auf 20 Pixel. Sie können 20 in eine beliebige Zahl ändern.
- Polsterung: 20px; – Ändern Sie die Füllung oder den Abstand um die Kopfzeile auf 20 Pixel. Wie oben können Sie 20 nach Belieben ändern. Sie können auch angeben, auf welche Seite die Polsterung gehen soll, indem Sie einfach “-left” zu “padding” hinzufügen. Es funktioniert auch hoch, runter und richtig.
- Kante: 20px – Dadurch wird ein Rand um den Header erstellt, der 20 Pixel breit ist. Wie oben können Sie auch einen Bindestrich und eine Seite hinzufügen, um einen Rahmen nur für oben, unten, links oder rechts zu erstellen.
- Randfarbe: weiß; – Dadurch wird die Farbe Ihres Rahmens in Weiß geändert. Sie können auch eine Hex-Farbe verwenden.
- Zeilenhöhe: 20 px; – Hiermit wird der Platz so eingestellt, dass er der Größe Ihrer Schriftart entspricht. Dies kann nützlich sein, wenn Sie eine größere Schriftart verwenden und diese sich in Zeilenumbrüchen überschneidet.
Wenn Ihr neuer Code nicht funktioniert, fügen Sie am Ende des Befehls “! Important” hinzu, wie in “padding-left: 0! Important;”. Wenn dies immer noch nicht funktioniert, wird Ihr Header möglicherweise nicht als “Header” bezeichnet. Einige WordPress-Themes verwenden andere Namen für ihre Überschriften. Dazu gehören Masthead, Online-Header und andere.
4. Ändern Sie den WordPress-Header mithilfe von Best Practices
Jetzt, da Sie wissen, wie Sie WordPress-Header anpassen, benötigen Sie ein großartiges Layout, um dies zu tun. Weiche Fotos nicht immer. Ein guter Tipp ist die Verwendung einer Illustration. Diese eignen sich hervorragend, um Aufmerksamkeit zu erregen und Ihren Besucher anzulocken. Die folgende Seite ist ein gutes Beispiel dafür. Sie haben sogar alle anderen Elemente aus dem WordPress-Header entfernt und das Menü in die Seitenleiste verschoben. Es ist auch großartig, weil sie einen passenden Hintergrund enthalten, damit es so aussieht, als wäre die Site eine großartige Illustration.
Verwenden Sie bei der Auswahl von Bildern und Logos diejenigen, die sich auf Sie oder Ihr Unternehmen beziehen. Ja, Blumen sind hübsch, aber wenn Sie kein Florist sind, können sie schwierig sein. Verwenden Sie nach Möglichkeit ein Bild / Logo Ihrer eigenen Arbeit, das sich hervorragend für Fotografen und Illustratoren eignet. Selbst Bauherren, Industrieunternehmen und andere Unternehmen können ein Bild von einem ihrer eigenen Produkte verwenden.
Sie können sogar ein Archivbild verwenden und Ihre eigenen Elemente wie auf der folgenden Website einbinden. Sie brachten ihren Namen geschickt auf ein Etikett über den sich öffnenden Vorhängen. Dies wäre eine großartige Idee für ein Theater, einen Schauspieler oder irgendeine Art von Musiker.
5. BONUS: Beispiele für benutzerdefinierte WordPress-Header
Schauen Sie sich die Optionen dieses Bloggers für 14 künstlerische WordPress-Header-Layouts an. Hier gibt es einige überraschende Beispiele. Während einige von ihnen möglicherweise nicht ideal für jemanden sind, der gerade erst mit WordPress anfängt, eignen sie sich hervorragend, um einem Designer zu zeigen, was er möchte.
Diese Überschrift ist ein großartiges Beispiel für einen Künstler, der seine eigenen Arbeiten verwendet, ergänzt durch ein Banner mit einem klaren CTA.
Obwohl dieser benutzerdefinierte WordPress-Header veralteter ist, fällt er durch die Kombination aus traditionellen Blumen und modernen Raumelementen auf.
Beachten Sie, wie es scheint, dass der Roboter im Menü in dieser Überschrift spricht.
Verpacken
Obwohl keine zwei WordPress-Überschriften gleich sind, müssen sie alle einen ähnlichen Zweck haben. Sie müssen den Besuchern zeigen, worum es auf ihrer Website geht. Die Überschriften müssen einen klaren Punkt haben. Sie müssen mit dem Rest der Site gemischt werden. Die Überschriften sollten nicht mit zu vielen Eingabeaufforderungen, Popups usw. gefüllt sein.
Wenn Sie Hilfe beim Anpassen Ihres Headers benötigen oder Ihre WordPress-Site optimal nutzen möchten, kontaktieren Sie uns bitte, um zu erfahren, wie wir Ihnen helfen können. Sie können auch unseren Newsletter abonnieren, um unsere erstaunlichen Tipps zu erhalten.
SaveSave
SaveSaveSaveSave
SaveSave
SaveSave
