Sprungmarken (Anker-Links) in Divi ermöglichen es, Besucher mit einem Klick zu einem bestimmten Bereich auf derselben Seite zu scrollen. Das ist ideal für lange Seiten mit mehreren Abschnitten oder für FAQs.
Schritt 1: Anker-ID am Zielbereich setzen
- Öffne den Divi Builder und klicke auf das Element (Abschnitt, Zeile oder Modul), zu dem gescrollt werden soll
- Gehe zu den Einstellungen → Tab „Erweitert“
- Trage im Feld „CSS-ID“ einen eindeutigen Namen ein, z.B.
kontakt - Speichere die Einstellungen
Schritt 2: Link mit Anker erstellen
Jetzt kannst du einen Button oder Textlink auf den Anker verlinken:
- Auf derselben Seite: Nutze als URL einfach
#kontakt - Von einer anderen Seite: Nutze
https://deine-domain.de/seite/#kontakt
In einem Divi Button-Modul trägst du diesen Link im Feld „Button-URL“ ein.
Sanftes Scrolling aktivieren
Für ein elegantes, animiertes Scrollen füge diesen Code in Divi → Theme-Optionen → Allgemein → Benutzerdefiniertes CSS ein:
html {
scroll-behavior: smooth;
}Tipp: Offset für fixierte Header
Wenn dein Header fixiert (sticky) ist, landet der Sprung oft hinter dem Header. Korrigiere das mit:
:target {
scroll-margin-top: 80px;
}Verwandte Artikel
Sprungmarken richtig einsetzen
Füge in Divi jedem Abschnitt oder Modul eine CSS-ID zu (Erweitert → CSS-ID). Verlinke dann mit href="#deine-id". Funktioniert auch seitenübergreifend: /seite/#abschnitt.
Mit einem kleinen CSS-Snippet (html { scroll-behavior: smooth; }) scrollt die Seite sanft zum Ziel statt abrupt zu springen – deutlich bessere User Experience ohne JavaScript-Plugin.
Hast du einen fixen Header, springt der Anker unter das Menü. Lösung: scroll-margin-top: 80px; (Wert = Headerhöhe) auf das Ziel-Element setzen – das korrigiert den Versatz automatisch.
Hast du eine Frage zu diesem Artikel?
Schreib uns – wir antworten in der Regel innerhalb eines Werktages.