Anker Links/Sprungmarken setzen bei Divi. Verschiedene Screenshots für die Einrichtung der CSS-ID im Zielelement, dem Link im Ausgangselement und des Anker Links/Sprungmarke im WordPress-Menü.

Anker-Links/Sprungmarken bei Divi setzen

10. November 2020 | Webdesign, Tools & Methoden zum Arbeiten, Tools, Workspaces & Arbeitsweisen, Web

Eines vorweg zur Einleitung – Website vs. Webseite

Leider werden die beiden Begriffe sehr häufig gleichgesetzt, sodass wir zu Beginn den Unterschied kurz erläutern möchten.
Der Unterschied zwischen einer Webseite und einer Website besteht darin, dass eine Webseite nur eine einzelne Seite ist. Mehrere Seiten, also Webseiten, ergeben die Website. Übrigens ist eine Homepage auch keine Website, sondern eine Webseite, die als Startseite festgelegt ist.
Die Begriffe werden wahrscheinlich auch in einigen Jahren noch bunt gemischt.

Im Zielelement wird unter dem Reiter „Erweitert“ die CSS-ID für den Anker-Link/Sprungmarke (engl. anchor link) eingetragen.
Im Ausgangselement wird unter dem Reiter „Inhalt“ die Link-URL für den Anker-Link/Sprungmarke (engl. anchor link) eingetragen.
Den Anker-Link auf einer anderen Seite setzen

Das Vorgehen unterscheidet sich, im Vergleich zum Setzen innerhalb der gleichen Seite, nur vom Link-Namen. Speichern Sie Ihre Seite vom Zielelement und wechseln Sie zur Seite mit dem Ausgangselement.

Gehen Sie zum gewünschten Textabschnitt oder Ausgangselement (Abschnitt/Sektion, Zeile oder Modul) und klicken auf das jeweilige Bearbeiten-Symbol. Anschließend wählen Sie den Reiter „Inhalt“ und maximieren den Bereich „Link“. Im Feld „Link-URL …“ tragen Sie die vollständige Anker-Link-URL ein. Diese setzt sich aus der URL der jeweiligen Webseite (vgl. nächster Absatz), dem Rautezeichen „#“ und dem Anker-Namen/CSS-ID zusammen.
In meinem Beispiel lautet die vollständige Anker-Link-URL „https://andre-sandner.com/#start-sektion-kontakt“.

Am besten die Webseite, auf der sich das Ausgangselement befindet, im Browser öffnen und den kompletten Link kopieren. So werden Schreibfehler vermieden und die Seitenstruktur korrekt übernommen. Enthält die Webseite-URL einen Fehler, dann funktioniert der Anker-Link trotz eines richtig eingetragenen Anker-Namens/CSS-ID nicht.

Den Anker-Link im Menü integrieren

Speichern Sie zuerst Ihre Seite mit dem Zielelement und wechseln zur WordPress-Admin-Seite. Dort wählen Sie im WordPress-Menü unter „Designs“ den Unterpunkt „Menüs“ aus. Innerhalb des Reiters „Menüs bearbeiten“ befindet sich der Punkt „Menüeinträge hinzufügen“. Dort maximieren Sie den Eintrag „Individuelle Links“.
Im Feld „URL“ tragen Sie die vollständige Anker-Link-URL ein. Diese setzt sich aus der URL der jeweiligen Webseite, dem Rautezeichen „#“ und dem Anker-Namen/CSS-ID zusammen.
In meinem Beispiel lautet die vollständige Anker-Link-URL „https://andre-sandner.com/#start-sektion-kontakt“.
Im Feld „Link-Text“ tragen Sie Ihren gewünschten Menü-Namen ein und fügen die Eingaben anschließend dem Menü hinzu. Vergessen Sie nicht das Speichern des Menüs.

Zum Setzen eines Anker-Links im Menü, muss unter „Designs“ und dann „Menüs“ die URL für den Anker-Link/Sprungmarke (engl. anchor link) eingetragen werden.

Bilder & Text: © André Sandner – andre-sandner.com & stock.adobe.com

  1. Start
  2. /
  3. Web
  4. /
  5. Anker-Links/Sprungmarken bei Divi setzen