Der klassische WordPress-Header, wie Sie ihn kennen, wird auf allen verschiedenen Seiten verwendet. Normalerweise handelt es sich um eine breite rechteckige Box von einer Seite zur anderen. Im Inneren befinden sich ein Logo oder der Name einer Website, ein Slogan und Men\u00fcpunkte. Sie k\u00f6nnen dort auch ein Hintergrundbild einf\u00fcgen, das als Header-Bild bezeichnet wird. Das Header-Bild eignet sich hervorragend, um die Aufmerksamkeit der Besucher zu erregen und das allgemeine Erscheinungsbild der Website zu verbessern. Es liegt an Ihnen, zu entscheiden, ob Sie ein dezentes Header-Bild oder ein dominantes Bild verwenden, das die Aufmerksamkeit der Besucher auf die Website-Navigation lenkt.<\/p>\n\n\n
![\"WordPress-Header-Bild\"](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/09\/header-simple.jpg\")
<\/a><\/span><\/a>So bearbeiten Sie den Header im WordPress Customizer<\/span><\/h3>\n\n\n\nStandardm\u00e4\u00dfig kann das Header-Bild \u00fcber den WordPress Customizer ge\u00e4ndert werden. Sie k\u00f6nnen sowohl \u00fcber den WordPress-Administrator als auch \u00fcber Ihre Website darauf zugreifen:<\/p>\n\n\n\n
- Navigieren Sie direkt vom WP-Administrator zu Aussehen <\/i>\u2013> Anpassen<\/li>
- Wenn Sie im Frontend angemeldet sind, klicken Sie in der oberen Leiste auf \u201eAnpassen\u201c.<\/li><\/ul>\n\n\n\n
Der Customizer umfasst alle grundlegenden Darstellungseinstellungen Ihres aktuell aktiven Themes. Daher h\u00e4ngt es von Ihrem aktiven Theme ab, wo Sie die Einstellungen f\u00fcr das Header-Bild finden. Im Citadela-Design k\u00f6nnen Sie ein Header-Bild hinzuf\u00fcgen und bearbeiten Anpassen <\/i>\u2013> Aussehen <\/i>\u2013> Header-Hintergrund<\/i>.<\/p>\n\n\n\n![\"Header](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/09\/header-customizer.gif\")
<\/a>Header \u00fcber Customizer hinzuf\u00fcgen<\/figcaption><\/figure>\n<\/div>\n\n\n<\/span>Einstellungen f\u00fcr Header-Bild<\/span><\/h4>\n\n\n\nEgal f\u00fcr welches Header-Bild Sie sich entscheiden, Sie k\u00f6nnen es nach Ihren Bed\u00fcrfnissen konfigurieren. Ein interessanter Effekt kann mit \u201eHeader Image Repeat\u201c erzielt werden. Sie k\u00f6nnen die folgenden Optionen konfigurieren:<\/p>\n\n\n\n
- Fliese<\/li>
- Horizontal kacheln<\/li>
- Vertikal kacheln<\/li>
- Keine Wiederholung (wenn Sie das Bild nicht wiederholen m\u00f6chten)<\/li><\/ul>\n\n\n\n
![\"Funktion](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/09\/header-repeat.jpg\")
<\/a>Kacheleffekt des Headerbilds<\/figcaption><\/figure>\n<\/div>\n\n\n<\/span>Weitere Einstellungen in WordPress \u2013 Header-Bildgr\u00f6\u00dfe<\/span><\/h4>\n\n\n\nEine weitere M\u00f6glichkeit, die Kopfzeile zu bearbeiten und das Bild anzupassen, besteht darin, eine geeignete Gr\u00f6\u00dfe festzulegen. F\u00fcr die Gr\u00f6\u00dfe des Headerbilds stehen die folgenden drei Optionen zur Verf\u00fcgung:<\/p>\n\n\n\n
- Original<\/b> \u2013 Die urspr\u00fcngliche Bildgr\u00f6\u00dfe bleibt erhalten<\/li>
- Abdeckung<\/b> \u2013 Die Gr\u00f6\u00dfe des hochgeladenen Bildes wird so angepasst, dass es von einer Seite zur anderen passt. Das Bild kann auch passend zugeschnitten werden<\/li>
- Enthalten<\/b> \u2013 Die Gr\u00f6\u00dfe des Header-Bildes wird so angepasst, dass das gesamte Bild sichtbar ist<\/li><\/ul>\n\n\n\n
![\"3](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/09\/header-sizes.jpg\")
<\/a>Sehen Sie, wie unterschiedlich die Kopfzeile je nach Gr\u00f6\u00dfe aussehen kann \u2013 Original-, Deckblatt- und Inhaltsgr\u00f6\u00dfe<\/figcaption><\/figure>\n<\/div>\n\n\nSie k\u00f6nnen auch die Bildposition innerhalb der Kopfzeile und die Hintergrundfixierung festlegen.<\/p>\n\n\n\n
<\/span><\/a>Abdeckblock, der als Header fungiert<\/span><\/h3>\n\n\n\nWie wir bereits am Anfang dieses Artikels erw\u00e4hnt haben, gibt es mehrere M\u00f6glichkeiten, den Header im WordPress-Editor zu bearbeiten. Zus\u00e4tzlich zum Customizer k\u00f6nnen Sie auch einen der Kernbl\u00f6cke von WordPress namens Cover-Block verwenden. Was ist also der Unterschied?<\/p>\n\n\n\n
Der mit Customizer erstellte klassische Header bezieht sich auf die gesamte Website, w\u00e4hrend Sie mit dem Cover-Block ein Coverbild hinzuf\u00fcgen k\u00f6nnen, das grunds\u00e4tzlich als Headerbild zu jeder Seite oder jedem Beitrag dient. Sie k\u00f6nnen es sogar mehrmals auf einer Seite verwenden oder mit unterschiedlichen Einstellungen posten.<\/p>\n\n\n\n
<\/span><\/a>Verwendungszweck des Abdeckblocks<\/span><\/h4>\n\n\n\nDer Cover-Block hat im Vergleich zum klassischen Website-Header eine breitere Anwendung auf der gesamten Website. Der Cover-Block f\u00fcgt dem Inhalt ein breites Titelbild in voller Breite hinzu. Sie k\u00f6nnen damit Inhalte in Blogbeitr\u00e4gen optisch trennen. Jeder Beitragsabschnitt erh\u00e4lt ein eigenes Headerbild, das mit dem folgenden Inhalt verbunden werden kann. Eine tolle Funktion ist, dass Sie Text direkt in den Cover-Block schreiben k\u00f6nnen. Dieser Text wird \u00fcber dem Bild angezeigt.<\/p>\n\n\n
\n![\"Titelbild](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/09\/post-cover-blocks.jpg\")
<\/a>Blogpost mit Headerbild, das \u00fcber den Cover-Block hinzugef\u00fcgt wurde<\/figcaption><\/figure>\n<\/div>\n\n\n<\/span>Kopfzeile der Homepage<\/span><\/h4>\n\n\n\nAnstelle des Website-Headers kann auch ein Cover-Block verwendet werden, wenn Sie ein originelles Aussehen erzielen m\u00f6chten. Da der Cover-Block verschiedene Ausrichtungsoptionen bietet, k\u00f6nnen Sie ihn auf die Inhaltsbreite oder auf die volle Breite einstellen. Der Header in voller Breite kann auch als gro\u00dfes Hintergrundbild verwendet werden. Vergessen Sie jedoch nicht, den Seitentitel im Citadela-Design auszuschalten. Dieser Schritt ist erforderlich, wenn Sie den Cover-Block als Website-Header verwenden m\u00f6chten.<\/p>\n\n\n
\n![\"Kopfzeile](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/09\/header-cover.jpg\")
<\/a>Header in voller Breite auf der Startseite<\/figcaption><\/figure>\n<\/div>\n\n\n<\/span><\/a>So erstellen Sie einen Header mit dem Cover-Block<\/span><\/h3>\n\n\n\nAls erstes m\u00fcssen Sie den Cover-Block hinzuf\u00fcgen. Sie k\u00f6nnen es zu jeder Seite hinzuf\u00fcgen oder auf folgende Weise posten:<\/p>\n\n\n\n
Klicken Sie auf das \u201e+\u201c-Zeichen in der oberen Leiste oder auf das \u201e+\u201c-Zeichen an einer beliebigen Stelle im Inhalt. Suchen Sie danach einfach nach Coverblock.<\/p>\n\n\n
\n![\"F\u00fcgen](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/09\/gutenberg-button-add.png\")
<\/a>Abdeckblock mit \u201e+\u201c hinzuf\u00fcgen<\/figcaption><\/figure>\n<\/div>\n\n\nEine weitere schnelle M\u00f6glichkeit besteht darin, einen Block mit \u201e\/\u201c hinter dem Blocknamen hinzuzuf\u00fcgen.<\/p>\n\n\n
\n![\"Verwenden](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/09\/gutenberg-cover-shortcut.gif\")
<\/a>F\u00fcgen Sie einen Schr\u00e4gstrich hinzu und geben Sie Cover Block ein, um diesen Block im Inhaltsbereich hinzuzuf\u00fcgen<\/figcaption><\/figure>\n<\/div>\n\n\nNachdem Sie den Cover-Block hinzugef\u00fcgt haben, erhalten Sie Platz zum Hochladen von Bildern oder Videos. Sie k\u00f6nnen ein Bild auch aus der Medienbibliothek ausw\u00e4hlen. Das ausgew\u00e4hlte Bild oder Video wird als Header verwendet.<\/p>\n\n\n\n
<\/span>Titel der Kopfzeile<\/span><\/h4>\n\n\n\nDas Interessante an der mit dem Cover-Block hinzugef\u00fcgten Kopfzeile ist, dass Sie einen Texttitel \u00fcber das Bild schreiben k\u00f6nnen. Dieser Titel kann auch als Kopfzeile f\u00fcr einen Abschnitt verwendet werden, beispielsweise in Blogbeitr\u00e4gen. Es ist auch m\u00f6glich, dort eine beliebige URL hinzuzuf\u00fcgen.<\/p>\n\n\n
\n![\"Titel](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/09\/gutenberg-cover-text.png\")
<\/a>Titel im Headerbild<\/figcaption><\/figure>\n<\/div>\n\n\n<\/span>Abdeckblock ausrichten<\/span><\/h4>\n\n\n\nDer Abdeckblock kann mithilfe der Blocksymbolleiste ausgerichtet werden. Es kann innerhalb des Inhaltsbereichs links, rechts oder mittig ausgerichtet werden. Es kann auch auf Breit oder Vollbreite eingestellt werden. Diese Optionen m\u00fcssen von dem aktiven Theme unterst\u00fctzt werden, das Sie zum Erstellen Ihrer Website verwenden.<\/p>\n\n\n
\n![\"Ausrichtung](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/09\/gutenberg-cover-align.gif\")
<\/a>Sie k\u00f6nnen Ihren Abdeckblock auf viele Arten ausrichten, um das perfekte Aussehen Ihres Kopfteils zu erzielen<\/figcaption><\/figure>\n<\/div>\n\n\n<\/span>Coverbildeinstellungen<\/span><\/h4>\n\n\n\nDas Erscheinungsbild des Titelbilds kann im Inspektor ge\u00e4ndert werden. Wenn Sie einen festen Hintergrund festlegen, scrollt das Bild nicht mit dem Rest des Inhalts auf Ihrer Seite, sondern bleibt die ganze Zeit an seinem Platz.<\/p>\n\n\n\n
Mit dem Focal Point Picker k\u00f6nnen Sie ausw\u00e4hlen, welcher Teil des Bildes in der Kopfzeile angezeigt wird. Sie k\u00f6nnen noch weiter mit dem Bild arbeiten. Sie k\u00f6nnen beispielsweise die \u00dcberlagerungsfarbe und die Hintergrundopazit\u00e4t festlegen. Beide Einstellungen helfen Ihnen dabei, Ihrem Header den letzten Schliff zu geben. Wenn Sie den Cover-Block in einem Blog-Beitrag verwenden und das richtige Farbschema und die richtige Transparenz verwenden, k\u00f6nnen Sie Ihrem Beitrag die gew\u00fcnschte Atmosph\u00e4re verleihen. Seien Sie bei diesen Einstellungen vorsichtig, da der Titeltext deutlich sichtbar sein muss.<\/p>\n\n\n
\n![\"Legen](\"https:\/\/www.ait-themes.club\/wp-content\/uploads\/2019\/09\/gutenberg-cover-colors.gif\")
<\/a>Durch die Auswahl der richtigen Farb\u00fcberlagerung k\u00f6nnen Sie eine auff\u00e4llige Kopfzeile erstellen<\/figcaption><\/figure>\n<\/div>\n\n\n<\/span><\/a>Video-Header erstellen<\/span><\/h4>\n\n\n\nDer Cover-Block kann auch zum Abspielen von Videos im Header Ihrer Website verwendet werden. Sie k\u00f6nnen die Aufmerksamkeit der Besucher erregen oder Produkte oder Dienstleistungen bewerben. Es gibt mehrere unterst\u00fctzte Videoformate<\/a>, am h\u00e4ufigsten k\u00f6nnen Sie .mp4 verwenden.<\/p>\n\n\n\nDas Tolle daran ist, dass Sie auch einen Titel \u00fcber das Video schreiben, es ausrichten, es auf die volle Breite bringen oder eine Farb\u00fcberlagerung festlegen k\u00f6nnen. Die Einstellungen f\u00fcr den Coverblock sind f\u00fcr alle Medientypen gleich.<\/p>\n\n\n\n
Der Customizer umfasst alle grundlegenden Darstellungseinstellungen Ihres aktuell aktiven Themes. Daher h\u00e4ngt es von Ihrem aktiven Theme ab, wo Sie die Einstellungen f\u00fcr das Header-Bild finden. Im Citadela-Design k\u00f6nnen Sie ein Header-Bild hinzuf\u00fcgen und bearbeiten Anpassen <\/i>\u2013> Aussehen <\/i>\u2013> Header-Hintergrund<\/i>.<\/p>\n\n\n Egal f\u00fcr welches Header-Bild Sie sich entscheiden, Sie k\u00f6nnen es nach Ihren Bed\u00fcrfnissen konfigurieren. Ein interessanter Effekt kann mit \u201eHeader Image Repeat\u201c erzielt werden. Sie k\u00f6nnen die folgenden Optionen konfigurieren:<\/p>\n\n\n\n Eine weitere M\u00f6glichkeit, die Kopfzeile zu bearbeiten und das Bild anzupassen, besteht darin, eine geeignete Gr\u00f6\u00dfe festzulegen. F\u00fcr die Gr\u00f6\u00dfe des Headerbilds stehen die folgenden drei Optionen zur Verf\u00fcgung:<\/p>\n\n\n\n Sie k\u00f6nnen auch die Bildposition innerhalb der Kopfzeile und die Hintergrundfixierung festlegen.<\/p>\n\n\n\n Wie wir bereits am Anfang dieses Artikels erw\u00e4hnt haben, gibt es mehrere M\u00f6glichkeiten, den Header im WordPress-Editor zu bearbeiten. Zus\u00e4tzlich zum Customizer k\u00f6nnen Sie auch einen der Kernbl\u00f6cke von WordPress namens Cover-Block verwenden. Was ist also der Unterschied?<\/p>\n\n\n\n Der mit Customizer erstellte klassische Header bezieht sich auf die gesamte Website, w\u00e4hrend Sie mit dem Cover-Block ein Coverbild hinzuf\u00fcgen k\u00f6nnen, das grunds\u00e4tzlich als Headerbild zu jeder Seite oder jedem Beitrag dient. Sie k\u00f6nnen es sogar mehrmals auf einer Seite verwenden oder mit unterschiedlichen Einstellungen posten.<\/p>\n\n\n\n Der Cover-Block hat im Vergleich zum klassischen Website-Header eine breitere Anwendung auf der gesamten Website. Der Cover-Block f\u00fcgt dem Inhalt ein breites Titelbild in voller Breite hinzu. Sie k\u00f6nnen damit Inhalte in Blogbeitr\u00e4gen optisch trennen. Jeder Beitragsabschnitt erh\u00e4lt ein eigenes Headerbild, das mit dem folgenden Inhalt verbunden werden kann. Eine tolle Funktion ist, dass Sie Text direkt in den Cover-Block schreiben k\u00f6nnen. Dieser Text wird \u00fcber dem Bild angezeigt.<\/p>\n\n\n Anstelle des Website-Headers kann auch ein Cover-Block verwendet werden, wenn Sie ein originelles Aussehen erzielen m\u00f6chten. Da der Cover-Block verschiedene Ausrichtungsoptionen bietet, k\u00f6nnen Sie ihn auf die Inhaltsbreite oder auf die volle Breite einstellen. Der Header in voller Breite kann auch als gro\u00dfes Hintergrundbild verwendet werden. Vergessen Sie jedoch nicht, den Seitentitel im Citadela-Design auszuschalten. Dieser Schritt ist erforderlich, wenn Sie den Cover-Block als Website-Header verwenden m\u00f6chten.<\/p>\n\n\n Als erstes m\u00fcssen Sie den Cover-Block hinzuf\u00fcgen. Sie k\u00f6nnen es zu jeder Seite hinzuf\u00fcgen oder auf folgende Weise posten:<\/p>\n\n\n\n Klicken Sie auf das \u201e+\u201c-Zeichen in der oberen Leiste oder auf das \u201e+\u201c-Zeichen an einer beliebigen Stelle im Inhalt. Suchen Sie danach einfach nach Coverblock.<\/p>\n\n\n Eine weitere schnelle M\u00f6glichkeit besteht darin, einen Block mit \u201e\/\u201c hinter dem Blocknamen hinzuzuf\u00fcgen.<\/p>\n\n\n Nachdem Sie den Cover-Block hinzugef\u00fcgt haben, erhalten Sie Platz zum Hochladen von Bildern oder Videos. Sie k\u00f6nnen ein Bild auch aus der Medienbibliothek ausw\u00e4hlen. Das ausgew\u00e4hlte Bild oder Video wird als Header verwendet.<\/p>\n\n\n\n Das Interessante an der mit dem Cover-Block hinzugef\u00fcgten Kopfzeile ist, dass Sie einen Texttitel \u00fcber das Bild schreiben k\u00f6nnen. Dieser Titel kann auch als Kopfzeile f\u00fcr einen Abschnitt verwendet werden, beispielsweise in Blogbeitr\u00e4gen. Es ist auch m\u00f6glich, dort eine beliebige URL hinzuzuf\u00fcgen.<\/p>\n\n\n Der Abdeckblock kann mithilfe der Blocksymbolleiste ausgerichtet werden. Es kann innerhalb des Inhaltsbereichs links, rechts oder mittig ausgerichtet werden. Es kann auch auf Breit oder Vollbreite eingestellt werden. Diese Optionen m\u00fcssen von dem aktiven Theme unterst\u00fctzt werden, das Sie zum Erstellen Ihrer Website verwenden.<\/p>\n\n\n Das Erscheinungsbild des Titelbilds kann im Inspektor ge\u00e4ndert werden. Wenn Sie einen festen Hintergrund festlegen, scrollt das Bild nicht mit dem Rest des Inhalts auf Ihrer Seite, sondern bleibt die ganze Zeit an seinem Platz.<\/p>\n\n\n\n Mit dem Focal Point Picker k\u00f6nnen Sie ausw\u00e4hlen, welcher Teil des Bildes in der Kopfzeile angezeigt wird. Sie k\u00f6nnen noch weiter mit dem Bild arbeiten. Sie k\u00f6nnen beispielsweise die \u00dcberlagerungsfarbe und die Hintergrundopazit\u00e4t festlegen. Beide Einstellungen helfen Ihnen dabei, Ihrem Header den letzten Schliff zu geben. Wenn Sie den Cover-Block in einem Blog-Beitrag verwenden und das richtige Farbschema und die richtige Transparenz verwenden, k\u00f6nnen Sie Ihrem Beitrag die gew\u00fcnschte Atmosph\u00e4re verleihen. Seien Sie bei diesen Einstellungen vorsichtig, da der Titeltext deutlich sichtbar sein muss.<\/p>\n\n\n Der Cover-Block kann auch zum Abspielen von Videos im Header Ihrer Website verwendet werden. Sie k\u00f6nnen die Aufmerksamkeit der Besucher erregen oder Produkte oder Dienstleistungen bewerben. Es gibt mehrere unterst\u00fctzte Videoformate<\/a>, am h\u00e4ufigsten k\u00f6nnen Sie .mp4 verwenden.<\/p>\n\n\n\n Das Tolle daran ist, dass Sie auch einen Titel \u00fcber das Video schreiben, es ausrichten, es auf die volle Breite bringen oder eine Farb\u00fcberlagerung festlegen k\u00f6nnen. Die Einstellungen f\u00fcr den Coverblock sind f\u00fcr alle Medientypen gleich.<\/p>\n\n\n\n<\/a><\/span>Einstellungen f\u00fcr Header-Bild<\/span><\/h4>\n\n\n\n
<\/a><\/span>Weitere Einstellungen in WordPress \u2013 Header-Bildgr\u00f6\u00dfe<\/span><\/h4>\n\n\n\n
<\/a><\/span><\/a>Abdeckblock, der als Header fungiert<\/span><\/h3>\n\n\n\n
<\/span><\/a>Verwendungszweck des Abdeckblocks<\/span><\/h4>\n\n\n\n
<\/a><\/span>Kopfzeile der Homepage<\/span><\/h4>\n\n\n\n
<\/a><\/span><\/a>So erstellen Sie einen Header mit dem Cover-Block<\/span><\/h3>\n\n\n\n
<\/a><\/a><\/span>Titel der Kopfzeile<\/span><\/h4>\n\n\n\n
<\/a><\/span>Abdeckblock ausrichten<\/span><\/h4>\n\n\n\n
<\/a><\/span>Coverbildeinstellungen<\/span><\/h4>\n\n\n\n
<\/a><\/span><\/a>Video-Header erstellen<\/span><\/h4>\n\n\n\n