Gewußt wie! Oder: Wie Du auf einen Abschnitt innerhalb Divi verlinkst?

sprungmarken oder ankerlinks gekonnt setzen.

Du hast eine Seite mit dem Divi Theme erstellt und möchtest nun auf bestimmte Inhalte auf dieser Seite verlinken? Oder dein Blogartikel ist länger geworden als gedacht und du benötigst ein Inhaltsverzeichnis, damit deine Besucher direkt auf einen bestimmten Abschnitt springen können? Für all diese Dinge macht es Sinn, einen sogenannten Ankerlink oder Sprungmarke (Jump Link) zu setzen. Und das ist in Divi viel einfacher, als gedacht. Ganz ohne HTML & CSS Kenntnisse. Aber bevor ich dir zeige, wie du das in Divi erstellen kannst, erkläre ich dir, was ein Ankerlink eigentlich ist.

Inhalte dieses Artikels (apropos, das habe ich mit Anker-Links erstellt)

• Definition Anker-Links (Sprungmarke)
• Ankerlinks einsetzen
  • Schritt 1: Divi Anker setzen
  • Schritt 2: Divi Anker verlinken
  • Nachtrag: Anker-Links in Menü einbauen
• Warum Anker-Links wertvoll für dein SEO sind
• Zusammenfassung

Definition Anker-Link (Sprungmarke)

Anker-Links nutzt du, um andere Dokumente oder Websites zu verlinken. Bei Verlinkungen innerhalb einer HTML-Seite (also innerhalb deiner Divi-Seite) wird das Ganze als Sprungmarke bezeichnet. Sprungmarken werden häufig verwendet, um Besuchern das Navigieren innerhalb einer längeren Seite zu erleichtern (ideal für One Pager) und sie schnell zu den von ihnen gesuchten Links zu führen. Mit anderen Worten ausgedrückt, ist ein Anker eine Verlinkung, die auf einer bestehenden Seite auf einen bestimmten Abschnitt springt. Dabei gibt es immer einen Anfangs- und Endpunkt einer Verlinkung. Dadurch kann man einfach und  bequem auf Inhalte (z. B. auf bestimmte Abschnitte) innerhalb einer Seite verlinken. Der Besucher springt quasi auf einen vorher festgelegten Abschnitt.

Beispiele, wie man einen Anker einsetzen kann, gibt es viele. Die drei häufigsten Anwendungsgebiete sind:

• Verlinkungen in einem Inhaltsverzeichnis auf deinem Blog führen zum gewünschten Abschnitt
• „Kaufen“-Button einer Salespage springt auf ein Verkaufsformular am Ende einer Landingpage
• Das Menü eines One-Pagers führt direkt zum angeklickten Abschnitt
• …und viele weitere Möglichkeiten

Ankerlinks einsetzen

Doch wie füge ich nun Anker-Links in Divi ein? Wie das funktioniert (ganz ohne CSS), das erkläre ich dir hier.

Schritt 1: Divi Anker setzen

Damit Divi erkennt, wohin du verlinken möchtest, muss als erster Schritt ein Anker gesetzt werden. Das ist ganz einfach! Darunter versteht man, dass du zuallererst das Ziel deines Links, oder Linkziel definierst. Sagen wir z.B. einen bestimmten Abschnitt auf deiner Divi Seite. Ausgangspunkt ist der Visual Builder von Divi. Anker-Links können in Divi überall gesetzt werden, z.B. in Sektionen, als auch in Reihen und Modulen. Am besten ist es, den Anker in eine Sektion zu setzen.

Dafür gehst du einfach in die Einstellungen der Sektion, auf die du verweisen möchtest und wählst den Tab „Erweitert“ aus. Im Bereich „CSS-ID & Klassen“ findest du dann ein Eingabefeld mit dem Namen „CSS-ID“. Hier gibst du einen beliebigen Namen für dein Ziel ein. Im unten genannten Beispiel wird ein Linkziel auf ein Textfeld im Kontaktformular gesetzt, d.h. ich möchte von einem Button auf das gewünschte Textfeld im Formular verlinken.

Kleiner Tipp: Achte auf die exakte Schreibweise innerhalb der CSS-ID und verwende für den Namen nur Kleinbuchstaben und keine Leerzeichen/Umlaute. Es ist sinnvoll, wenn du dir den genauen Namen für dein Ziel auf einem Blatt Papier notierst.

Danach speicherst du das Ganze ab.

Schritt 2: Anker verlinken

