Navigation

Übersicht

Die Avonni-Navigationskomponente ist eine anpassbare Navigationsleiste für Salesforce Experience Cloud-Sites. Sie verbessert die Benutzerfreundlichkeit der Site, indem sie Navigationslinks organisiert und schnellen Zugriff auf Abschnitte und Seiten bietet. Mit einer Vielzahl von Einstellungen lässt sie sich an nahezu jedes Site-Design und jede Navigationsstruktur anpassen.

Diese Komponente nutzt Slots für erweiterte Anpassungen und ist damit ideal für LWR-Seiten. Aura-Seiten unterstützen dieses Maß an Anpassung nicht.

Die Avonni-Navigationskomponente wurde mit größerer Flexibilität entwickelt. Im Gegensatz zur standardmäßigen Salesforce-Navigation ermöglicht sie komplexere Menüstrukturen. Sie können Menüs mit mehreren Ebenen erstellen – denken Sie an diese als Schichten oder Schritte. Beispielsweise können Sie Hauptelemente (Ebene 1), Unterelemente darunter (Ebene 2) und sogar Unter-Unterelemente (Ebene 3) haben. Dieser geschichtete Ansatz erleichtert es, eine große Menge an Informationen strukturiert und zugänglich zu organisieren und darzustellen.

Darüber hinaus bietet Avonni ein breiteres Spektrum an Stiloptionen. Dadurch können Sie das Erscheinungsbild Ihres Navigationsmenüs eng an den Stil Ihrer Marke anpassen. Sie haben mehr als nur Primärfarbe- und Schriftoptionen. Avonni ermöglicht eine tiefere Anpassung, sodass Sie ein visuell ansprechendes Navigationserlebnis schaffen können, das sich wie eine natürliche Erweiterung Ihrer Marke anfühlt.

Eigenschaften

Name

Beschreibung

Ausrichtung

Wählen Sie zwischen „horizontal“ für eine traditionelle obere Navigationsleiste oder „vertikal“ für eine Seitenleisten-Navigation.

Site-Logo anzeigen

Umschalten, um das Site-Logo innerhalb der Navigationskomponente anzuzeigen.

Oben fixiert

Aktivieren, um die Navigationsleiste oben im Ansichtsfenster zu belassen, während Benutzer beim Scrollen nach unten die Seite bewegen.

Mobiles Menü aktivieren

Aktivieren Sie ein für Mobilgeräte optimiertes Menü für bessere Navigation auf kleineren Bildschirmen.

Menü beim Überfahren öffnen

Konfigurieren Sie Dropdown-Menüs so, dass sie sich öffnen, wenn der Benutzer mit der Maus über einen Menüpunkt fährt, anstatt einen Klick zu erfordern.

Abgedunkelt

Fügen Sie der Navigationsleiste einen dezenten Schattierungseffekt für visuelle Tiefe hinzu.

Dropdown-Pfeil anzeigen

Zeigen Sie eine kleine pfeilähnliche Grafik, die auf das Menüpunkte zeigt, wenn dessen Dropdown geöffnet ist.

Elementindikator anzeigen

Umschalten, um visuelle Indikatoren anzuzeigen, die signalisieren, dass unter einem Menüpunkt mehr Inhalte verfügbar sind.

Manuelle Datenquelle: Verwenden Sie dies, um Ihre Navigationsstruktur zu erstellen und jedes Element sowie seine Eigenschaften zu definieren.

Name

Beschreibung

Beschriftung

Wählen Sie zwischen „horizontal“ für eine traditionelle obere Navigationsleiste oder „vertikal“ für eine Seitenleisten-Navigation.

Beschreibung

Umschalten, um das Site-Logo innerhalb der Navigationskomponente anzuzeigen.

Tag

Aktivieren, um die Navigationsleiste oben im Ansichtsfenster zu belassen, während Benutzer beim Scrollen nach unten die Seite bewegen.

Tooltip

Aktivieren Sie ein für Mobilgeräte optimiertes Menü für bessere Navigation auf kleineren Bildschirmen.

Avatar-Variante

Konfigurieren Sie Dropdown-Menüs so, dass sie sich öffnen, wenn der Benutzer mit der Maus über einen Menüpunkt fährt, anstatt einen Klick zu erfordern.

Avatar-Symbolname

Fügen Sie der Navigationsleiste einen dezenten Schattierungseffekt für visuelle Tiefe hinzu.

Avatar-Symbolgröße

Zeigen Sie eine kleine pfeilähnliche Grafik, die auf das Menüpunkte zeigt, wenn dessen Dropdown geöffnet ist.

Avatar-Bildquelle

Umschalten, um visuelle Indikatoren anzuzeigen, die signalisieren, dass unter einem Menüpunkt mehr Inhalte verfügbar sind.

Bezeichnung für Unterelemente und Unter-Unterelemente

Der angezeigte Text für das Unterelement.

Unterelemente und Unter-Unterelemente verlinken zu

Die URL oder Site-Seite, auf die das Unterelement verlinkt.

Dies kann weiter in „Unter-Unterelemente“ verschachtelt werden, mit denselben Einstellungen für eine weitere Ebenentiefe

Allgemeine Navigationseinstellungen

Name

Beschreibung

Größe

Passen Sie die Gesamtabmessungen des Navigationsmenüs an.

Hintergrundfarbe

Legen Sie die Hintergrundfarbe fest, damit sie zum Thema Ihrer Site passt.

Maximale Breite des Site-Logos

Definieren Sie die maximale Breite für das Site-Logo für konsistentes Branding.

Größe/Farbe der unteren Rahmenlinie

