Alles über Anker-Links

Nachdem ich dir in diesem Beitrag hier: https://sutersoftware.ch/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://sutersoftware.ch/dsgvo-einfach-und-verstaendlich-erklaert/. 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 muss 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://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 das 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://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.

Preise für Webseiten

Die Frage: «Was kostet eine Webseite», kann erst dann beantwortet werden, wenn der Umfang und damit der Aufwand geklärt ist. Lese hier nach, was das genau bedeutet.

Wordpress Logo

Servicepläne

Deine Investition schützt du durch Pflege und Sicherheit. Damit du aber mehr Zeit für dein Unternehmen hast, nehme ich dir diese Aufgaben gerne ab. Lese hier nach, was ich dir bieten kann.

Notebook-Arbeitsplatz mit Text

SEO-Deinstleistungen

SEO bedeutet Content Marketing. Und Content Marketing erreicht man mit Zeit oder Geld. Hier findest du alle Angaben, wie ich dich bei deinem SEO-Ziel unterstützen kann.

Ähnlich Artikel

Verwenden der SharePoint-Freigabe von Suter Software

Bei Webdesign-Arbeiten kommt es immer wieder mal vor das grosse Datenmengen ausgetauscht werden müssen. Da ich keine Lust habe alles per E-Mail zu erledigen und E-Mails meist auch noch grössenbeschränkt sind, unterhalte ich eine Business SharePoint-Instanz. Hier zeige...

Das 1×1 der WordPress-Navigation

Bei einer Webseiten-Navigation handelt es sich im Grundsatz um eine Auflistung von Links (Verknüpfungen) innerhalb der eigenen Webseite. Bei komplexeren Webseiten, insbesondere Webseiten mit Blogs oder Webshops, kann eine solche Navigation aber komplexer ausfallen....