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
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
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
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 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
Hallo Karin,
sehr gut erklärt. Das war genau das, was ich gesucht habe.
Vielen lieben Dank.
Schöne Grüße
Brigitte