You are currently viewing Gewußt wie! Oder: wie man auf einen Abschnitt innerhalb Divi verlinkt?

Gewußt wie! Oder: wie man auf einen Abschnitt innerhalb Divi verlinkt?

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 Leser direkt auf einen bestimmten Abschnitt springen können? Für all diese Dinge macht es Sinn, einen sogenannten Ankerlink oder Sprungmark (Jump Link) zu setzen. Doch bevor ich dir zeige, wie du das in Divi einrichten kannst, erkläre ich dir, was ein Ankerlink eigentlich ist.

Inhalte dieses Artikels (apropos, das habe ich mit Ankerlinks erstellt)

Ankerlinks 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. Mit anderen Worten ausgedrückt, ist ein Ankerlink 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 Nutzer springt quasi auf einen vorher festgelegten Abschnitt.

Beispiele, wie man einen Ankerlink 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

Doch wie füge ich nun Ankerlinks in Divi ein? Wie das funktioniert, das erkläre ich dir hier.

Schritt 1: 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 Linkziel definierst. Sagen wir z.B. einen bestimmten Abschnitt auf deiner Divi Seite. Ausgangspunkt ist der Visual Builder von Divi. Anker 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.

Anker setzen

Kleiner Tipp: Achte auf die exakte Schreibweise 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?

Anker verlinken (Beispiel Button)

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.

Anker verlinken (Beispiel Textmodul)

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 setzt den Anker hinter die URL.

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

Nachtrag: Ankerlink in Menü einbauen

Alles schön und gut, aber du fragst dich jetzt wahrscheinlich, wie du auf einem One-Pager einen Ankerlink in dein Menü einsetzen 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.

Ankerlink in Menü integrieren – Erster Schritt

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

Ankerlink in Menü integrieren – Zweiter Schritt

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 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. Nutzer finden dadurch schneller was sie suchen und du kannst Nutzer besser zu deinem Angebot leiten. Eine sogenannte Win-Win-Situation.

Also versuch es am besten gleich aus und berichte mir über deine Erfahrungen und Gedanken. 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

Schreibe einen Kommentar