Anker-Links/Sprungmarken bei Divi setzen
Anker-Links – auch Sprungmarken (engl. anchor links) – sind Verlinkungen innerhalb der gleichen Webseite oder zu einer anderen Webseite. Durch die Verwendung von Anker/Sprungmarken wird dem Besucher die Handhabung und Orientierung innerhalb der Website erleichtert. Und so können Anker/Sprungmarken schnell und einfach mit Divi gesetzt werden …
- Eines vorweg zur Einleitung – Website vs. Webseite
- Sind Anker-Links/Sprungmarken wichtig?
- Können Anker-Links/Sprungmarken falsch eingesetzt werden?
- Anker-Link/Sprungmarke mit Divi setzen
- Schritt 1: Die Vorarbeit bzw. Überlegungen
- Tipps für gute Anker-Namen
- Schritt 2: Das Zielelement bearbeiten – den Anker setzen/definieren
- Schritt 3: Das Ausgangselement bearbeiten – die Anker-Link-URL setzen/zuordnen
- Schritt 4: Testen der Anker-Links/Sprungmarken & Fehlersuche
- Anker-Links/Sprungmarken im Quellcode setzen
- Anker-Links/Sprungmarken bei anderen Page Buildern und Themes setzen
- Fazit zu Anker-Links/Sprungmarken
Eines vorweg zur Einleitung – Website vs. Webseite
Leider werden die beiden Begriffe sehr häufig gleichgesetzt, sodass wir zu Beginn den Unterschied kurz erläutern möchten.
Der Unterschied zwischen einer Webseite und einer Website besteht darin, dass eine Webseite nur eine einzelne Seite ist. Mehrere Seiten, also Webseiten, ergeben die Website. Übrigens ist eine Homepage auch keine Website, sondern eine Webseite, die als Startseite festgelegt ist.
Die Begriffe werden wahrscheinlich auch in einigen Jahren noch bunt gemischt.
Sind Anker-Links/Sprungmarken wichtig?
Sprungmarken sind sehr wichtige Elemente, um Ihren Besucher die Orientierung auf einer Webseite zu vereinfachen. Sicherlich haben Sie schon öfters zu Beginn eines langen Artikels ein Inhaltsverzeichnis gesehen oder wurden mit einem Anker-Link auf einem Call-to-action-Button zur richtigen Stelle weiter gescrollt.
Das Ziel der Anker-Links/Sprungmarken besteht also darin, entweder den Besucher schneller zu seinem Ergebnis zu führen oder wie bei Sales Pages gezielt zu steuern. Ablenkungen und Absprünge werden hiermit deutlich reduziert.
Können Anker-Links/Sprungmarken falsch eingesetzt werden?
Ja, leider. Überlegen Sie sich im Vorfeld genau, wo Anker-Links/Sprungmarken Sinn machen. Zu wenige Anker-Links innerhalb eines langen Textes bedeuten, dass Sie sich als Benutzer dennoch erst orientieren müssen. Dabei interessieren Sie sich vielleicht nur für ein oder zwei Absätze. Ein Beispiel hierfür wäre ein zu grob gefasstes Inhaltsverzeichnis.
Auf der anderen Seite können zu viele Anker-Links/Sprungmarken zur Überlastung und Verwirrung sorgen. Stellen Sie sich vor, Sie müssten sich erst einmal innerhalb eines Inhaltsverzeichnisses orientieren. Bei einem 500-seitigen Buch mag das verständlich sein, jedoch nicht in der Onlinewelt mit einer zunehmenden Nutzung mobiler Endgeräte.
Manche Dienstleistungen und Produkte sind umfangreich und müssen verständlicherweise detaillierter beschrieben werden. Leider gibt es immer wieder „schöne“ Fails, bei denen innerhalb des One Pagers durch zu viele Verlinkungen der Benutzer hoch- und runter gescrollt wird. Verlinkungen sind sinnvoll, aber nicht, wenn sie den Benutzer auf der Webseite oder gar der Website hin und her schicken und im ungünstigsten Fall vom Zielelement entfernen.
Anker-Links/Sprungmarken mit Divi setzen
Grundsätzlich müssen zum Setzen eines Anker-Links/Sprungmarke das Zielelement und das Ausgangselement bearbeitet werden. Für Anker-Erfahrene sind daher die Punkte 2 und 3 von größter Bedeutung. Für alle die sich mit dem Thema „Anker/Sprungmarke setzen“ noch nicht perfekt auskennen, haben wir eine Anleitung mit 4 Schritten erstellt:
Schritt 1: Die Vorarbeit bzw. Überlegungen
Bevor ein Anker-Link/Sprungmarke gesetzt wird, sollten folgende Überlegungen angestellt werden:
- Wie viele Anker-Links/Sprungmarken wird es geben?
- Werden die Anker-Links/Sprungmarken nur auf den gleichen Seiten eingesetzt?
- Wie sollten die Anker/Sprungmarken benannt werden?
Die ersten beiden Fragen sind dahingehend wichtig, da es sich empfiehlt, eine nachhaltige und ggf. skalierbare Namensgebung der Anker/Sprungmarken zu definieren. Wir gehen drei unterschiedliche Beispiele zur Verdeutlichung der Strukturen durch.
Beispiel 1: Anker-Links/Sprungmarken bei einem One Pager
In diesem Fall werden nur wenige Anker-Links/Sprungmarken eingesetzt. Hier ist es in der Regel nicht von großer Bedeutung, wie die Anker-Namen definiert werden. Es bedarf keiner komplexen Anker-Link-Struktur. Hier einige Anker-Link-Beispiele bei One Pagern:
- leistungen
- bezahlen
- produkt-a
- produkt-b
- kontakt
- bezahlen
- soforthilfe
Beispiel 2: Zahlreiche Anker-Links/Sprungmarken auf mehreren Webseiten
Viele Websites bestehen nicht nur aus einer Webseite. Daher verweisen Anker-Links häufig auf andere Webseiten. Spätestens in diesem Fall ist eine nachhaltige Struktur ratsam, damit Sie Anker-Links auch später wieder identifizieren und ggf. erneut einsetzen können. Unser Benennungstipp für Sie ist, dass neben dem beschreibenden Namen/Element-Rolle, auch der Webseiten-Name integriert ist. Einerseits können Sie schnell neue Anker-Links/Sprungmarken hinzufügen, ohne von vorherigen Namensdefinitionen abzuweichen, andererseits ist diese Struktur beliebig skalierbar. Nachträgliche Anker-Link-Änderungen können bei einer fehlenden Struktur schnell zu einer umfangreichen Aufgabe heranwachsen und ggf. Fehler bei Verlinkungen verursachen (z. B. falls irgendwo ein Anker-Link bei der Änderung übersehen wird). Hier einige Anker-Link-Beispiele bei mehreren Webseiten:
- startseite-kontaktformular
- startseite-referenzen
- leistungsseite-produktanfrage
- salespage-bezahlen
- startseite-soforthilfe
Beispiel 3: Sehr viele Anker-Links/Sprungmarken innerhalb einer Website einschließlich umfangreicher Verlinkungsstruktur
Dieser Fall wird bei den wenigsten Websites der Fall sein, jedoch möchten wir auch diesen Fall kurz erläutern. Genau wie beim vorherigen Beispiel ist hier eine nachhaltige und skalierbare Struktur von essenzieller Bedeutung.
Neben Anker-Links/Sprungmarken zwischen verschiedenen Webseiten, können auch Menüs mit Anker-Links versehen und unterschiedliche Elemente angesprochen werden. Unser Benennungstipp für eine nachhaltige Anker-Link-Struktur ist, dass neben dem beschreibenden Namen/Element-Rolle, auch der Webseiten-Name und der Bereich integriert sind. Weshalb aber der Bereich? Bei Divi können Anker-Links auf Abschnitte/Sektionen, Zeilen und Module gesetzt werden. Dabei muss man sich nicht seitenübergreifend für einen Bereich entscheiden, sondern kann für seine Designs und Benutzerführungen jeden Anker-Link mit anderen Bereichen verlinken.
Hier einige Anker-Link-Beispiele bei umfangreichen Websites:
- leistungen-modul-produkt-a
- leistungen-modul-produkt-b
- datenschutz-sektion-einleitung
- datenschutz-sektion-hauptteil
- datenschutz-sektion-aktualisierung
- produkte-sektion-kaufempfehlung
- produkte-sektion-produktmatrix
Welche Struktur die Richtige für ein Webprojekt ist, lässt sich nicht pauschal beantworten. Es kommt auf den Aufbau der Website an – also wie Abschnitte, Zeilen und Module eingesetzt werden – und die Anker-Link-Strategie an. Das Wichtigste ist, dass Sie jederzeit weitere Anker-Links/Sprungmarken hinzufügen können, ohne dabei den Überblick zu verlieren oder Namensdopplungen zu haben.
Tipps für gute Anker-Namen
Bei Anker-Namen gibt es einiges zu beachten. Hier die Anforderungen an Namen bei Anker/Sprungmarken:
- Der Anker-Name/CSS-ID darf nur einmal vorkommen (Erklärung steht unterhalb der Auflistung)
- Es werden grundsätzlich nur Kleinbuchstaben verwendet (auch nicht den ersten Buchstaben großschreiben, da dies eine Namenskonvention aus der objektorientierten Programmierung ist) – manche Page-Builder erlauben auch Großbuchstaben und Unterstriche … Wir raten hiervon ab.
- Umlaute und Sonderzeichen sind nicht erlaubt
- Leerzeichen werden weggelassen oder mit einem Trennstrich „-“ ersetzt
- Der Name kann frei gewählt werden, sollte jedoch die Rolle des Elements gut beschreiben (Gute Namen ändern sich nicht!)
Warum dürfen Anker-Namen/CSS-ID nur einmal vorkommen?
Die Antwort darauf ist das automatische Scrollen. Sollten mehrere identische Anker-Namen vorhanden sein, weiß der Browser nicht mehr, wohin er scrollen soll. Der Anker-Link funktioniert nicht.
Neben der CSS-ID gibt es noch das Feld CSS-Klasse. Eine CSS-Klasse ist eine Gruppierung von Eigenschaften, die einmal definiert und mehrfach verwendet werden kann. Verwenden Sie daher unbedingt das Feld CSS-ID für den Anker-Link/Sprungmarke.
Schritt 2: Das Zielelement bearbeiten – den Anker setzen/definieren
Gehen Sie zum gewünschten Zielelement (Abschnitt/Sektion, Zeile oder Modul) und klicken auf das jeweilige Bearbeiten-Symbol. Anschließend wählen Sie den Reiter „Erweitert“ und maximieren den Bereich „CSS-ID & Klassen“.
In das Feld „CSS-ID“ tragen Sie Ihren gewünschten Ankernamen ein (Weitere Informationen für Ankernamen: Tipps für gute Anker-Namen sowie Tipps zur Anker-/Sprungmarken-Struktur). Speichern Sie Ihre Eingaben.
In meinem Beispiel hat die CSS-ID den Namen „start-sektion-kontakt“. Bei dem Anker-Namen nicht das Rautezeichen „#“ einfügen, da hier erst die CSS-ID definiert wird und das Rautezeichen einen Link definiert.
Im Zielelement wird unter dem Reiter „Erweitert“ die CSS-ID für den Anker-Link/Sprungmarke (engl. anchor link) eingetragen.
Schritt 3: Das Ausgangselement bearbeiten – die Anker-Link-URL setzen/zuordnen
Nach dem Setzen der CSS-ID wird das Ausgangselement bearbeitet. Hier gibt es drei verschiedene Wege:
Den Anker-Link innerhalb der gleichen Webseite setzen
Gehen Sie zum gewünschten Ausgangselement (Abschnitt/Sektion, Zeile oder Modul) und klicken auf das jeweilige Bearbeiten-Symbol. Anschließend wählen Sie den Reiter „Inhalt“ und maximieren den Bereich „Link“. Im Feld „Link-URL …“ tragen Sie Ihren Anker-Namen ein und setzen direkt ein Rautezeichen „#“ vor den Anker-Namen.
In meinem Beispiel hat der Anker-Link den Namen „#start-sektion-kontakt“.
Sie können auch einzelne Wörter oder einen Satz als Ausgangselement verwenden. Hierzu öffnen Sie das entsprechende Modul, markieren den gewünschten Textabschnitt und setzen einen Link mit dem Link-Namen (z. B. „#start-sektion-kontakt“).
Im Ausgangselement wird unter dem Reiter „Inhalt“ die Link-URL für den Anker-Link/Sprungmarke (engl. anchor link) eingetragen.
Den Anker-Link auf einer anderen Seite setzen
Das Vorgehen unterscheidet sich, im Vergleich zum Setzen innerhalb der gleichen Seite, nur vom Link-Namen. Speichern Sie Ihre Seite vom Zielelement und wechseln Sie zur Seite mit dem Ausgangselement.
Gehen Sie zum gewünschten Textabschnitt oder Ausgangselement (Abschnitt/Sektion, Zeile oder Modul) und klicken auf das jeweilige Bearbeiten-Symbol. Anschließend wählen Sie den Reiter „Inhalt“ und maximieren den Bereich „Link“. Im Feld „Link-URL …“ tragen Sie die vollständige Anker-Link-URL ein. Diese setzt sich aus der URL der jeweiligen Webseite (vgl. nächster Absatz), dem Rautezeichen „#“ und dem Anker-Namen/CSS-ID zusammen.
In meinem Beispiel lautet die vollständige Anker-Link-URL „https://andre-sandner.com/#start-sektion-kontakt“.
Am besten die Webseite, auf der sich das Ausgangselement befindet, im Browser öffnen und den kompletten Link kopieren. So werden Schreibfehler vermieden und die Seitenstruktur korrekt übernommen. Enthält die Webseite-URL einen Fehler, dann funktioniert der Anker-Link trotz eines richtig eingetragenen Anker-Namens/CSS-ID nicht.
Den Anker-Link im Menü integrieren
Speichern Sie zuerst Ihre Seite mit dem Zielelement und wechseln zur WordPress-Admin-Seite. Dort wählen Sie im WordPress-Menü unter „Designs“ den Unterpunkt „Menüs“ aus. Innerhalb des Reiters „Menüs bearbeiten“ befindet sich der Punkt „Menüeinträge hinzufügen“. Dort maximieren Sie den Eintrag „Individuelle Links“.
Im Feld „URL“ tragen Sie die vollständige Anker-Link-URL ein. Diese setzt sich aus der URL der jeweiligen Webseite, dem Rautezeichen „#“ und dem Anker-Namen/CSS-ID zusammen.
In meinem Beispiel lautet die vollständige Anker-Link-URL „https://andre-sandner.com/#start-sektion-kontakt“.
Im Feld „Link-Text“ tragen Sie Ihren gewünschten Menü-Namen ein und fügen die Eingaben anschließend dem Menü hinzu. Vergessen Sie nicht das Speichern des Menüs.
Zum Setzen eines Anker-Links im Menü, muss unter „Designs“ und dann „Menüs“ die URL für den Anker-Link/Sprungmarke (engl. anchor link) eingetragen werden.
Schritt 4: Testen der Anker-Links/Sprungmarken & Fehlersuche
Nachdem alle Änderungen vorgenommen wurden, testen Sie bitte unbedingt, ob der Anker-Link/Sprungmarke funktioniert.
Sollten Fehler auftreten, vergewissern Sie sich, dass der Anker-Name/CSS-ID (ohne Rautezeichen), der Anker-Link (mit Rautezeichen) und die Anker-Link-URL korrekt geschrieben sind. Evtl. hat sich ein Leerzeichen oder unerlaubtes Sonderzeichen eingeschlichen.
Anker-Links/Sprungmarken im Quellcode setzen
Das Setzen von Anker-Links/Sprungmarken im Quellcode ist schnell umzusetzen.
Sie können den Anker auf Überschriften, Textabschnitte und Elemente setzen. Selbstverständlich kann beim Verweisen auch das title-Element hinzugefügt werden.
Zuerst wird die ID im Zielelement gesetzt. Hier zwei Beispiele:
Die Anker-ID für eine Überschrift im Zielelement lautet:
<h3 id=“start-sektion-kontakt“>Überschrift</h3>
Die Anker-ID für ein div-Element auf der Zielseite lautet:
<div id=“start-sektion-kontakt“ class=“…“>…
Im Nachgang wird der Verweis im Ausgangselement gesetzt.
Verweist der Anker-Link innerhalb der gleichen HTML-Datei/Seite, dann lautet der Verweis:
<a href=“#start-sektion-kontakt“>Link</a>
Verweist der Anker-Link auf eine andere HTML-Datei, so lautet Verweis mit Verwendung des HTML-Dateinamens:
<a href=“dokument.html#start-sektion-kontakt“>Link</a>
Verweist der Anker-Link auf eine andere HTML-Datei, dann lautet Verweis mit Verwendung der URL:
<a href=“https://andre-sandner.com/#start-sektion-kontakt“>Link</a>
Anker-Links/Sprungmarken bei anderen Page Buildern und Themes setzen
Divi, Thrive Architect, Elementor … Prinzipiell funktioniert das Setzen von Anker-Links/Sprungmarken bei allen Page Buildern/Themes nahezu identisch. Schauen Sie zuerst nach, wo in Ihrem System die CSS-ID im Zielelement und der Link im Ausgangselement hinterlegt werden. Meistens müssen Sie bei den Modulen/Elementen (jedes System hat andere Bezeichnungen), die Einstellungen wie bei Divi öffnen.
Bei Elementor haben Sie zum Beispiel die Möglichkeit, das Element „Menü-Anker“ hinzuzufügen und dort die ID zu hinterlegen.
Fazit zu Anker-Links/Sprungmarken
Anker-Links/Sprungmarken sind eine gute Möglichkeit mehr Struktur in eine Website zu bringen. Vergewissern Sie sich, dass Sie eine nachhaltige Anker-Link-Struktur wählen, um nachträgliche Anpassungen zu vermeiden. Allerdings setzen Sie nur so viele Anker-Links/Sprungmarken wie nötig ein um ein hin und her springen auf der Website zu vermeiden. Zu viel Unruhe kann auf den Besucher nervig wirken und reduziert die Wahrscheinlichkeit einer Conversion.
Viel Spaß beim Setzen der Anker-Links!
Bilder & Text: © André Sandner – andre-sandner.com & stock.adobe.com