Lesefortschrittsbalken in WordPress (Bricks) erstellen

In diesem Beitrag erfahren Sie, wie Sie auf einfache Weise einen Lesefortschrittsbalken in Bricks (oft auch Reading Progress Bar genannt) erstellen.

Reading Progress Bar ohne weiteres Plugin

Der Bricks Builder bietet Ihnen die Möglichkeit, nativ einen Lesefortschrittsbalken zu erstellen, sodass Sie dafür kein zusätzliches Plugin benötigen.

Das funktioniert grundsätzlich auch gut: Sie können eine Hintergrundfarbe festlegen und eine Farbe für den Balken, der sich beim Scrollen nach unten immer weiter füllt.

Allerdings können Sie hier nur wenige Einstellungen vornehmen, und uns ist Folgendes aufgefallen:

Mobil ist der Balken der sich füllt standardmäßig immer in blau gehalten.

Lese Fortschrittsbalken in WordPress mit Plugin BricksExtras erstellen

Das Plugin BricksExtras bietet Ihnen ebenfalls die Möglichkeit, einen Fortschrittsbalken in Ihre Seite einzubinden.

Hier funktioniert auch die gewünschte Farbe auf mobilen Geräten.

Sie sehen, dass Sie hier noch ein paar mehr Einstellungsmöglichkeiten erhalten.

BricksExtras gab es damals auch schon für den Oxygen Builder als OxyExtras.

Auch damals war das Plugin schon großartig und bietet für Bricks noch wesentlich mehr Features.

Sie können im Bricks Builder auch Countdowns erstellen. Hier erfahren Sie, wie!

Weitere WordPress-Plugins um den Lese-Fortschritt anzuzeigen

Reading progressbar

Ein sehr beliebtes Plugin für WordPress, um den Lesefortschritt anzuzeigen, ist “Reading progressbar” von Jean-Baptiste Audras.

Das Plugin nutzt den HTML5-Tag <progress> und ein paar Zeilen JavaScript Code.

Aktuell steht das Plugin in der Version 1.3 zur Verfügung und es ist nicht möglich, es auf Multisite-Installationen zu nutzen.

Dies wird aber in Version 2.0 laut Aussage von Jean-Baptiste behoben.

Read Meter

Ein weiteres sehr beliebtes WordPress-Plugin um eine Reading Progress Bar einzubauen, ist das Plugin Read Meter – Reading Time & Progress Bar vom Brainstorm Force Team.

Sie können das Plugin kostenlos herunterladen und auf Seiten, Beiträgen und Medien verwenden.

Info: Wenn Sie Bricks bereits nutzen, erfahren Sie hier, wie Sie eigene Blöcke erstellen.

Außerdem können Sie Kommentare und Bilder ein- bzw. ausschließen und damit festlegen, wann das Ende des Fortschrittsbalkens erreicht sein soll.

Einige weitere Features sind:

• oben oder unten auf der Website anzeigen lassen
• Prefix und Postfix festlegen
• Schriftgröße festlegen
• Farbe des Balkens und Hintergrundfarbe festlegen. Auch ein Verlauf ist möglich
• Abstände festlegen

Sie können den Lesefortschrittsbalken auch per Shortcode z. B. in einem Template anzeigen lassen.

Dies geht über den Shortcode “[read_meter]“.

Dafür sollten Sie aber alle Häkchen auf dem Reiter “Read Time” unter “Show Estimated Read Time On” entfernen und unter der Überschrift “Read Time Position” im Dropdown-Menü “None” auswählen.

Hier können Sie das Plugin auf einer Demo-Seite kennenlernen und testen.

Fazit

Ein Lesefortschrittsbalken ist ein großartiges Feature für Ihre Leser.

Damit zeigen Sie ihnen, wie weit sie bereits im Text gelangt sind und wie viel Text noch vor ihnen liegt.

Achten Sie darauf, unter Container selector bzw. Content selector eine Klasse oder eine ID anzugeben, in der sich der Inner Content, also der Haupttext, befindet.

Der Fortschrittsbalken soll ja nicht Ihre gesamte Seite umfassen, sondern dort aufhören, wo Ihr Beitrag endet.

Sonst läuft der Fortschrittsbalken noch weiter, obwohl der Leser schon den Footer erreicht hat und sich hier kein Text mehr vom eigentlichen Beitrag befindet.