Ein Anker nennt man auch Sprungmarke. Anker Links werden verwendet, um zu einem spezifischen Textabschnitt zu „springen“.
3 Beispiele von Einsatzmöglichkeiten von Anker:
- One-Page-Seite = Menü läuft über Anker. Z.B. Home, Angebot, Über mich, Kontakt.
- Verkaufsseite = Button kaufen springt weiter nach unten zum Verkaufsformular.
- Inhaltsverzeichnis auf einer Seite mit langem Text
Gerne zeige ich Dir wie Du dies mit Divi* umsetzen kannst.
Einen Anker setzen / definieren
Als Erstes musst Du einen Anker setzen bzw. definieren. Ansonsten weiss das System nicht wohin Du verlinken möchtest. Mit dem Setzen des Ankers definierst Du das Link Ziel.
Du kannst bei Divi* Anker auf die Ebene Sektion, Zeile oder Module setzen. Ich empfehle in den meisten Fällen das Setzen des Ankers bei der Sektion.
Öffne die Sektionseinstellungen, gehe auf Erweitert und bei CSS-ID schreibst Du den Namen Deines Ankers. Speichern und der Anker ist gesetzt.
Tipp für den Anker Name:
Oftmals werde ich gefragt wie den der Anker heissten soll. Grundsätzlich spielt es absolut keine Rolle wie Du den Anker benennst. Im Empfehle 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, zudem keine Leerzeichen und keine Umlaute zu verwenden.
Nun haben wir im obigen Beispiel den Anker „anker1“ gesetzt.
Jetzt können wir diesen Anker verwenden und verlinken.
Anker innerhalb der gleichen Seite setzen
Nun setzen wir einen Anker innerhalb der gleichen Seite.
Hier ein Beispiel – dieser Anker – springt zur Newsletter Anmeldung ganz unten auf dieser Seite.
Das Setzen von so einem Anker ist sehr einfach.
Z.B. markierst Du den gewünschten Text und setzt einen Link. Beim Link fügst Du den Ankername mit einem # ein. Also z.B. #anker1
Oder bei einem Button / Taste fügst Du als Link #anker1 ein. Dies funktioniert überall. Setze beim Link immer # und den Ankername. Dies ist der ganze Zauber 🙂 Absolut einfach!
Anker auf eine andere Seite setzen
Selbstverständlich kannst Du auch einen Anker zu einer anderen Seite verlinken.
Ein Beispiel – dieser Anker – springt zur Seite „Jahreszahl für Copyright-Angabe im Footer automatisch aktualisieren (Divi)“ 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 normal den Link auf die gewünschte Seite und erweiterst den Link mit Deinem Anker #anker1 oder hier im Beispiel #anker-automatisch
Auch im Menü kannst Du Ankerlinks erstellen. Diese Möglichkeit wird sehr oft bei One-Page-Seiten verwendet.
Das Vorgehen ist wie beim 2. Beispiel „Anker auf eine andere Seite setzen“. Du brauchst den ganzen Link inkl. Anker.
„https://www.lichtweb.ch/jahreszahl-copyright-footer-aktualisieren/#anker-automatisch„
Diesen Link fügst Du nun im Menü bei einem individuellen Link ein.
Anker können wirklich sehr nützlich sein und das Nutzerverhalten auf Deiner Website verbessern. Probiers doch einfach mal aus!
Viel Spass beim Umsetzen…
… und denk daran, bleib natürlich auch online!
Lieber Gruss
Karin
