Sprungmarke/Anker mit DIVI setzen


Eine Sprungmarke oder ein Anker ist ein Link auf einer Webseite der zu einem bestimmten Punkt auf dieser führt.

Eine Sprungmarke kann zum Beispiel zu einer Überschrift oder einem Textblock führen. So kommt der Besucher der daraufklickt direkt zu dem gewünschten Abschnitt auf der Webseite ohne das er zu diesem Punkt scrollen muss.

3 Beispiele von Anker und wofür sie eingesetzt werden:

  • One-Page-Seite: Menü funktioniert über Anker. Menüpunkte wie Home, Angebot, Über mich oder Kontakt führen direkt zu der entsprechenden Passage
  • Verkaufsseite: Durch klick auf den „Jetzt kaufen Button“ springt der Besucher direkt weiter nach unten zum Verkaufsformular
  • Inhaltsverzeichnis auf einer Seite mit langem Text (Ich nutze diese Art von Inhaltsverzeichnissen auf jeder meiner Beitragsseiten)

Wofür sind Anker-Links/Sprungmarken wichtig?

Sprungmarken oder Anker-Links helfen dem Besucher die Orientierung auf deiner Webseite zu vereinfachen.

Eine gute Einsatzmöglichkeit ist zu Beginn eines langen Artikels ein Inhaltsverzeichnis zur Verfügung zu stellen welches durch Klick direkt zu der gewünschten Textpassage führt.

Das Ziel von Anker-Links bzw. Sprungmarken besteht also darin, den Besucher schneller zu seinem gewünschten Ergebnis (Textabschnitt) zu führen.

Durch Anker-Links oder Sprungmarken werden Ablenkungen und Absprünge deutlich reduziert, da deine Besucher schnell genau die Inhalte finden die sie suchen.

Ja, auch Sprungmarken können falsch gesetzt werden.

Daher solltest du dir im Vorfeld immer genau Überlegen wo Anker-Links oder Sprungmarken wirklich Sinn machen.

Zu wenige Anker-Links innerhalb eines langen Textes können die User Experience schmälern und zu höheren Absprung-raten führen.

Zu viele Anker-Links oder Sprungmarken können im Gegenzug zur Überlastung und Verwirrung der Besucher führen.

Verlinkungen in Form von Anker-Links sind nur sinnvoll, wenn sie den Benutzer auf deiner Webseite oder gar deiner Website zum gewünschten Ziel führen – nicht aber wenn sie deine Besucher zu sehr hin und her schicken.

Einen Anker setzen mit DIVI

Zuerst musst du deinen gewünschten Anker setzen.

Mit dem Setzen des Ankers definierst du wohin dein Link führen soll.

Du kannst bei Divi*Opens in a new tab. Anker auf verschiedene Elemente setzen.

  • Sektion
  • Zeile
  • Module

Ich empfehle in den meisten Fällen das Setzen des Ankers in der Sektion.

Öffne dafür zuerst die Sektionseinstellungen und klicke auf „Erweitert“.

Hier gibst du bei „CSS-ID“ den Namen deines Ankers an.

Jetzt speicherst du und dein Anker ist gesetzt.

Tipps für gute Anker-Namen

  1. Der Anker-Name im Feld CSS-ID darf nur einmal vorkommen
  2. Es werden grundsätzlich nur Kleinbuchstaben verwendet
  3. Umlaute und Sonderzeichen sind nicht erlaubt
  4. Leerzeichen werden weggelassen oder mit einem Trennstrich „-“ ersetzt
  5. Der Name kann frei gewählt werden, sollte jedoch die Rolle des Elements gut beschreiben

Warum dürfen Anker-Namen in der CSS-ID nur einmal vorkommen?

Es ist wichtig das Anker-Namen nur einmal vorkommen um das automatische Scrollen zur gewünschten Stelle auf deiner Webseite zu gewährleisten.

Wenn mehrere identische Anker-Namen vorhanden sind, weiß der Browser nicht mehr, wohin er scrollen soll. Somit funktioniert dein Anker-Link nicht mehr.

Wichtig: Nutze unbedingt immer das Feld „CSS-ID“ und niemals das Feld „CSS-Klasse“.

Anker innerhalb der gleichen Seite setzen

Das Setzen von so einem Anker ist sehr einfach.

Du markierst einfach den gewünschten Text den du in einen Anker-Link umwandeln möchtest.

Nun fügst du einen Link hinzu.

Beim Link fügst du deinen Ankernamen mit einem „#“ ein. Zum Beispiel: #deinanker

Dies funktioniert überall. Anstatt eines absoluten Links setzt du als Link immer # und deinen Ankernamen ein.

Anker auf eine andere Seite setzen

Natürlich kannst du mit einem Anker auch zu einer anderen Seite verlinken.

Das funktioniert indem du den Link wie folgt setzt:

„https://www.content-ninja.de/popups-die-nicht-nerven-fuer-deinen-blog-nutzen-11-tipps/#deinanker„

Anker im Menü

Auch im Menü kannst du Ankerlinks erstellen. Das ist zum Beispiel bei One-Page-Seiten wichtig.

Um einen Anker-Link im Menü zu setzten brauchst du den absoluten Link inklusive Anker – ähnlich wie beim setzen eines Anker-Links auf eine andere Seite.

.„https://www.content-ninja.de/popups-die-nicht-nerven-fuer-deinen-blog-nutzen-11-tipps/#deinanker„

Diesen Link fügst du nun im Menü unter dem Punkt „individueller Link“ ein.

Anker-Links/Sprungmarken im Quellcode setzen

Du kannst deine Anker-Links auch direkt im Quelltext setzten. Du kannst Anker auf Überschriften, Textabschnitte und Elemente setzen.

So kannst du die Ziele deiner Anker-Links im Quelltext definieren:

„<h3 id=“start-sektion-kontakt“>Überschrift</h3>“

„<div id=“start-sektion-kontakt“ class=“…“>…“

Verweist der Anker-Link auf eine andere Seite deiner Website, so muss hier der absolute Pfad angegeben werden.

Zusammenfassung

Anker-Links helfen dir, wenn du sie mit bedacht einsetzt das Nutzerverhalten auf deiner Website zu verbessern.

Sie helfen deinen Besuchern sich besser und schneller auf deiner Seite zurecht zu finden und bieten so Orientierung.

jens

Jens Evers ist der Gründer von Content-Ninja. Er ist WordPress-Fan, Blogger und SEO-Experte seit mehr als 10 Jahren. Seine Spezialität ist das erstellen Themen-relevanter Blogs. Er zeigt dir wie du Traffic auf deine Inhalte Leitest und wie du durch wertvolle Beiträge mehr Geld verdienen kannst.

Leave a Reply

Your email address will not be published. Required fields are marked *

Meine neusten Artikel

Verpasse nichts und sicher dir jetzt mein gratis Geschenk!

Verpasse nichts und sicher dir jetzt mein gratis Geschenk!

Wenn du erfahren willst, wenn ein neuer Beitrag veröffentlicht wird und du gratis mein Geschenk bekommen willst, dann melde dich einfach zum kostenlosen Content-Ninja.de Newsletter an!

Du hast dich erfolgreich eingetragen.