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