Elementor Anker setzen: Sprungmarken & Anker-Link Anleitung

Wenn du in Elementor einen Anker setzen möchtest, kannst du Besucher gezielt zu einer bestimmten Stelle auf deiner Seite springen lassen. Solche sogenannten Anker-Links oder Sprungmarken werden häufig in Onepagern, Inhaltsverzeichnissen oder Call-to-Action Buttons verwendet. In Elementor kannst du eine Sprungmarke entweder mit dem Menu Anchor Widget oder über eine CSS-ID erstellen.

So setzt du eine Sprungmarke mit dem Elementor Anchor Widget

Die einfachste Möglichkeit, in Elementor eine Sprungmarke zu setzen, ist das Menü-Anker Widget. Damit kannst du eine bestimmte Stelle auf der Seite markieren, zu der Besucher später mit einem Anker-Link springen.

1. Menü-Anker Widget einfügen

Öffne die Seite im Elementor Editor und suche links nach dem Widget „Menü-Anker“.

Ziehe das Widget an die Stelle der Seite, zu der später gesprungen werden soll.
Der Anker selbst ist unsichtbar, der graue Kasten dient nur als Zielpunkt für den Link.

2. Anker-ID festlegen

Nachdem du das Widget eingefügt hast, kannst du im Feld Anker einen Namen für deine Sprungmarke vergeben.

Beispiel: kontakt

Wichtig:

• keine Leerzeichen verwenden
• keine Sonderzeichen und auch kein # verwenden
• am besten nur Kleinbuchstaben und keine Zahlen
• die ID auf der Unterseite nur 1x vergeben

Diese ID ist später die Zieladresse deines Anker-Links.

3. Anker-Link erstellen

Jetzt kannst du an anderer Stelle auf der Seite einen Link zu diesem Anker setzen.
Zum Beispiel in einem Button, Menüpunkt oder Textlink.

Der Link sieht so aus: #kontakt

Wenn Besucher darauf klicken, springt die Seite automatisch zu dieser Stelle.

💡 Expertentipp: Setze den Menü-Anker am besten leicht oberhalb des eigentlichen Inhalts, zum Beispiel über einer Überschrift oder Section. So landet der Besucher genau am richtigen Punkt der Seite. Du kannst auch einen Ankerlink über ein Bild verlinken.

Anker-Link mit CSS-ID erstellen

Neben dem Menü-Anker Widget kannst du eine Sprungmarke in Elementor auch über eine CSS-ID erstellen. Diese Methode ist besonders praktisch, wenn du direkt auf einen Container oder ein Widget springen möchtest.

1. Section oder Container auswählen

Klicke im Elementor Editor auf die den Container oder das Widget, zu dem später gesprungen werden soll.

2. CSS-ID vergeben

Gehe im linken Einstellungsbereich zum Tab Erweitert.

Dort findest du das Feld CSS-ID.
Trage hier den Namen deiner Sprungmarke ein.

Beispiel: telefonnummer

Wichtig:

• keine Leerzeichen verwenden
• keine Sonderzeichen

3. Anker-Link erstellen

Jetzt kannst du einen Link zu dieser Stelle setzen.

Der Link sieht so aus: #telefonnummer

Sobald Besucher darauf klicken, springt die Seite direkt zu dieser Section.

Wann diese Methode sinnvoll ist

Die CSS-ID Methode wird häufig genutzt, wenn du:

ein Inhaltsverzeichnis auf einer Seite nutzt

auf ganze Sections oder Container springen möchtest

eine Onepager Navigation erstellst

Anker-Link zu einer anderen Seite erstellen

Ein Anker-Link kann nicht nur auf der gleichen Seite, sondern auch auf eine bestimmte Stelle einer anderen Seite führen.

Der Unterschied ist einfach:

Anker-Link auf der gleichen Seite

Wenn sich der Anker auf der gleichen Seite befindet, reicht es aus, nur den Anker zu verlinken.

Beispiel: #kontakt

Beim Klick springt der Besucher direkt zu der Stelle auf der aktuellen Seite, an der der Anker gesetzt wurde.

Anker-Link zu einer anderen Seite

Wenn der Anker auf einer anderen Seite liegt, musst du zusätzlich die Seiten-URL angeben.

Der Link besteht dann aus:

Seiten-URL + Anker

Beispiel:

/landingpage/#telefon

Oder mit kompletter URL:

https://deineseite.de/landingpage/#telefon

Beim Klick wird zuerst die Seite geöffnet und anschließend automatisch zur passenden Sprungmarke gescrollt. Auf der anderen Seite muss dafür aber natürlich der Anker-Link #telefon an der gewünschten Stelle gesetzt sein.

Typische Anwendungen für Elementor Ankerlinks

Ankerlinks sind besonders praktisch, wenn Besucher schnell zu einer bestimmten Stelle auf deiner Seite springen sollen. Gerade bei längeren Seiten oder Onepagern werden Sprungmarken häufig eingesetzt.

Onepager Navigation

Bei Onepager-Websites führen die Menüpunkte direkt zu bestimmten Bereichen der gleichen Seite. Besucher können so schnell zu Abschnitten wie Leistungen, Preise, Über uns oder Kontakt springen.

Jeder Menüpunkt verlinkt dabei auf einen Anker innerhalb der Seite, zum Beispiel: #leistungen

Wenn jemand im Menü auf „Leistungen“ klickt, scrollt die Seite automatisch zu diesem Abschnitt.

💡 Expertentipp

Eine Onepager Navigation kannst du ganz einfach über das WordPress-Menü erstellen.

Gehe dazu zu: Design → Menüs

