Wie man Anker-Link-Probleme in Elementor behebt: Ein einfacher CSS-Fix

In vielen modernen Websites sind Anker-Links oder Sprung­marken ein wesent­liches Element, um eine nahtlose und benut­zer­freund­liche Navigation zu gewähr­leisten. Diese Technik ermög­licht es Benutzern, schnell zu einem bestimmten Abschnitt auf einer Seite zu springen. Jedoch gibt es bei der Verwendung von Anker-Links in Elementor häufig das Problem, dass Inhalte am oberen Bildrand abgeschnitten werden, insbe­sondere wenn die Website Sticky Headers verwendet.

In diesem Beitrag geht es um die Optimierung des Anker-Widgets von Elementor. Fragen zur grund­sätz­lichen Verwendung des Widgets werden hier beant­wortet.

Was sind Sticky Headers?

Ein „Sticky Header“ bleibt am oberen Rand des Bildschirms sichtbar, während Sie auf der Seite nach unten scrollen. Dies ist besonders nützlich für das Navigieren auf langen Seiten, da das Menü jederzeit zugänglich bleibt. Der Nachteil dabei ist jedoch, dass dieser fixierte Header Teile der Seite verdecken kann, wenn Anker-Links verwendet werden.

Das Problem der abgeschnit­tenen Inhalte lösen

Das Problem der abgeschnit­tenen Inhalte, das durch Sticky Headers oder mangelnden White Space am oberen Rand entsteht, kann glück­li­cher­weise mit einem simplen CSS-Trick behoben werden. Indem Sie den folgenden Code in Ihre Elementor-Website einfügen, passen Sie die Position des Anker­punktes so an, dass der Inhalt vollständig sichtbar und nicht vom Header überlagert wird:

CSS-Fix für Anker-Abstände in Elementor (Desktop)

.elementor-menu-anchor {
  display: block; 
  position: relative; 
  top: -150px; 
}

Dieser Code verschiebt den Anker­punkt um 150 Pixel nach oben, was ausrei­chend Platz schafft, damit der Inhalt unter dem Sticky Header sichtbar wird. Der Wert lässt sich beliebig ändern.

Anpas­sungen für Mobil­geräte

Da auf kleineren Bildschirmen, wie denen von Smart­phones, oft kein Sticky Header verwendet wird oder der White Space anders behandelt werden soll, kann der oben genannte CSS-Code mit einer Media Query angepasst werden, um nur auf größeren Bildschirmen angewendet zu werden:

@media screen and (min-width: 640px) {
    .elementor-menu-anchor {
        display: block; 
        position: relative; 
        top: -3rem; 
    }
}

Tipp: Es genügt den/die CSS-Snippets in einen Anker auf der Website einzu­fügen. Die Abstände werden auf der gesamten Website übernommen.

Integration des CSS-Codes im Elementor Anker-Widget

Um den CSS-Code korrekt in Ihrem Elementor Anker-Widget einzu­fügen, gehen Sie wie folgt vor:

1. Öffnen Sie Ihre Seite im Elementor Editor: Wählen Sie die Seite aus, auf der Sie das Anker-Widget einsetzen möchten oder bereits einge­setzt haben.
2. Wählen Sie das Anker-Widget: Klicken Sie auf das Anker-Widget, das Sie anpassen möchten. Wenn Sie noch kein Anker-Widget auf Ihrer Seite haben, können Sie es aus der Widget-Bibliothek von Elementor per Drag-and-Drop auf Ihre Seite ziehen.
3. Zugang zum Anker-Widget Einstel­lungen: Sobald das Widget ausge­wählt ist, wird im linken Panel der Elementor-Schnitt­stelle das Einstel­lungsmenü für das Anker-Widget angezeigt.
4. Einfügen des CSS-Codes: Navigieren Sie im Einstel­lungsmenü zum Abschnitt „Erweitert“. In diesem Abschnitt finden Sie die Option „Benut­zer­de­fi­niertes CSS“. Hier können Sie den CSS-Code eingeben. Fügen Sie den entspre­chenden CSS-Code in das bereit­ge­stellte Feld ein.
5. Überprüfen und Speichern: Nachdem Sie den CSS-Code eingefügt haben, verwenden Sie die Vorschau-Funktion von Elementor, um sicher­zu­stellen, dass die Änderungen wie erwartet wirken. Wenn alles korrekt aussieht, speichern Sie Ihre Änderungen und veröf­fent­lichen Sie die Seite.

Verbes­serung des Scroll-Verhaltens

Neben dem Problem des abgeschnit­tenen Inhalts ist das Scroll-Verhalten bei Elementor oft sehr direkt und abrupt. Um ein sanfteres Scrollen zu den Anker­punkten zu ermög­lichen, kann folgender CSS-Code verwendet werden:

html {
  scroll-behavior: smooth;
}

Diesen Code sollten Sie über “WordPress -> Design -> Custo­mizer -> Zusätz­liches CSS” einfügen.

Fazit

Mit diesen einfachen Anpas­sungen können Sie die Nutzung von Anker-Links auf Ihrer Elementor-Website erheblich verbessern und sicher­stellen, dass Besucher eine optimale Benut­zer­er­fahrung genießen. Durch die korrekte Imple­men­tierung dieser CSS-Codes können Sie die häufigsten Probleme mit Anker-Links effektiv lösen und das Navigieren auf Ihrer Seite für Ihre Benutzer angenehmer gestalten.