Alles über Anker-Links

Nachdem ich dir in diesem Beitrag hier: Das 1×1 der WordPress Navigation gezeigt habe, wie du die WordPress-Navigation bearbeiten kannst, möchte ich dir nun zeigen, was Anker-Links sind und wie du sie verwenden kannst.

Wenn man von Anker-Links (Anchor-Links) spricht, spricht man von Links, die auf einen definierten Bereich verweisen. Im Normalfall ist es ja so, dass wenn du auf einen Link klickst, eine neue Seite aufgeht. Auf dieser neu aufgegangenen Seite bist du dann immer zuoberst. Der Unterschied von normalen Links zu Anker-Links besteht darin, dass wenn du auf so einen Anker-Link klickst, du auf einer Seite nicht zuoberst landest, sondern zum Beispiel weiter unten, da wo zum Beispiel die Produkte beschrieben sind.

Du kannst Anker-Links also mit einer Art Inhaltsverzeichnis vergleichen.

Sehen wir uns diese Seite an: https://www.sutersoftware.ch/dsgvo-einfach-und-verstandlich-erklart/. Auf dieser Seite siehst du eine Verlinkung mit Anker-Links. Wenn du auf so einen Link klickst, fährt dein Browser automatisch zum definierten Bereich.

Solche Anker-Links brauchst du also dann, wenn du auf einen definierten Bereich verweisen möchtest und nicht auf den obersten Inhalt einer anderen Seite.

Pro-Tipp: Der Verweis beim Anker-Link kann auf der gleichen Seite oder auf einer anderen Seite sein! Ich zeige dir unten beide Varianten.

Pro-Tipp: Wenn du den Verweis auf ein Modul gemacht hast, und du diesem Anker-Link folgst, ist das verwiesene Modul immer ganz oben am Bildrand. Daher macht es Sinn, dass du den Verweis nicht auf das entsprechende Modul (z.B. Textmodul), sondern auf die übergeordnete Zeile definierst. Das erste Bild (unten) zeigt dir den Fall, wenn du den Verweis direkt auf das Textmodul legst. Das zweite Bild zeigt dir, wenn du den Verweis auf die Zeile legst. In diesem Fall habe ich noch Trennlinien in einer separaten Zeile. Daher habe ich den Verweis auf die Zeile des Trennstrichs gelegt. Das wirkt viel schöner!

Schritt-für-Schritt-Anleitung für Anker-Links.

Zuerst musst du den Verweis auf deiner Zieladresse anlegen. Dazu gehst du wie folgt vor:

1. Öffne die Seite, auf der du den Verweis anlegen willst, im Visuellen Builder („Bearbeitungsmodus“). Mehr dazu hier: https://www.sutersoftware.ch/wie-aendere-ich-einen-text-oder-ein-bild/

2. Öffne nun die Einstellungen des Moduls, auf den du den Verweis definieren möchtest. (Mit dem Zahnrad des entsprechenden Moduls). (Beachte den Pro-Tipp von oben!)

3. Wechsle auf das Register „Erweitert“ –> „CSS-ID & Klassen“

4. Im Feld CCS-ID gibst du nun deinen Verweis ein (Bild oben). Diesen Verweis kannst du frei benennen. Zum Beispiel „anker_produkte“. Beachte aber, dass der Verweis immer eindeutig sein muss. Das heisst, es darf keinen Verweis geben, der gleich benennt ist. Speichere diese Einstellung nun mit der grünen Fläche unten rechts am Modul.

Der Unterschied der Verlinkung auf der gleichen Seite und der Verlinkung auf einer anderen Seite ist der Link an sich. Bei einer Verlinkung auf der gleichen Seite braucht es lediglich den Verweis selber. Die Verlinkung auf einer anderen Seite braucht jedoch die ganze URL inkl. Verlinkung. Ich zeige das unten.

1. Füge ein Textmodul an der Stelle ein, an der du den Link haben möchtest

2.1 Öffne die Einstellungen des Textmoduls und füge einen Link ein. Wenn sich der Verweis auf der gleichen Seite befindet, trägst du anstatt der URL nur den Verweis („#anker_produkte“.) ein. Beachte, dass du zusätzlich ein # zum beginn des Verweises einfügen musst!

2.2 Wenn sich der Verweis auf einer anderen Seite befindet, trägst du als Link die ganze URL der Zielwebseite + # + den Verweis ein. Also zum Beispiel: https://www.sutersoftware.ch/wie-aendere-ich-einen-text-oder-ein-bild/#anker_produkte. (Achtung dieser Link ist nur ein Beispiel und funktioniert nicht wie beschrieben!)

3. Speichere das Textmodul mit der grünen Fläche unten rechts.

4. Klicke auf die drei Punkte unten in der Mitte und wähle danach auf der rechten Seite „Speichern“

5. Verlasse den Visuellen Builder.

Gratulation! Wenn du nun auf den Link klickst, landest du bei deinem Verweis.

Möchtest du deine Webseite selbst gestalten?

Dann setze dich mit mir in Verbindung und ich zeige dir, mit welchen Tools du einfach starten kannst.

Zum Kontaktformular

Ähnlich Artikel

Wie kann ich den Avast-Antivirus deinstallieren?

Wie kann ich den Avast-Antivirus deinstallieren?

Du hast zwei Möglichkeiten um den Avast-Antivirus zu deinstallieren. Die zweite Möglichkeit sollte aber nur verwendet werden, wenn die erste nicht funktioniert. Avast-Antivirus über den App-Wizard deinstallieren. 1. Öffne die Windows-Einstellungen, indem du unten...

Benötige ich nun ein Cookie-Banner oder nicht?

Ich fasse dieses Thema kurz für dich zusammen. Grundsätzlich ist es so, dass das niemand so genau sagen kann. In der Schweiz ist die Gesetzeslage sogar noch ungenauer als im EU-Raum. Daher erkläre ich dir kurz meine Ansicht zu diesem Thema. Ein Cookie-Banner ist erst...

Warenkorb
  • Es befinden sich keine Produkte im Warenkorb.
Datenschutz
Suter Software, Inhaber: Rico Suter (Firmensitz: Schweiz), würde gerne mit externen Diensten personenbezogene Daten verarbeiten. Dies ist für die Nutzung der Website nicht notwendig, ermöglicht aber eine noch engere Interaktion mit Ihnen. Falls gewünscht, treffen Sie bitte eine Auswahl:
Datenschutz
Suter Software, Inhaber: Rico Suter (Firmensitz: Schweiz), würde gerne mit externen Diensten personenbezogene Daten verarbeiten. Dies ist für die Nutzung der Website nicht notwendig, ermöglicht aber eine noch engere Interaktion mit Ihnen. Falls gewünscht, treffen Sie bitte eine Auswahl: