Anmerkung: Unsere beliebtesten Anleitungen wurden ins Deutsche übersetzt, alle restlichen Anleitungen sind bisher nur auf Englisch verfügbar
Gestaltung der Navigation

Die Navigation Ihrer Website besteht aus einer Reihe von Links, die die Besucher zu den Inhalten Ihrer Website führen. Die Navigation wird normalerweise oben auf Ihrer Website angezeigt, wobei einige Templates die Navigation in einem Footer oder einer Seitenleiste unterstützen.

Alle Templates enthalten Website-Stil-Optionen zum Ändern von Schriftart, Farbe und Größe Ihrer Navigationslinks, und viele Templates unterstützen zusätzliche Optionen. In dieser Anleitung wird erklärt, wie Sie Ihre Navigation anpassen können.

nav-links.png

Bevor Sie beginnen

Die Navigationsanpassungen in Website-Stil finden

Jede Template-Familie hat ihren eigenen Website-Stil, sodass es nicht nur eine einzige Regel für die Aktualisierung Ihrer Navigationslinks gibt. Halten Sie sich stattdessen an diese Tipps, um die von Ihrem Template unterstützten Stil-Optionen zu finden:

  • Um Website-Stil über das Hauptmenü zu öffnen, klicken Sie auf Design und dann auf Website-Stil.
  • Scrollen Sie durch die Anpassungen auf der linken Seite und suchen Sie nach entsprechenden Anpassungen. Die Anpassungen beinhalten in der Regel das Wort Navigation.
  • Sie können auch mit der Maus über die Navigationslinks Ihrer Website in der Website-Vorschau auf der rechten Seite fahren. Wenn blaue Highlight-Boxen um sie herum erscheinen, klicken Sie auf einen beliebigen Navigationslink. Dies hilft, Anpassungen herauszufiltern, die nicht die Navigationslinks betreffen. Wenn Sie fertig sind, klicken Sie auf Alle anzeigen, um zurück zur Hauptansicht zu gelangen.

Hier ist ein Beispiel dafür, wie dies im Template „Thorne“ aussieht, das Teil der Brine-Familie ist:

thorne_site_styles.gif

Schriftart und Größe ändern

Um die Schriftart Ihrer Navigationsmenüs zu ändern, klicken Sie auf das v-Symbol neben Ihren Anpassungs-Namen, um das zugehörige Drop-Down-Menü zu öffnen. Sie können dies im folgenden Bild sehen (Ihr Anpassungsname kann abweichen). 

navigation_font_options.jpg

Von hier aus können Sie Folgendes anpassen.

  • Schriftart-Namen
  • Stil
  • Größe
  • Zeilenhöhe
  • Den Zeichenabstand

Weitere Hilfe dazu finden Sie unter Schriftarten ändern

Die Farbe ändern

Um die Link-Farben zu ändern, klicken Sie auf eine Farb-Anpassung. Wählen Sie eine neue Farbe, indem Sie auf eine Farbe oben in der Auswahl klicken und dann einen Farbton innerhalb des Quadrats auswählen. Sie können auch einen bestimmten Wert in das Textfeld eingeben. Weitere Hilfe dazu finden Sie unter Farben ändern.

Tipp: In einigen Templates gibt es zusätzliche Farben, die angezeigt werden können, wenn ein Besucher mit der Maus über einen Link fährt oder diese anklickt

Die Position ändern

In einigen Templates können Sie die Position der Links ändern. Sie können sie beispielsweise von der Mitte nach links verschieben.

Suchen Sie in „Website-Stil“ nach Optimierungen, die als Navigationsposition, Navigationsausrichtung oder ähnliches bezeichnet werden. Welche Positionen in Ihrem Template verfügbar sind, entnehmen Sie der Tabelle Navigationsanzeige nach Template weiter unten.

Hier ist ein Beispiel dafür, wie dies in Website-Stil aussehen kann:

five_-_navigation_style_options.jpg

Tipp: Suchen Sie in der Brine-Familie nach den Abschnitten Kopfzeile: Hauptnavigation und Kopfzeile: Untergeordnete Navigation.

Ändern des Abstands zwischen und um Links

Um den Platz um Navigationslinks herum zu ändern, suchen Sie nach Website-Stil-Anpassungen, die Ihre Kopfzeile, Ihr Banner oder Ihre Navigation anpassen. Während die Anpassungen je nach Template variieren, beinhalten die Anpassungen für Link-Abstände in der Regel Wörter wie diese:

  • Padding
  • Abstände
  • Breite

Hier ist ein Beispiel dafür, wie diese Optionen in Website-Stil aussehen könnten:

avenue_sizes_and_values.jpg

Optionen für „aktiv“ und „Mouseover“

In einigen Templates gibt es zusätzliche Optionen für Navigationslinks, je nachdem, ob diese angeklickt wurden (ihr „Zustand“ oder ihre „Phase“). Während die Anpassungen je nach Template variieren, achten Sie auf folgende Wörter: 

  • Mouseover – Der Link ändert sich, wenn ein Besucher mit dem Mauszeiger darüber fährt.
  • Aktiv – Wenn ein Besucher eine Seite in Ihrer Navigation besucht, ändert sich der Stil des entsprechenden Links.
