Inhaltsübersicht
Sie können uns zustimmen, dass keine Website ohne Header vollständig ist. Wussten Sie, dass Sie in WordPress zwei verschiedene Möglichkeiten haben, einen Header zu erstellen? In diesem Tutorial erklären wir individuelle Unterschiede.
Echtes Headerbild
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üpunkte. Sie können dort auch ein Hintergrundbild einfügen, 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.
So bearbeiten Sie den Header im WordPress Customizer
Standardmäßig kann das Header-Bild über den WordPress Customizer geändert werden. Sie können sowohl über den WordPress-Administrator als auch über Ihre Website darauf zugreifen:
- Navigieren Sie direkt vom WP-Administrator zu Aussehen –> Anpassen
- Wenn Sie im Frontend angemeldet sind, klicken Sie in der oberen Leiste auf „Anpassen“.
Der Customizer umfasst alle grundlegenden Darstellungseinstellungen Ihres aktuell aktiven Themes. Daher hängt es von Ihrem aktiven Theme ab, wo Sie die Einstellungen für das Header-Bild finden. Im Citadela-Design können Sie ein Header-Bild hinzufügen und bearbeiten Anpassen –> Aussehen –> Header-Hintergrund.
Einstellungen für Header-Bild
Egal für welches Header-Bild Sie sich entscheiden, Sie können es nach Ihren Bedürfnissen konfigurieren. Ein interessanter Effekt kann mit „Header Image Repeat“ erzielt werden. Sie können die folgenden Optionen konfigurieren:
- Fliese
- Horizontal kacheln
- Vertikal kacheln
- Keine Wiederholung (wenn Sie das Bild nicht wiederholen möchten)
Weitere Einstellungen in WordPress – Header-Bildgröße
Eine weitere Möglichkeit, die Kopfzeile zu bearbeiten und das Bild anzupassen, besteht darin, eine geeignete Größe festzulegen. Für die Größe des Headerbilds stehen die folgenden drei Optionen zur Verfügung:
- Original – Die ursprüngliche Bildgröße bleibt erhalten
- Abdeckung – Die Größe des hochgeladenen Bildes wird so angepasst, dass es von einer Seite zur anderen passt. Das Bild kann auch passend zugeschnitten werden
- Enthalten – Die Größe des Header-Bildes wird so angepasst, dass das gesamte Bild sichtbar ist
Sie können auch die Bildposition innerhalb der Kopfzeile und die Hintergrundfixierung festlegen.
Abdeckblock, der als Header fungiert
Wie wir bereits am Anfang dieses Artikels erwähnt haben, gibt es mehrere Möglichkeiten, den Header im WordPress-Editor zu bearbeiten. Zusätzlich zum Customizer können Sie auch einen der Kernblöcke von WordPress namens Cover-Block verwenden. Was ist also der Unterschied?
Der mit Customizer erstellte klassische Header bezieht sich auf die gesamte Website, während Sie mit dem Cover-Block ein Coverbild hinzufügen können, das grundsätzlich als Headerbild zu jeder Seite oder jedem Beitrag dient. Sie können es sogar mehrmals auf einer Seite verwenden oder mit unterschiedlichen Einstellungen posten.
Verwendungszweck des Abdeckblocks
Der Cover-Block hat im Vergleich zum klassischen Website-Header eine breitere Anwendung auf der gesamten Website. Der Cover-Block fügt dem Inhalt ein breites Titelbild in voller Breite hinzu. Sie können damit Inhalte in Blogbeiträgen optisch trennen. Jeder Beitragsabschnitt erhält 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önnen. Dieser Text wird über dem Bild angezeigt.
Kopfzeile der Homepage
Anstelle des Website-Headers kann auch ein Cover-Block verwendet werden, wenn Sie ein originelles Aussehen erzielen möchten. Da der Cover-Block verschiedene Ausrichtungsoptionen bietet, können Sie ihn auf die Inhaltsbreite oder auf die volle Breite einstellen. Der Header in voller Breite kann auch als großes 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öchten.
So erstellen Sie einen Header mit dem Cover-Block
Als erstes müssen Sie den Cover-Block hinzufügen. Sie können es zu jeder Seite hinzufügen oder auf folgende Weise posten:
Klicken Sie auf das „+“-Zeichen in der oberen Leiste oder auf das „+“-Zeichen an einer beliebigen Stelle im Inhalt. Suchen Sie danach einfach nach Coverblock.
Eine weitere schnelle Möglichkeit besteht darin, einen Block mit „/“ hinter dem Blocknamen hinzuzufügen.
Nachdem Sie den Cover-Block hinzugefügt haben, erhalten Sie Platz zum Hochladen von Bildern oder Videos. Sie können ein Bild auch aus der Medienbibliothek auswählen. Das ausgewählte Bild oder Video wird als Header verwendet.
Titel der Kopfzeile
Das Interessante an der mit dem Cover-Block hinzugefügten Kopfzeile ist, dass Sie einen Texttitel über das Bild schreiben können. Dieser Titel kann auch als Kopfzeile für einen Abschnitt verwendet werden, beispielsweise in Blogbeiträgen. Es ist auch möglich, dort eine beliebige URL hinzuzufügen.
Abdeckblock ausrichten
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üssen von dem aktiven Theme unterstützt werden, das Sie zum Erstellen Ihrer Website verwenden.
Coverbildeinstellungen
Das Erscheinungsbild des Titelbilds kann im Inspektor geändert 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.
Mit dem Focal Point Picker können Sie auswählen, welcher Teil des Bildes in der Kopfzeile angezeigt wird. Sie können noch weiter mit dem Bild arbeiten. Sie können beispielsweise die Überlagerungsfarbe und die Hintergrundopazität 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önnen Sie Ihrem Beitrag die gewünschte Atmosphäre verleihen. Seien Sie bei diesen Einstellungen vorsichtig, da der Titeltext deutlich sichtbar sein muss.
Video-Header erstellen
Der Cover-Block kann auch zum Abspielen von Videos im Header Ihrer Website verwendet werden. Sie können die Aufmerksamkeit der Besucher erregen oder Produkte oder Dienstleistungen bewerben. Es gibt mehrere unterstützte Videoformate, am häufigsten können Sie .mp4 verwenden.
Das Tolle daran ist, dass Sie auch einen Titel über das Video schreiben, es ausrichten, es auf die volle Breite bringen oder eine Farbüberlagerung festlegen können. Die Einstellungen für den Coverblock sind für alle Medientypen gleich.
Welche Erfahrungen haben Sie mit Headern gemacht? Haben Sie bereits versucht, mit Cover Block einen Header zu erstellen? Bevorzugen Sie den klassischen Website-Header mit dem WordPress-Customizer? Lass es uns unten in den Kommentaren wissen.