Nun kannst du wie in unserem Beispiel einen Button nutzen, um zum gewünschten Ziel zu springen. Hierfür gehst du einfach in die Einstellungen des Buttons und fügst innerhalb des Tabs „Inhalt“ im Bereich „Link“ den exakten Namen deines Ankers mit vorangestellter Raute (#) ein. Ziemlich easy, oder?

Als Alternative: Um einen Anker auf der gleichen Seite in Divi zu verlinken, kannst du z. B. auch einen Link innerhalb eines Textmoduls setzen und vor den exakten Ankernamen eine Raute (#) einfügen. Dadurch weiß das System, wo es hinspringen soll.

Jetzt fragst du dich, wie man einen Anker auf eine andere Seite in Divi setzen kann? Dafür ist es wichtig, dass das Linkziel exakt angegeben wird. Um das zu erreichen, verwendet man die URL des Linkziels und kann hinter die URL dann einen Divi Anker setzen.

Ein Beispiel: Das Linkziel befindet sich auf der Seite http://www.beispielseite.de und heißt abschnitt_a.

Du setzt ganz normal den Link auf die gewünschte Seite (in unserem Fall http://www.beispielseite.de) und erweiterst diesen mit deinem Anker #abschnitt_a.

Dann würde die Verlinkung so lauten:

http://www.beispielseite.de/#abschnitt_a

Wichtig: Weil es oftmals vergessen wird. Testen. Denke daran die Funktionalität deiner Sprungmarken kurz zu testen, bevor du deine Seite veröffentlichst. Somit kannst du sicherstellen, dass sie ordnungsgemäß funktionieren und Besucher zu den entsprechenden Abschnitten oder Seiten weiterleiten.

Nachtrag: Ankerlink in Menü einbauen

Alles schön und gut, aber du fragst dich jetzt wahrscheinlich, wie du auf einem One-Pager in dein Menü einen Divi Anker setzen kannst. Das ist gar nicht so schwierig, wie du vielleicht denken magst.

Im ersten Schritt öffnest du hierfür deine WordPress Menü-Einstellungen unter „Dashboard – Design – Menüs“ und wählst das betreffende Menü zum Bearbeiten aus. Auf der linken Seite hast du nun die Möglichkeit, neben Seiten, Beiträgen, etc. auch  „Individuelle Links“ in dein Menü einzupflegen. In das Feld URL gibst du deinen gewünschten Ankerlink ein, am besten als vollständige URL wie z.B. http://www.beispielseite.de/#abschnitt_a, vergibst einen Link-Text und fügst diesen per Klick auf den Button „Zum Menü hinzufügen“ einfach deiner Menü Struktur hinzu.

Jetzt musst du nur noch den Menüpunkt per Drag-and-Drop an die richtige Stelle ziehen. Alles abspeichern und fertig ist das Ganze.

Warum Ankerlinks wertvoll für dein SEO sind

Ankerlinks sind nicht nur super nützlich in Bezug auf das Benutzererlebnis deiner Website, indem sie ewiges Scrollen bei langen Artikeln oder Seiten verkürzen. Mithilfe von Ankerlinks kann man auch Inhalte für Social Media hervorragend steuern. Durch die Angabe einer Sprungmarke im Link lassen sich in Social Media Beiträgen gezielte Verlinkungen zu deiner Seite herstellen z.B. auf einen bestimmten Bereich in deinen Artikeln oder FAQs.

Aber was viele nicht wissen, ist etwas ganz anderes. Mithilfe von Divi Ankerlinks lassen sich Einträge in Suchmaschinen erweitern. Google zeigt z.B. eine weitere Zeile unterhalb deines Suchmaschineneintrags ein, wenn Ankerlinks verwendet werden. Dies geschieht nicht immer, kann aber deine Metabeschreibung vergrößern und die Click Through Rate verbessern! Allein das macht einen Ankerlink so wertvoll für Websites, egal ob mit Divi oder anderen WordPress Themes erstellt.

Zusammenfassung

Zusammenfassend lässt sich sagen, dass es relativ einfach ist, ein besseres Benutzererlebnis zu schaffen, alleine durch die Verwendung von Ankerlinks. Besucher finden dadurch schneller was sie suchen und du kannst sie besser zu deinem Angebot führen. Eine echte Win-Win-Situation.

Versuch es am besten gleich auf deiner Website aus und berichte mir über deine Erfahrungen und Gedanken in den Kommentaren. Und wenn du mehr zu meiner Arbeit und mir wissen möchtest, so schreib mir doch unter kontakt@raster-und-pixel.de . Ich würde mich sehr über eine Nachricht deinerseits freuen.

Bildquelle: Yogendra Singh – Pexels