Tipp: Externe Navigationslinks weisen keine aktiven Stile auf, selbst wenn sie auf eine Seite auf Ihrer Website verweisen.

Navigation auf Mobilgeräten

In den meisten Templates werden die Navigationsmenüs bei der Ansicht auf einem Mobilgerät hinter einem Menüsymbol zusammengeklappt. Dies trägt zur Benutzerfreundlichkeit bei und optimiert Ihre Website für Mobilgeräte.

In vielen Fällen übernimmt die Navigation für Mobilgeräte Stile von der Desktop-Website. Dies hilft Ihnen, Ihr Branding konsistent zu halten. Einige Templates haben erweiterte Stil-Optionen für Mobilgeräte, die Ihnen ein feineres Maß an Kontrolle geben. Um die Stil-Optionen Ihrer Website für Mobilgeräte zu sehen, lesen Sie bitte die Anleitung zu Struktur und Stil Ihres Templates.

Um herauszufinden, welche Anpassungen sich auf Ihre mobile Navigation auswirken, öffnen Sie Ihre Navigation in der Smartphone-Ansicht, bevor Sie Website-Stil öffnen. So können Sie die Änderungen sehen, während Sie sie vornehmen.

  1. Stellen Sie die Geräteansicht auf „Smartphone“ um.
  2. Klicken Sie auf den Navigationslink (in der Regel ein ☰), damit Ihre Navigation für Mobilgeräte angezeigt wird.
  3. Klicken Sie im Hauptmenü auf Design und dann auf Website-Stil. Die Navigation für Mobilgeräte bleibt geöffnet.
Hinweis: Wenn Sie Ihre Navigation auf Mobilgeräten nicht sehen können, stellen Sie sicher, dass Sie Ihre Hintergrund- oder Kopfzeilen-Farbe nicht auf die gleiche Farbe wie Ihren Navigationstext eingestellt haben. Die Links können auf Mobilgeräten über diese Farbe angezeigt werden.

Feste Navigation

Eine feste oder „Sticky“-Navigation bleibt an derselben Position oben im Browser, während Sie auf der Seite nach unten scrollen. Dies wird in einigen Templates unterstützt.

Navigationsanzeige nach Vorlage

Hier sehen Sie, wie die Hauptnavigation in jedem Template angezeigt wird. Die Vorlagen sind nach Familien gruppiert.

Hinweis: Die meisten Mobilgeräte verbergen die Website-Navigation hinter einem Menü-Symbol oder -Link. Größere Mobilgeräte, wie beispielsweise Tablets, können die Desktop-Stile anzeigen. Mehr dazu erfahren Sie unter Navigationsmenü-Symbole.

Template

Layout

Adirondack

Horizontal, oben mittig

Avenue

Horizontal, oben links/mittig/rechts

Aviator-Familie

Aubrey, Aviator

Vertikal, oben links (Visitenkarte/Offset); oder horizontal, oben mittig (Poster)

Bedford-Familie

Anya, Bedford, Bryant, Hayden

Horizontal, oben rechts

Brine-Familie

Aria, Basil, Blend, Brine, Burke, Cacao, Clay, Ethan, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Impact, Jaunt, Juke, Keene, Kin, Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Pedro, Polaris, Pursuit, Rally, Rover, Royce, Sofia, Sonny, Sonora, Stella, Thorne, Vow, Wav, West

Horizontal, oben links/mittig/rechts, kann versteckt sein

Im Seiten-Menü nennt sich dies Hauptnavigation.

Farro-Familie

Farro, Haute

Horizontal, oben links/mittig/rechts, kann versteckt sein 

Five

Vertikal, in Seitenleiste (Obere Navigationsposition: Keine); oder horizontal oben links/mittig/rechts (Über Banner, Unter Banner)

Flatiron

Horizontal, oben links

Forte

Horizontal, oben rechts

Galapagos

Horizontal, oben mittig

Ishimoto

Horizontal, oben links/mittig/rechts

Momentum

Horizontal, im Footer

Montauk-Familie

Julia, Kent, Montauk, Om

Horizontal, oben links/mittig/rechts

Native

Horizontal, oben mittig

Pacific-Familie

Charlotte, Fulton, Horizon, Naomi, Pacific

Horizontal, oben mittig, kann um den Seitentitel aufgeteilt werden.

Skye-Familie

Foundry, Indigo, Ready, Tudor, Skye

Vertikal, innerhalb eines Overlays

Supply

Vertikal, linke Seitenleiste

Tremont-Familie

Camino, Carson, Henson, Tremont

Horizontal, oben links/rechts

Wells

Vertikal, linke Seitenleiste

Wexley

Horizontal, oben links/mittig/rechts

York-Familie

Artesia, Flores, Harris, Jasper, Jones, Lange, Shibori, York

Horizontal, oben links/mittig/rechts, kann versteckt sein

 

War dieser Beitrag hilfreich?
51 von 236 fanden dies hilfreich