Header sind für jeden Inhalt Ihrer Webseite von entscheidender Bedeutung, da sie nicht nur Lesern, sondern auch Suchmaschinen dienen. Atemberaubende und gut geschriebene Überschriften haben das Potenzial, Leser auf Ihren Beitrag aufmerksam zu machen und die Klicks zu erhöhen. Die Überschriften können je nach Hierarchie Ihres Inhalts von H1 bis H6 reichen. Der Haupttitel Ihrer Seite oder Ihres Artikels ist H1, während H2 die Unterüberschriften sind, die Abschnitte in Ihren Dokumenten bilden. Die Überschriften H3 bis H6 stellen unter H2 weitere Unterüberschriften in Ihrem Dokument bereit. Bevor wir dazu übergehen, wie das Astra-Theme Ihnen dabei helfen kann, beeindruckende Header in Ihren Inhalten zu erstellen, wollen wir uns mit der Bedeutung von Headern befassen
Inhaltsverzeichnis:
Aus diesem Grund müssen Sie darauf achten, Überschriften in Ihren Text aufzunehmen
Überschriften spielen für Suchmaschinen und Leser eine wesentliche Rolle bei der Auswahl der Schlüsselwörter, nach denen sie im Artikel suchen. Die Hauptüberschrift im Text hilft dabei, das Thema des Materials zu identifizieren, und die Unterüberschriften führen den Leser zu seinem Interessengebiet.
Heutzutage nutzen die Menschen meist Screenreader, um Inhalte durchzugehen. Überschriften in allen Inhalten werden von Screenreadern leicht erfasst und sind für die effektive Nutzung von Screenreadern unerlässlich. Sie ermöglichen es den Lesern auch, von einer Überschrift zur nächsten zu springen, um zum gewünschten Thema zu gelangen.
Wenn Überschriften Ihr Thema identifizierbar machen, bewerten Suchmaschinen Ihre Seite für Suchanfragen. Je besser Sie Ihre Header gestalten und mit passenden Schlüsselwörtern füllen, desto mehr wird Ihr Ranking in den Suchmaschinen steigen.
Hier finden Sie eine Anleitung zur Verwendung der kostenlosen Astra-Designfunktionen zum Erstellen atemberaubender Header für Ihre Seiten. Befolgen Sie die Anweisungen, um einen Header Ihrer Wahl zu erstellen.
Durch die Verwendung von Kopfzeilen machen Sie die Seiten so scanbar wie möglich. Es ist allgemein bekannt, dass niemand den gesamten Artikel liest – insbesondere nicht Zeile für Zeile. Deshalb ist es wichtig, dass Seiten Kopfzeilen haben. Von allen Kopfzeilen ist die erste Kopfzeile die wichtigste, da sie den Ton für den gesamten Beitrag oder die gesamte Seite vorgibt.
Als nächstes kommt die Unterüberschrift, die den Inhalt in Stücke unterteilt, die besser zum Verzehr geeignet sind. Darüber hinaus wird die Struktur des Artikels durch die Überschriften und Unterüberschriften angezeigt. Kurz gesagt bedeutet die richtige Auswahl an Headern, dass Sie das Publikum mit Ihren ansprechenden Inhalten anlocken können.
Mit der Zeit wird der Mobilfunk dominanter denn je. Es besteht kein Zweifel daran, dass Websites mehr Traffic über Mobilgeräte erhalten werden als je zuvor. Wenn Sie also Ihre Inhalte richtig platzieren, werden Sie mit Sicherheit sowohl mobile als auch Desktop-Zuschauer gewinnen.
Kurz gesagt: Header optimieren die Webseite nicht nur für die Leser, sondern auch für die Suchmaschinen.
Das Wichtigste zuerst: Um auf den Astra Header Builder zuzugreifen, melden Sie sich bei Ihrem WordPress-Dashboard an und gehen Sie in der linken Seitenleiste zu „Darstellung“ > „Astra-Optionen“ > „Header Builder“, wie im Bild unten gezeigt:
Klicken Sie darauf und Sie gelangen zum Abschnitt „Header Builder“ im WordPress-Customizer. Die Benutzeroberfläche sollte ähnlich wie hier aussehen:
Wie Sie sehen können, ist der Header-Builder in drei vertikale Abschnitte unterteilt, die übereinander gestapelt sind. Sie haben den „primären Header“ in der Mitte mit einem „oberhalb des Headers“ oben und einem „unter dem Header“ unten.
Jeder Header verfügt über eigene „Header-Einstellungen“, auf die Sie zugreifen können, indem Sie auf das Zahnradsymbol links neben dem Header klicken.
Von hier aus können Sie die Höhe der Kopfzeile, die Rahmengröße, den Hintergrund, den Abstand und den Rand anpassen.
Beachten Sie auch, dass jede Überschrift in drei Abschnitte unterteilt ist. Sie können diesen Abschnitten Kopfzeilenelemente hinzufügen und daraus entfernen, um sie funktionsreicher zu gestalten. Zum Zeitpunkt des Schreibens dieses Tutorials haben Sie Zugriff auf 12 Header-Elemente:
Um nun ein neues Header-Element hinzuzufügen, bewegen Sie die Maus über diesen Abschnitt und klicken Sie auf die Schaltfläche „+“. Daraufhin wird eine Liste der verfügbaren Elemente angezeigt. Wählen Sie diejenige aus, die Sie verwenden möchten, und sie wird dem Kopfbereich hinzugefügt.
Klicken Sie in ähnlicher Weise einfach auf die Schaltfläche „x“ neben dem Header-Element, um ein Header-Element zu entfernen.
Sie können die Kopfzeilenelemente auch zwischen Kopfzeilenabschnitten verschieben, indem Sie sie einfach per Drag & Drop verschieben.
Alle von Ihnen verwendeten Kopfzeilenelemente werden im Menü auf der linken Seite direkt unter der Registerkarte „Allgemein“ angezeigt. Hier finden Sie auch die Option, den Header-Typ zu ändern. Kostenlose Benutzer erhalten nur die Option „Transparente Header“. Wenn Sie jedoch Astra Pro verwenden, können Sie „Sticky Headers“ aktivieren.
Von hier aus können Sie auf die spezifischen Einstellungen des Header-Elements zugreifen.
Direkt neben der Registerkarte „Allgemein“ befindet sich die Registerkarte „Design“. Von hier aus erhalten Sie einige grundlegende Designoptionen zum Ändern der Breite und des Randes der Kopfzeile. Für Astra Pro-Benutzer stehen erweiterte Einstellungen zur Verfügung.
Mit dem Astra Header Builder können Sie außerdem feinabstimmen, wie der Site-Header auf verschiedenen Bildschirmgrößen wie Desktop, Mobilgerät oder Tablet aussehen wird. Um eine andere Bildschirmgröße auszuwählen und anzupassen, verwenden Sie die Geräteauswahl in der unteren linken Ecke des Bildschirms.
Wie Sie sehen, erhalten Sie auf einem kleineren Bildschirm einen zusätzlichen Bereich namens „Off Canvas“. Auf diese Weise können Sie Platz in der Kopfzeile sparen und einige Elemente außerhalb des Bildschirms verschieben, sodass Besucher bei Bedarf umschalten können.
Und damit ist unsere Kurzanleitung zum Erstellen eines Headers mit dem Astra-Theme abgeschlossen. Sobald Sie alle Header-Elemente hinzugefügt und die erforderlichen Designänderungen vorgenommen haben, klicken Sie auf die Schaltfläche „Veröffentlichen“ und fertig.
Ihr neu erstellter Astra-Header ist jetzt auf Ihrer WordPress-Website verfügbar.
Im obigen Tutorial haben wir mit dem Astra Header Builder einen sehr einfachen Header erstellt, um Ihnen eine Vorstellung davon zu geben, wie die Funktion funktioniert. Allerdings gibt es im Astra Header Builder unzählige Tools und Optionen, mit denen Sie komplexere und beeindruckendere Header erstellen können.
Hier ein kurzer Überblick über die verschiedenen Optionen, die Ihnen zur Verfügung stehen:
Primärer Header
Der Standard-Header in Astra ist der primäre Header. Es werden ein Logo und ein Navigationsmenü angezeigt, das mit verschiedenen primären Header-Einstellungen in Astra anpassbar ist.
Installieren Sie einfach Astra und gehen Sie zum Abschnitt „Header“, um die primäre Header-Option auszuwählen und zur Anpassung zu gelangen. Kopfzeile > Primäre Kopfzeile
Sie können die folgenden Anpassungseinstellungen nutzen
Layout
Die Layouteinstellungen verwalten die Position des Logos für Ihre Seite. Für das Logo stehen in Astra drei verschiedene Positionen zur Verfügung
Linkes Logo
Das Logo wird in dieser Einstellung auf die linke Seite des Navigationsmenüs verschoben. Es handelt sich um einen typischen Stil zur Positionierung eines Logos.
Rechtes Logo
Das Logo wird in dieser Einstellung auf die rechte Seite des Navigationsmenüs verschoben.
Logo in der Mitte
Das Logo bewegt sich in dieser Einstellung in der Mitte über dem Navigationsmenü. Dies ist eine gute Option bei einem langen Menü.
Breite
Mit den Breiteneinstellungen wird die Breite der Kopfzeile für den Text verwaltet. Sie können die Breite Ihrer Kopfzeile anpassen
Volle Breite
In den Einstellungen für die volle Breite wird Ihr Header an beiden Enden gestreckt und an die Seitengröße Ihres Browsers angepasst.
Inhaltsbreite
In den Einstellungen für die Inhaltsbreite wird die Kopfzeile entsprechend der eingestellten Containerbreite angepasst. Sie können sie festlegen, indem Sie Folgendes auswählen
Global > Container > Breite
Grenze
Durch Auswahl des Rahmens können Sie einen Rahmen unter Ihrer Kopfzeile hinzufügen und dessen Farbe und Breite anpassen.
Mobiler Header
Auf responsiven Geräten ändert sich das Navigationsmenü in einen Hamburger. Daher werden in der primären Kopfzeile dieser Geräte nur das Hamburger-Menü und das Logo angezeigt. Sie können das Layout des Logos für das Menü in den responsiven Widgets anpassen.
Stapel
Bei der Stapeloption wird das Logo über das Hamburger-Menü verschoben. Die Entscheidung für den Stapel kann sich als nützlich erweisen, wenn Sie ein großes Logo haben.
Im Einklang
Bei der Inline-Option stimmen Logo und Menü überein und können bei einem kleinen Logo eine gute Option sein.
Farbthemen
Die primären Header können mit dem Astra-Theme in verschiedenen Farben dargestellt werden. Die globalen Farben sind kostenlos verfügbar, für erweiterte Funktionen müssen Sie jedoch das Add-on plugin von Astra Pro verwenden. Um globale Farben in Astra zu verwenden, müssen Sie auf der Registerkarte „Darstellung“ „Anpassen“ und dann „Global“ auswählen und schließlich die Option „Farben“ auswählen. Aussehen > Anpassen > Global > Farben
Typografie
Die Typografieeinstellungen für die Seite oder Website werden mit Astra Theme automatisch auf die primäre Kopfzeile angewendet. Sie können Typografieeinstellungen auswählen und anpassen, indem Sie unter „Global“ auf die Registerkarte „Darstellung“ gehen.
„Darstellung“ > „Anpassen“ > „Global“ > „Typografie“.
Transparenter Header
Transparente Kopfzeilen sind eine einfache Möglichkeit, schöne und attraktive Kopfzeilen für Ihre Seite zu erstellen. Der Hintergrund der primären Kopfzeile wird auf transparent gesetzt und der Inhalt der Seite wird nach oben gezogen. Der Inhalt der Seite und der primäre Header werden zusammengeführt, was bedeutet, dass der obere Teil des Inhalts zum Hintergrund des transparenten Headers wird. Befindet sich das Bild beispielsweise im oberen Bereich der Seite, wird es nach oben verschoben und dient als Hintergrund für die transparente Kopfzeile.
Wie füge ich einen transparenten Header hinzu?
Der transparente Header gestaltet sich in zwei schnellen Schritten, um Ihre Seite attraktiv zu gestalten
Schritt 1
Sie finden die Option der transparenten Kopfzeile im Customizer und können sie dann bearbeiten
Darstellung > Anpassen > Kopfzeile > Transparente Kopfzeile
Schritt 2
Unter den transparenten Kopfzeilenoptionen können Sie es für die gesamte Website aktivieren, den Rahmen unten, Farbschemata und das Logo-Layout auswählen
Aktivierung auf vollständiger Website
Wenn Sie die transparenten Header-Einstellungen für die gesamte Website wünschen, können Sie diese Option durch Aktivieren des Kontrollkästchens aktivieren. Wenn Sie das Kontrollkästchen aktivieren, gibt es noch einige Ausschlussregeln, die Sie für bestimmte Beiträge oder Seiten aktivieren können. Sie können die Option „Transparenter Header“ für die folgenden Seiten deaktivieren
Deaktivieren Sie die Option „Archive“, „Suche“ und „404“.
Die Einstellung „Transparenter Header“ kann auf diesen Sonderseiten durch Aktivieren des Kontrollkästchens deaktiviert werden.
Auf der Blog-Indexseite deaktivieren
Die Startseite Ihres Blogs wird zur Blog-Indexseite, wenn Sie die Einstellungen auf Ihrer Homepage ändern. Um eine Blog-Indexseite zu erstellen, können Sie zu den Homepage-Einstellungen gehen und unter der Registerkarte „Ihre Homepage-Anzeige“ „Ihre neuesten Beiträge“ auswählen.
Ihre Homepage-Anzeige > Ihre neuesten Beiträge
Wenn Sie die Einstellungen des transparenten Headers auf dieser Blog-Indexseite deaktivieren möchten, können Sie das entsprechende Kontrollkästchen aktivieren.
Auf Seiten deaktivieren
Wenn Sie die Option der transparenten Kopfzeile auf allen Seiten deaktivieren möchten, aktivieren Sie das Kontrollkästchen.
Bei Beiträgen deaktivieren
Wenn Sie die Option der transparenten Kopfzeile für alle Beiträge deaktivieren möchten, aktivieren Sie das Kontrollkästchen.
Farben und Hintergrund
Sie können die Hintergrund- und Farbeinstellungen Ihrer transparenten Kopfzeile mit den folgenden verfügbaren Optionen anpassen
Vorteile
Nachteile
Astra ist eines der besten Themes überhaupt. Und wenn Sie es verwenden, sind Sie auf dem richtigen Weg, Ihre Website zu pflegen.
Mit dem kostenlosen Theme von Astra können Sie schöne und attraktive Header für Ihre Webseite entwerfen. Die Option und Anpassung eines transparenten Headers ist ebenfalls verfügbar, was das Erlebnis für den Betrachter verbessern kann. Insgesamt können Sie mit vielen Optionen zur Kopfzeilenanpassung im Astra-Design einen beeindruckenden Kopfzeilen erstellen.
Kopf- und Fußzeilen einer Website sind wesentliche Elemente. In den meisten Fällen dient der Header der Navigation …
Zwei der beliebtesten WordPress-Themes auf dem Markt sind Astra und OceanWP. Professional…
Um eine hervorragende Nachrichten-Website zu erstellen, müssen Sie kein Webdesigner werden. Wir…
Das Newspaper-Theme ist eines der bedeutendsten WordPress-Themes, das von tagDiv entworfen wurde, einem…
Wenn es um die Einrichtung eines Online-Shops geht, ist WooCommerce das plugin in der Wahl. Es…
Ein Header ist im Allgemeinen das Erste, was eine Person sieht, wenn sie Ihre Website besucht.
Kommentare anzeigen
Guten Tag, ich habe einen transparenten Kommentar hinterlassen, aber kein Kommentar, den Sie erhalten haben, weil der Ankunftsplan nur auf der oberen Seite des Menüs angezeigt wurde... Kommentar, den Sie erhalten haben?
Dies ist nur das Hintergrundbild, das diese Farbe hat und da die Kopfzeile transparent ist... :)
Bonjour,
Merci beaucoup für alle diese Infos. Warum svp m'aider ?
Ich habe das Unternehmen Astra nur auf meiner Seite besucht. Weitere Informationen finden Sie auf allen Seiten, die jetzt verfügbar sind... Kommentieren Sie vielleicht?
Meine Website befindet sich derzeit im Wartungsmodus.
En vous remerciant par avance
Hallo, die Astra-Header-Zuweisung muss pro Seite in jeder Seiteneinstellung vorgenommen werden. In der Astra-Einstellung handelt es sich lediglich um eine globale Zuweisung.