Möchtest du z.b. einen Button oder sonstig beliebiges Element dazu nutzen, um an eine bestimmte Stelle auf deiner Website zu springen, damit man automatisch dort hin scrollt?
Das kann typischerweise z.b. ein "Mehr erfahren" Button sein, der nach Anklicken automatisch weiter nach unten auf die Website springt.
Wenn ja, dann reden wir hier von einem sogenannten Ankerlink.
Wie du diesen erstellst, wird dir hier erklärt.
1) Bestandteile eines Ankerlinks
Damit die Umsetzung eines solchen Ankerlinks klappt und du auch ein bessere Vorstellung dafür hast, benötigen wir im wesentlichen 2 Bestandteile:
Auslöser:
Der Auslöser kann ein beliebiges Element auf der Website sein, typischerweise nutzt man einen Button dafür. Ein Auslöser dient dazu um ihn mit einem Mausklick zu betätigen und den gewünschten Effekt auszuführen.
Ziel:
Das Ziel ist jene Stelle, an welche man hingeleitet werden möchte, sobald der Auslöser betätigt wurde. Auch das Ziel kann ein beliebiger Bereich auf der Website sein.
Verknüpfung:
Als Verknüpfung für den Auslöser und dem Ziel dient eine sogenannte "CSS-ID". Mit einer solchen "ID" können wir die Verbindung erzeugen, da es auf der Website schliesslich noch viele andere Elemente gibt und die Website verstehen muss, welche Elemente für den "Ankerlink" zusammengehören
2) Verknüpfung
Als erstes bestimmen wir die Verknüpfung, also in diesem Fall die "CSS-ID". Als "ID" kannst du einen völlig freien Namen wählen. Am besten allerdings einfach ein einzelnes Wort und alles klein geschrieben z.b. "anker", "start", "go". Wenn du für dich eine "ID" bestimmt hast, können wir weiterfahren mit dem Auslöser.
3) Auslöser
Definiere nun das gewünscht Element auf deiner Website, welches du als Auslöser verwenden möchtest. Im Beispiel nehmen wir einfach einen Button.
Öffne die Einstellungen deines gewünschten Elementes, indem du auf das Zahnrad ⚙️ klickst
Beachte, dass wir NICHT in die Preset Einstellungen wechseln, sondern im Lila Bearbeitungsfenster bleiben. Öffne beim Tab "Inhalt" die Einstellung "Link".
Als "Linkziel" definierst du "Im selben Fenster".
Beim Feld "Link URL" fügst du nun deinen gewählten Auslöser ein. Im Beispiel wäre es "anker". Dabei ist wichtig, dass du davor ein Hashtag "#" platzierst, also:
#anker
Speichere die Einstellungen und schliesse die Einstellungen, indem du auf den Haken klickst ✅.
Geschafft. So definiert man den Auslöser bei einem Ankerlink.
4) Ziel
Zum Schluss definieren wir das gewünschte Ziel, wohin wir verlinkt werden wollen, sobald man den Auslöser betätigt. Als Ziel eignet sich meistens ein Abschnitt (Blau) oder eine Zeile (Grün) am besten.
Springe zur gewünschten Stelle der Website und öffne die Einstellung des Abschnittes oder der Zeile ⚙️.
Beachte, dass wir NICHT in die Preset Einstellungen wechseln, sondern im Lila Bearbeitungsfenster bleiben. Öffne beim Tab "Erweitert" die Einstellung "CSS-ID & Klassen".
Beim Feld "CSS-ID" fügst du nun deinen gewählten Auslöser ein. Im Beispiel wäre es "anker". Dabei ist wichtig, dass du hier nur das Wort eingibst und KEIN # davor setzt, also:
anker
Speichere die Einstellungen und schliesse die Einstellungen, indem du auf den Haken klickst ✅.
Geschafft. Nun kannst du den Divi Builder verlassen und deinen Ankerlink testen.