Ankerlinks (auch Sprungmarken genannt) können deine Website allgemein und ganz spezifisch deine Blogbeiträge deutlich nutzerfreundlicher machen.
Das Prinzip ist simpel: Mit einem Klick auf ein Wort oder einen Button lande ich an einer anderen Stelle auf der gleichen Seite. Diese Funktion nutzt du also grundsätzlich, um mit nur einem Klick direkt zum gewünschten Abschnitt zu springen – häufig weiter unten auf der Seite.
Das klassische Beispiel hierfür wär ein Inhaltsvzerzeichnis, Ankerlinks lassen sich aber auch anders einsetzen (wir schauen uns gleich noch ein paar mehr Beispiele an).
Wie du in WordPress Anker setzen kannst, dafür schauen wir uns in diesem Artikel verschiedene Optionen an – es ist super einfach, du brauchst nicht mal ein Plugin dafür.
Außerdem zeig ich dir, wie du Ankerlinks bei den Page Buildern Elementor und Thrive Architect setzt.
Was sind Ankerlinks und wofür sind sie gut?
Wie schon gesagt verlinkst du mit einem Anker zu einer anderen Stelle auf der gleichen Seite.
Der Klassiker ist das Inhaltsverzeichnis, das du bei langen Beiträgen einbinden solltest, um sie übersichtlicher und nutzerfreundlicher zu gestalten. In dem Fall fungieren die Überschriften als Anker und sind im Inhaltsverzeichnis verlinkt.
Bei diesem Beitrag hier sähe das so aus:
Alternativ kannst du Sprungmarken in Beiträgen aber auch nutzen, um direkt zu einem bestimmten Abschnitt zu verlinken. Ich könnte dir hier z.B. direkt die Anleitung für Ankerlinks in Elementor verlinken.
Auch bei One-Page-Websites kommen Ankerlinks zum Einsatz, und zwar im Menü. Normalerweise verlinkst du dort zu extra Seiten, bei One Pagern allerdings zum jeweiligen Abschnitt auf der Seite.
Bei längeren Sales Pages z.B. kannst du Ankerlinks verwenden um von allen Buttons, die auf der Seite verteilt sind, zum Abschnitt mit den Preisen zu verlinken.
Ich erstell Sales Pages & Co. immer mit Page Buildern wie Elementor oder dem Thrive Architect – Sprungmarken sind hier easy einzubauen.
Für all diese Beispiele schauen wir uns jetzt an, wie das genau funktioniert!
Sprungmarken ohne Plugin einfügen: Zwei Varianten
Ich würde dir immer empfehlen, Anker ohne Plugin zu setzen, weil du dir das extra Plugin an der Stelle wirklich sparen kannst.
Der einzige sinnvolle Use Case für ein extra Plugin wäre ein Inhaltsverzeichnis für Beiträge – dazu kommen wir gleich noch im Detail.
Wenn es dir aber um einzelne Anker geht, die du auch nicht in jedem Beitrag verwendest, sondern nur mal hier und da, brauchst du kein Plugin! Es geht auch ohne super easy.
Stattdessen hast du zwei andere Optionen:
Option #1: Anker im Gutenberg-Editor setzen
Wenn du Seiten und Beiträge mit dem normalen Gutenberg-Editor von WordPress erstellst, wird das hier wahrscheinlich die beste Variante für dich sein.
Der Gutenberg-Editor hat die Einstellung für Sprungmarken nämlich direkt mit drin!
Nehmen wir an, du willst von einer Stelle im Text eines Beitrags zu einer anderen verlinken. An der Stelle, wo der Link hinführen soll, musst du den Anker setzen. Das kann z.B. eine Überschrift sein.
Wähl den Überschriften-Block aus und geh in den Abschnitt Erweitert. Dort findest du die Option HTML-Anker. Hier gibst du jetzt deinen Ankernamen ein – das kann alles mögliche sein, am besten ist es ein Stichwort, das den verlinkten Abschnitt beschreibt:
Jetzt gehst du zu der Stelle im Text, an der du den Link setzen möchtest. Markiere den Text wie bei herkömmlichen Links auch und klick auf das Link-Icon.
Jetzt fügst du den Anker, den du gerade festlegt hast, mit einer Raute # davor ein:
Und fertig!
Dieser zweite Schritt, wie du den Ankerlink einfügst, ist immer gleich – egal, welche der vorgestellten Varianten du nutzt. Auch in den Page Buildern Elementor und Thrive Architect setzt du so die Ankerlinks.
Nur die Art und Weise, wie du den Anker an sich erstellst, ist immer ein bisschen unterschiedlich.
Option #2: Anker per HTML setzen
Falls du aus irgendeinem Grund nicht die Gutenberg-Variante nutzen möchtest – weil du z.B. noch mit dem Classic Editor von WordPress arbeitest – kannst du Anker auch per HTML erstellen.
Dafür musst du zuerst die Ansicht im Editor wechseln, und zwar zum Code-Editor, sodass du deinen Beitrag im HTML-Code siehst.
Hier fügst du jetzt an der gewünschten Stelle den Anker ein, und zwar so:
Grün markiert ist hier der Anker an sich, also das, was du als Link einfügst. Ich hab hier im Beispiel auch wieder eine Überschrift als Anker genommen, du kannst das aber mit jedem beliebigen Element machen.
Wenn du den Anker per HTML eingefügt hast, wechselt du wieder zur visuellen Ansicht und fügst den Ankerlink wie gewohnt an der gewünschten Stelle ein.
Ankerlinks in Elementor erstellen
Wenn du Seiten und Beiträge mit Elementor erstellst, brauchst du das Menü-Anker-Widget für deine Sprungmarken. Das Widget fügst du an der Stelle ein, wo du den Anker setzen möchtest – im Beispiel oberhalb der Überschrift.
Das Widget an sich ist super simpel aufgebaut, du kannst hier lediglich die ID des Ankers festlegen (genauso, wie du das auch im Gutenberg-Editor machst):
Den Ankerlink an sich fügst du dann wie gewohnt ein!
Du kannst dir den ganzen Prozess Schritt für Schritt im Video anschauen. Da zeig ich dir außerdem, wie du von einer anderen Seite aus zum Ankerpunkt verlinkst und wie du die Anker, die du mit Elementor erstellt hast, im Menü verlinkst:
Ankerlinks im Thrive Architect erstellen
Sales Pages, also Verkaufsseiten für deine Produkte, hab ich oben schon als Use Case angesprochen. Du kannst aber auch Beiträge im Thrive Architect erstellen, dann brauchst du die Anker ggf. auch.
Genau wie bei Elementor gibt es auch hier übrigens ein extra Element für's Inhaltsverzeichnis!
Nehmen wir aber an, du erstellst eine Sales Page und möchtest von den Buttons, die auf der Seite verteilt sind, zum Abschnitt mit den Preisen verlinken. In dem Fall wählst du den Button aus und klickst bei den Link-Optionen auf den Anker (der heißt hier Jumplink):
Hier klickst du auf Select Target und wählst dann den Abschnitt aus, zu dem zu verlinken möchtest. Dann klickst du auf Add Jumplink.
Du kannst jetzt noch die Option Smooth Animation aktivieren. In dem Fall springt die Seite beim Klick nicht einfach zum Zielabschnitt, sondern scrollt ganz smooth dorthin.
Inhaltsverzeichnis in deine Beiträge einfügen
Wie oben schon gesagt ist ein Inhaltsverzeichnis der einzige Fall, bei dem ich den Einsatz eines extra Plugins sinnvoll finde – vor allem, wenn du es wirklich in jeden Beitrag einfügst. Das Inhaltsverzeichnis sieht in dem Fall optisch besser aus (find ich zumindest) und wird vor allem automatisch erstellt.
Mein Lieblingsplugin für Inhaltsverzeichnisse ist LuckyWP Table of Contents, das ich selber hier auf der Website nutze.
Du kannst hier genau einstellen, welche Überschriften angezeigt werden sollen (z.B. nur H2 und H3), ob das Inhaltsverzeichnis automatisch in jeden Beitrag eingefügt werden soll und ob es ein- und ausklappbar sein soll oder nicht. Auch das Design kannst du anpassen.
Das automatische Einfügen hab ich z.B. deaktiviert – wenn ich ein Inhaltsverzeichnis nutze, dann normalerweise vor der ersten Zwischenüberschrift; die kommt aber immer an unterschiedlichen Stellen und nicht fix nach z.B. 5 Absätzen.
Ich kann das Inhaltsverzeichnis einfach manuell im Gutenberg-Editor an der gewünschten Stelle einfügen.
Wenn dir LuckyWP Table of Contents als Plugin nicht so zusagt, schau dir mal folgende Alternativen an:
Von einer externen Seite mit Anker verlinken
Bisher hab ich dir nur gezeigt, wie du Anker zu Stellen innerhalb der gleichen Seite setzen kannst. Du hast aber auch die Möglichkeit, von einer anderen, "externen" Seite aus zur entsprechenden Stelle zu verlinken.
Dazu erstellst du zuerst wie gewohnt den Anker im Gutenberg-Editor, bei Elementor oder welche Option auch immer du nutzt.
Diesen Anker hängst du dann an die URL an, zu der du verlinken möchtest:
Diese URL – inkl. Anker – fügst du dann als Link ein. Beim Klick auf den Link landet man direkt an der entsprechenden Stelle.
Anker im Menü deiner Website setzen
Wenn deine Website ein One Pager ist, also nur aus einer einzigen Seite bestehst, willst du vermutlich im Menü zu den einzelnen Abschnitten auf der Seite verlinken. Auch hier kommen die Sprungmarken ins Spiel.
Erstell dazu im ersten Schritt die Seite und füg die Anker an den gewünschten Stellen ein.
Geh dann zu Design > Menüs, um dein Hauptmenü anzulegen. Für die einzelnen Menüpunkte wählst du Individuelle Links.
Für jeden Menüpunkt fügst du dann die URL der Seite + den Anker ein:
Das Hauptmenü kannst du dann in den Header deiner Website einfügen. Easy!
Meld dich jetzt für den kostenlosen Toolkiste Newsletter an! Den erhältst du jeden Donnerstag mit vielen Empfehlungen für Tools, Schritt-für-Schritt-Tutorials und exklusiven Deals und Rabattcodes.
Als Dankeschön erhältst du direkt nach der Anmeldung die Toolliste mit 78 Empfehlungen für Tools rund um Online-Business!
