![\"\"](\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2020\/04\/Como-personalizar-encabezados-en-WordPress-complementos-codigo-personalizado.png\")
<\/p>\nSehen Sie den l\u00e4chelnden 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\u00e4ufig als erster Eindruck Ihres Besuchers dient. Es spielt keine Rolle, ob Ihre Website ein Blog, ein Online-Shop, eine digitale Geldb\u00f6rse oder etwas ganz anderes ist – der WordPress-Header ist \u00e4u\u00dferst wichtig.<\/p>\n
W\u00e4hrend 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\u00fcssel zum Aufbau von Vertrauen und Erfolg liegt darin, Ihren Besuchern einen guten ersten Eindruck zu vermitteln.<\/p>\n
Neue WordPress-Standardthemen bieten wundersch\u00f6ne Header-Bilder zur Auswahl. Das Thema Twenty Seventeen hat sogar ein Video auf seiner Homepage. Wenn Sie jedoch m\u00f6chten, dass Ihre Website auff\u00e4llt, m\u00fcssen Sie in der Lage sein, Ihren eigenen benutzerdefinierten WordPress-Header zu erstellen. Es gibt zwar viele gro\u00dfartige WordPress-Tutorials, einige konzentrieren sich jedoch nur auf den Header. Um Ihnen zu helfen, haben wir eine Liste mit M\u00f6glichkeiten zum Anpassen von WordPress-Headern zusammengestellt.<\/p>\n
In vielen Standard-WordPress-Designs k\u00f6nnen Sie Ihr eigenes benutzerdefiniertes WordPress-Header-Bild hochladen. Sie m\u00fcssen jedoch eine bestimmte Abmessung oder Gr\u00f6\u00dfe haben, damit sie gut funktionieren. Mit neueren Designs k\u00f6nnen Sie die Gr\u00f6\u00dfe Ihres Header- und Logo-Bilds \u00e4ndern, drehen und zuschneiden. M\u00f6glicherweise gibt es jedoch noch Einschr\u00e4nkungen.<\/p>\n
<\/p>\n
Dies empfehlen wir. Angenommen, Sie m\u00f6chten diese Hintergrundgrafik f\u00fcr Ihre Kopfzeile verwenden, indem Sie unsere eigene Website als Beispiel verwenden. Sie k\u00f6nnen 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\u00f6nnen Sie dessen Abmessungen abrufen. Auf diese Weise k\u00f6nnen Sie die Gr\u00f6\u00dfe Ihres bevorzugten Bilds an die Spezifikationen eines benutzerdefinierten WordPress-Header-Bildes anpassen.<\/p>\n
Einige Bilder und Logos sind im Website-Code versteckt und bieten nicht die M\u00f6glichkeit, mit der oben beschriebenen Methode zu speichern. Unser Header-Bild f\u00e4llt tats\u00e4chlich in diese Kategorie! Es gibt jedoch eine M\u00f6glichkeit, 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, \u00f6ffnet Ihr Browser ein Bedienfeld und markiert das ausgew\u00e4hlte Element zur \u00dcberpr\u00fcfung. Grunds\u00e4tzlich k\u00f6nnen Sie sehen, wie das Bild hinzugef\u00fcgt wurde. Was Sie wirklich wollen, ist eine URL oder einen Hyperlink zu finden, der in einem Bildformat endet. Am h\u00e4ufigsten sind .jpg und .png, aber es gibt auch andere. Kopieren Sie einfach diesen Link und f\u00fcgen Sie ihn in ein neues Fenster ein. Sie k\u00f6nnen das Bild nun wie oben beschrieben speichern.<\/p>\n
![\"\"](\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2020\/04\/1586642829_535_Como-personalizar-encabezados-en-WordPress-complementos-codigo-personalizado.png\")
<\/p>\n
Sie sind sich immer noch nicht sicher, welche Gr\u00f6\u00dfe f\u00fcr ein benutzerdefiniertes WordPress-Header-Bild am besten geeignet ist? Wenn Sie Ihr Bild f\u00fcr 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\u00e4t angezeigt werden soll, m\u00fcssen Sie ein Bild mit einer Breite von 480 Pixel verwenden. Wenn Sie diese Abmessungen korrekt festlegen, wird sichergestellt, dass Ihre Header-Bilder f\u00fcr Ihre Besucher schnell geladen werden.<\/p>\n
Was ist, wenn Sie f\u00fcr jede Seite Ihrer WordPress-Site ein anderes Headerbild oder eine andere Logo-Farbe w\u00fcnschen? Sie k\u00f6nnen ein kostenloses benutzerdefiniertes WordPress-Header-Plugin wie WP Header Images verwenden. Sie k\u00f6nnen jeder Webseite Ihre eigenen benutzerdefinierten WordPress-Header-Bilder hinzuf\u00fcgen. Sie k\u00f6nnen auch benutzerdefinierte Header-Bilder f\u00fcr Blog-Posts, benutzerdefinierte Posts und sogar WooCommerce-Produkte hinzuf\u00fcgen.<\/p>\n
Installieren Sie einfach das Plugin und gehen Sie zu Einstellungen> WP-Header-Bilder<\/strong>. Anschlie\u00dfend werden die Men\u00fc-Navigationsoptionen extrahiert. W\u00e4hlen Sie einfach das Bild aus, das Sie zu jeder Seite hinzuf\u00fcgen m\u00f6chten. Sie k\u00f6nnen sich auch ein Video-Tutorial des Erstellers auf YouTube ansehen.<\/p>\n herunterladen<\/p>\n Um noch mehr Kontrolle \u00fcber Ihren WordPress-Header zu erhalten, sollten Sie ein Premium-WordPress-Plugin f\u00fcr benutzerdefinierte Header wie Popping Sidebars & Widgets verwenden. Sie haben die M\u00f6glichkeit, Widgets oder eine kleine Box mit einem bestimmten Abschnitt zu erstellen. Sie k\u00f6nnen Text, ein Formular, Optionen f\u00fcr soziale Medien und mehr enthalten. Mit diesem Plugin k\u00f6nnen Sie diese Widgets jedoch zum Header hinzuf\u00fcgen.<\/p>\n Sie k\u00f6nnen Ihren urspr\u00fcnglichen Header \u00fcbergeben oder sogar Ihre Widgets darauf ver\u00f6ffentlichen. Das Plugin funktioniert auch f\u00fcr mobile Ger\u00e4te. Widgets k\u00f6nnen in einer Sprache, Vorlage, einem Beitrag, einer Kategorie, einem Tag, WooCommerce, BuddyPress und sogar in WPML-Sprachen angezeigt werden. Mit diesem Plugin k\u00f6nnen Sie auch Widgets in Ihrer Seitenleiste oder Fu\u00dfzeile ver\u00f6ffentlichen.<\/p>\n Alle WordPress-Header in Designs haben Standardeinstellungen, die \u00fcber den mitgelieferten Code vorgenommen werden. Sie k\u00f6nnen jedoch bearbeitet werden, wenn Sie keine Angst haben, w\u00e4hrend des Codierens ein wenig zu kopieren und einzuf\u00fcgen. Um die Datei zu finden, die Ihren Header enth\u00e4lt, rufen Sie Ihr WordPress-Dashboard auf. Dann geh zu Aussehen> Editor<\/strong>. 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\u00e4lt haupts\u00e4chlich die WordPress-Header-Funktionen, die wir hier nicht sehen werden.<\/p>\n Die markierte Datei ist die gew\u00fcnschte. Sie k\u00f6nnen das Wort “Header” in der Datei suchen, um zu sehen, welche Einstellungen aktuell sind. WICHTIGER HINWEIS: KOPIEREN UND EINF\u00dcGEN SIE IHRE ORIGINALDATEI IN EIN PROGRAMM, WENN SIE DIE GEFUNDENEN DATEIEN BEARBEITEN ERSCHEINUNGSBILD> HERAUSGEBER<\/strong>.<\/p>\n 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\u00f6nnen Sie Ihre Site in einem linken Bereich bearbeiten, w\u00e4hrend Sie Ihre \u00c4nderungen vor dem Speichern anzeigen. Viele davon bieten eine benutzerdefinierte CSS-Option. Sie k\u00f6nnen hier viele \u00c4nderungen kopieren und einf\u00fcgen, indem Sie Folgendes verwenden:<\/p>\n . Header { Dies w\u00fcrde die Hintergrundfarbe des Headers in Wei\u00df \u00e4ndern. Eine hexadezimale Farbe kann ebenfalls verwendet werden.<\/p>\n Sie k\u00f6nnen auch eine Menge anderer Befehle hinzuf\u00fcgen, indem Sie “background: white;” oder indem Sie eine Zeile darunter hinzuf\u00fcgen. Dazu geh\u00f6ren, ohne darauf beschr\u00e4nkt zu sein:<\/p>\n Wenn Ihr neuer Code nicht funktioniert, f\u00fcgen Sie am Ende des Befehls “! Important” hinzu, wie in “padding-left: 0! Important;”. Wenn dies immer noch nicht funktioniert, wird Ihr Header m\u00f6glicherweise nicht als “Header” bezeichnet. Einige WordPress-Themes verwenden andere Namen f\u00fcr ihre \u00dcberschriften. Dazu geh\u00f6ren Masthead, Online-Header und andere.<\/p>\n Jetzt, da Sie wissen, wie Sie WordPress-Header anpassen, ben\u00f6tigen Sie ein gro\u00dfartiges 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\u00fcr. Sie haben sogar alle anderen Elemente aus dem WordPress-Header entfernt und das Men\u00fc in die Seitenleiste verschoben. Es ist auch gro\u00dfartig, weil sie einen passenden Hintergrund enthalten, damit es so aussieht, als w\u00e4re die Site eine gro\u00dfartige Illustration.<\/p>\n Verwenden Sie bei der Auswahl von Bildern und Logos diejenigen, die sich auf Sie oder Ihr Unternehmen beziehen. Ja, Blumen sind h\u00fcbsch, aber wenn Sie kein Florist sind, k\u00f6nnen sie schwierig sein. Verwenden Sie nach M\u00f6glichkeit ein Bild \/ Logo Ihrer eigenen Arbeit, das sich hervorragend f\u00fcr Fotografen und Illustratoren eignet. Selbst Bauherren, Industrieunternehmen und andere Unternehmen k\u00f6nnen ein Bild von einem ihrer eigenen Produkte verwenden.<\/p>\n Sie k\u00f6nnen sogar ein Archivbild verwenden und Ihre eigenen Elemente wie auf der folgenden Website einbinden. Sie brachten ihren Namen geschickt auf ein Etikett \u00fcber den sich \u00f6ffnenden Vorh\u00e4ngen. Dies w\u00e4re eine gro\u00dfartige Idee f\u00fcr ein Theater, einen Schauspieler oder irgendeine Art von Musiker.<\/p>\n Schauen Sie sich die Optionen dieses Bloggers f\u00fcr 14 k\u00fcnstlerische WordPress-Header-Layouts an. Hier gibt es einige \u00fcberraschende Beispiele. W\u00e4hrend einige von ihnen m\u00f6glicherweise nicht ideal f\u00fcr jemanden sind, der gerade erst mit WordPress anf\u00e4ngt, eignen sie sich hervorragend, um einem Designer zu zeigen, was er m\u00f6chte.<\/p>\n Diese \u00dcberschrift ist ein gro\u00dfartiges Beispiel f\u00fcr einen K\u00fcnstler, der seine eigenen Arbeiten verwendet, erg\u00e4nzt durch ein Banner mit einem klaren CTA. Obwohl dieser benutzerdefinierte WordPress-Header veralteter ist, f\u00e4llt er durch die Kombination aus traditionellen Blumen und modernen Raumelementen auf. Beachten Sie, wie es scheint, dass der Roboter im Men\u00fc in dieser \u00dcberschrift spricht.<\/p>\n Obwohl keine zwei WordPress-\u00dcberschriften gleich sind, m\u00fcssen sie alle einen \u00e4hnlichen Zweck haben. Sie m\u00fcssen den Besuchern zeigen, worum es auf ihrer Website geht. Die \u00dcberschriften m\u00fcssen einen klaren Punkt haben. Sie m\u00fcssen mit dem Rest der Site gemischt werden. Die \u00dcberschriften sollten nicht mit zu vielen Eingabeaufforderungen, Popups usw. gef\u00fcllt sein.<\/p>\n Wenn Sie Hilfe beim Anpassen Ihres Headers ben\u00f6tigen oder Ihre WordPress-Site optimal nutzen m\u00f6chten, kontaktieren Sie uns bitte, um zu erfahren, wie wir Ihnen helfen k\u00f6nnen. Sie k\u00f6nnen auch unseren Newsletter abonnieren, um unsere erstaunlichen Tipps zu erhalten.<\/p>\n SaveSave<\/p>\n SaveSaveSaveSave<\/p>\n SaveSave<\/p>\n SaveSave<\/p>\n Sehen Sie den l\u00e4chelnden 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\u00e4ufig als erster Eindruck Ihres Besuchers dient. Es spielt keine Rolle, ob Ihre Website […]<\/p>\n","protected":false},"author":1,"featured_media":55471,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","fifu_image_url":"https:\/\/blogging-techies.com\/wp-content\/uploads\/2020\/04\/C\u00f3mo-personalizar-encabezados-en-WordPress-complementos-c\u00f3digo-personalizado.png","fifu_image_alt":""},"categories":[7],"tags":[],"_links":{"self":[{"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/posts\/55470"}],"collection":[{"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/comments?post=55470"}],"version-history":[{"count":0,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/posts\/55470\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/media\/55471"}],"wp:attachment":[{"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/media?parent=55470"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/categories?post=55470"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/tags?post=55470"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}Inhaltsaktualisierung<\/h2>\n
Kostenlose WordPress-Sicherheitscheckliste<\/h4>\n
![\"\"](\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2020\/03\/1584113517_247_WooCommerce-para-principiantes-como-usar-WooCommerce.png\")
<\/p>\n(4 Seiten<\/u>) Die 21-Stufen-Checkliste f\u00fcr
Sichern Sie eine zu 99,9% sichere WordPress-Website<\/h3>\n2. Verwenden eines benutzerdefinierten WordPress Plugin-Headers<\/h2>\n
![\"benutzerdefiniertes](\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2020\/04\/1586642829_454_Como-personalizar-encabezados-en-WordPress-complementos-codigo-personalizado.png\")
<\/p>\n3. So bearbeiten Sie den Header in WordPress-Designs mithilfe von Code<\/h2>\n
![\"So](\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2020\/04\/1586642829_469_Como-personalizar-encabezados-en-WordPress-complementos-codigo-personalizado.png\")
<\/p>\n
Wei\u00dfer Hintergrund;}<\/p>\nWeitere Befehle zum Anpassen des WordPress-Headers<\/h3>\n
\n
4. \u00c4ndern Sie den WordPress-Header mithilfe von Best Practices<\/h2>\n
![\"So](\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2020\/04\/1586642829_599_Como-personalizar-encabezados-en-WordPress-complementos-codigo-personalizado.png\")
<\/p>\n![\"So](\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2020\/04\/1586642829_443_Como-personalizar-encabezados-en-WordPress-complementos-codigo-personalizado.png\")
<\/p>\n5. BONUS: Beispiele f\u00fcr benutzerdefinierte WordPress-Header<\/h2>\n
![\"Benutzerdefinierter](\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2020\/04\/1586642830_905_Como-personalizar-encabezados-en-WordPress-complementos-codigo-personalizado.png\")
<\/p>\n![\"Benutzerdefinierter](\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2020\/04\/1586642830_107_Como-personalizar-encabezados-en-WordPress-complementos-codigo-personalizado.png\")
<\/p>\n![\"Benutzerdefinierter](\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2020\/04\/1586642830_708_Como-personalizar-encabezados-en-WordPress-complementos-codigo-personalizado.png\")
<\/p>\nVerpacken<\/h2>\n
![](\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2020\/04\/1586642830_26_Como-personalizar-encabezados-en-WordPress-complementos-codigo-personalizado.png\")
\t\t<\/p>\n ","protected":false},"excerpt":{"rendered":"