Passen Sie Größe und Farbe der unteren Rahmenlinie für ein markantes Erscheinungsbild an.

Einstellungen für Navigationselemente

Name

Beschreibung

Elementbreite, Mindest-/Höchstbreite

Geben Sie die Breitenabmessungen für jedes Navigationselement an.

Hintergrundfarbe des Elements

Legen Sie unterschiedliche Hintergrundfarben für aktive und Hover-Zustände fest.

Elementbeschriftung

Umfangreiche Anpassungsoptionen für Beschriftungstext, einschließlich Farbe, Schriftgröße, Schriftfamilie, Schriftstärke und Schatten, mit separaten Einstellungen für aktive und Hover-Zustände.

Elementbeschreibung

Passen Sie die Textfarbe, Schriftgröße, Schriftfamilie, Schriftstärke und Schatten für Elementbeschreibungen an.

Elementrahmen

Passen Sie Rahmenstärke und -farbe an, mit zusätzlichen Einstellungen für den aktiven Zustand.

Styling von Unterelementen und Menüs

Name

Beschreibung

Hintergrundfarbe des Unterelements (ausgewählt)

Wählen Sie eine Hintergrundfarbe für ausgewählte Unterelemente.

Abstand Unterelement (Block/Inline)

Passen Sie den Abstand um Unterelemente herum an.

Unterelementbeschriftung

Optionen zur Anpassung der Textfarbe, Schriftgröße, Schriftfamilie, Schriftstärke und Schatten, einschließlich Hover-Zustand-Einstellungen.

Menüabmessungen

Legen Sie die Menügröße fest, mit Mindest- und Höchstbreiten/-höhen.

Spaltenbreite des Menüs

Definieren Sie die Breite für Spalten im Menü.

Menüabstand (Block/Inline)

Passen Sie den Abstand innerhalb des Menüs an.

Menürand

Passen Sie Farbe, Größe, Stil und Radius des Menürands an.

Menüsymbol

Legen Sie Farben für normalen, aktiven und Hover-Zustand fest.

Menügruppe / Spaltenbeschriftung

Umfangreiche Textanpassungsoptionen für Gruppen- und Spaltenbeschriftungen.

Styling des Drawer-Menüs

Name

Beschreibung

Hintergrundfarbe des Drawers

Unterschiedliche Einstellungen für das geöffnete Element und sekundäre Hintergrundfarben.

Drawer Haupt-/Sekundärtitel

Passen Sie die Textfarbe, Schriftgröße, Schriftfamilie, Schriftstärke und den Schatten für Haupt- und Sekundärtitel an.

Sekundärbeschreibung des Drawers

Optionen für Textfarbe, Schriftgröße, Schriftfamilie, Schriftstärke und Schatten.

Styling des mobilen Drawers

Name

Beschreibung

Mobiler Drawer Haupt-/Sekundärtitel

Anpassungsoptionen ähnlich dem Desktop-Drawer, abgestimmt auf die mobile Ansicht.

Sekundärbeschreibung des mobilen Drawers

Passen Sie Textfarbe, Schriftgröße, Schriftfamilie, Schriftstärke und Schatten für Beschreibungen im mobilen Drawer an.

Aussehen des Menüs

Das Menüvariante Einstellung innerhalb der Avonni-Navigationskomponente für Salesforce Experience Cloud bestimmt den allgemeinen Stil und das Verhalten des Menüs.

Wenn Ihre Datenquelle auf manuell eingestellt ist und Ihr Menü Unterelemente enthält, können Sie die 'Menüvariante'-Funktion verwenden.

Hier sind die typischen Bedeutungen der Menüvarianten:

Basis

Das basis Variante stellt den Standardstil für ein Navigationsmenü dar. Sie ist unkompliziert, wobei Menüpunkte typischerweise in einer Reihe für eine horizontale Ausrichtung oder in einer Spalte für eine vertikale Ausrichtung aufgelistet sind. Diese Variante ist sauber und minimalistisch und daher eine gute Wahl für die meisten Sites, bei denen ein klassisches Erscheinungsbild gewünscht wird.

Drawer

Das drawer Die Variante impliziert ein Menü, das seitlich hereinschiebt, ähnlich einer geöffneten Schublade. Dieser Stil wird häufig für vertikale Menüs verwendet, insbesondere in mobilen Ansichten oder wenn der Bildschirmplatz begrenzt ist. Er hält die Navigation versteckt und über ein Menüsymbol (oft ein „Hamburger“-Symbol) zugänglich, bis sie benötigt wird.

Spalten

Mit der spalten Variante werden Dropdown-Menüs in Spalten angezeigt, wodurch ein mehrstufiges, strukturiertes Layout innerhalb des Dropdowns selbst ermöglicht wird. Dies ist besonders nützlich zur Organisation komplexer Navigationen mit vielen Elementen oder Kategorien und erleichtert es Benutzern, die Optionen zu durchsuchen.

Registerkarten

Das Registerkarten Variante verwandelt die Menüpunkte der obersten Ebene in eine Registerkarten-Navigation. Dieser Stil wird oft verwendet, wenn verschiedene Bereiche einer Site abgegrenzt und direkt über die Navigationsleiste zugänglich sein müssen. Er bietet eine vertraute Oberfläche für Benutzer, ähnlich den Registerkarten in einem Ordner oder Webbrowser.

Jede dieser Varianten kann Ihr Navigationserlebnis der Site mitdefinieren, daher ist es wichtig, eine zu wählen, die mit den Gestaltungsprinzipien Ihrer Site übereinstimmt und die Benutzerführung verbessert.

Zuletzt aktualisiert vor 1 Jahr

War das hilfreich?