Scroll-to-Anchor (Element-Verlinkung innerhalb einer Seite)
Mit dem Feature Scroll-to-Anchor kannst du innerhalb einer Seite gezielt auf bestimmte Inhalte verlinken. Klickt ein:e Leser:in auf ein Bild, einen verlinkten Text, einen Link oder Button, scrollt die Seite zu einem vorher definierten Bereich weiter unten auf derselben Seite.
So lassen sich Inhalte besser strukturieren und besonders im Teaser- oder Header-Bereich neue, interaktive Navigationselemente umsetzen.
So funktioniert Scroll-to-Anchor
Das Feature besteht aus zwei Schritten:
1. Element ID vergeben (Ziel definieren)
Jedes Widget kann als Scroll-Ziel dienen.
1. Wähle das Widget aus, zu dem gescrollt werden soll
2. Navigiere zu Erweiterte Einstellungen
3. Vergib eine individuelle Element ID (z. B. features, kontakt oder preise)
4. Speichern – fertig
💡 Die Element ID muss eindeutig sein und darf pro Ausgabe nur einmal vergeben werden.
2. Auf das Element verlinken (Auslöser festlegen)
Nun kannst du von anderen Widgets, z.B. auf dieses Element verlinken:
1. Wähle ein Widget, welches die Möglichkeit bietet eine Verlinkung zu setzen
z.B. Link-Widget, Image-Widget, Text-Editor-Widget
2. Öffne die Verlinkungsoptionen
3. Wähle statt Internal oder External die Option #Anchor
4. Trage die gewünschte Element ID ein
5. Speichern – fertig
Beim Klick scrollt die Seite automatisch und flüssig zum Ziel-Widget.
So verlinkst du wieder nach oben
Ein besonders praktischer Anwendungsfall für Ankerpunkte ist der „Zurück nach oben“-Link.
Dafür kannst du jederzeit das vordefinierte Element #top verwenden.
Verlinkst du einen Textbereich, Button oder Bild mit #top, scrollt die Seite automatisch zurück an den Seitenanfang – ganz ohne zusätzlichen Ankerpunkt.
👉 Ideal für lange Seiten, Magazine oder Artikel mit vielen Abschnitten.
💡 Übrigens kannst du Links zu definierten Bereichen einer Seite auch ganz einfach mit Externen teilen. Kopiere dazu einfach die URL in der Frontend Ansicht deines Projekts aus dem Browserfenster und achte dabei darauf, dass die Element ID am Ende der URL angehängt ist, z.B. #preise