Ankerlinks in Elementor setzen: Sprungmarken für bessere Navigation und UX

März 7, 2026 Webdesign & WordPress

Ankerlinks (auch Sprungmarken oder Anchor Links) ermöglichen es Besuchern, per Klick direkt zu einem bestimmten Abschnitt auf derselben Seite zu springen. In Elementor sind Ankerlinks besonders wertvoll für Landingpages, One-Page-Websites und lange Ratgeber-Artikel mit Inhaltsverzeichnis. Sie verbessern die Navigation und halten Besucher länger auf der Seite.

Methode 1: Elementor Menü-Anker Widget verwenden

Anker-Punkt setzen

Elementor bietet ein dediziertes „Menü-Anker“-Widget. Ziehe es an die gewünschte Position auf deiner Seite — direkt über die Sektion, zu der gesprungen werden soll. Gib dem Anker einen eindeutigen Namen (z.B. „leistungen“ oder „kontakt“). Verwende Kleinbuchstaben ohne Leerzeichen und Sonderzeichen.

Erstelle einen Link mit dem Format #ankername. In einem Button-Widget: Setze die URL auf #leistungen. In einem Text-Widget: Markiere den gewünschten Text und füge den Link #kontakt hinzu. Für Navigationsmenüs: Erstelle einen benutzerdefinierten Link mit #ankername als URL.

Alternativ zum Menü-Anker-Widget kannst du jeder Elementor-Sektion eine CSS-ID zuweisen. Klicke auf die Sektion → Erweitert → CSS-ID. Gib einen eindeutigen Namen ein (z.B. „services“). Der Ankerlink lautet dann #services.

Der Vorteil dieser Methode: Du brauchst kein zusätzliches Widget und die Seite bleibt schlanker.

Smooth Scrolling aktivieren

Standardmäßig springt der Browser sofort zur Ankerposition. Für einen sanften Scroll-Effekt füge folgendes CSS in den Elementor Custom CSS oder dein Child Theme ein:

html {
    scroll-behavior: smooth;
}

Elementor Pro bietet Smooth Scrolling auch als eingebaute Einstellung unter Elementor → Einstellungen.

Bei One-Page-Websites mit Sticky Header ist die Kombination aus Ankerlinks und fixierter Navigation besonders effektiv. Beachte: Die Sticky-Höhe des Headers überlappt möglicherweise den Anker-Punkt. Lösung: Setze einen Offset über CSS oder nutze das Menü-Anker-Widget, das automatisch den Header-Offset berücksichtigt.

Du kannst Ankerlinks auch seitenübergreifend verwenden. Format: https://deine-domain.de/seite/#ankername. Der Browser lädt zuerst die Zielseite und scrollt dann zum Anker. Das funktioniert auch in Navigationsmenüs für Multi-Page-Websites.

  • Sprechende Namen: Verwende beschreibende IDs wie „preise“ statt „section-3″
  • Konsistenz: Verwende durchgängig eine Methode (Widget oder CSS-ID)
  • Testing: Teste Ankerlinks auf Desktop und Mobile — der Scroll-Offset kann unterschiedlich sein
  • SEO: Ankerlinks in der URL (#ankername) werden von Google als Seitenverweis behandelt, nicht als separate Seite

Häufigste Ursachen: Tippfehler in der ID, fehlendes #-Zeichen vor dem Ankernamen, Leerzeichen oder Sonderzeichen in der ID, oder Cache-Probleme. Prüfe die Browser-Konsole auf Fehler.

Ja, mit der CSS-Regel scroll-behavior: smooth oder über Elementor Pro-Einstellungen. Zusätzliche JavaScript-Bibliotheken sind dafür nicht nötig.

Google erkennt Ankerlinks und kann sie in den Suchergebnissen als Jump-Links anzeigen. Das verbessert die Nutzerfreundlichkeit der Suchergebnisse und kann die Click-Through-Rate steigern.

Es gibt kein technisches Limit. Für die Nutzerfreundlichkeit empfehlen sich 5-8 Ankerlinks in einem Inhaltsverzeichnis. Mehr als 15 wirken unübersichtlich.