Link auf Anker im Divi-Theme – Teil 1: So einfach geht’s

17. Januar 2021 | Divi-Theme

Geschätzte Lesezeit für diesen Beitrag: ca. 3 Minuten.

Links lassen sich nicht nur von Seite zu Seite setzen, sondern auch innerhalb ein und derselben Seite. Man spricht dann von Anker-Links. So können – besonders auf umfangreichen Seiten – auch Inhalte rasch erreicht werden, welche erst weiter unten auf der Seite erscheinen. Solche Links lassen sich im Divi-Theme einfach erstellen.

Der einfachste Weg, um ein Ankerziel in Divi zu erstellen:

  1. Öffnen Sie im gewünschten Divi-Modul den Reiter «Erweitert» – je nach Spracheinstellung auch «Advanced» genannt.
  2. Nun klicken Sie auf CSS-ID & Klassen
  3. Im Feld CSS-ID geben Sie einen passenden Namen für das Linkziel ein. Verwenden Sie am besten nur Kleinbuchstaben und Zahlen, aber keine Sonderzeichen und Leerschläge. Z.B. «ankerziel»
  4. Speichern Sie nun das Modul und gehen an die Stelle, wo der Link platziert werden soll.
  5. Erstellen Sie nun einen Link und geben Sie als Adresse den gewählten ID-Namen mit einer vorangestellten Raute # – hier also #ankerziel – ein.

Damit ist die Sache schon erledigt. Wir probieren das hier gleich mal aus. Um weiter zu lesen, klicken Sie bitte auf diesen Link.

 

Hin und wieder trifft Divi das Ankerziel nur so halbwegs und scrollt nicht ganz an die richtige Stelle der Webseite.

Falls dies bei Ihrer WordPress-Site auch der Fall ist, empfehlen wir Ihnen den kleinen CSS-Hack Link auf Anker im Divi-Theme – Teil 2: Ankerziel knapp verfehlt.

Da sind wir wieder. Einfach. Oder?

Scroll to top: Das ganze umgekehrt

Natürlich geht das auch nach oben. Im ersten Modul der Seite geben Sie in der CSS-ID «top» ein. Dann erstellen Sie weiter unten auf der Seite einen Link mit der Adresse #top – und wenn Sie auf diesen Link klicken geht’s prompt wieder nach oben.

Werbung

Werbung

 

Kostenlose WordPress- und Divi-Tricks im Abo

Wir schicken Ihnen sporadisch (weniger als 10x jährlich) neue Tricks für Wordpress und das Divi-Theme, aber auch hilfreiche CSS- und HTML-Codes frei Haus.

Füllen Sie zur Anmeldung das folgende Formular aus. Angaben mit * sind Pflichtangaben.









Vielen Dank.

Pin It on Pinterest

Share This