Ein Anker wird auch als Sprungmarke bezeichnet. Ankerlinks werden verwendet, um direkt zu einem bestimmten Textabschnitt zu „springen“.
Hier sind drei Beispiele für die Einsatzmöglichkeiten von Ankerlinks:
- One-Page-Seite: Hier wird das Menü über Ankerlinks realisiert. Zum Beispiel: „Home“, „Angebot“, „Über mich“, „Kontakt“. Beim Klicken auf diese Links springt die Seite sofort zum entsprechenden Abschnitt.
- Verkaufsseite: Ein „Kaufen“-Button kann mit einem Ankerlink versehen werden, der den Nutzer direkt weiter nach unten zum Verkaufsformular führt. So gelangen Interessenten schnell zum Abschluss des Kaufvorgangs.
- Inhaltsverzeichnis auf einer langen Seite: Wenn eine Seite einen langen Text enthält, kann ein übersichtliches Inhaltsverzeichnis mit Ankerlinks erstellt werden. Nutzer können dann auf die gewünschten Abschnitte direkt zugreifen, indem sie auf die entsprechenden Einträge im Inhaltsverzeichnis klicken.
Gerne zeige ich dir, wie du dies mit Divi* umsetzen kannst.
Inhaltsverzeichnis
Einen Anker setzen / definieren
Als Erstes musst du einen Anker setzen bzw. definieren, da das System sonst nicht erkennt, wohin du verlinken möchtest. Durch das Setzen des Ankers bestimmst du das Ziel deines Links.
Bei Divi* hast du die Möglichkeit, Anker auf der Ebene von Sektionen, Zeilen oder Modulen zu setzen. In den meisten Fällen empfehle ich, den Anker auf der Sektionsebene zu setzen.
Um einen Anker zu setzen, öffnest du die Einstellungen der Sektion, gehst auf „Erweitert“ und trägst den Namen deines Ankers in das Feld „CSS-ID“ ein. Danach speicherst du die Einstellungen, und der Anker ist gesetzt.
Tipp für die Anker-Namen:
Oftmals werde ich gefragt, wie der Anker benannt werden soll. Grundsätzlich spielt es absolut keine Rolle, wie du den Anker benennst. Dennoch empfehle ich, wenn du auf deiner Website viele Anker verwenden möchtest, ein System zu erstellen.
Z.B. anker-kontakt-1, anker-ueber-1 usw.
Achte darauf, nur Kleinbuchstaben zu verwenden, zudem keine Leerzeichen und keine Umlaute.
Nun haben wir im obigen Beispiel den Anker mit dem Namen „anker1“ gesetzt.
Jetzt können wir diesen Anker verwenden und darauf verlinken.
Anker innerhalb der gleichen Seite setzen
Nun setzen wir einen Anker innerhalb derselben Seite.
Hier ist ein Beispiel: Durch Klicken auf den Text „dieser Anker“ gelangst du direkt zur Newsletter-Anmeldung ganz unten auf dieser Seite.
Das Setzen eines Ankers ist sehr einfach.
Du markierst einfach den gewünschten Text und fügst einen Link hinzu. Beim Link fügst du den Anker-Namen mit einem # ein. Zum Beispiel: #anker1.
Oder du fügst als Link einfach „#anker1“ bei einem Button / Taste ein. Dies funktioniert überall. Setze beim Link immer ein „#“ und den Anker-Namen. Das ist der ganze Trick 🙂 Absolut einfach!
Anker auf eine andere Seite setzen
Selbstverständlich kannst du auch einen Anker zu einer anderen Seite verlinken.
Hier ist ein Beispiel: Durch Klicken auf den Text „dieser Anker“ gelangst du zur Seite „Jahreszahl für Copyright-Angabe im Footer automatisch aktualisieren (Divi)“ und direkt zum Textabschnitt „Copyright automatisch bei Divi anpassen“.
Der Link sieht nun so aus:
„https://www.lichtweb.ch/jahreszahl-copyright-footer-aktualisieren/#anker-automatisch„
Du setzt den Link normal auf die gewünschte Seite und erweiterst ihn dann mit deinem Anker, beispielsweise #anker1 oder hier im Beispiel #anker-automatisch.
Anker im Menü
Auch im Menü kannst du Ankerlinks erstellen. Diese Möglichkeit wird sehr oft bei One-Page-Seiten verwendet.
Das Vorgehen ist ähnlich wie im zweiten Beispiel „Anker auf eine andere Seite setzen“. Du benötigst den vollständigen Link, einschliesslich des Ankers.
„https://www.lichtweb.ch/jahreszahl-copyright-footer-aktualisieren/#anker-automatisch„
Diesen Link fügst du nun im Menü als individuellen Link ein.
Anker können wirklich sehr nützlich sein und das Nutzerverhalten auf deiner Website verbessern. Probiere es doch einfach mal aus!
Viel Erfolg beim Umsetzen…
…und denke immer daran: Du kannst online wirken und bewirken!
Lieber Gruss
Karin
Zu wenig Kunden über deine Website?
Finde heraus, warum du zu wenig Kunden durch deine Website gewinnst
Hallo Karin,
seit einiger Zeit springen die Navigations-Links einiger von mir gestalteter Onepage-Seiten (bei der ersten Darstellung im Browser) nicht mehr direkt, sondern nur in mehreren Etappen zum richtigen Anker des Sektionsabschnittes.
Beispielseite: https://frohmut-anemone.de/
Bitte nach dem ersten Laden auf „Über mich“ klicken.
Gibt es da vielleicht eine Lösung?
Viele Grüße und Danke im Voraus
Hartmut
Hallo Hartmut
Danke Dir. Leider läd Deine Beispiel Website zur Zeit überhaupt nicht. Grundsätzlich biete ich aber auch keinen Support via Kommentarfunktion. Gerne kannst Du mir aber via Mail karin@lichtweb.ch eine Support Anfrage zusenden.
Danke und lieber Gruss
Karin
Hallo Karin,
sehr gut erklärt. Das war genau das, was ich gesucht habe.
Vielen lieben Dank.
Schöne Grüße
Brigitte
Hallo Karin,
mein Problem ist, dass die individuellen Links per Anker im Menü immer highlighted sind. Hast Du einen Tip wie ich das abstelle.
Vielen Dank, gruss Frank
Hallo Frank
Dies ist im Normalfall einfach ein CSS Code, welcher geändert werden muss. Aber ohne Link zur Beispielseite kann ich Dir dies unmöglich genauer beantworten. Sorry!
Lieber Gruss
Karin
Super erklärt und genau das, was ich gesucht habe und bei dir gefunden habe. Danke!
Schön, dass freut mich sehr.
Danke und lieber Gruss
Karin
Hallo Karin, super Beitrag. Ich habe auch ein Menü mit Anker. Scrolle ich nach unten hätte ich gern das sich die Farbe im Menü ändert also so das ich erkenne wo ich mich gerade befinde. Geht das? Hier die Seite:
https://wirkaufencomputer.de/testumgebung/
Vielen Dank
Hallo Marco
Danke Dir. Mit einer CSS Pseudo-Klasse kannst Du dies umsetzen.
https://die-netzialisten.de/pseudo-klassen-avisited-ahover-afocus-und-aactive/
Lieber Gruss
Karin
Hallo,
auch erstmal herzlichen Dank für den sehr übersichtlichen und klaren Beitrag.
Ich fürchte, ich habe einen Fehler gemacht. Ich habe zu viele Anker gesetzt, und scheinbar alle ähnlich oder gleich genannt. Also springt es bei mir immer zu einer anderen Stelle. Nun will ich die Anker löschen und richtig setzen, weiß aber nicht, wie ich zielgerichtet die Anker finde bzw. sehe. Ich kann schwer meine Seite Wort für Wort untersuchen.
Gibt es eine Möglichkeit, mit einem Blick die Anker einer Sektion oder Zeile zu sehen?
Danke schon mal im voraus
Mónica Perne
Hallo Mónica
Herzlichen Dank für Deine Nachricht.
Dies ist nicht ganz so einfach zu finden, aber auch nicht zum Erklären. Im Code werden Anker als id ausgewiesen. Also z.B. id=“anker-1″. Diese id werden aber auch für andere Dinge verwendet. Daher findest Du id’s für Anker, aber auch z.B. für CSS Einstellungen.
Mir fällt hier zur Zeit leider nur Handarbeit ein. Entweder Sektionen, Zeilen und Module durchforsten nach den CSS-ID = Ankernamen.
Oder Du suchst via Quellcode nach id=“ und suchst so alle Anker heraus.
Ich würde es sogar kombinieren. Zuerst alle Sektionen ect. duchforsten und ändern und danach via Quellcode kontrollieren, ob ich alle Ankernamen gefunden habe 🙂
Links kannst Du aber mit diversen Erweiterungen z.B. die Chrome Erweiterung „Check my Links“ prüfen. Aber halt nur den Link selber, nicht den Ankernamen.
Pass auf mit dem ß in Ankernamen. Ich bin mir nicht sicher, aber ich könnte mir vorstellen, dass dies teilweise zu Problemen führen könnte.
Lieber Gruss
Karin
hallo karin,
darf ich dich um einen tipp bitten? ich arbeite erst seit kurzem mit wp/divi und scheitere immer wieder daran, dass die ankerziele nicht korrekt erreicht werden. die links sind in der css der sektion drin, die seite springt jedoch immer ein stück weiter nach unten in den ersten teil des lauftextes, statt die überschrift und den gesamten text zu zeigen. hast du eine idee, was ich falsch mache? es sieht so aus, als springt der link erst zum ziel und rutscht dann einfach ein stück weiter nach unten.
ganz herzlichen dank & liebe grüße
Hallo Alexandra
Oftmals hat dies mit einer fixierten Navigationsleiste zu tun oder auch mit der Admin Bar von WordPress. Sprich etwas was oben fixiert ist. Dann kommt es zu Verschiebungen.
Wenn Du dann den Ankern (nicht dem Anker-Link) eine CSS Klasse zuweist, kannst Du via CSS mit margin-top einen Abstand hinzufügen (in der Grösse der fixierten Navigationsleiste).
Hilft Dir dies so weiter?
Lieber Gruss
Karin
Liebe Karin,
vielen Dank für den Beitrag. Du hast mir damit sehr geholfen.
LG von Sandra
Vielen Dank Sandra. Freut mich, dass ich Dir helfen konnte.
Viel Erfolg und Freude mit Deinem Projekt!
Lieber Gruss
Karin
Hallo Karin, danke für den wirklich verständlich geschriebenen Artikel. Ich suche nach einer Möglichkeit , wie ich z.B. durch das anklicken eines Bildes erreiche, dass sich auf der gleichen Seite ein ergänzender Abschnitt mit z.B. Bild und Text öffnet. So dass sich diese neue Information quasi dazwischen drängelt, zusätzlich sichtbar wird. Finde ich da die Lösung auch über Anker? Gesehen bei http://www.fernsichten.de. da wird mein Anliegen vielleicht deutlicher. Das ist kein klassischer Anker zu Inhalt, der sonst durch viel scrollen auch sichtbar wäre. Ich weiss einfach nicht, wonach ich da suchen kann… Danke + Gruss Friedrich
Hallo Friedrich
Dies ist mit einem Anker auf jeden Fall nicht lösbar. So wie ich dies sehe, ist dies bei fernsichten.de speziell programmiert. Ist ein bisschen etwas zwischen Feature-Boxen/Flip Boxen und einem Tab Modul. Bei fernsichten.de wurde mit einem Portfolio Modul gearbeitet. Vielleicht findest du unter diesen Begriffen etwas, was Dir entspricht.
Ob es hier fertige Lösungen / Plugins gibt weiss ich leider auch nicht.
Lieber Gruss
Karin