So zeigen Sie die Lesevorlaufleiste in WordPress mit Elementor an

Eine Leseprogressleiste ist ein visueller Indikator auf einer Website, die den Lesern zeigt, wie weit sie durch die Seite oder den Beitrag auf dem Bildschirm gescrollt sind. Dies zeigt in der Regel eine dünne Balken an, die sich im Fortschreiten der Leser füllt und durch die Seite scrollt. Es ist ein einfaches, aber effektives Tool für Blogs und inhaltshörige Websites.

Eine kürzlich durchgeführte Studie über das Engagement von Benutzern legt nahe, dass visuelle Hinweise die Zeit auf einer Seite um bis zu 20% erhöhen können, indem sich Inhalte verwaltbarer anfühlen . Auf die gleiche Weise kann die Fortschrittsleiste den Benutzern helfen, ihre Lesereise zu verfolgen, was die Zufriedenheit steigern und sie ermutigen kann, mehr zu erkunden.

Mit Elementor ist es einfach, WordPress eine Lesefortschrittsleiste hinzuzufügen. In diesem Artikel werden wir also eine Schritt-für-Schritt-Anleitung zur Anzeige des Lese-Fortschrittsbalkens in WordPress mit Elementor behandeln.

Vorteile der Anzeige der Leser -Fortschrittsleiste in WordPress

Das Hinzufügen einer Lesebraft zu einer WordPress -Site bietet mehrere Vorteile. Dies verbessert nicht nur die Benutzererfahrung, sondern auch das Engagement. Schauen Sie sich einige wichtige Vorteile des Hinzufügens der Lesefortschrittsleiste in WordPress unten an.

• Verbessert das Engagement des Benutzer

Eine Leseprozessleiste kann die Leser motivieren lassen, indem sie visuell zeigen, wie weit sie durch einen Beitrag übergegangen sind. Dies ermutigt die Benutzer, weiter zu lesen, insbesondere für langfristige Inhalte. Schauen Sie sich einige kurze Punkte an, um das Engagement des Benutzer auf Ihrer Website zu verbessern.

• Verbessert die Klarheit der Navigation

Bei langen Artikeln oder Tutorials liefert eine Fortschrittsleiste ein klares Hinweis darauf, wie viel Inhalt verbleibt. Dies hilft den Benutzern, zu erraten, ob sie Zeit haben, um fertig zu werden oder nicht.

• Reduziert die Absprungraten

Durch ein visuelles Hinweis, das Inhalte in eine verfolgbare Reise unterteilt, kann eine Fortschrittsballe lange Beiträge weniger überwältigend erscheinen lassen. Dies kann die Sprungraten bemerkenswert senken. Hier ist ein Leitfaden, wie Sie die Absprungrate für WordPress reduzieren können.

• Verbessert die ästhetische Anziehungskraft

Eine gut konzipierte Fortschrittsleiste verleiht Ihrer Website eine moderne Anziehungskraft. Sie können das Erscheinungsbild der Leseprogressleiste an das Branding Ihrer Website anpassen, um ein poliertes Aussehen zu erstellen.

• Unterstützt mobile Benutzerfreundlichkeit

Auf mobilen Geräten, bei denen sich das Scrollen endlos anfühlen kann, vermittelt eine Fortschrittsleiste ein Gefühl der Kontrolle und des Kontextes. Es versichert den Benutzern, dass sie durch den Beitrag oder die Seite Fortschritte machen.

So zeigen Sie die Lesevorlaufleiste in WordPress mit Elementor an

In diesem Schritt-für-Schritt-Tutorial führen wir Sie durch das Hinzufügen und Anpassung einer Lesevorlaufleiste auf Ihrer WordPress-Site mit Elementor und der kostenlosen Version von Happyaddons. Aber Sie mögen fragen - warum Happyaddons und was ist das ?

Tatsächlich ist Happyaddons ein bekanntes Addon des Elementor-Plugins. Es verfügt über viele einfallsreiche Funktionen und Widgets, um die Grenzen des Elementors zu überwinden. Die Leseprozessleiste ist eine der. Und die gute Nachricht ist, dass die Funktion des Lesevorlaufs völlig kostenlos zu verwenden ist.

