📋 Grundlagen der Navigation
Was ist die Navigation?
Die Navigation besteht aus einer Reihe von Buttons, die als Hauptmenü Ihrer Website dienen.
Jeder Button kann zu einer anderen Seite oder einem externen Link führen und individuell gestaltet werden.
Positionen verwalten
Sie können beliebig viele Navigationsbuttons erstellen und verwalten:
- Buttons werden in der Reihenfolge angezeigt, in der sie erstellt wurden
- Jede Position kann einzeln bearbeitet werden
- Buttons können jederzeit gelöscht oder neu angeordnet werden
Tipp: Optimale Anzahl
Für eine übersichtliche Navigation empfehlen wir 3-7 Buttons. Zu viele Buttons können auf mobilen Geräten Probleme verursachen.
🖼️ Button-Bilder verwenden
Bilder hochladen
Sie können für jeden Button ein individuelles Hintergrundbild verwenden:
- Unterstützte Formate: JPG, PNG, GIF, SVG
- Optimale Größe: Entspricht der Button-Größe (z.B. 200×60px)
- Automatische Skalierung: Bilder werden auf Button-Größe skaliert (
cover)
Standard-Hintergrund
Wenn kein Bild hochgeladen wird, verwendet der Button einen Standard-Farbverlauf:
- Standard: Roter Gradient (
#8b0000→#570000) - Anpassbar: Im Tab "Design" können Sie den Standard-Gradienten ändern
Bilder verwalten
- Bild ersetzen: Laden Sie ein neues Bild hoch, um das alte zu ersetzen
- Bild löschen: Entfernen Sie das Vorschaubild, um das Bild vom Server zu löschen
- Automatische Benennung: Hochgeladene Bilder erhalten automatisch eindeutige Namen
Wichtig: Bildrechte
Verwenden Sie nur Bilder, für die Sie die Nutzungsrechte besitzen oder die lizenzfrei sind. Urheberrechtsverletzungen können teuer werden!
🔤 Text-Overlay Einstellungen
Text-Overlay
Der Text, der auf dem Button-Bild angezeigt wird. Dieser kann vom Button-Namen abweichen,
um z.B. kürzere Beschriftungen auf kleinen Buttons zu verwenden.
Textfarbe
Wählen Sie die Farbe des Button-Texts. Achten Sie auf ausreichenden Kontrast zum Hintergrund:
- Standard: Weiß (
#ffffff) - Bei dunklen Hintergründen: Helle Farben verwenden
- Bei hellen Hintergründen: Dunkle Farben verwenden
Textgröße
Legen Sie die Schriftgröße in Pixeln fest:
- Standard:
16px - Empfohlener Bereich:
12pxbis24px - Minimal:
8px - Maximal:
48px
🎛️ Erweiterte Text-Einstellungen
Text-Zeilenhöhe
Bestimmen Sie den Abstand zwischen Textzeilen (bei mehrzeiligen Texten):
- Standard:
1.2 - Enger:
0.8-1.0 - Weiter:
1.5-2.0
Vertikale Textposition
🆕 NEU: Bestimmen Sie die vertikale Position des Textes auf dem Button:
- Standard:
50%(mittig) - Oben:
0%-30% - Mitte:
40%-60% - Unten:
70%-100%
Tipp: Textlesbarkeit
Für beste Lesbarkeit verwenden Sie:
- Textschatten für Kontrast (
text-shadow) - Fette Schrift (
font-weight: bold) - Kurze, prägnante Texte
- Große Schrift bei kleinen Buttons vermeiden
⚙️ Navigation verwalten
Positionen hinzufügen
Klicken Sie auf "+ Weitere Position hinzufügen", um neue Navigationsbuttons zu erstellen.
Neue Buttons erhalten die Standardeinstellungen für Größe und Farbe.
Positionen löschen
Klicken Sie auf das "–" Symbol neben einem Button, um ihn zu entfernen.
Achtung: Gelöschte Buttons und deren Bilder werden permanent entfernt!
Bilder löschen
Klicken Sie auf das "×" Symbol im Vorschaubild, um das Bild eines Buttons zu löschen.
Der Button verwendet danach wieder den Standard-Hintergrund.
Live-Vorschau
Im unteren Bereich der Seite sehen Sie eine Live-Vorschau Ihrer Navigation.
Diese wird nach dem Speichern aktualisiert und zeigt Buttons in ihrer tatsächlichen Größe und mit korrekter Textposition.
Wichtig: Speichern nicht vergessen
Änderungen an der Navigation werden erst wirksam, nachdem Sie auf "Navigation speichern" geklickt haben. Ohne Speichern gehen alle Änderungen verloren!
💡 Tipps & Best Practices
Responsive Design
Ihre Navigation passt sich automatisch an verschiedene Bildschirmgrößen an:
- Auf großen Bildschirmen: Buttons in einer Reihe
- Auf mittleren Bildschirmen: Buttons in mehreren Reihen
- Auf kleinen Bildschirmen: Buttons untereinander mit Wrap
Performance-Tipps
Für optimale Ladezeiten:
- Komprimieren Sie Button-Bilder vor dem Hochladen
- Verwenden Sie für einfarbige Buttons den Gradienten statt Bilder
- Vermeiden Sie zu viele Buttons (max. 7 empfohlen)
Usability-Tipps
Für eine benutzerfreundliche Navigation:
- Verwenden Sie klare, verständliche Button-Namen
- Gruppieren Sie zusammengehörige Buttons (gleiche Farbe/Stil)
- Setzen Sie den wichtigsten Button an erste Stelle
- Testen Sie alle Links regelmäßig
🎯 Empfohlene Einstellungen für verschiedene Stile
Minimalistisch & Modern:
• Button-Größe: 180×50px
• Hintergrund: Einfacher Farbverlauf
• Text: Weiß, 16px, zentriert (50%)
• Effekte: Dezenter Schatten, keine Bilder
• Button-Größe: 180×50px
• Hintergrund: Einfacher Farbverlauf
• Text: Weiß, 16px, zentriert (50%)
• Effekte: Dezenter Schatten, keine Bilder
Auffällig & Kreativ:
• Button-Größe: 220×70px
• Hintergrund: Individuelle Bilder
• Text: Kontrastreiche Farbe, 18px, angepasste Position
• Effekte: Starker Schatten, Hover-Effekte
• Button-Größe: 220×70px
• Hintergrund: Individuelle Bilder
• Text: Kontrastreiche Farbe, 18px, angepasste Position
• Effekte: Starker Schatten, Hover-Effekte
Kompakt & Funktional:
• Button-Größe: 150×40px
• Hintergrund: Einfarbig oder schlichter Gradient
• Text: 14px, obere Position (30%) für mehr Platz
• Effekte: Minimale Effekte für schnelle Ladezeit
• Button-Größe: 150×40px
• Hintergrund: Einfarbig oder schlichter Gradient
• Text: 14px, obere Position (30%) für mehr Platz
• Effekte: Minimale Effekte für schnelle Ladezeit
🚀 Schnellstart: Ihre erste Navigation
Schritt 1: Standard-Button-Größe festlegen
Gehen Sie zu "Design" und legen Sie unter "Button-Größe" Ihre bevorzugten Standardmaße fest (z.B. 200×60px).
Schritt 2: Erste Buttons erstellen
Erstellen Sie 3-5 Buttons mit klaren Bezeichnungen wie "Startseite", "Leistungen", "Über uns", "Kontakt".
Schritt 3: Links zuweisen
Weisen Sie jedem Button das entsprechende Ziel zu (interne oder externe Links).
Schritt 4: Design anpassen
Passen Sie bei Bedarf Größen, Farben und Textpositionen individuell an.
Schritt 5: Speichern & Testen
Klicken Sie auf "Navigation speichern" und testen Sie die Navigation auf Ihrer Website.