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
Anker im Menü
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
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
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