Voraussetzungen für das Hinzufügen von Lesefortschrittsbalken

• Elementor
• Happyaddons

Stellen Sie sicher, dass die Plugins auf Ihrer Website installiert und aktiviert sind. Sobald sie auf Ihrer Website fertig sind, folgen Sie den Schritten im folgenden Tutorial.

Schritt 01: Aktivieren Sie die Funktion des Lesevorlaufleistens

Gehen Sie zu Ihrem WordPress -Dashboard und navigieren Sie zu Happyaddons> Funktionen .

Wenn Sie zur Seite der Funktionen kommen, suchen Sie die Option Leseprogress -Messleiste . Schalten Sie weiter , um die Funktion zu aktivieren.

Schritt 02: Öffnen Sie eine Seite mit Elementor

Öffnen Sie nun eine Seite mit Elementor.

Schritt 03: Gehen Sie zu den Site -Einstellungen des Elementors

Klicken Sie in der oberen linken Ecke des Elementor-Panels auf das Hamburger-Symbol .

Gehen Sie zur Option Site -Einstellungen , indem Sie darauf klicken.

Suchen Sie durch Scrollen des Elementor -Panels die Lesevorlaufleiste und klicken Sie darauf .

Schalten Sie weiter , um die Option Leseforschungsleiste zu aktivieren .

Schritt 04: Konfigurieren Sie die Option Leseprogressleisten

Sobald Sie die Option Lese Progress -Bar aktiviert haben, erhalten Sie zahlreiche Optionen, um die Funktion zu konfigurieren.

# Wählen Sie, wo die Fortschrittsleiste angezeigt werden soll

Sie können die Fortschrittsleiste auf Ihrer Website anzeigen, was bedeutet, dass alle Beiträge und Seiten. Oder Sie können es selektiv anzeigen.

Wenn Sie es sowohl auf Posts als auch auf Seiten anzeigen möchten, wählen Sie sie im Feld neben dem Anzeigen aus.

# Wählen Sie einen Fortschrittsbalken -Typ aus

Mit Happyaddons können Sie aus drei Arten von Fortschrittsbalken auswählen - horizontal, vertikal und Kreis . Wählen Sie also eine davon aus, klicken Sie auf die Dropdown -Option neben dem Typ .

Sie werden die Optionen sehen. Wählen Sie einen gewünschten Typ. Für das Tutorial gehen wir mit dem horizontalen Typ.

# Wählen Sie eine Position für die Fortschrittsleiste aus

Sie können die Fortschrittsleiste entweder oben oder unten anzeigen. Wählen Sie also aus, wo Sie es von der Positionsoption daneben anzeigen möchten .

Während wir die Seite gescrollt haben, können Sie sehen, dass eine Fortschrittsleiste oben auf der Seite angezeigt wird.

# Die Fortschrittsleiste stylieren

Aus demselben Elementor -Panel können Sie die Höhe, die Farbe der Fortschrittsbalken, die Hintergrundfarbe und die prozentuale Tooltip der Feature Progress -Balken anpassen.

Ich hoffe, Sie können diese Anpassung selbst durchführen.

Schritt 05: Vorschau der Fortschrittsleiste

Sobald Sie fertig sind, gehen Sie an die Frontend Ihrer Website. Überprüfen Sie, ob die Fortschrittsleiste gut funktioniert oder nicht, indem Sie Ihren Bildschirm scrollen.

Daher können Sie die Lesefortschrittsleiste mit den Plugins Elementor und Happyaddons problemlos in WordPress hinzufügen.

Wie die vertikale Fortschrittsleiste aussieht

Oben haben wir Ihnen den Prozess der Erstellung einer horizontalen Fortschrittsleiste gezeigt. Auf die gleiche Weise können Sie die vertikale Fortschrittsleiste auf Ihrer Website aktivieren und anzeigen. Sobald Sie es aktiviert haben, sieht die Fortschrittsleiste so aus wie die in dem unten angehängten Video.

Wie der Circle Progress Bar aussieht

