Anleitungen/Website bearbeiten/Editor/Sprungmarken erstellen

Sprungmarken erstellen

Sprungmarken werden auch als Anker-Links oder Sprung-Links bezeichnet und ermöglichen dir, durch Anklicken dieses Links direkt an einen Punkt weiter oben oder unten auf einer langen Seite zu springen. Das Inhaltsverzeichnis rechts ist ein gutes Beispiel für Sprungmarken.

Wozu dienen Sprungmarken?

Eine Sprungmarke ist eine großartige Möglichkeit, auf einen Abschnitt einer Seite zu verlinken. Deine Website-Besucher können sie anklicken, um von einem Teil einer langen Seite zu einem anderen Teil derselben Seite zu gelangen.

Nehmen wir z. B. an, dass am Anfang deiner Seite eine Liste mit Abschnittsnamen aufgeführt ist. Du kannst jeden Namen mit dem entsprechenden Abschnitt weiter unten auf der Seite verlinken, damit Besucher sofort zum Abschnitt mit den entsprechenden Informationen springen können, an denen sie interessiert sind. Du kannst dann Leser per Link direkt zur ursprünglichen Liste aller Abschnitte am Anfang der Seite zurückleiten.

💡

Du kannst auch den Inhaltsverzeichnis-Block verwenden, um automatisch Sprungmarken von allen Überschriften in deinem Beitrag/deiner Seite zu erstellen, sowie einen Fußnoten-Block, um Fußnoten in deinem Text automatisch zu formatieren.

Video-Tutorial

Dieses Video ist auf Englisch.
YouTube bietet automatische Übersetzungsfunktionen, damit du es in deiner Sprache ansehen kannst:

Automatisch übersetzte Untertitel:

  1. Spiele das Video ab.
  2. Klicke auf ⚙️ Einstellungen (unten rechts im Video).
  3. Wähle Untertitel/CC.
  4. Wähle Automatisch übersetzen.
  5. Wähle deine bevorzugte Sprache.

Automatische Synchronisation (experimentell):

  1. Klicke auf ⚙️ Einstellungen.
  2. Wähle Audiospur.
  3. Wähle die Sprache, in der du das Video hören möchtest.

ℹ️ Übersetzungen und Synchronisationen werden von Google erstellt, können ungenau sein und sind möglicherweise noch nicht für alle Sprachen verfügbar.

Schritt 1: Anker-Link erstellen

Der erste Schritt besteht darin, den Abschnitt auszuwählen, in dem deine Leser ankommen sollen, wenn sie auf die Sprungmarke klicken. Dazu können wir einen sogenannten „Anker“ für den Block erstellen, zu dem du springen möchtest.

  1. Klicke auf den Block, zu dem du den Anker hinzufügen möchtest. Viele gängige Blöcke unterstützen Anker, z. B. Absatz, Überschrift, Bild, Spaltenund Buttons.
  2. Zeige die Blockeinstellungen in der Seitenleiste auf der rechten Seite an. Wenn die Seitenleiste auf der rechten Seite nicht angezeigt wird, klicke oben rechts in der Ecke auf das Einstellungs-Icon, um die Einstellungen zu öffnen. Dieses Icon sieht wie ein Quadrat mit zwei ungleichen Spalten aus:
Das hervorgehobene Einstellungs-Icon am oberen Rand des WordPress-Editors.
Das Einstellungen-Icon oben rechts in der Ecke
  1. Klicke am Ende der Block-Einstellungen auf Erweitert.
  2. Gib ein Wort in das Feld HTML-Anker ein. Dies wird dein Anker. Vergiss nicht, ein eindeutiges Wort zu verwenden, das nicht bereits als Anker an einer anderen Stelle auf der Seite verwendet wird. Wenn du mehr als ein Wort verwenden möchtest, wird automatisch ein Bindestrich (-) zwischen die Wörter eingefügt, z. B. zwei-Wörter:
Hinzufügen von zwei Wörtern mit Bindestrich im HTML-Ankerabschnitt, um eine Sprungmarke zu erstellen.

