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 einrichten kannst, erkläre ich dir, was ein Ankerlink eigentlich ist.

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

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. 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

Doch wie füge ich nun Ankerlinks in Divi ein? Wie das funktioniert, 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.

divi-support-auf-deutsch

du brauchst beratung und support?

Am besten in WordPress & Divi? Bei bestimmten Plugins? Oder wünschst Dir endlich jemanden, der CSS & HTML beherrscht? Dann verabschiede Dich von technischen Gedöns. Ich helfe Dir bei Deinen Fragen rund um WordPress & Divi. Mehr erfährst Du bei Klick auf den Button.

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.

Sprungmarke in Divi setzen - Anker in Divi setzen
Anker setzen als CSS-ID

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?

Anker in Divi verlinken -Anker setzen in Divi
Anker verlinken in Divi – 1 (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-link in Divi einfügen - Anker setzen Divi
Anker verlinken in Divi – 2(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 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

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.

Divi Ankerlink in Menü integrieren
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.

Divi Ankerlink in WordPress Menü einfügen
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.

divi-support-auf-deutsch

du brauchst beratung und support?

Am besten in WordPress & Divi? Bei bestimmten Plugins? Oder wünschst Dir endlich jemanden, der CSS & HTML beherrscht? Dann verabschiede Dich von technischen Gedöns. Ich helfe Dir bei Deinen Fragen rund um WordPress & Divi. Mehr erfährst Du bei Klick auf den Button.

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

leserstimmen

0 Kommentare

Einen Kommentar abschicken

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert