{"id":6288,"date":"2025-09-15T13:40:19","date_gmt":"2025-09-15T13:40:19","guid":{"rendered":"\/de\/tutorials\/?p=6288"},"modified":"2026-01-30T23:55:11","modified_gmt":"2026-01-30T23:55:11","slug":"wordpress-header","status":"publish","type":"post","link":"\/de\/tutorials\/wordpress-header\/","title":{"rendered":"Wie Sie mit dem Site-Editor und dem Customizer einen WordPress Header bearbeiten + n\u00fctzliche Tipps"},"content":{"rendered":"<p class=\"wp-block-paragraph\">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&auml;t verbessern, die Navigation optimieren oder das Erscheinungsbild Ihrer Website auffrischen.<\/p><p class=\"wp-block-paragraph\">Mit WordPress k&ouml;nnen Benutzer ihre Header mit dem <strong>Customizer<\/strong> und <strong>Site Editor<\/strong> leicht bearbeiten. Beide Optionen sind schnell und anf&auml;ngerfreundlich, so dass Sie je nach Ihren pers&ouml;nlichen Vorlieben und Ihrem WordPress-Theme w&auml;hlen sollten.<\/p><p class=\"wp-block-paragraph\">Lassen Sie uns besprechen, wie Sie auf diese Tools zugreifen k&ouml;nnen, und einige Tipps zur Erstellung effektiver Header ausprobieren.<\/p><p>\n\n\n\n\n\n\n<\/p><h2 class=\"wp-block-heading\" id=\"h-wie-sie-einen-wordpress-header-bearbeiten\"><strong>Wie Sie einen WordPress Header bearbeiten<\/strong><\/h2><p class=\"wp-block-paragraph\">Die Schritte zum Anpassen des Headers in <a href=\"\/de\/tutorials\/was-ist-wordpress\/\"><strong>WordPress<\/strong><\/a> h&auml;ngen von dem von Ihnen verwendeten Theme und der Version der Kernsoftware ab. Sie beeinflussen die Funktionen und Tools, die f&uuml;r die Erstellung eines benutzerdefinierten Headers zur Verf&uuml;gung stehen.<\/p><p class=\"wp-block-paragraph\">Die beiden g&auml;ngigsten Methoden zum Erstellen von benutzerdefinierten Headern sind der <strong>Site Editor<\/strong> und der <strong>Customizer<\/strong>. F&uuml;r dieses Tutorial werden wir die neueste <strong>WordPress 6.5<\/strong>-Version verwenden.<\/p><h3 class=\"wp-block-heading\" id=\"h-wie-sie-mit-dem-site-editor-den-wordpress-header-bearbeiten\"><strong>Wie Sie mit dem Site-Editor den WordPress Header bearbeiten<\/strong><\/h3><p class=\"wp-block-paragraph\">Der WordPress-Standard-Editor ist mit <strong>Gutenberg<\/strong> ab Version 5.0 integriert. Er nutzt Bl&ouml;cke zum Hinzuf&uuml;gen von Website-Elementen wie &Uuml;berschriften, Abs&auml;tzen, Listen und Bildern.<\/p><p class=\"wp-block-paragraph\">Beachten Sie, dass nicht alle Themes mit dem Gutenberg-Editor kompatibel sind, da er nur mit einem Block-Theme funktionieren kann.<\/p><p>\n\n\n<div class=\"announcement-block announcement-block--important\">\n            <span class=\"announcement-block__heading\">\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n                          d=\"M12 22.5C17.799 22.5 22.5 17.799 22.5 12C22.5 6.20101 17.799 1.5 12 1.5C6.20101 1.5 1.5 6.20101 1.5 12C1.5 17.799 6.20101 22.5 12 22.5ZM13.637 7.65198C13.637 6.74791 12.9041 6.01501 12 6.01501C11.0959 6.01501 10.363 6.74791 10.363 7.65198C10.5335 9.53749 10.875 13.383 10.875 13.383C10.875 14.0043 11.3787 14.508 12 14.508C12.6213 14.508 13.125 14.0043 13.125 13.383V13.38L13.637 7.65198ZM11.9927 15.714C11.3714 15.714 10.8677 16.2177 10.8677 16.839C10.8677 17.4603 11.3714 17.964 11.9927 17.964H12.0073C12.6286 17.964 13.1323 17.4603 13.1323 16.839C13.1323 16.2177 12.6286 15.714 12.0073 15.714H11.9927Z\"\n                          fill=\"#FEA419\"\/>\n                <\/svg>\n                Important\n            <\/span>\n            <p class=\"announcement-block__content\">\n                <strong>Wichtig!<\/strong> Wenn Sie das Editor-Men&uuml; auf dem Dashboard nicht sehen, unterst&uuml;tzt Ihr gew&auml;hltes WordPress-Theme nicht den vollst&auml;ndigen Site-Editor. Verwenden Sie stattdessen den Customizer.\n            <\/p><\/div>\n\n\n\n<\/p><p class=\"wp-block-paragraph\">So passen Sie Ihre Header mit dem Site-Editor an:<\/p><ol class=\"wp-block-list\">\n<li>Navigieren Sie zu <strong>Design <\/strong>&rarr; <strong>Anpassen <\/strong>auf Ihrem WordPress-Dashboard.<\/li>\n\n\n\n<li>Sobald der Site-Editor gestartet ist, w&auml;hlen Sie <strong>Header-Bild <\/strong>im Men&uuml; der linken Seitenleiste.<\/li>\n\n\n\n<li>Scrollen Sie hinunter zum Abschnitt <strong>Template-Teile<\/strong> und w&auml;hlen Sie <strong>Header<\/strong>. Die Anzahl der Header-Template-Teile h&auml;ngt von Ihrem gew&auml;hlten Blocktheme ab.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a6fae7282311\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a6fae7282311\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/11\/wordpress-site-editor-template-parts-header.png\/w=1024,h=1024,fit=scale-down\" alt=\"Der Header-Vorlagenteil im WordPress-Seiteneditor\" class=\"wp-image-98624\"><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><ol start=\"4\" class=\"wp-block-list\">\n<li>W&auml;hlen Sie die Header, die Sie anpassen m&ouml;chten, und klicken Sie dann auf die Schaltfl&auml;che <strong>Bearbeiten<\/strong>, um den vollst&auml;ndigen Bearbeitungsmodus des Headers zu &ouml;ffnen.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a6fae7288731\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a6fae7288731\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/11\/edit-button-in-the-header-section-of-the-site-editor.png\/w=1024,h=1024,fit=scale-down\" alt=\"Die Schaltfl&auml;che &bdquo;Bearbeiten&ldquo; im Bereich &bdquo;Header-Vorlage&ldquo; im WordPress-Seiteneditor\" class=\"wp-image-98625\"><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><ol start=\"5\" class=\"wp-block-list\">\n<li>In der Oberfl&auml;che des Header-Editors k&ouml;nnen Sie die Bl&ouml;cke der Headervorlage anpassen, ersetzen oder neue Bl&ouml;cke hinzuf&uuml;gen.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a6fae728f0ea\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a6fae728f0ea\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/11\/list-view-button-in-the-site-editor.png\/w=1024,h=1024,fit=scale-down\" alt=\"Die Benutzeroberfl&auml;che des Header-Editors im WordPress-Seiteneditor\" class=\"wp-image-98627\"><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><p class=\"wp-block-paragraph\">Jedes Gutenberg-kompatible Theme verwendet unterschiedliche Standardelemente in den Header-Vorlagen. Klicken Sie auf die Schaltfl&auml;che <strong>Listenansicht<\/strong>, um alle Bl&ouml;cke der Vorlage zu sehen, die Sie gerade bearbeiten.<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a6fae7291b75\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a6fae7291b75\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/11\/list-view-button-in-the-site-editor.png\/w=1024,h=1024,fit=scale-down\" alt=\"Die Schaltfl&auml;che &bdquo;Listenansicht&ldquo; im WordPress-Seiteneditor\" class=\"wp-image-98627\"><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><p class=\"wp-block-paragraph\">In diesem Beispiel verwenden wir das <strong>Twenty Twenty-Four<\/strong>-Blocktheme, das eine Gruppe von Bl&ouml;cken in dem Standard-Header verwendet. Wenn Ihr gew&auml;hlter Template-Teil dies ebenfalls verwendet, zeigt ein Klick auf den Pfeil alle gruppierten Bl&ouml;cke an.<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a6fae7298621\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a6fae7298621\" class=\"aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/11\/the-arrow-button-in-the-site-editor-list-view.png\/public\" alt=\"Der Gruppenblock des Twenty Twenty-Four-Themes in der Kopfzeilenansicht. Der Pfeil zum Ausblenden ist hervorgehoben.\" class=\"wp-image-98630\"><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><p class=\"wp-block-paragraph\">Wenn Sie den Header ganz l&ouml;schen m&ouml;chten, k&ouml;nnen Sie ihn l&ouml;schen, indem Sie <strong>Gruppe<\/strong> aus der Liste ausw&auml;hlen und auf die Schaltfl&auml;che <strong>Gruppenoptionen <\/strong>klicken. W&auml;hlen Sie anschlie&szlig;end <strong>L&ouml;schen<\/strong>.<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a6fae729f2c1\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a6fae729f2c1\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/11\/delete-group-block-in-the-site-editor.png\/w=1024,h=1024,fit=scale-down\" alt=\"Die Schaltfl&auml;che &bdquo;Gruppenoptionen&ldquo; und das Men&uuml; &bdquo;L&ouml;schen&ldquo; sind in der Listenansicht des Site-Editors hervorgehoben.\" class=\"wp-image-98631\"><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><p class=\"wp-block-paragraph\">Verwenden Sie den <strong>Block-Inserter<\/strong>, um dem Header neue Elemente hinzuzuf&uuml;gen, z. B. eine Website-Tagline oder eine Suchleiste. Die Schaltfl&auml;che mit dem Pluszeichen finden Sie, wenn Sie den Mauszeiger &uuml;ber die Headervorlage oder in der oberen Symbolleiste des Site-Editors bewegen.<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a6fae72a65e6\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a6fae72a65e6\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/11\/ways-to-locate-the-block-inserter-button.png\/w=1024,h=1024,fit=scale-down\" alt=\"Die Schaltfl&auml;chen zum Einf&uuml;gen von Bl&ouml;cken sind im Header-Editor hervorgehoben.\" class=\"wp-image-98632\"><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><p class=\"wp-block-paragraph\">Suchen Sie dann nach verf&uuml;gbaren Bl&ouml;cken, die Sie zu Ihrem Header hinzuf&uuml;gen k&ouml;nnen. Ziehen Sie die neu hinzugef&uuml;gten Elemente per Drag &amp; Drop an die gew&uuml;nschte Position. Sie k&ouml;nnen dies auch &uuml;ber die <strong>Listenansicht<\/strong> tun, w&auml;hrend Sie die &Auml;nderungen direkt auf der rechten Seite des Bildschirms in der Vorschau sehen.<\/p><p class=\"wp-block-paragraph\">Da das <strong>Twenty Twenty-Four<\/strong>-Theme bereits &uuml;ber die wichtigsten Header-Elemente verf&uuml;gt, lassen wir sie so, wie sie sind. In den folgenden Schritten werden wir den Titel der Website, das Logo und das Navigationsmen&uuml; im vollst&auml;ndigen Site-Editor personalisieren.<\/p><p class=\"wp-block-paragraph\"><strong>Den Website-Titel &auml;ndern<\/strong><\/p><p class=\"wp-block-paragraph\">&Auml;ndern Sie den Standard-Website-Titel im Bearbeitungsmodus der Headervorlage, indem Sie den Block <strong>Website-Titel<\/strong> ausw&auml;hlen.<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a6fae72acda1\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a6fae72acda1\" class=\"aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/11\/edit-site-title.png\/public\" alt=\"Der ausgew&auml;hlte Block &bdquo;Seitentitel&ldquo; im Header-Editor.\" class=\"wp-image-98633\"><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><p class=\"wp-block-paragraph\">Alternativ k&ouml;nnen Sie ihn auch &uuml;ber das <strong>Einstellungen-<\/strong>Men&uuml; in Ihrem WordPress-Dashboard &auml;ndern, wodurch auch der Header-Block automatisch angepasst wird.<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a6fae72b30f1\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a6fae72b30f1\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/11\/change-title-from-wordpress-general-setting.png\/w=1024,h=1024,fit=scale-down\" alt=\"Die Seite mit den allgemeinen Einstellungen von WordPress im Dashboard.\" class=\"wp-image-98634\"><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><p class=\"wp-block-paragraph\"><strong>Das Website-Logo hinzuf&uuml;gen<\/strong><\/p><p class=\"wp-block-paragraph\">Es gibt mehrere M&ouml;glichkeiten, <strong>das Logo in WordPress<\/strong> zu &auml;ndern, einschlie&szlig;lich der Verwendung des Site-Editors. Da dieses Theme standardm&auml;&szlig;ig ein Logo anzeigt, ersetzen Sie einfach den Platzhalter, indem Sie den Block <strong>Website-Logo<\/strong> im Header ausw&auml;hlen.<\/p><p class=\"wp-block-paragraph\">Klicken Sie auf die Schaltfl&auml;che <strong>Website-Logo hinzuf&uuml;gen<\/strong> in der Mitte des Blocks.<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a6fae72b9356\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a6fae72b9356\" class=\"aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/11\/change-site-logo-button.png\/public\" alt=\"Die Schaltfl&auml;che &bdquo;Website-Logo hinzuf&uuml;gen&ldquo; ist im Header-Editor hervorgehoben.\" class=\"wp-image-98635\"><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><p class=\"wp-block-paragraph\">Daraufhin erscheint ein Popup-Fenster mit der Mediathek. Laden Sie die neue Bilddatei hoch und vergessen Sie nicht, den Alt-Text hinzuzuf&uuml;gen, bevor Sie auf <strong>Ausw&auml;hlen<\/strong> klicken.<\/p><p class=\"wp-block-paragraph\">Sie sehen nun das Logo der Website in Ihrem benutzerdefinierten Header. &Auml;ndern Sie seine Gr&ouml;&szlig;e, indem Sie die Auswahlpunkte nach innen und au&szlig;en ziehen, bis es Ihnen passt. Wenn Sie Ihr Logo neu positionieren m&ouml;chten, verwenden Sie die Richtungstasten in der Symbolleiste des Blockeditors.<\/p><p class=\"wp-block-paragraph\"><strong>Das Navigationsmen&uuml; hinzuf&uuml;gen<\/strong><\/p><p class=\"wp-block-paragraph\">Das von Ihnen gew&auml;hlte WordPress-Theme kann ein bestimmtes Navigationsmen&uuml; im Kopfbereich anzeigen. Das <strong>Twenty Twenty-Four<\/strong>-Theme verwendet zum Beispiel den <a href=\"https:\/\/wordpress.org\/documentation\/article\/navigation-block\/\" target=\"_blank\" rel=\"noopener\"><strong>Navigations-Block<\/strong><\/a>, mit dem Sie die Struktur und das Design des Men&uuml;s direkt bearbeiten k&ouml;nnen.<\/p><p class=\"wp-block-paragraph\">W&auml;hlen Sie den <strong>Navigations-Block<\/strong> im Header aus, um den Men&uuml;eintrag zu bearbeiten und klicken Sie auf die Schaltfl&auml;che <strong>Block hinzuf&uuml;gen<\/strong>.<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a6fae72bfe51\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a6fae72bfe51\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/11\/the-add-block-button-in-the-navigation-block.png\/w=1024,h=1024,fit=scale-down\" alt=\"Die Schaltfl&auml;che &bdquo;Block hinzuf&uuml;gen&rdquo; im Navigationsblock im Header.\" class=\"wp-image-98636\"><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><p class=\"wp-block-paragraph\">Dadurch wird automatisch ein Link-Platzhalter erstellt, den Sie mit jeder Seite Ihrer Website verbinden k&ouml;nnen.<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a6fae72c6646\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a6fae72c6646\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/11\/add-custom-link-in-the-navigational-block.png\/w=1024,h=1024,fit=scale-down\" alt=\"Der benutzerdefinierte Link im Navigationsblock ist ausgew&auml;hlt.\" class=\"wp-image-98637\"><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><p class=\"wp-block-paragraph\">Um die Bearbeitung des Navigationsmen&uuml;s zu erleichtern, w&auml;hlen Sie den Block aus und klicken Sie auf die Schaltfl&auml;che <strong>Einstellungen <\/strong>, um das Konfigurationspanel zu &ouml;ffnen.<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a6fae72cc6e1\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a6fae72cc6e1\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/11\/block-settings-button.png\/w=1024,h=1024,fit=scale-down\" alt=\"Die Schaltfl&auml;che &bdquo;Einstellungen&ldquo; im WordPress-Seiteneditor ist hervorgehoben.\" class=\"wp-image-98638\"><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><p class=\"wp-block-paragraph\">Dort k&ouml;nnen Sie die Link-Einstellungen &auml;ndern, einschlie&szlig;lich der Bearbeitung der Beschriftung, der URL, des Attributs und des Designs. Wenn Sie ein benutzerdefiniertes CSS zur Gestaltung des Men&uuml;s haben, k&ouml;nnen Sie es ebenfalls hinzuf&uuml;gen.<\/p><p class=\"wp-block-paragraph\">Wenn Sie ein <strong>Dropdown-Men&uuml;<\/strong> erstellen m&ouml;chten, navigieren Sie zu den Optionen <strong>Individueller Link<\/strong> und w&auml;hlen dann <strong>Link zum Untermen&uuml; hinzuf&uuml;gen<\/strong> aus. Alternativ k&ouml;nnen Sie auch ein <strong>Untermen&uuml;<\/strong> aus dem Block-Inserter hinzuf&uuml;gen.<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a6fae72d3092\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a6fae72d3092\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/11\/add-sub-menu-link.png\/w=1024,h=1024,fit=scale-down\" alt=\"Die Schaltfl&auml;che &bdquo;Optionen f&uuml;r benutzerdefinierte Links&ldquo; und das Untermen&uuml; &bdquo;Link hinzuf&uuml;gen&ldquo; sind in den Blockeinstellungen hervorgehoben.\" class=\"wp-image-98639\"><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><p class=\"wp-block-paragraph\">Wenn Sie mit den &Auml;nderungen fertig sind, vergessen Sie nicht, auf <strong>Speichern<\/strong> zu klicken, bevor Sie den Header-Editor schlie&szlig;en.<\/p><h3 class=\"wp-block-heading\" id=\"h-wie-sie-mit-dem-customizer-einen-wordpress-header-bearbeiten\"><strong>Wie Sie mit dem Customizer einen WordPress Header bearbeiten<\/strong><\/h3><p class=\"wp-block-paragraph\">Wenn Sie eine &auml;ltere WordPress-Version oder ein klassisches Theme verwenden, verwenden Sie den <strong>Customizer<\/strong>, um die Header-Vorlage zu &auml;ndern. Je nach aktiviertem Theme k&ouml;nnen sich die Schritte zum Zugriff auf den WordPress-<strong>Customizer<\/strong> unterscheiden.<\/p><p class=\"wp-block-paragraph\">Zum Beispiel haben das Standard-Theme <strong>Twenty Twenty-One<\/strong> und &auml;ltere Themes nur die Option <strong>Website-Identit&auml;t<\/strong>, um das Website-Logo und den Titel im Header anzupassen.<\/p><p class=\"wp-block-paragraph\">Auf der anderen Seite haben die beliebtesten Themes von Drittanbietern wie <a href=\"https:\/\/wpastra.com\/?bsf=12425\" target=\"_blank\" rel=\"noopener\"><strong>Astra<\/strong><\/a> und <strong>Neve<\/strong> spezielle Header-Optionen, die mehr Flexibilit&auml;t f&uuml;r die Anpassung von Website-Elementen bieten, wie das <strong>Hinzuf&uuml;gen von Social Media-Icons<\/strong>, wenn Sie auf den Premium-Tarif upgraden.<\/p><p class=\"wp-block-paragraph\">F&uuml;r dieses Tutorial werden wir das <strong>Astra-<\/strong>Theme verwenden. Die Schritte zum Zugriff auf den WordPress-<strong>Customizer <\/strong>sind jedoch dieselben &ndash; navigieren Sie zu <strong>Design<\/strong> &rarr; <strong>Anpassen<\/strong>.<\/p><p class=\"wp-block-paragraph\">Der Customizer des Astra-Themes verf&uuml;gt &uuml;ber einen Drag-and-Drop-Theme-Builder mit einer benutzerfreundlichen Oberfl&auml;che. Auf der linken Seite k&ouml;nnen Sie die zu bearbeitenden Website-Elemente ausw&auml;hlen. In der Zwischenzeit k&ouml;nnen Sie auf der rechten Seite des Bildschirms eine Vorschau der &Auml;nderungen sehen.<\/p><p class=\"wp-block-paragraph\">Um mit der Bearbeitung des Headers Ihrer Website zu beginnen, w&auml;hlen Sie <strong>Header Builder<\/strong> aus der Liste.<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a6fae72d951b\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a6fae72d951b\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/11\/the-header-builder-menu-in-astra-theme.png\/w=1024,h=1024,fit=scale-down\" alt=\"Das Men&uuml; &bdquo;Header Builder&ldquo; ist im Theme Builder des Astra-Themes hervorgehoben.\" class=\"wp-image-98640\"><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><p class=\"wp-block-paragraph\">Sie sehen die zu bearbeitenden Headervorlagen auf der linken Seite und den Headerersteller auf der rechten unteren Seite des Bildschirms.<\/p><p class=\"wp-block-paragraph\">Es sind standardm&auml;&szlig;ig drei Header verf&uuml;gbar. Sie k&ouml;nnen ein neues Header-Element hinzuf&uuml;gen, indem Sie mit dem Mauszeiger &uuml;ber die leere Fl&auml;che fahren und auf die angezeigte Plus-Schaltfl&auml;che klicken.<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a6fae72df57a\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a6fae72df57a\" class=\"aligncenter size-large wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/11\/the-plus-button-to-add-a-header-element-in-astra-header-builder.png\/w=1024,h=1024,fit=scale-down\" alt=\"Das Pluszeichen zum Hinzuf&uuml;gen weiterer Header-Elemente im Header-Builder des Astra-Themes.\" class=\"wp-image-98641\"><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><p class=\"wp-block-paragraph\">Sie k&ouml;nnen auch die vorhandenen Headerelemente per Drag &amp; Drop an die gew&uuml;nschte Position verschieben. Sobald Sie alles so platziert haben, wie Sie es w&uuml;nschen, k&ouml;nnen Sie mit der Personalisierung beginnen.<\/p><p class=\"wp-block-paragraph\"><strong>Den Website-Titel und das Logo &auml;ndern<\/strong><\/p><p class=\"wp-block-paragraph\">Um die Registerkarte <strong>Allgemeine <\/strong>Einstellungen zu &ouml;ffnen, klicken Sie auf das <strong>Men&uuml; <\/strong>Website-Titel &amp; -Logo im Header-Konfigurationsmen&uuml;.<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a6fae72e5805\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a6fae72e5805\" class=\"aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/11\/site-title-and-logo-menu-in-astra-theme.png\/public\" alt=\"Das Men&uuml; &bdquo;Seitentitel und Logo&ldquo; ist im Konfigurationsfeld des Astra-Theme-Header-Builders hervorgehoben.\" class=\"wp-image-98642\"><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><p class=\"wp-block-paragraph\">Klicken Sie auf die Schaltfl&auml;che <strong>Logo &auml;ndern<\/strong>, um die WordPress-Mediathek anzuzeigen und das Logo Ihrer Website hochzuladen. Passen Sie dann die Breite des Header-Bildes an, wie Sie m&ouml;chten.<\/p><p class=\"wp-block-paragraph\">Sie k&ouml;nnen den Bildplatzhalter auch entfernen, wenn Sie Ihrem Header kein Logo hinzuf&uuml;gen m&ouml;chten.<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a6fae72ecd58\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a6fae72ecd58\" class=\"aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/11\/logo-general-settings-in-astra-theme-builder.png\/public\" alt=\"Die Logo-Konfiguration im Header-Builder des Astra-Themes.\" class=\"wp-image-98643\"><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><p>\n\n        <div class=\"protip\">\n            <div class=\"protip__heading\">\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path d=\"M1.49234 23.5024C1.23229 23.5024 0.972242 23.4024 0.782206 23.2123C0.562165 22.9923 0.452144 22.6822 0.502153 22.3722C0.562165 21.9221 1.14227 17.9113 3.00262 16.351C3.63274 15.8209 4.43289 15.5509 5.26305 15.5609C6.09321 15.5909 6.87335 15.9109 7.47347 16.4911C8.6937 17.6913 8.76371 19.6717 7.6435 20.9919C6.0832 22.8523 2.08245 23.4324 1.63237 23.4924C1.59236 23.4924 1.54235 23.4924 1.50234 23.4924L1.49234 23.5024ZM5.16303 17.5613C4.84297 17.5613 4.53291 17.6713 4.29287 17.8813C3.60274 18.4614 3.07264 19.9317 2.75258 21.242C4.06282 20.9219 5.5331 20.3918 6.11321 19.7017C6.55329 19.1716 6.54329 18.3814 6.0832 17.9213C5.85316 17.7013 5.5431 17.5713 5.20304 17.5613C5.19304 17.5613 5.17303 17.5613 5.16303 17.5613ZM11.7243 21.8821C11.4942 21.8821 11.2642 21.8021 11.0841 21.652C10.8541 21.462 10.7241 21.1819 10.7241 20.8819V15.9109L8.08358 13.2705H3.11264C2.81259 13.2705 2.53254 13.1404 2.3425 12.9104C2.15246 12.6803 2.07245 12.3803 2.12246 12.0902C2.19247 11.7102 2.84259 8.36953 4.70294 7.12929C6.33325 6.04909 8.96375 6.49918 10.244 6.80923C11.5442 4.96889 13.2546 3.4286 15.2349 2.33839C17.4553 1.11816 19.9858 0.518051 22.4963 0.498047C23.0464 0.498047 23.4865 0.948132 23.4865 1.49824C23.4865 5.0389 22.3763 9.97983 17.1753 13.7605C17.4853 15.0408 17.9354 17.6613 16.8552 19.2816C15.615 21.1419 12.2744 21.7921 11.8943 21.8621C11.8343 21.8721 11.7743 21.8821 11.7143 21.8821H11.7243ZM12.7245 16.181V19.6016C13.7146 19.2916 14.7948 18.7915 15.2049 18.1814C15.675 17.4812 15.605 16.091 15.385 14.9008C14.5248 15.3808 13.6346 15.8109 12.7245 16.181ZM9.66388 12.0302L11.9643 14.3307C13.1845 13.8306 14.3648 13.2204 15.485 12.5103C19.9358 9.51974 21.2361 5.60901 21.4561 2.53843C19.6157 2.67846 17.8254 3.20856 16.2051 4.09872C14.2847 5.14892 12.6544 6.68921 11.4942 8.54956C10.7841 9.65977 10.174 10.82 9.66388 12.0302ZM4.39289 11.2701H7.81353C8.1936 10.3599 8.63368 9.46974 9.11377 8.60957C7.92355 8.38953 6.51329 8.31952 5.81315 8.78961C5.19304 9.19968 4.70294 10.3099 4.39289 11.2701Z\" fill=\"#673DE6\"\/>\n                <\/svg>\n                <p class=\"protip__title\">\n                    Experten-Tipp                 <\/p>\n            <\/div>\n            <p class=\"protip__content\">Mit dem Astra-Theme k&ouml;nnen Sie ein anderes Logo hochladen, das auf einem Retina-Bildschirm angezeigt wird. Es wird oft f&uuml;r High-End-Ger&auml;te wie Apple-Produkte verwendet. Um diese Funktion zu nutzen, sollten Sie eine Logodatei mit einer doppelt so hohen Aufl&ouml;sung wie das Original bereitstellen. <\/p>\n                    <\/div>\n        \n\n\n\n<\/p><p class=\"wp-block-paragraph\">Wenn Sie im Panel nach unten scrollen, sehen Sie die allgemeine Konfiguration <strong>Website-Titel<\/strong>. Dort k&ouml;nnen Sie den Text bearbeiten, seine Sichtbarkeit auf verschiedenen Ger&auml;ten verwalten, eine Tagline hinzuf&uuml;gen und w&auml;hlen, ob beide Elemente im Header angezeigt oder ausgeblendet werden sollen.<\/p><p class=\"wp-block-paragraph\">Im unteren Teil des Konfigurationsfensters k&ouml;nnen Sie das Website-Symbol bearbeiten. Besucher sehen dieses Bild in ihren Browsern, wenn sie auf Ihrer Website navigieren.<\/p><p class=\"wp-block-paragraph\">Sie k&ouml;nnen das Aussehen des Titels, des Logos und des Slogans der Website konfigurieren, indem Sie auf die Registerkarte <strong>Design <\/strong>im Konfigurationsbereich wechseln.<\/p><div class=\"wp-block-image\">\n<figure data-wp-context='{\"imageId\":\"6a6fae72f2a6d\"}' data-wp-interactive=\"core\/image\" data-wp-key=\"6a6fae72f2a6d\" class=\"aligncenter size-full wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/11\/the-design-tab-in-the-site-and-logo-menu-in-astra-theme-builder.png\/public\" alt=\"Die Registerkarte &bdquo;Design&ldquo; in den Einstellungen f&uuml;r &bdquo;Seitentitel und Logo&ldquo; des Header-Builders von Astra.\" class=\"wp-image-98644\"><button class=\"lightbox-trigger\" type=\"button\" aria-haspopup=\"dialog\" data-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\" data-wp-init=\"callbacks.initTriggerButton\" data-wp-on--click=\"actions.showLightbox\" data-wp-style--right=\"state.thisImage.buttonRight\" data-wp-style--top=\"state.thisImage.buttonTop\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewbox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\"><\/path>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div><p class=\"wp-block-paragraph\"><strong>Das Navigationsmen&uuml; hinzuf&uuml;gen<\/strong><\/p><p class=\"wp-block-paragraph\">Um das Navigationsmen&uuml; in Ihrem neuen Header zu &auml;ndern, klicken Sie auf die Option <strong>Prim&auml;res Men&uuml; <\/strong>im Konfigurationspanel. Wie f&uuml;r den Website-Titel und das Logo k&ouml;nnen Sie auch f&uuml;r das Men&uuml; die Einstellungen <strong>Allgemein <\/strong>und <strong>Design<\/strong> anpassen.<\/p><p class=\"wp-block-paragraph\">Wenn Sie die Men&uuml;eintr&auml;ge in Header &auml;ndern m&ouml;chten, klicken Sie auf <strong>Men&uuml; von hier aus konfigurieren<\/strong>, um die <strong>Men&uuml;einstellungen<\/strong> direkt im Panel zu &ouml;ffnen. Auf diese Weise k&ouml;nnen Sie das Men&uuml; &auml;ndern und gleichzeitig eine Vorschau der &Auml;nderungen auf der Live-Site sehen.<\/p><p class=\"wp-block-paragraph\">Alternativ wird Ihre Konfiguration &uuml;ber <strong>Design <\/strong>&rarr; <strong>Men&uuml;s <\/strong>auch automatisch an den Header des Themes angepasst.<\/p><p class=\"wp-block-paragraph\">Stellen Sie sicher, dass Sie auf <strong>Ver&ouml;ffentlichen <\/strong>klicken, bevor Sie den Theme-Builder verlassen, damit alle &Auml;nderungen an dem Header &uuml;bernommen werden.<\/p><p>\n\n\n        <div class=\"protip\">\n            <div class=\"protip__heading\">\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path d=\"M1.49234 23.5024C1.23229 23.5024 0.972242 23.4024 0.782206 23.2123C0.562165 22.9923 0.452144 22.6822 0.502153 22.3722C0.562165 21.9221 1.14227 17.9113 3.00262 16.351C3.63274 15.8209 4.43289 15.5509 5.26305 15.5609C6.09321 15.5909 6.87335 15.9109 7.47347 16.4911C8.6937 17.6913 8.76371 19.6717 7.6435 20.9919C6.0832 22.8523 2.08245 23.4324 1.63237 23.4924C1.59236 23.4924 1.54235 23.4924 1.50234 23.4924L1.49234 23.5024ZM5.16303 17.5613C4.84297 17.5613 4.53291 17.6713 4.29287 17.8813C3.60274 18.4614 3.07264 19.9317 2.75258 21.242C4.06282 20.9219 5.5331 20.3918 6.11321 19.7017C6.55329 19.1716 6.54329 18.3814 6.0832 17.9213C5.85316 17.7013 5.5431 17.5713 5.20304 17.5613C5.19304 17.5613 5.17303 17.5613 5.16303 17.5613ZM11.7243 21.8821C11.4942 21.8821 11.2642 21.8021 11.0841 21.652C10.8541 21.462 10.7241 21.1819 10.7241 20.8819V15.9109L8.08358 13.2705H3.11264C2.81259 13.2705 2.53254 13.1404 2.3425 12.9104C2.15246 12.6803 2.07245 12.3803 2.12246 12.0902C2.19247 11.7102 2.84259 8.36953 4.70294 7.12929C6.33325 6.04909 8.96375 6.49918 10.244 6.80923C11.5442 4.96889 13.2546 3.4286 15.2349 2.33839C17.4553 1.11816 19.9858 0.518051 22.4963 0.498047C23.0464 0.498047 23.4865 0.948132 23.4865 1.49824C23.4865 5.0389 22.3763 9.97983 17.1753 13.7605C17.4853 15.0408 17.9354 17.6613 16.8552 19.2816C15.615 21.1419 12.2744 21.7921 11.8943 21.8621C11.8343 21.8721 11.7743 21.8821 11.7143 21.8821H11.7243ZM12.7245 16.181V19.6016C13.7146 19.2916 14.7948 18.7915 15.2049 18.1814C15.675 17.4812 15.605 16.091 15.385 14.9008C14.5248 15.3808 13.6346 15.8109 12.7245 16.181ZM9.66388 12.0302L11.9643 14.3307C13.1845 13.8306 14.3648 13.2204 15.485 12.5103C19.9358 9.51974 21.2361 5.60901 21.4561 2.53843C19.6157 2.67846 17.8254 3.20856 16.2051 4.09872C14.2847 5.14892 12.6544 6.68921 11.4942 8.54956C10.7841 9.65977 10.174 10.82 9.66388 12.0302ZM4.39289 11.2701H7.81353C8.1936 10.3599 8.63368 9.46974 9.11377 8.60957C7.92355 8.38953 6.51329 8.31952 5.81315 8.78961C5.19304 9.19968 4.70294 10.3099 4.39289 11.2701Z\" fill=\"#673DE6\"\/>\n                <\/svg>\n                <p class=\"protip__title\">\n                    Experten-Tipp                 <\/p>\n            <\/div>\n            <p class=\"protip__content\">Die Standardkonfiguration des Navigationsmen&uuml;s ist m&ouml;glicherweise bei jedem klassischen Theme unterschiedlich. Lesen Sie bei Bedarf die Dokumentation des von Ihnen gew&auml;hlten Themes, um herauszufinden, wie Sie das Navigationsmen&uuml; anpassen k&ouml;nnen. <\/p>\n                    <\/div>\n        \n\n\n\n<\/p><h2 class=\"wp-block-heading\" id=\"h-warum-der-wordpress-header-wichtig-ist\"><strong>Warum der WordPress Header wichtig ist<\/strong><\/h2><p class=\"wp-block-paragraph\">Da sich der Header einer WordPress-Website ganz oben befindet, spielt er eine zentrale Rolle bei der Gestaltung der Benutzererfahrung.<\/p><p class=\"wp-block-paragraph\">Ein benutzerdefinierter WordPress Header kann die folgenden Vorteile f&uuml;r Ihre Website mit sich bringen:<\/p><ul class=\"wp-block-list\">\n<li><strong>Navigationsdrehscheibe<\/strong>. Der Header beherbergt oft das Navigationsmen&uuml;, das den Besuchern hilft, das Gesuchte effizient zu finden.<\/li>\n\n\n\n<li><strong>Aush&auml;ngeschild der Marke<\/strong>. Ob es sich um Ihr Logo, Ihren Slogan oder Ihr Farbschema handelt, der Header ist der Ort, an dem Ihre Markenidentit&auml;t im Mittelpunkt steht.<\/li>\n\n\n\n<li><strong>&Auml;sthetische Wirkung<\/strong>. Neben der Funktionalit&auml;t tragen benutzerdefinierte Header zur optischen Attraktivit&auml;t Ihrer Website bei. Ein gut gestalteter Header erh&ouml;ht die Benutzeraktivit&auml;t und l&auml;sst Ihre Website professioneller aussehen.<\/li>\n<\/ul><p class=\"wp-block-paragraph\">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&szlig;erdem wirkt er sich auf Ihre <a href=\"\/de\/tutorials\/was-ist-seo\/\"><strong>Suchmaschinenoptimierung (SEO)<\/strong><\/a> aus, da er den Bot-Crawlern die notwendigen Indexierungsinformationen liefert.<\/p><h2 class=\"wp-block-heading\" id=\"h-tipps-fur-einen-effektiven-wordpress-header\"><strong>Tipps f&uuml;r einen effektiven WordPress Header<\/strong><\/h2><p class=\"wp-block-paragraph\">Halten Sie Ihren WordPress Header mit den folgenden Tipps funktionell und optisch ansprechend:<\/p><p class=\"wp-block-paragraph\"><strong>Machen Sie ihn einheitlich<\/strong><\/p><p class=\"wp-block-paragraph\">Ihr Header spielt eine wichtige Rolle bei der Navigation auf Ihrer Website. Deshalb sollten Sie sicherstellen, dass die Einheitlichkeit des Erscheinungsbildes mit den besten <strong>Web-Design-Verfahren<\/strong> &uuml;bereinstimmt.<\/p><p class=\"wp-block-paragraph\">Ganz gleich, ob die Besucher zu Ihrer Homepage, einem Blogbeitrag oder einer Produktseite navigieren, ein einheitlicher Header auf allen Seiten sorgt f&uuml;r ein nahtloses Nutzererlebnis. Ein einheitlicher Header tr&auml;gt dazu bei, dass die Besucher Ihre Website besser erkennen und ihr vertrauen.<\/p><p class=\"wp-block-paragraph\">Denken Sie au&szlig;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&uuml; zu bearbeiten.<\/p><p class=\"wp-block-paragraph\">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 &Auml;nderung des Headers im Nachhinein noch einmal zu &uuml;berpr&uuml;fen.<\/p><p class=\"wp-block-paragraph\"><strong>Halten Sie den Headerbereich einfach<\/strong><\/p><p class=\"wp-block-paragraph\">Der Header ist zwar ein wesentlicher Aspekt Ihrer Website, aber ein &Uuml;berladen kann kontraproduktiv sein. Eine der besten bew&auml;hrten Verfahren f&uuml;r die Gestaltung des Headers ist daher, ihn minimalistisch zu halten.<\/p><p class=\"wp-block-paragraph\">Durch die Straffung des Headers wird die Benutzerfreundlichkeit Ihrer Website gew&auml;hrleistet. Auf diese Weise k&ouml;nnen sich die Besucher leichter auf die wichtigsten Elemente konzentrieren &ndash; wie Ihr WebWebsite-Logo, den Titel, den Slogan und die Navigationsmen&uuml;s.<\/p><p class=\"wp-block-paragraph\">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&szlig;en Suchblock in einen Header mit einem gro&szlig;en Navigationsmen&uuml; einzuf&uuml;gen.<\/p><p class=\"wp-block-paragraph\"><strong>Verwenden Sie hochwertige Bilder<\/strong><\/p><p class=\"wp-block-paragraph\">Wir empfehlen Ihnen, ein Logo in Ihrem WordPress Header-Bildbereich anzuzeigen. Es dient als visueller Anker, um die Wiedererkennung Ihrer Marke zu f&ouml;rdern.<\/p><p class=\"wp-block-paragraph\">Entscheiden Sie sich f&uuml;r hochaufl&ouml;sende Bilder, um ein professionelles Erscheinungsbild zu gew&auml;hrleisten, denn ein unscharfes Logo kann den optischen Gesamteindruck Ihrer Website beeintr&auml;chtigen. Verwenden Sie hochwertige Bilddateien, um einen unvergesslichen ersten Eindruck bei den Besuchern zu hinterlassen.<\/p><p class=\"wp-block-paragraph\">Lassen Sie Ihr Logo professionell gestalten oder verwenden Sie ein <a href=\"\/de\/logo-erstellen\"><strong>KI-Logo Maker<\/strong><\/a>-Tool, das Ihnen dabei hilft.<\/p><p class=\"wp-block-paragraph\"><strong>Achten Sie auf die Mobiloptimierung<\/strong><\/p><p class=\"wp-block-paragraph\">Fast <a href=\"https:\/\/www.thewebmaster.com\/what-percentage-of-search-are-mobile\/\" target=\"_blank\" rel=\"noopener\"><strong>60 % der Internetsuchen<\/strong><\/a> werden mit einem Mobilger&auml;t durchgef&uuml;hrt. Im Idealfall sollten mobile Nutzer ihre Bildschirme nicht vergr&ouml;&szlig;ern m&uuml;ssen, um eine Website zu durchsuchen. Daher sollte die mobile Version Ihrer Website einfach zu lesen und zu navigieren sein.<\/p><p class=\"wp-block-paragraph\">Ein mobiloptimierter Header sorgt f&uuml;r eine nahtlose Darstellung auf verschiedenen Bildschirmgr&ouml;&szlig;en. Die Pflege einer <strong>mobiloptimierten Website<\/strong> ist auch einer der SEO-verbessernden Faktoren.<\/p><p class=\"wp-block-paragraph\">Achten Sie darauf, responsive WordPress-Themes oder <a href=\"\/de\/tutorials\/wordpress-page-builder\/\"><strong>Seitenerstellungsprogramme<\/strong><\/a> f&uuml;r die Erstellung Ihrer Website zu w&auml;hlen. Auf diese Weise kann es einfacher sein, die Responsivit&auml;t Ihrer benutzerdefinierten Header zu erhalten.<\/p><p class=\"wp-block-paragraph\">Wenn Sie die Reaktionsf&auml;higkeit Ihrer Website &uuml;berpr&uuml;fen m&ouml;chten, verwenden Sie Tools wie den <a href=\"https:\/\/search.google.com\/test\/mobile-friendly\" target=\"_blank\" rel=\"noopener\"><strong>Mobile-Friendly-Test<\/strong><\/a> der Google Search Console.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"\/de\/wordpress-hosting\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/29\/2024\/06\/DE-New-WP_in-text-banner.png\/public\" alt=\"\" class=\"wp-image-4104\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/29\/2024\/06\/DE-New-WP_in-text-banner.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/29\/2024\/06\/DE-New-WP_in-text-banner.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/29\/2024\/06\/DE-New-WP_in-text-banner.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n<\/div><h2 class=\"wp-block-heading\" id=\"h-fazit\"><strong>Fazit<\/strong><\/h2><p class=\"wp-block-paragraph\">Wenn Sie lernen, wie Sie Ihren Header in WordPress &auml;ndern k&ouml;nnen, k&ouml;nnen Sie das Aussehen und die Funktionalit&auml;t der Website verbessern. Gl&uuml;cklicherweise erfordert die &Auml;nderung mit dem <strong>Site Editor<\/strong> und <strong>Customizer <\/strong>nur einige einfache Schritte.<\/p><p class=\"wp-block-paragraph\">Wir haben nicht nur die Schritte zur Bearbeitung Ihrer Header mit beiden Tools beschrieben, sondern auch, wie Sie Ihren WordPress-Header effektiv pflegen k&ouml;nnen. Im Folgenden eine kleine Zusammenfassung:<\/p><ul class=\"wp-block-list\">\n<li>Achten Sie auf einen einheitlichen Header Ihrer Website, um ein professionelles Erscheinungsbild zu erreichen.<\/li>\n\n\n\n<li>Erstellen Sie einen &uuml;bersichtlichen Headerbereich, der sich auf die wichtigsten Elemente konzentriert &ndash; wie Ihr WebWebsite-Logo, den Titel, den Slogan und die Navigationsmen&uuml;s.<\/li>\n\n\n\n<li>Laden Sie hochwertige Header-Bilder hoch, um das Branding Ihrer Website zu verbessern.<\/li>\n\n\n\n<li>Verwenden Sie ein mobiles WordPress-Theme f&uuml;r Ihren Header, damit er f&uuml;r verschiedene Bildschirmgr&ouml;&szlig;en geeignet ist.<\/li>\n<\/ul><p class=\"wp-block-paragraph\">Nutzen Sie schlie&szlig;lich <a href=\"\/de\/wordpress-hosting\"><strong>zuverl&auml;ssige WordPress-Hostingdienste<\/strong><\/a>, um sicherzustellen, dass Ihre Website immer verf&uuml;gbar ist und schnell l&auml;dt.<\/p><h2 class=\"wp-block-heading\" id=\"h-wie-sie-einen-wordpress-header-bearbeiten-faq\"><strong>Wie Sie einen WordPress Header bearbeiten FAQ<\/strong><\/h2><p class=\"wp-block-paragraph\">Lesen Sie die am h&auml;ufigsten gestellten Fragen, um mehr &uuml;ber die Anpassung von WordPress Headern zu erfahren.<\/p><div id=\"rank-math-faq\" class=\"rank-math-block\">\n<div class=\"rank-math-list \">\n<div id=\"faq-question-6943ffaf38d62\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \"><strong>Kann ich ohne Programmierkenntnisse einen WordPress Header bearbeiten?<\/strong><\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Auf jeden Fall. Die Bearbeitung des Headers Ihrer Website mit dem WordPress <strong>Website-Editor <\/strong>und <strong>Customizer <\/strong>erfordert keine Programmierkenntnisse. Selbst wenn Sie einen benutzerdefinierten CSS-Code hinzuf&uuml;gen m&ouml;chten, um den Header-Stil zu &auml;ndern, k&ouml;nnen Sie dies einfach mit dem <strong>Theme File Editor<\/strong> oder einem Plugin tun.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-6943ffaf38d69\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \"><strong>Kann ich die WordPress-Datei header.php direkt bearbeiten?<\/strong><\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Ja, <strong>header.php<\/strong> geh&ouml;rt zu den editierbaren Theme-Dateien in WordPress, aber stellen Sie sicher, dass Sie vor der Bearbeitung <a href=\"\/de\/tutorials\/wordpress-backup-erstellen\/\"><strong>ein Backup<\/strong><\/a> erstellen. Alle &Auml;nderungen, die Sie vornehmen, wirken sich direkt auf das Aussehen und die Funktionalit&auml;t Ihrer Website aus. Seien Sie daher besonders vorsichtig, wenn Sie die Header-Datei bearbeiten und erw&auml;gen Sie die Verwendung eines <strong>WordPress Child-Themes<\/strong>.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-6943ffaf38d6a\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \"><strong>Gibt es ein Plugin, um einen WordPress Header zu bearbeiten?<\/strong><\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Ja, Sie k&ouml;nnen einen individuellen WordPress Header mit einem Plugin erstellen. Beliebte Plugins sind <a href=\"https:\/\/wordpress.org\/plugins\/insert-headers-and-footers\/\" target=\"_blank\" rel=\"noopener\"><strong>WPCode<\/strong><\/a>, <a href=\"https:\/\/codecanyon.net\/item\/ultimate-header-builder-addon-wpbakery-page-builder-formerly-visual-composer\/21118792\" target=\"_blank\" rel=\"noopener\"><strong>Ultimate Header Builder<\/strong><\/a> und <a href=\"https:\/\/wordpress.org\/plugins\/header-footer-code-manager\/\" target=\"_blank\" rel=\"noopener\"><strong>Header Footer Code Manager<\/strong><\/a> &ndash; f&uuml;r diejenigen, die erweiterte Funktionen w&uuml;nschen, um den benutzerdefinierten Code der Header f&uuml;r Google Analytics oder Facebook Pixel zu bearbeiten.<\/p>\n\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>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&auml;t verbessern, die Navigation optimieren oder das Erscheinungsbild Ihrer Website auffrischen. Mit WordPress k&ouml;nnen Benutzer ihre Header mit dem Customizer und Site Editor leicht bearbeiten. Beide Optionen sind schnell und anf&auml;ngerfreundlich, [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/de\/tutorials\/wordpress-header\/\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":550,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"rank_math_title":"WordPress Header bearbeiten: 2 Methoden + n\u00fctzliche Tipps","rank_math_description":"Verbessern Sie die Navigation und -bindung mit einem sch\u00f6nen Header. So bearbeiten Sie den WordPress Header im Site-Editor &amp; Customizer.","rank_math_focus_keyword":"WordPress Header bearbeiten","footnotes":""},"categories":[20],"tags":[],"class_list":["post-6288","post","type-post","status-publish","format-standard","hentry","category-wordpress"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/how-to-edit-wordpress-header\/","default":1},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/tutoriales\/como-editar-un-header-de-wordpress\/","default":0},{"locale":"de-DE","link":"https:\/\/www.hostinger.com\/de\/tutorials\/wordpress-header\/","default":0},{"locale":"pl-PL","link":"https:\/\/www.hostinger.com\/pl\/tutoriale\/jak-edytowac-naglowek-w-wordpress\/","default":0},{"locale":"ja-JP","link":"https:\/\/www.hostinger.com\/jp\/tutorials\/how-to-edit-wordpress-header\/","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/how-to-edit-wordpress-header\/","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/how-to-edit-wordpress-header\/","default":0},{"locale":"en-GB","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/how-to-edit-wordpress-header\/","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/how-to-edit-wordpress-header\/","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/how-to-edit-wordpress-header\/","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/how-to-edit-wordpress-header\/","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/how-to-edit-wordpress-header\/","default":0},{"locale":"es-AR","link":"https:\/\/www.hostinger.com\/ar\/tutoriales\/como-editar-un-header-de-wordpress\/","default":0},{"locale":"es-MX","link":"https:\/\/www.hostinger.com\/mx\/tutoriales\/como-editar-un-header-de-wordpress\/","default":0},{"locale":"es-CO","link":"https:\/\/www.hostinger.com\/co\/tutoriales\/como-editar-un-header-de-wordpress\/","default":0}],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/de\/tutorials\/wp-json\/wp\/v2\/posts\/6288","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/de\/tutorials\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/de\/tutorials\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/de\/tutorials\/wp-json\/wp\/v2\/users\/550"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/de\/tutorials\/wp-json\/wp\/v2\/comments?post=6288"}],"version-history":[{"count":4,"href":"https:\/\/www.hostinger.com\/de\/tutorials\/wp-json\/wp\/v2\/posts\/6288\/revisions"}],"predecessor-version":[{"id":9419,"href":"https:\/\/www.hostinger.com\/de\/tutorials\/wp-json\/wp\/v2\/posts\/6288\/revisions\/9419"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/de\/tutorials\/wp-json\/wp\/v2\/media?parent=6288"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/de\/tutorials\/wp-json\/wp\/v2\/categories?post=6288"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/de\/tutorials\/wp-json\/wp\/v2\/tags?post=6288"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}