Dort kannst du Individuelle Links hinzufügen und als URL direkt den Anker eintragen.

Inhaltsverzeichnis für lange Seiten

Bei längeren Artikeln oder Landingpages kann ein Inhaltsverzeichnis sehr hilfreich sein.

Die einzelnen Punkte verlinken dann direkt auf bestimmte Überschriften oder Abschnitte der Seite. Besucher können so direkt zum gewünschten Thema springen, ohne lange scrollen zu müssen.

---

Call-to-Action Buttons

Ankerlinks eignen sich auch sehr gut für Call-to-Action Buttons.

Ein Button wie zum Beispiel: „Jetzt Termin buchen“

kann direkt zu einem Anker beim Kontaktformular führen. Dadurch gelangen Besucher sofort zum wichtigen Bereich der Seite.

Kommentarbereich oder FAQ verlinken

Auch der Kommentarbereich oder ein FAQ-Abschnitt kann mit einem Anker-Link erreichbar gemacht werden.

Zum Beispiel:

• „Zu den Kommentaren springen“
• „Zur FAQ springen“

Gerade bei längeren Seiten verbessert das die Navigation und hilft Besuchern, schneller zum gewünschten Abschnitt zu gelangen.

💡 Expertentipp

Zu manchen Bereichen kannst du direkt springen, ohne selbst eine Sprungmarke setzen zu müssen. Einige Elemente haben bereits eine feste ID. Der WordPress-Kommentarbereich ist zum Beispiel standardmäßig erreichbar über: #comments. Ein Link wie deineseite.de/artikel/#comments führt deine Besucher direkt zum Kommentarbereich unter dem Beitrag.

Besonderheit bei Sticky Headern

Wenn du auf deiner Website einen Sticky Header verwendest (also ein Header der beim Scrollen mitläuft), kann es passieren, dass ein Anker-Link nicht exakt zur richtigen Stelle springt.

Der Grund: Ein Sticky Header bleibt beim Scrollen oben am Bildschirmrand stehen. Wenn Besucher auf einen Anker-Link klicken, scrollt die Seite zwar zum Zielbereich, aber der Header kann den oberen Teil des Inhalts verdecken.

Das passiert besonders häufig bei:

• Onepager Navigation
• Inhaltsverzeichnissen
• Buttons, die zu Formularen springen

Einfache Lösung

Platziere den Anker leicht oberhalb des eigentlichen Inhalts.

Zum Beispiel:

• über der Überschrift einer Section
• etwas oberhalb eines Formulars
• oberhalb eines Abschnitts

So landet der Besucher genau an der richtigen Stelle und der Sticky Header verdeckt den Inhalt nicht.

Lösung mit CSS

In diesem Fall kannst du den Anker auch per CSS etwas nach oben verschieben.

Füge dazu folgenden CSS-Code im WordPress Customizer hinzu:

.elementor-menu-anchor {
  position: relative;
  display: block;
  transform: translateY(-120px);
}

Der Wert sorgt dafür, dass der Anker technisch etwas weiter oben liegt. Beim Klick auf den Anker-Link landet der sichtbare Inhalt dadurch unterhalb des Sticky Headers.

Du kannst den Wert je nach Höhe deines Headers anpassen.

💡 Expertentipp

Da Header auf Mobilgeräten oft kleiner sind, kannst du unterschiedliche Abstände für verschiedene Bildschirmgrößen definieren:

@media (min-width: 768px) {
  .elementor-menu-anchor {
    transform: translateY(-120px);
  }
}@media (max-width: 767px) {
  .elementor-menu-anchor {
    transform: translateY(-80px);
  }
}

So funktioniert der Anker sowohl auf Desktop als auch auf mobilen Geräten sauber.

Alternative Lösung mit Abstand

Eine weitere Möglichkeit ist, dem Zielbereich etwas zusätzlichen Abstand nach oben zu geben, zum Beispiel über Padding oder Margin. Dadurch bleibt genug Platz, damit der Inhalt unter dem Sticky Header sichtbar bleibt.

Typische Probleme bei Elementor Ankern

Anker funktioniert nicht

Wenn ein Anker-Link nicht funktioniert, liegt das meist daran, dass der Link nicht korrekt geschrieben wurde.

Prüfe:

• beginnt der Link mit #
• stimmt der Ankername exakt überein
• gibt es keine Leerzeichen im Namen

Seite springt an die falsche Stelle

Manchmal scrollt die Seite zwar, landet aber nicht exakt beim gewünschten Bereich.

Das passiert häufig, wenn der Anker nicht direkt am Zielbereich gesetzt wurde.

Lösung: Setze den Menü-Anker oberhalb der Überschrift oder Section, zu der Besucher springen sollen.

Anker funktioniert im Menü nicht

Bei Onepager-Menüs passiert es häufig, dass ein Menüpunkt nicht zum Anker springt.

Ursache ist meist ein falscher Menü-Link.

Prüfe im Menü: Design → Menüs → Individuelle Links

Die URL muss so aussehen:

#leistungen

Elementor Anker Links: Sprungmarken kurz zusammengefasst

Mit einem Elementor Anker-Link kannst du Besucher direkt zu bestimmten Bereichen deiner Seite führen. Eine Sprungmarke lässt sich entweder mit dem Menü-Anker Widget oder über eine CSS-ID setzen. Anschließend kannst du mit einem Link wie #ankername gezielt zu dieser Stelle springen oder von einer anderen Seite darauf verlinken.

Ankerlinks eignen sich besonders für Onepager Navigation, Inhaltsverzeichnisse oder Call-to-Action Buttons und verbessern die Orientierung auf längeren Seiten deutlich.