Wie erstelle ich einen atemberaubenden Astra-Theme-Header?

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:

• Warum sind Header für Ihre Webseiten wichtig?
• 1. Themenidentifikation
• 2. Zugänglichkeit
• 3. Suchmaschinenoptimierung
• 4. Macht Seiten scannbar
• 5. Benutzerfreundlichkeit mobiler Geräte
• Wie erstelle ich einen atemberaubenden Header mit dem Astra-Theme?
• Vor- und Nachteile der Verwendung des Astra-Themes für Header
• Letzte Worte

Warum sind Header für Ihre Webseiten wichtig?

Aus diesem Grund müssen Sie darauf achten, Überschriften in Ihren Text aufzunehmen

1. Themenidentifikation

Ü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.

2. Zugänglichkeit

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.

3. Suchmaschinenoptimierung

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.

4. Macht Seiten scannbar

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.

5. Benutzerfreundlichkeit mobiler Geräte

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.

Wie erstelle ich einen atemberaubenden Header mit dem Astra-Theme?

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:

• Titel und Logo der Website
• Hauptmenü
• Knopf 1
• Taste 2 (Profi)
• Suchen
• Konto
• HTML 1
• HTML 2
• Sekundäres Menü
• Sozial
• Widget 1
• Widget 2
• Widget 3 (Profi)
• Widget 4 (Profi)
• Einkaufswagen

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.

Astra Header Builder: Ein schneller Überblick über die verfügbaren Optionen

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

• Hintergrund
• Site-Titel
• Speisekarte
• Untermenü
• Inhalt

Vor- und Nachteile der Verwendung des Astra-Themes für Header

Vorteile

• Möglichkeit für den transparenten Header ist vorhanden
• Es stehen Kopfzeilen in voller Breite und Inhaltsbreite zur Verfügung 
• Eine individuelle Farb- und Typografieanpassung ist möglich

Nachteile

• Die Option „Sticky-Header“ ist nicht verfügbar
• Erweiterte Farbfunktionen sind nicht verfügbar

Letzte Worte

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.