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 Header haben das Potenzial, Leser für Ihren Beitrag zu gewinnen 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 bieten weitere Unterüberschriften in Ihrem Dokument unter H2. Bevor wir damit fortfahren, wie das Astra-Theme Ihnen helfen kann, atemberaubende Header in Ihren Inhalten zu erstellen, lassen Sie uns die Bedeutung von Headern betrachten

Inhaltsverzeichnis:

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

Warum sind Header für Ihre Webseiten wichtig?

Deshalb müssen Sie sicherstellen, dass Ihr Text Überschriften enthält

1. Themenidentifikation

Überschriften spielen eine wichtige Rolle für Suchmaschinen und Leser, um die Schlüsselwörter auszuwählen, nach denen sie im Artikel suchen. Die primäre Überschrift im Text hilft bei der Identifizierung des Materialthemas, und die Unterüberschriften navigieren den Leser zu seinem Interessengebiet.

2. Zugänglichkeit

Heutzutage verwenden die Leute meistens Screenreader, um Inhalte durchzugehen. Überschriften in Inhalten können von Bildschirmlesern leicht erfasst werden und sind für die effektive Verwendung von Bildschirmlesern 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, ordnen Suchmaschinen Ihre Seite für Suchanfragen. Je mehr Sie Ihre Header gut formuliert und mit geeigneten Keywords gefüllt haben, desto mehr verbessern die Suchmaschinen Ihr Ranking.

Hier finden Sie eine Anleitung zur Verwendung der kostenlosen Astra-Designfunktionen, um beeindruckende Überschriften für Ihre Seiten zu erstellen. Befolgen Sie die Anweisungen, um einen Header Ihrer Wahl zu erstellen.

4. Macht Seiten scanbar

Durch die Verwendung von Kopfzeilen machen Sie die Seiten so scanbar wie möglich. Es ist allgemein bekannt, dass niemand den ganzen Artikel liest – insbesondere Zeile für Zeile. Deshalb ist es wichtig, dass Seiten Header haben. Von allen Headern ist der wichtigste Header der erste Header, da er den Ton für den gesamten Beitrag oder die gesamte Seite angibt.

Als nächstes kommt die Zwischenüberschrift, da sie den Inhalt in Stücke unterteilt, die besser für den Verzehr geeignet sind. Darüber hinaus wird die Struktur des Artikels durch die Über- und Unterüberschriften dargestellt. Kurz gesagt, der richtige Satz von Headern bedeutet, dass Sie das Publikum mit Ihren ansprechenden Inhalten ansprechen können.

5. Benutzerfreundlichkeit mobiler Geräte

Mit der Zeit wird das Handy dominanter als je zuvor. Es besteht kein Zweifel, dass Websites mehr Verkehr von Mobilgeräten erhalten als jemals zuvor. Wenn Sie also Ihre Inhalte korrigieren, werden Sie zwangsläufig sowohl vom Handy als auch vom Desktop aus Zuschauer gewinnen.

Kurz gesagt, Header optimieren die Webseite nicht nur für Leser, sondern auch für Suchmaschinen.

Wie erstelle ich einen atemberaubenden Header mit 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 in der Abbildung unten gezeigt:

Klicken Sie darauf und Sie gelangen zum Abschnitt Header Builder im WordPress-Anpasser. Die Schnittstelle sollte ähnlich aussehen wie hier:

Wie Sie sehen, ist der Header-Builder in drei vertikale Abschnitte unterteilt, die übereinander gestapelt sind. Sie haben die "primäre Kopfzeile" in der Mitte mit einer "oberen Kopfzeile" oben und "unterhalb der Kopfzeile" unten.  

Jede Kopfzeile hat ihre eigenen "Kopfzeileneinstellungen", auf die Sie zugreifen können, indem Sie auf das Zahnradsymbol links neben der Kopfzeile klicken.

Von hier aus können Sie die Kopfzeilenhöhe, die Rahmengröße, den Hintergrund, den Abstand und den Rand anpassen.

Beachten Sie auch, wie jede Kopfzeile in drei Abschnitte unterteilt ist. Sie können diesen Abschnitten Kopfzeilenelemente hinzufügen und daraus entfernen, um sie funktionsreicher zu gestalten. Zum Zeitpunkt der Erstellung dieses Tutorials haben Sie Zugriff auf 12 Header-Elemente:

• Seitentitel und Logo
• Hauptmenü
• Knopf 1
• Taste 2 (pro)
• Suche
• Konto
• HTML 1
• HTML2
• Sekundäres Menü
• Sozial
• Widget 1
• Widget 2
• Widget 3 (pro)
• Widget 4 (pro)
• Wagen

Um nun ein neues Kopfzeilenelement hinzuzufügen, fahren Sie mit der Maus über diesen Abschnitt und klicken Sie auf die Schaltfläche „+“. Dadurch 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 Kopfelement, um ein Kopfelement zu entfernen.

Sie können die Kopfzeilenelemente auch durch einfaches Ziehen und Ablegen zwischen den Kopfzeilenabschnitten verschieben.

Alle von Ihnen verwendeten Kopfzeilenelemente werden im linken Menü direkt unter der Registerkarte Allgemein angezeigt. Hier unten finden Sie auch die Option, den Header-Typ zu ändern. Kostenlose Benutzer erhalten nur die Option für "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 Kopfelements zugreifen.

Direkt neben der Registerkarte „Allgemein“ befindet sich die Registerkarte „Design“. Von hier aus erhalten Sie einige grundlegende Designoptionen, um die Breite und den Rand der Kopfzeile zu ändern. Astra Pro-Benutzern stehen erweiterte Einstellungen zur Verfügung.

