Einführung in Sprungmarken und sanftes Scrollen in WordPress
Sprungmarken sind nützliche Werkzeuge, um Besucher einer Webseite schnell zu einem bestimmten Abschnitt zu führen. Sie kennen diese Funktion vielleicht von Inhaltsverzeichnissen, bei denen ein Klick auf einen Abschnitt den Leser direkt zu diesem Punkt auf der Seite bringt. Um dieses Springen weniger abrupt und benutzerfreundlicher zu gestalten, gibt es die Funktion des „Smooth Scrollings“, die das Erlebnis eines sanften, automatischen Scrollens bietet.
Verständnis von Sprungmarken (Anchor Links)
Sprungmarken, auch als Anchor Links bekannt, ermöglichen es, Nutzer innerhalb einer Seite zu einem bestimmten Abschnitt zu leiten. Dies ist besonders nützlich auf langen Seiten, da es dem Besucher ermöglicht, schnell die gewünschte Information zu finden. Zusätzlich profitieren auch die Suchmaschinenoptimierung (SEO) und die Nutzererfahrung davon, da Google diese Links in den Suchergebnissen anzeigen kann, was den direkten Zugriff auf spezifische Inhalte ermöglicht.
Schritte zum Einfügen von Sprungmarken
Um eine Sprungmarke zu erstellen, benötigen Sie zwei Elemente:
- Der Anker: Dies ist der Name, den Sie dem Abschnitt geben, zu dem gesprungen werden soll. Er wird als HTML-ID festgelegt und sollte kleingeschrieben sein, ohne Leer- oder Sonderzeichen (verwenden Sie Bindestriche zur Trennung).
- Der Link: Dies ist ein normaler Link, der auf die HTML-ID des Ankers verweist, indem Sie ein # vor die ID setzen.
Hier sind Anleitungen für verschiedene Page Builder:
Gutenberg Editor
- Wählen Sie den Block aus, zu dem gesprungen werden soll, und geben Sie in der rechten Sidebar unter „Erweitert“ im Feld „HTML-Anker“ den Namen der Sprungmarke ein, z.B. name-der-sprungmarke.
- Erstellen Sie einen Link zu diesem Anker, indem Sie #name-der-sprungmarke als Ziel angeben.
Thrive Architect
- Wählen Sie das Element, das verlinkt werden soll, und nutzen Sie das Anker-Icon in den Main Options oder das Link-Icon in der Werkzeugleiste.
- Klicken Sie auf „Select target“ und wählen Sie das Ziel innerhalb der Seite aus.
- Aktivieren Sie optional „Smooth animation“ für sanftes Scrollen.
Divi
- Bearbeiten Sie das Element, zu dem gesprungen werden soll, und geben Sie unter „Erweitert“ im Tab „CSS-ID & Klassen“ die CSS-ID ein.
- Verlinken Sie diese CSS-ID mit einem Link, indem Sie #name-der-sprungmarke als Ziel angeben.
Elementor
- Wählen Sie den Abschnitt oder die Spalte aus, zu der gesprungen werden soll, und geben Sie im Reiter „Erweitert“ im Feld „CSS ID“ den Namen der Sprungmarke ein.
- Erstellen Sie einen Link zu dieser CSS-ID mit #name-der-sprungmarke als Ziel.
Sanftes Scrollen hinzufügen
Um das Erlebnis des Sprunges angenehmer zu gestalten, können Sie sanftes Scrollen aktivieren. Dies kann entweder mit CSS oder einem Plugin erreicht werden.
Sanftes Scrollen mit CSS
Fügen Sie den folgenden CSS-Code in den WordPress-Customizer ein, um sanftes Scrollen zu aktivieren:
CSS für sanftes Scrollen:
html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } *[id] { scroll-margin-top: 50px; }
Dieser Code sorgt dafür, dass die Seite sanft zu den Sprungmarken scrollt und einen kleinen Abstand zur Oberkante des Browsers einhält.
Sanftes Scrollen mit einem Plugin
Alternativ können Sie ein Plugin verwenden. Für Inhaltsverzeichnisse empfiehlt sich das Plugin LuckyWP Table of Contents. Für allgemeine Sprungmarken kann das Plugin Surbma | Smooth Scroll verwendet werden. Installieren und aktivieren Sie das Plugin, und der Effekt wird automatisch auf alle Sprungmarken angewendet.
Mit diesen Schritten können Sie Sprungmarken und sanftes Scrollen auf Ihrer WordPress-Seite einrichten, um die Benutzererfahrung zu verbessern und die Navigation zu erleichtern.