Der Kopfbereich ( Header) ist einer der wichtigsten Teile deiner Website. Hier befinden sich dein Logo und das Navigationsmenü, die als erste Anlaufstelle für Besucher dienen. Hier findest du eine Schritt-für-Schritt-Anleitung zum Anpassen deines Kopfbereichs mit den Tools von Vsble. Dieses Tutorial gilt für V2-Vorlagen. Vorlagen der Version 1 haben einen begrenzteren Satz an Einstellungen, werden aber auch auf Version 2 aktualisiert.
Was ist der Kopfzeilenbereich oder der Header?
Die Kopfzeile ist der obere Teil deiner Website, der das Logo und das Navigationsmenü enthält. Sie kann an das Branding und die Funktionalität deiner Website angepasst werden.
Anpassen des Headers auf dem Desktop
Zugriff auf die Header Einstellungen:
Klicke auf „Anpassung“ und wähle den Abschnitt „Kopfzeile“ aus.
Header Position: Fest oder scrollend:
Feste Kopfzeile: Bleibt sichtbar, wenn Benutzer auf der Website nach unten scrollen, sodass die Navigation immer zugänglich ist.
Scrolling Header: Scrollen zusammen mit dem Inhalt der Website und verschwinden, wenn Benutzer nach unten scrollen.
Logo- und Navigationslayout:
Wähle die Ausrichtung des Logos und der Navigation: Links, Rechts oder Zentriert.
Anpassung der Abstände:
Passe den oberen und unteren Abstand des Headers für präzise Abstände an.
Farben und Transparenz des Headers:
Lege eine beliebige Farbe für den gesamten Header-Bereich fest.
Passe die Transparenz an, um den Header halbtransparent zu machen. Dies ist besonders nützlich für feste Kopfzeilen, sodass Besucher den Bildlaufinhalt dahinter sehen können.
Groß-/Kleinschreibung in der Navigation:
Wähle zwischen der Beibehaltung der ursprünglichen Groß-/Kleinschreibung oder dem schnellen Wechsel zu einem anderen Groß-/Kleinschreibungsstil wie „ALL CAPS“, „Upper Case“ oder „Lower Case“.
Schriftart und Stil der Navigation:
Passe die Schriftart, Größe, Farbe und Dicke des Textes im Navigationsmenü an.
Passe die obere und untere Polsterung des Navigationsmenüs für einen besseren Abstand an.
Anpassen des Header auf Mobilgeräten
Zugriff auf die Einstellungen für die Kopfzeile auf Mobilgeräten:
Klicke auf die Registerkarte „Mobil“ und wähle dann den Abschnitt „Kopfzeile“ aus.
Layout des Header auf Mobilgeräten:
Richte das Logo und das Navigationsmenü links oder rechts aus.
Anpassung der Abstände:
Passe die obere und untere Abstünde an, um sicherzustellen, dass die Kopfzeile auf Mobilgeräten sauber und professionell aussieht.
Einstellungen für Farbe und Transparenz:
Die Farb- und Transparenzeinstellungen gelten für alle Geräte, um ein einheitliches Branding zu gewährleisten. Wenn diese Einstellungen für ein Gerät geändert werden, wirkt sich dies auf alle Geräte aus, um die Einheitlichkeit zu wahren.
Anpassen des mobilen Menüs:
Wechsle zwischen einem klassischen Menü-Symbol im Burger-Stil oder einer schriftlichen Menüoption:
Passe für die schriftliche Menüoption die Schriftart, Größe, Farbe und Dicke an, um ein einzigartiges Aussehen zu erzielen.
Wenn du das Burger-Symbol beibehalten möchtest, kannst du seine Farbe an dein Branding anpassen.
Warum ein einheitliches Branding auf allen Geräten wichtig ist
Die Einstellungen für die Farbe und Transparenz der Kopfzeile werden einheitlich auf allen Geräten angewendet, um ein einheitliches Benutzererlebnis zu gewährleisten. Ein einheitliches Branding hilft, Verwirrung zu vermeiden und verleiht deiner Website ein professionelles Aussehen.
FAQs zur Anpassung der Kopfzeile
F: Kann ich für mobile und Desktop-Kopfzeilen unterschiedliche Farben verwenden?
A: Nein, die Farb- und Transparenzeinstellungen gelten für alle Geräte, um ein einheitliches Branding zu gewährleisten.
F: Was ist der Vorteil einer festen Kopfzeile?
A: Ein fester Header sorgt dafür, dass die Navigation beim Scrollen der Benutzer sichtbar bleibt, sodass wichtige Links leicht zugänglich sind und die Benutzererfahrung verbessert wird.
F: Kann ich die Größe des Navigationsmenüs ändern?
A: Ja, du kannst die Schriftgröße, Farbe, Dicke und den Abstand des Navigationsmenüs sowohl für den Desktop als auch für Mobilgeräte anpassen.
F: Wie kann ich das Aussehen des Menüs im Burger-Stil ändern?
A: Du kannst das Burger-Symbol durch ein schriftliches Menü ersetzen und dessen Schriftart, Größe, Farbe und Dicke vollständig anpassen. Wenn du den klassischen Burger-Stil beibehältst, kannst du seine Farbe an deine Website anpassen.
Abschließende Anmerkungen
Mit den flexiblen Optionen zur Anpassung der Kopfzeile von Vsble kannst du eine Kopfzeile erstellen, die perfekt zu deinem Branding passt und ein nahtloses Erlebnis auf allen Geräten bietet. Experimentiere mit den Einstellungen, um das Aussehen zu finden, das am besten zu deiner Website passt.