Inpage Navigation
Mit dem Element Inpage Navigation können Sie auf jeder Seite Ihrer Website an einer beliebigen Stelle ein Inhaltsverzeichnis darstellen. Das Element ermöglicht, mehrere Links der Seite zu setzen und bietet daher eine gute Alternative zu den Anker-Links. In diesem Tutorial erläutern wir Ihnen, wie Sie vorgehen und welche Gestaltungsmöglichkeiten Sie dabei haben.
Beispielansicht
Anleitung
Element anlegen
- Nach dem Klick auf +Inhalt wählen Sie unter dem Reiter Navigation Elements die Inpage Navigation aus.
Chapterelemente wählen
- Im Reiter Content können Sie unter Label dem Element einen Namen geben, beispielsweise »Inhaltsverzeichnis« oder »Auf dieser Seite«.
- Unter Anchor Elements wählen Sie aus den verfügbaren Objekten die zu verlinkenden Chapter-Elemente. Beachten Sie, dass die Chapter-Elemente mit den Namen auftauchen, den Sie Ihnen gegeben haben. Ohne Namen erscheinen die ersten Worte eines Elements.
- Einmal angeklickt, erscheinen die Elemente im Feld Ausgewählte Objekte und können bei Bedarf mittels der Pfeiltasten nach oben oder unten bewegt werden.
CTA Button anlegen
- Im Feld CTA-Text geben Sie ein, welches was im Frontend an der Stelle des Link-Buttons erscheinen soll.
- Mittels Klick auf das Kettensymbol im Bereich CTA-Link können Sie den CTA-Button mit einem Link hinterlegen.
Einstellungen vornehmen
- Mit dem Scroll Type können Sie zwischen einer scrollenden oder sticky, also festen oder mitlaufenden Navigation wählen.
- Unter Element Width stellen Sie ein, ob sich das Element im Frontend an der Content- oder an der Seitenlaufweite orientiert.
- Im Alignment entscheiden Sie zwischen einer linksbündigen oder zentrierten Inpage Navigation.
- Unter Element Design können Sie die Hintergrundfarbe analog zu den definierten Farben primary, secondary und inverted bestimmen. Default steht für den Standard-Hintergrund.
- Speichern Sie Ihre Einstellungen.
Namen der Elemente eintragen
- Damit das Inhaltsverzeichnis auch die tatsächlichen Begriffe ausspielt, ist es wichtig, dass Sie die jeweiligen Elemente benannt haben.
- Um einem Element einen Namen zu geben, klicken Sie im jeweiligen Element auf den Reiter Settings und tragen im Feld Name of the element die gewünschte Bezeichnung ein, beispielsweise Cinema Teaser 66%.
- Speichern Sie die Änderungen.
Verhalten
Ist in einem Element in den Settings im Feld Label keine Elementbezeichnung hinterlegt, wird automatisch ein Standard-Text mit »no title« in der Inpage Navigation ausgespielt. Die Reihenfolge der Links ergibt sich automatisch aus der Reihenfolge der Elemente, wie Sie sie im Backend der Seite angelegt haben.
Besonderheit: Im Backend versteckte Inhalte (deaktiviert) werden im Anchor Elements bei den verfügbaren Objekten ebenfalls angezeigt und können daher direkt angewählt werden. Sobald das Element freigeschalten wird, erscheint es dann auch in der Inpage Navigation.
Achten Sie für eine reibungslose Funktionalität der Inpage Navigation darauf, dass einzelne Chapter mit Content in ausreichender Länge befüllt sind.
Responsive: Beachten Sie in der mobilen Ansicht, dass aufgrund des mangelnden Platzes die Inpage Navigation als Dropdown-Menü ausgespielt und damit nicht alle Verlinkungen des Inhaltsverzeichnisses gleichzeitig angezeigt werden. Mit einem Klick auf den Pfeil öffnet sich das Dropdown-Menü.