Wie nutze ich Sprungmarken für Links in Divi?

Weise dem Zielelement eine CSS-ID zu (z.B. 'kontakt'). Erstelle dann einen Link mit #kontakt als URL. Beim Klick scrollt die Seite automatisch zum Zielelement. Divi bietet dies direkt im Link-Feld jedes Moduls.

DIVI: Sprungmarke für Links nutzen

Marius Marzian • 29. Juli 2020 • 3 Min. Lesezeit

Bildschirmfoto 2020 07 29 Um 15.30.01 1024x566 1

SEO-Experte

Marius Marzian

OIT GmbH

Profil ansehen

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;
}

Sprungmarken richtig einsetzen

Anchor-IDs vergeben

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.

Smooth Scroll aktivieren

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.

Sticky-Header-Offset

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.