GeneratePress ist ein hervorragendes Premium-Theme für WordPress, das aufgrund seiner hohen Geschwindigkeit und seines mächtigen Elements-Bereichs geschätzt wird.
In diesem Beitrag geht es jedoch um ein unterschätztes Feature, mit dem ihr aber einen guten Eindruck machen könnt.
Mit GeneratePress Premium könnt ihr auch einen sanften Bildlauf für interne Verknüpfungen einstellen. Ursprünglich war diese Funktion nur für Anker-Sprungziele und Linkziele in der Navigation vorgesehen, aber mittlerweile kann sie auf fast alle Links angewendet werden. Jetzt erkläre ich euch, wie das geht.
GeneratePress: Sanfter Bildlauf aktivieren
Um den sanften Bildlauf in GeneratePress zu aktivieren, musst Du zuerst in den Customizer gehen und den Bereich „Allgemein“ öffnen. Dort kannst Du ein Häkchen bei „Sanfter Bildlauf“ setzen. Vergiss nicht, auf „Veröffentlichen“ zu klicken, um die Änderungen zu speichern.
Als nächstes musst Du zur Menübearbeitung gehen (Design -> Menüs). Überprüfe zuerst unter „Ansicht anpassen“, ob das Häkchen bei „CSS-Klassen“ gesetzt ist. Nur wenn dies aktiviert ist, kannst Du im Editiermodus jedem Menü-Link eine CSS-Klasse zuweisen. Die CSS-Klasse für den sanften Bildlauf in GeneratePress heißt „smooth-scroll“.
Beispiel: Menü-Links auf interne Sprungmarken einer Seite mit smooth scroll
Ihr könnt das an einem Beispiel nachvollziehen. Am Ende dieser Übung habt ihr eine Seite in WordPress, deren unterschiedliche Abschnitte über das Navigationsmenü erreichbar sind und wo der sanfte Bildlauf angewandt wird. Los geht’s.
Alles was jetzt folgt, setzt die Arbeit mit dem Gutenberg-Editor voraus. Bei anderen Pagebuildern wie Divi oder Elementor mag das anders aussehen, das Prinzip ist aber das Gleiche.
Seite mit Sprungzielen erstellen
Erstellt eine Seite in WordPress. Verteilt dann großzügig Inhalt auf der Seite, so dass in der Browser-Ansicht gescrollt werden muss, um zum Ende zu gelangen und alles zu lesen. Teilt die Seite in mehrere Abschnitte auf. Stellt euch diese Abschnitte zum Beispiel als verschiedene Kapitel eines Textes vor. In der Praxis muss man oft Inhalte verschiedener Unterseiten auf einer Seite zusammenfassen, weil die Inhaltsmengen für sich genommen zu gering sind.
Um die verschiedenen Kapitel auf eurer Seite gezielt zu verlinken, könnt ihr Sprungmarken verwenden. Ich nutze dafür die einleitenden Kapitelüberschriften. In den Blockeigenschaften der Überschriften findet ihr den Erweitert-Bereich, in dem ihr bei HTML-Anker einen beliebigen Namen für eure Sprungmarke eingeben könnt. Für unser Beispiel bieten sich kapitel1, kapitel2 usw. an.
Durch diesen Schritt habt ihr eine Seite mit viel Inhalt erstellt, die in mehrere sinnvolle Abschnitte, sprich Kapiteln, unterteilt wurde. Jedes Kapitel wird durch einen individuellen Überschriften-Block eingeleitet, dem ihr einen spezifischen HTML-Anker (kapitel1, kapitel2 …) zugewiesen habt.
Das Navigationsmenü erstellen
Wechselt in den Bereich Menüs (unter Design). Fügt dann die eigentliche Seite in der Navigation als Menüeintrag vom Typ Seite ein.
Anschließend fügt ihr Menüeinträge vom Typ individueller Link für die Verlinkungen innerhalb der Seite hinzu. Achtung: Dies funktioniert nur mit diesem Link-Typ! In der URL gebt ihr die Sprungmarke mit einem vorangesetzten Gatterzeichen # an, so wie ihr sie auf der Seite benannt habt. Also #kapitel1, #kapitel2 usw. Bei Link-Ziel empfehle ich, den Namen des Kapitels zu verwenden, zum Beispiel „Kapitel 1„. Wiederholt diesen Vorgang für alle Kapitel/Sprungmarken auf dieser Seite, bis ihr für jedes eine eigene Menü-Verlinkung angelegt habt.
Diese individuellen Links sortiert ihr unterhalb des übergeordneten Seiten-Links ein, damit im Frontend ersichtlich wird, dass sie als Submenü-Einträge der Seite untergeordnet sind.
Um an die Bearbeitungsfelder für einen Menü-Eintrag zu gelangen, klickt ihr auf den kleinen Pfeil rechts neben dem Eintrag. Hier müsst ihr bei CSS-Klassen (optional) „smooth-scroll“ eintragen – sonst greift der sanfte Bildlauf nicht. Diesen Schritt wiederholt ihr für jeden Menü-Link. Aktualisiert nun das Menü und damit habt ihr auch diesen Schritt erfolgreich abgeschlossen.
Durch diesen Vorgang habt ihr das Navigationsmenü derart erweitert, dass ihr jetzt einen übergeordneten Link für die Seite selbst angelegt und darunter für jeden HTML-Anker (der ja die Seitenkapitel einleitet) eine Sprungmarke als Submenü-Eintrag hinzugefügt habt. Jedem dieser Submenü-Einträge habt ihr die CSS-Klasse „smooth-scroll“ zugewiesen.
Damit ist die eigentliche Arbeit erledigt.
Wie funktioniert der sanfte Bildlauf im Frontend?
Schritt 3 besteht im Ausprobieren des sanften Bildlaufs.
Wechselt nun in die Frontend-Ansicht eurer Webseite und klickt auf den Link zur Seite in der Navigation. Ihr solltet zur entsprechenden Seite springen, ohne jedoch einen Effekt wahrzunehmen. Wir haben ja den sanften Bildlauf auch nur für die Unterpunkte eingerichtet. Klickt nun im Navigationsmenü auf einen der Unterpunkte. Dadurch solltet ihr direkt zu der Stelle auf der Seite springen, für die ihr das Sprungziel definiert habt. Das sollte jetzt nicht mehr ruckartig geschehen, sondern durch ein sanftes Gleiten erfolgen.
Einschub: warum für jeden Abschnitt smooth-scroll einrichten?
Es ist anzunehmen, dass Kapitel 1 relativ weit oben auf der Seite positioniert ist. Hier wirkt sich der sanfte Bildlauf natürlich weniger aus als bei Sprungzielen am Ende der Seite. Doch warum haben wir auch für diesen Anker das „smooth-scroll“ eingerichtet? Es ist nicht immer gesagt, dass man nur über das klassische Navigationsmenü zu verschiedenen Abschnitten einer Seite springt, und auch nicht immer nur in eine Richtung. Es gibt Alternativen in der Nutzerführung. Es ist beispielsweise eine schwebende Box vorstellbar, die einen Table of Content enthält. Hierüber kann man auch vom Ende einer Seite zurück zu den ersten Abschnitten springen. Auch hierbei ist ein sanfter Bildlauf wichtig. Aus diesem Grund empfehle ich, ein einheitliches Prinzip durchgehend anzuwenden.
Die Geschwindigkeit des sanften Bildlaufs anpassen
Verläuft euch der sanfte Bildlauf zu langsam oder zu schnell? Kein Problem. Es gibt in GeneratePress einen Filter, über den die Geschwindigkeit des smooth-scroll angepasst werden kann.
Ich empfehle die Verwendung des Code Snippets Plugins. Sonst gehören diese Zeilen Code in die functions.php Datei des aktiven WordPress Themes:
add_filter( 'generate_smooth_scroll_duration', 'tu_smooth_scroll_duration' );
function tu_smooth_scroll_duration() {
return 900; // milliseconds
}In diesem Beispiel ist der Ablauf des sanften Bildlaufs bei einer Verlinkung auf 900 Millisekunden eingestellt. Ein guter Mittelwert, wie ich finde. Niedrigere Werte erhöhen die Geschwindigkeit, höhere Werte verlangsamen den Effekt.
Den Sanften Bildlauf auf alle Anker-Links anwenden
Das durchexerzierte Beispiel gilt für den Fall, dass man manuell festlegen muss, bei welchem Link der sanfte Bildlauf angewendet werden soll. Möchte man kategorisch alle Verlinkungen auf Sprungmarken (HTML-Anker) mit einem smooth-scroll Effekt versehen, kann man dieses Code-Snippet einsetzen:
add_filter( 'generate_smooth_scroll_elements', function( $elements ) {
$elements[] = 'a[href*="#"]';
return $elements;
} );Über den generate_smooth_scroll_elements Filter wird allen Links auf Sprungmarken (erkennbar am Gatterzeichen) die smooth-scroll Klasse automatisch hinzugefügt. Der Programmierer erkennt mit einem Blick, dass $elements eine array-Variable und damit erweiterbar ist. Es lassen sich also zusätzliche Gültigkeiten hinzufügen oder auch Ausnahmen definieren. Ich schätze aber, für den normalen Anwender wird das Wissen erstmal ausreichen.
