Wie füge ich auf einer Seite einen Anker-Link in einen Button ein?

Ein "Anker-Link" (auch "Sprunglink", "Sprungmarke" oder "Seiten-Sprung" genannt) ist eine spezieller URL-Link, welcher zu einer bestimmten Stelle auf der gleichen Seite weiterleitet. 

So kannst du bspw. auf einer Seite einen Button einfügen und bei Klick auf diesen springt dann die Seitenansicht zu der gewünschten Stelle (dem Anker-Ziel).

Beispiel: Es gibt auf der Seite im oberen Bereich einen Button. Bei Klick soll der Besucher ans Ende der Seite zu einem Text-Modul geführt werden. 

Du brauchst dafür das Modul "Button" und ein anderes Modul deiner Wahl. In unserem Beispiel ein Text-Modul.

1. Anker-Link beim Button setzen

Füge das Button Modul neu hinzu und öffne die über das Zahnrad-Symbol die Modul-Einstellungen. Trage bei der Option Text den Button-Text ein: 

Öffne nun die Option "Link" und gib bei "URL" den Namen deines Anker-Links ein, z. B. #meinanker – wichtig ist das Raute-Zeichen direkt vor das Wort zu setzen:

Speicher diese Modul-Anpassungen über den grünen Button rechts unten am Modulrand.

2. Anker-Ziel definieren

Gehe nun zu deinem Anker-Ziel, also zu der Stelle, an welche die Ansicht springen soll, wenn man auf den Button klickt. In unserem Beispiel ist es der Text am Ende der Seite. 

Öffne auch hier die Modul-Einstellungen und gehe dann zur Registerkarte "Erweitert" und trage bei der Option "CSS-ID und -Klassen" bei CSS-ID deinen Ankernamen (ohne das Raute-Zeichen) ein:

Hinweis: Anstelle eines Moduls kannst du auch eine Zeile oder eine Sektion als Ziel festlegen. Öffne einfach die Einstellung der Sektion oder Zeile und trage auch hier (wie oben gezeigt) unter "Erweitert" > "CSS-ID" den Ankernamen ein. 

Speicher diese Modul-Anpassungen über den grünen Button rechts unten am Modulrand und speicher die Einstellung im gesamten Divi Builder. 

Verlässt du nun den Divi Builder und klickst danach auf den Button, springt die Browser-Ansicht in einer schönen Animation an die gewünschte Stelle auf deiner Seite.

Brauchst du noch weitere Hilfe? Kontaktiere das Spreadmind Support Team Kontaktiere das Spreadmind Support Team