Der Astra Header Builder ermöglicht Ihnen auch die Feinabstimmung, wie der Site-Header auf verschiedenen Bildschirmgrößen wie Desktop, Handy oder Tablet aussieht. 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 der Inhalte aus dem Bildschirm entfernen, die Besucher bei Bedarf umschalten können.

Und damit ist unsere Kurzanleitung zum Erstellen eines Headers mit dem Astra-Design abgeschlossen. Wenn Sie alle Kopfzeilenelemente hinzugefügt und die erforderlichen Designänderungen vorgenommen haben, klicken Sie auf die Schaltfläche zum Veröffentlichen und das war's.  

Ihr neu erstellter Astra-Header ist jetzt auf Ihrer WordPress-Website einsatzbereit.

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. Es gibt jedoch unzählige Tools und Optionen im Astra Header Builder, 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 Standardheader in Astra ist der primäre Header. Es werden ein Logo und ein Navigationsmenü angezeigt, das mit verschiedenen primären Header-Einstellungen in Astra angepasst werden kann.

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 verwenden

Layout

Die Layouteinstellungen verwalten die Position des Logos für Ihre Seite. In Astra stehen drei verschiedene Positionen für das Logo zur Verfügung

Linkes Logo

Das Logo in dieser Einstellung wird auf die linke Seite des Navigationsmenüs verschoben. Es ist ein typischer Stil zur Positionierung eines Logos.

Rechtes Logo

Das Logo in dieser Einstellung wird auf die rechte Seite des Navigationsmenüs verschoben.

Center Logo

Das Logo in dieser Einstellung bewegt sich in der Mitte über dem Navigationsmenü. Bei einem langen Menü ist dies eine gute Option.

Breite

Mit den Breiteneinstellungen wird die Breite der Kopfzeile für den Text verwaltet. Sie können Ihre Headerbreite als anpassen

Gesamtbreite

In den Einstellungen für die volle Breite wird Ihr Header von beiden Enden gestreckt und passt sich der Seitengröße Ihres Browsers an.

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

Rand

Durch Auswahl des Rahmens können Sie einen Rahmen unter Ihrer Kopfzeile hinzufügen und dessen Farbe und Breite anpassen.

Mobiler Header

Das Navigationsmenü auf reaktionsfähigen Geräten verwandelt sich in einen Hamburger. Daher werden im primären Header 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 bewegt sich das Logo über dem Hamburgermenü. Die Entscheidung für den Stapel kann sich als nützlich erweisen, wenn Sie ein großes Logo haben.

In der Reihe

Bei der Inline-Option stimmen Logo und Menü überein und können bei einem kleinen Logo eine gute Option sein.

Farbthemen

Die primären Überschriften können mithilfe des Astra-Themas in verschiedenen Farben dargestellt werden. Die globalen Farben sind kostenlos verfügbar, Sie müssen jedoch das Addon- plugin von Astra Pro verwenden, um erweiterte Funktionen zu erhalten. Um globale Farben in Astra zu verwenden, müssen Sie auf der Registerkarte Darstellung die Option Anpassen und dann Global auswählen und schließlich die Option Farben auswählen. Darstellung> Anpassen> Global> Farben

Typografie

Die Typografieeinstellungen für die Seite oder Site gelten automatisch für die primäre Kopfzeile mit Astra Theme. Sie können Typografieeinstellungen auswählen und anpassen, indem Sie auf die Registerkarte Darstellung unter global gehen.  

Darstellung> Anpassen> Global> Typografie

Transparenter Header

Transparente Überschriften sind eine einfache Möglichkeit, schöne und attraktive Überschriften für Ihre Seite zu erstellen. Der Hintergrund des primären Headers 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 zum Hintergrund für die transparente Kopfzeile.

Wie füge ich einen transparenten Header hinzu?

Die transparente Kopfzeile formuliert sich in zwei schnellen Schritten, um Ihre Seite attraktiv zu machen 

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 Header-Optionen können Sie es für die gesamte Website aktivieren, den unteren Rand, Farbschemata und das Logo-Layout auswählen

Aktivieren der vollständigen Website

Wenn Sie die transparenten Header-Einstellungen für die gesamte Website wünschen, können Sie diese Option aktivieren, indem Sie das Kontrollkästchen 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 für transparente Kopfzeilen für die folgenden Seiten deaktivieren

Deaktivieren Sie in Archiven, Suche und auf 404

Die Einstellung für transparente Kopfzeilen kann auf diesen speziellen Seiten durch Aktivieren des Kontrollkästchens deaktiviert werden.

Auf 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 auf 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 Kontrollkästchen dafür aktivieren.

Auf Seiten deaktivieren

Wenn Sie die Option der transparenten Kopfzeile auf allen Seiten deaktivieren möchten, aktivieren Sie das Kontrollkästchen.

Bei Posts 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 Ihres transparenten Headers mit den folgenden verfügbaren Optionen anpassen

• Hintergrund
• Seitentitel
• Speisekarte
• Untermenü
• Inhalt

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

Vorteile

• Gelegenheit für den transparenten Header ist vorhanden
• Die Überschriften mit voller Breite und Inhaltsbreite sind verfügbar 
• Die Anpassung von Farbe und Typografie 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 Themen da draußen. Und wenn Sie es verwenden, sind Sie auf dem richtigen Weg, um Ihre Site zu pflegen.

Mit dem kostenlosen Design von Astra können Sie schöne und attraktive Kopfzeilen für Ihre Webseite entwerfen. Die Option und Anpassung eines transparenten Headers sind ebenfalls verfügbar, was das Erlebnis des Betrachters verbessern kann. Insgesamt können Sie mit vielen Optionen zur Anpassung der Kopfzeile im Astra- Design eine beeindruckende Kopfzeile erstellen.