Hinweis zur Divi-Version: Die Anleitung "Ankerlinks setzen mit Divi" wurde ursprünglich für Divi 4 geschrieben und jetzt um Divi 5 ergänzt. Da Divi 5 die aktuelle Weiterentwicklung von Divi ist, findest du die Anleitung für Divi 5 zuerst. Die Anleitung für Divi 4 bleibt darunter erhalten.
Das Wichtigste vorab | Ankerlinks helfen dir, Besucherinnen und Besucher gezielt zu bestimmten Bereichen deiner Website zu führen. Dafür vergibst du in Divi eine eindeutige CSS-ID für den Zielbereich und verlinkst anschließend mit #deine-id dorthin. Innerhalb derselben Seite reicht der reine Ankerlink, zum Beispiel #kontakt. Wenn du von einer anderen Seite zu diesem Abschnitt springen möchtest, brauchst du die URL der Zielseite plus Anker, zum Beispiel https://deinewebsite.de/#kontakt.
Was sind Ankerlinks?
Ein Ankerlink ist ein Link, der Menschen auf deiner Website direkt zu einem bestimmten Abschnitt einer Seite führt. Statt die Seite manuell zu durchsuchen oder lange zu scrollen, springen sie mit einem Klick zum passenden Inhalt. Das ist besonders hilfreich bei längeren Seiten, ausführlichen Anleitungen, OnePagern, Angebotsseiten oder FAQ-Bereichen. Ankerlinks verbessern die Orientierung und machen deine Website leichter nutzbar.
Technisch besteht ein Ankerlink aus zwei Teilen: einem Zielbereich mit einer eindeutigen ID und einem Link, der genau auf diese ID verweist. In Divi trägst du diese ID im entsprechenden Bereich des Builders ein und verlinkst anschließend mit #deine-id dorthin.
Schritt-für-Schritt Ankerlinks setzen mit Divi 5
1. Ankerpunkt in Divi 5 festlegen = Ziel
Ein Ankerpunkt ist die Stelle auf deiner Seite, zu der später gesprungen werden soll. In Divi 5 legst du diesen Ankerpunkt an, indem du dem gewünschten Abschnitt eine eindeutige ID gibst.
Das machst du direkt in den Einstellungen der jeweiligen Sektion (Empfehlung).
- Öffne die Seite im Divi Visual Builder.
- Gehe zu der Sektion, zu der später gesprungen werden soll.
- Klicke auf das Zahnrad-Symbol der Sektion, um die Einstellungen zu öffnen.
- Wechsle zum Reiter Advanced/Erweitert.
- Öffne den Bereich Attributes.
- Klicke auf + Add Attribute.
- Wähle als Attribut ID aus.
- Trage bei Attribute Value deine gewünschte ID ein, zum Beispiel:
Wichtig: Die ID wird hier ohne # eingetragen. Wenn du später zu diesem Abschnitt verlinken möchtest, verwendest du im Link das #, also: #anker-starte-mit-mir
Du kannst diesen Schritt für alle Sektionen wiederholen, die du gezielt verlinken möchtest. Wenn du fertig bist, speichere die Seite und verlasse anschließend den Builder.
2. Ankerlink in Divi 5 setzen = Startpunkt
Im zweiten Schritt erstellst du den Link, der später zu deinem definierten Ankerpunkt führt. Das kann ein Textlink, ein Button oder ein Menüpunkt sein. Wichtig ist dabei: Der Ankerpunkt ist das Ziel. Der Link ist der Startpunkt.
So gehst du vor:
- Öffne das Text- oder Button-Modul, das als Ankerlink genutzt werden soll.
- Klicke auf das Zahnrad-Symbol, um die Einstellungen zu öffnen.
- Öffne den Bereich Link.
- Trage dort den passenden Link ein.
Wenn du auf derselben Seite bleibst, brauchst du keine vollständige URL. Dann verwendest du nur das # gefolgt von der CSS-ID, die du im vorherigen Schritt vergeben hast. Wenn du von einer anderen Seite deiner Website zu diesem Abschnitt springen möchtest, brauchst du die vollständige URL der Zielseite plus den Anker.
Ein Beispiel von meiner Website: Im Menü gibt es den Button „Entspannt starten“. Dieser Button soll von jeder Unterseite aus auf den passenden Abschnitt der Startseite führen. Deshalb braucht der Button die vollständige URL der Startseite plus den Anker (siehe Button-Link-URL). So weiß der Browser: Öffne zuerst die Startseite und springe dort direkt zum Abschnitt mit der ID anker-starte-mit-mir.
3. Testen des Ankerlinks
Speichere deine Änderungen und teste die Seite, um sicherzustellen, dass der Ankerlink funktioniert. Klicke auf den Link, und die Seite sollte automatisch zu dem Abschnitt springen, der mit der CSS-ID markiert wurde.
Meine Empfehlung: Teste Ankerlinks immer außerhalb des Builders auf der echten Website. So siehst du direkt, ob der Sprung korrekt funktioniert und ob der Zielbereich angenehm sichtbar ist.
Tipp: Probiere es gern mit meinem Link aus: https://manuelastrehober.de/#anker-starte-mit-mir. Ich habe diesen Link auf den Menüpunkt "Entspannt starten" gelegt, sodass jederzeit auf meine Kennenlernangebote weiter unten auf meiner Startseite gesprungen werden kann.
Schritt-für-Schritt Ankerlinks setzen mit Divi 4
1. Ankerpunkt in Divi 4 festlegen = Ziel
Der erste Schritt besteht darin, den Punkt auf der Seite festzulegen, zu dem der Ankerlink führen soll (das Linkziel). Dafür wird in Divi eine „CSS-ID“ vergeben.
So gehst du vor:
- Gehe in den Divi Builder und wähle das Modul, die Zeile oder Sektion (empfohlen) aus, zu der der Ankerlink führen soll. Da Sektionen eine Webseite in große Einheiten strukturieren, verwende ich für Ankerlinks fast ausschließlich diese dafür. Probiere aus, was für deine Zwecke am besten funktioniert.
- Klicke auf das Einstellungen-Symbol (Zahnrad) des Moduls, der Zeile oder Sektion und wechsle zum Tab Erweitert
- Trage in das Feld CSS-ID eine eindeutige ID ein (z. B.
anker-starte-mit-mir). Merke dir diese ID, denn du wirst sie im nächsten Schritt benötigen.
2. Ankerlink in Divi 4 setzen = Startpunkt
Im zweiten und letzten Schritt musst du den Link erstellen, der zu deinem definierten Ankerpunkt führt (der Linkstart).
So gehst du vor:
- Wähle den Text oder das Button-Modul aus, das als Ankerlink fungieren soll, und klicke auf das Einstellungen-Symbol (Zahnrad).
- Unter dem Punkt Link fügst du die URL ein.
- Bleibst du auf der Seite, schreibst du anstatt einer vollständigen URL nur
#gefolgt von der CSS-ID, die du im vorherigen Schritt vergeben hast.- Beispiel:
#anker-starte-mit-mir
- Beispiel:
- Verlinkst du auf eine andere Seite deiner Website, musst du die vollständige URL sowie
#gefolgt von der CSS-ID, die du im vorherigen Schritt vergeben hast, verwenden- Beispiel:
https://manuelastrehober.de/#anker-starte-mit-mir
- Beispiel:
- Bleibst du auf der Seite, schreibst du anstatt einer vollständigen URL nur
3. Testen des Ankerlinks
Speichere deine Änderungen und teste die Seite, um sicherzustellen, dass der Ankerlink funktioniert. Klicke auf den Link, und die Seite sollte automatisch zu dem Abschnitt springen, der mit der CSS-ID markiert wurde.
Meine Empfehlung: Teste Ankerlinks immer außerhalb des Builders auf der echten Website. So siehst du direkt, ob der Sprung korrekt funktioniert und ob der Zielbereich angenehm sichtbar ist.
Tipp: Probiere es gern mit meinem Link aus: https://manuelastrehober.de/#anker-starte-mit-mir. Ich habe diesen Link auf den Menüpunkt "Entspannt starten" gelegt, sodass jederzeit auf meine Kennenlernangebote weiter unten auf meiner Startseite gesprungen werden kann.
Beispiele für den Einsatz und Tipps für die Nutzung von Ankerlinks
Ankerlinks sind besonders hilfreich, wenn du Besucherinnen und Besucher gezielt zu einem bestimmten Abschnitt auf deiner Website führen möchtest. Statt lange zu scrollen, springen sie direkt dorthin, wo die passende Information steht.
Das ist vor allem bei längeren Seiten, OnePagern, Angebotsseiten, Blogartikeln oder Kontaktbereichen sinnvoll.
Konkrete Beispiele für den Einsatz von Ankerlinks
Inhaltsverzeichnis
Wenn du eine lange Seite hast, kannst du am Anfang ein Inhaltsverzeichnis einfügen. Jeder Punkt im Inhaltsverzeichnis wird dann mit dem passenden Abschnitt auf derselben Seite verlinkt. So können Besucher direkt zu dem Thema springen, das für sie gerade relevant ist.
Arbeitest du regelmäßig mit Inhaltsverzeichnissen, zum Beispiel in deinen Blogbeiträgen, empfehle ich dir das kostenlose Plugin Easy Table of Contents, das ich selbst auch in meinem Blog (siehe oben) im Einsatz habe. Damit musst du die Sprungmarken nicht jedes Mal manuell anlegen.
Kontaktbereich
Häufig werden Ankerlinks genutzt, um direkt zu einem Kontaktformular oder zu den Kontaktdaten am Ende einer Seite zu springen. Das ist besonders praktisch, wenn du auf einer Angebotsseite mehrere Buttons einsetzt, die alle zum Kontaktbereich führen sollen. Statt das Formular mehrfach einzubauen, verlinkst du einfach gezielt dorthin.
Menü für OnePager
Bei einem OnePager liegen alle wichtigen Inhalte auf einer einzigen Seite. Das Menü führt dann nicht auf verschiedene Unterseiten, sondern zu einzelnen Abschnitten derselben Seite. Mit Ankerlinks kannst du zum Beispiel diese Bereiche im Menü verlinken: Angebot, Über-mich, Kontakt. So können sich Besucher schnell und klar zwischen den einzelnen Sektionen bewegen. Im Pro-Tipp weiter unten zeige ich dir konkret, wie das funktioniert.
Ankerlink auf derselben Seite oder auf eine andere Seite?
Wichtig ist bei Ankerlinks immer die Frage: Liegt das Ziel auf derselben Seite oder auf einer anderen Seite?
Wenn sich der Link und der Zielbereich auf derselben Seite befinden, reicht der reine Ankerlink aus. Beispiel: #kontakt.Der Browser bleibt auf der aktuellen Seite und springt dort zum Abschnitt mit der passenden CSS-ID.
Möchtest du aber von einer anderen Seite zu diesem Abschnitt verlinken, zum Beispiel aus dem Impressum, aus einem Blogartikel oder von einer Angebotsseite, reicht #kontakt nicht aus. Dann braucht der Browser zusätzlich die Information, welche Seite geöffnet werden soll. In diesem Fall verwendest du die URL der Zielseite plus den Anker.
Beispiel für einen Abschnitt auf der Startseite: https://deinewebsite.de/#kontakt
Beispiel für einen Abschnitt auf einer Unterseite: https://deinewebsite.de/leistungen/#kontakt
Die CSS-ID selbst trägst du immer ohne # ein. Das # gehört nur in den Link.
Pro-Tipp: So setzt du Ankerlinks im Menü für einen OnePager mit dem Divi Theme
Um die Navigation für einen OnePager zu erleichtern, kann man Ankerlinks im Menü setzen, sodass die Benutzer durch Klicken auf die Menüeinträge direkt zu bestimmten Sektionen springen. Vor allem für Landingpages, Portfolios oder Event-Webseiten ist diese Funktion besonders hilfreich. Mit Divi ist dies sehr einfach umzusetzen und ähnelt dem Vorgehen, das du eben bereits kennengelernt hast.
1. Ankerpunkte auf der Seite festlegen - Wiederholung!
Der erste Schritt besteht darin, den Punkt auf der Seite festzulegen, zu dem der Ankerlink führen soll (das Linkziel). Dafür wird in Divi eine „CSS-ID“ vergeben.
So gehst du vor:
- Gehe in den Divi Builder und wähle die Sektion aus, zu der der Ankerlink führen soll. Für die Verwendung von Ankerlinks bei einem OnePager solltest du unbedingt mit Sektionen arbeiten.
- Klicke auf das Einstellungen-Symbol (Zahnrad) der Sektion und wechsle zum Tab Erweitert
- Trage in das Feld CSS-ID eine eindeutige ID ein (z. B.
anker-starte-mit-mir). Merke dir diese ID, denn du wirst sie im nächsten Schritt benötigen.
2. Ankerlinks ins Menü einfügen und zuweisen - Neu!
Jetzt musst du die Ankerlinks im Menü erstellen, damit die Menüeinträge zu den jeweiligen Sektionen auf der Seite springen.
So gehst du vor:
- Gehe zu deinem WordPress-Dashboard und navigiere zu Design / Menüs und erstelle ein neues Menü oder bearbeite ein vorhandenes Menü, das du für deinen OnePager verwenden möchtest.
- Anstatt eine Seite oder einen Beitrag hinzuzufügen, wählst du Individuelle Links aus.
- Bei URL gibst du
#gefolgt von der CSS-ID des Ankerpunktes ein, den du in Schritt 1 definiert hast (z. B.#ueber-mich). - Unter Link-Text gibst du den Namen ein, der im Menü angezeigt werden soll (z. B. „Über mich“).
- Bei URL gibst du
- Füge so viele individuelle Links hinzu, wie du Sektionen auf der Seite hast und vergiss nicht, das Menü zu speichern.
3. Menü verwalten, testen und im Customizer stylen.
Sobald du dein Menü erstellt hast, musst du sicherstellen, dass es auf deiner Seite angezeigt wird. Bleibe dafür im WordPress-Dashboard bei Design / Menüs und springe zum Punkt Positionen verwalten. Hier teilst du deiner Website mit, dass dein soeben erstelltes Menü das Hauptmenü (Position im Theme) ist. Speichern nicht vergessen.
Nachdem du die Ankerlinks und das Menü erstellt hast, teste deine Seite. Klicke auf die verschiedenen Menüeinträge und überprüfe, ob die Seite sanft zu den entsprechenden Sektionen springt. Stelle sicher, dass das Scrollen auch auf mobilen Geräten reibungslos funktioniert.
Möchtest du dein Menü noch etwas hübscher machen und dem Design (z. B. farblich) deinem OnePager anpassen, so kannst du das im Theme Customizer erledigen. Gehe hierfür im WordPress-Dashboard zu Design / Customizer / Header & Navigation. Du hast hier viele Möglichkeiten, deinen Header zu stylen. In der Divi Dokumentation ist dies ausführlich beschrieben.
FAQ: Ankerlinks setzen mit Divi
Warum funktioniert mein Ankerlink nicht?
Prüfe zuerst, ob CSS-ID und Link exakt zusammenpassen. Wenn deine CSS-ID kontakt lautet, muss der Link auf derselben Seite so aussehen: #kontakt
Häufige Fehler sind:
- Das # wurde versehentlich in die CSS-ID eingetragen.
- CSS-ID und Link unterscheiden sich in der Schreibweise.
- Es wurden Leerzeichen, Umlaute oder Sonderzeichen verwendet.
- Die ID wurde nicht im richtigen Bereich eingetragen.
- Die Änderung ist wegen Cache noch nicht sichtbar.
Richtig ist: CSS-ID: kontakt - Link: #kontakt
Falsch ist: CSS-ID: #kontakt - Link: #kontakt
Was ist der Unterschied zwischen CSS-ID und CSS-Klasse?
Für einen Ankerlink brauchst du eine CSS-ID. Eine CSS-ID bezeichnet einen bestimmten Abschnitt eindeutig. Sie sollte auf einer Seite nur einmal verwendet werden. Genau deshalb eignet sie sich als Sprungziel.
Eine CSS-Klasse ist eher für Gestaltung und Wiederverwendung gedacht. Sie kann mehrfach auf einer Seite vorkommen und ist für Ankerlinks nicht die passende Wahl.
Wenn du also in Divi ein Ziel für einen Ankerlink festlegst, trägst du den Namen im Feld CSS-ID ein.
Darf eine CSS-ID Leerzeichen oder Umlaute enthalten?
Verwende für CSS-IDs am besten einfache, robuste Bezeichnungen. Gut geeignet sind zum Beispiel:
kontaktleistungenueber-michfaqerstgespraech
Meine Empfehlung: Nutze Kleinbuchstaben, keine Leerzeichen, keine Umlaute und bei Bedarf Bindestriche. Das ist gut lesbar und vermeidet unnötige Fehler.
Warum springt der Ankerlink nicht an die richtige Stelle?
Wenn der Link grundsätzlich funktioniert, aber der Zielbereich ungünstig angezeigt wird, liegt es oft am Layout. Ein häufiger Grund ist ein fester Header. Der Browser springt dann zwar zum richtigen Abschnitt, aber die Überschrift verschwindet teilweise unter dem Menü. In diesem Fall kannst du den Anker etwas höher setzen, zum Beispiel auf die Sektion statt direkt auf ein Modul. Alternativ kannst du oberhalb des Zielbereichs etwas Abstand einplanen. Für die meisten Websites reicht diese einfache Lösung aus. Zusätzlicher CSS-Code ist nur nötig, wenn der Sprung dauerhaft ungenau bleibt oder das Layout komplexer ist.
Sollte ich die CSS-ID auf eine Sektion, Zeile oder ein Modul setzen?
Für die meisten Fälle ist die Sektion die beste Wahl. Sie bildet einen klaren Inhaltsbereich und ist später leicht wiederzufinden. Eine ID auf einem Modul kann sinnvoll sein, wenn du sehr genau zu einer bestimmten Überschrift, einem Formular oder einem einzelnen Inhaltselement springen möchtest. Meine Empfehlung: Starte mit der Sektion. Das ist übersichtlich, gut wartbar und für die meisten Ankerlinks völlig ausreichend.
Warum sehe ich meine Änderung nicht sofort?
Bei WordPress kann es sein, dass Änderungen nicht direkt sichtbar sind, obwohl du sie gespeichert hast. Das liegt häufig am Cache. Prüfe deshalb:
- Ist die Seite wirklich gespeichert?
- Hast du die veröffentlichte Seite neu geladen?
- Ist ein Cache-Plugin aktiv?
- Nutzt dein Hosting zusätzlich serverseitigen Cache?
Testest du im normalen Browser oder im Inkognito-Fenster? Wenn der Ankerlink im Builder funktioniert, aber auf der veröffentlichten Seite nicht, lohnt sich fast immer ein Blick auf den Cache.
Sind Ankerlinks gut für SEO?
Ankerlinks sind kein SEO-Trick. Sie verbessern aber die Orientierung auf einer Seite. Besonders bei längeren Blogartikeln, Angebotsseiten, FAQ-Bereichen oder OnePagern können sie helfen, schneller zu relevanten Abschnitten zu gelangen. Das ist vor allem aus Nutzersicht sinnvoll: Eine gut strukturierte Seite wird leichter verstanden, besser genutzt und wirkt professioneller. Genau deshalb gehören Ankerlinks nicht in die Kategorie „technischer Schnickschnack“, sondern zur sauberen Website-Struktur.
.
Fazit
Ankerlinks setzen mit Divi ist eine einfache Möglichkeit, deine Website übersichtlicher und besser navigierbar zu machen. Besonders bei längeren Seiten, ausführlichen Blogartikeln, Kontaktbereichen oder OnePagern helfen sie deinen Besuchern, schneller an die richtige Stelle zu kommen. Wichtig ist dabei weniger die Technik selbst, sondern die klare Struktur dahinter: Welche Bereiche deiner Seite sind wirklich relevant? Wohin möchtest du Menschen gezielt führen? Und an welchen Stellen hilft ein Sprunglink, Orientierung zu geben?
Wenn du die CSS-ID sauber vergibst und den passenden Link korrekt setzt, funktionieren Ankerlinks sowohl in Divi 5 als auch in Divi 4 zuverlässig. Achte nur darauf, ob du innerhalb derselben Seite verlinkst oder von einer anderen Seite kommst – davon hängt ab, ob #kontakt reicht oder ob du die vollständige URL mit Anker brauchst.
So werden Ankerlinks zu einem kleinen, aber wirkungsvollen Baustein für eine klare Website-Struktur. Ganz im Sinne von: #keepitsiMple.