Nach dem gleichen Vorgang können Sie die Kreisfortschrittsleiste auf Ihrer WordPress -Site erneut anzeigen und seine Stylisierung und Einstellungen konfigurieren. Sie können sich ansehen, wie es auf dem Frontend aus dem unten angehängten Video aussieht. Die Circle Progress-Leiste erscheint in der oberen rechten Ecke.

Was können Sie noch mit Happyaddons machen?

Sobald Sie Happyaddons haben, können Sie nicht nur die Mängel von Elementor überwinden, sondern auch viele weitere aufregende Funktionen und Widgets genießen. Schauen Sie sich an, was Sie mit dem Happyaddons -Plugin mehr machen können.

A. Verwenden Sie einen Themenbauer

Mit Happyaddons 'Theme Builder können Sie alle Aspekte der Vorlagen -Teile Ihrer WordPress -Site anpassen, einschließlich Header, Fußzeilen, Einzelseiten, einzelne Beiträge und Archivseiten. Die gute Nachricht ist, dass die Feature Builder -Funktion vollständig kostenlos zu verwenden ist, was eine Premium -Funktion in Elementor ist. Überprüfen Sie, wie Sie auf Happyaddons Theme Builder zugreifen.

B. Verbesserung von WooCommerce -Websites

Happyaddons Pro bietet eine leistungsstarke Reihe von WooCommerce -Widgets, um das Design und die Funktionalität Ihres E -Commerce -Store zu verbessern. WooCommerce -Widgets, die Happyaddons anbieten, sind Produktgitter, Produktkarousel, Produktkategorie, Produktkategorie Karussell, Single -Produkt, Mini -Karren, Karren, Kasse und Versandbar.

C. Kreative Inhalte erstellen

Happyaddons bietet über 130 Widgets und zwei Dutzend aufregende Funktionen, um eine Website sehr aufregend zu machen. Mit ihnen können Sie wertvolle Informationen auf Ihrer Website auf äußerst kreative Weise hervorheben, die für die Benutzer sowohl gut als auch ansprechend aussieht.

D. Erstellen Sie Infografik -Beiträge/Seiten

Happyaddons ermöglicht die Erstellung visuell ansprechender Posts und Seiten im Infografik-Stil und Seiten mit Widgets wie Balkendiagramm, Skill-Bar, interaktiven Diagrammen und Post-Grid. Infolgedessen können Sie Vergleiche wie Verkaufs- oder Umfrageergebnisse mit anpassbaren Farben und Etiketten anzeigen. Erfahren Sie, wie Sie eine Infografik -Webseite mit Elementor erstellen.

e. Cross-Domain-Kopierpaste

Mit der Funktion Cross-Domain Copy Paste in Happyaddons Pro können Sie Widgets, Abschnitte oder ganze Seiten von einer Domäne kopieren und in eine andere einfügen, wobei alle Stile und Einstellungen beibehalten werden. Dies ist eine Zeitspanne für Entwickler oder Agenturen, die mehrere Websites verwalten.

Zusätzlich zu all diesen haben Sie eine einfallsreiche Vorlagenbibliothek, einen Live -Chat, eine umfassende Dokumentation und eine YouTube -Tutorial -Playlist, um Ihre Webdesign -Reise mit Happyaddons äußerst angenehm zu machen.

Letzte Gedanken!

Ich hoffe, Sie haben dieses Tutorial genossen. Auf unserer Website haben wir ständig mehr und mehr auf Tutorial basierende Blog-Beiträge geschrieben, um Ihre No-Code-Webdesign-Reise hilfreicher und effizienter zu gestalten. Während Sie den gesamten Beitrag gelesen haben, haben Sie offensichtlich eine Vorstellung davon, was Sie mit dem Happyaddons -Plugin mehr machen können.

Wenn Sie sowohl Elementor als auch Happyaddons auf Ihrer Website haben, können Sie echte Magie machen. Sie können Bewertungen über HappyAddons auf WordPress.org und anderen Bewertungsseiten überprüfen, um zu untersuchen, wie sehr unsere Benutzer zufrieden sind. Wenn Sie Fragen im Sinn haben, können Sie nach unten einen Kommentar hinterlassen oder unser Support -Chat -Box klopfen.