Schritt 2: Deinen Anker verlinken

Als Nächstes erstellen wir den Seitensprung-Link selbst. Deine Besucher klicken darauf, um zu dem Abschnitt zu gelangen, den du in Schritt 1 erstellt hast.

  1. Gib einen Text ein oder füge ein Bild, einen Button oder einen Navigationsmenüeintrag hinzu, auf den deine Leser klicken können.
  2. Wähle den Text/das Bild/den Button/den Menüeintrag aus und klicke in der Werkzeugleiste des Blocks auf die Link-Option. Die Link-Option ist ein Icon, das wie ein Glied einer Kette aussieht, wie hier hervorgehoben:
  3. Gib den von dir in Schritt 1 erstellten HTML-Anker ein und stelle das Rautensymbol (#) voran. Wenn du zum Beispiel einen Anker namens sprungmarke-erstellen erstellt hast, würdest du als Link #sprungmarke-erstellen eingeben
  4. Klicke in der rechten oberen Ecke des Editors auf Speichern/Aktualisieren/Veröffentlichen, um deine Änderungen zu speichern.

Das war’s! Du kannst deinen Link jetzt auf der öffentlichen Seite testen, um sicherzustellen, dass der in Schritt 2 erstellte Link zu dem in Schritt 1 erstellten Anker führt. Beachte, dass die Sprungmarken-Links nicht funktionieren, wenn du eine Seite oder einen Beitrag in der Vorschau anzeigst. Teste daher die veröffentlichte Version.

Sprungmarken in einem Navigationsmenü

Du kannst in deinem Navigationsmenü Seitensprünge erstellen, die auf einen bestimmten Teil einer Seite verlinken. Dies ist häufig bei Websites mit einer langen Scroll-Startseite der Fall. Sprungmarken erleichtern es Besuchern, den gewünschten Abschnitt der Startseite anzuzeigen.

  1. Der erste Schritt besteht darin, einen Anker als Punkt zu erstellen, zu dem gesprungen werden soll.
  2. Füge in deinem Menü einen neuen Eintrag hinzu, der ein individueller Link ist.
  3. Schreibe in das Textfeld, wie der Menüeintrag heißen soll. Dies hat keine Auswirkungen auf die Sprungmarke.
  4. Erstelle deinen Anker im URL-Feld mit einem Hashtag (#)-Symbol davor.
So fügst du mit der Option „Individueller Link“ einen Seitensprung zum Navigationsmenü hinzu.
Hinzufügen einer Sprungmarke im Menü

Denke daran, dass eine Sprungmarke wie #mein-anker nur auf der Seite funktioniert, auf der sich der Anker befindet. Wenn du zu einem Abschnitt einer anderen Seite springen möchtest, sieh dir den nächsten Abschnitt dieses Ratgebers an.

Zu einer anderen Seite springen

Sprungmarken müssen nicht nur zum Verweisen auf Abschnitte innerhalb derselben Seite verwendet werden Du kannst mit einer Sprungmarke von einer Seite zu einem bestimmten Bereich auf einer anderen Seite verlinken.

Der Unterschied ist, dass wir nicht nur auf den Anker verlinken, wie wir unseren Link in Schritt 2 oben als #sprungmarke-erstellen geschrieben haben, sondern auf die URL der gesamten Seite plus den Anker.

Wenn deine Seite z. B. die folgende URL hat:

https://yourgroovydomain.com/example/

und du auf dieser Seite einen Anker namens eindeutiger-bezeichner erstellst, dann wurde der vollständige Sprung-Link lauten:

https://yourgroovydomain.com/example/#eindeutiger-bezeichner

So erstellst du einen Sprung-Link zurück zum Seitenanfang:

  1. Füge einem Block am Anfang deiner Seite einen Anker hinzu.
  2. Gib unten auf deiner Seite Text wie „Zurück zum Anfang“ oder „Zum Anfang springen“ ein.
  3. Verlinke diesen Text mit deinem Anker.
Copied to clipboard!