So fügen Sie einen Fortschrittsbalken in Ihre WordPress-Beiträge ein (Der einfache Weg)

Ganz gleich, ob Sie Ihre Spendenziele oder Projektmeilensteine auf Ihrer Website präsentieren möchten, ein Fortschrittsbalken kann Ihre WordPress-Beiträge von langweilig in dynamisch verwandeln.

Wir wissen, dass das Hinzufügen visueller Elemente wie Fortschrittsbalken zu Ihrer WordPress-Website entmutigend wirken kann, vor allem, wenn Sie technisch nicht versiert sind. Aber zum Glück brauchen Sie keine Programmierkenntnisse oder teure Plugins, um dies zu realisieren.

In dieser Anleitung zeigen wir Ihnen, wie Sie ganz einfach Fortschrittsbalken zu Ihren WordPress Beiträgen hinzufügen können.

Wann Sie einen Fortschrittsbalken in Ihre WordPress-Beiträge einfügen sollten

Es gibt mehrere Szenarien, in denen das Hinzufügen eines Fortschrittsbalkens Ihre WordPress-Blogbeiträge verbessern und wirkungsvoller machen kann.

Fortschrittsbalken eignen sich beispielsweise hervorragend zur Anzeige des Status der Projektfertigstellung.

Wenn Sie einen Blog betreiben, in dem Sie langfristige Projekte dokumentieren, können Sie Ihren Besuchern durch das Hinzufügen von Fortschrittsbalken einen schnellen visuellen Überblick über den Stand der Dinge verschaffen.

Fundraising-Kampagnen auf Ihrer WordPress Website können auch sehr von Fortschrittsbalken profitieren. Sie bieten eine unmittelbare visuelle Darstellung, wie nahe Sie Ihrem Ziel sind, was mehr Spenden anregen kann.

Bei Bildungsinhalten können Fortschrittsbalken die Meilensteine des Lernens oder die Komplexität der verschiedenen Themen veranschaulichen. Auf diese Weise können die Besucher den Schwierigkeitsgrad der verschiedenen Themen erkennen, die Sie in Ihren Beiträgen behandeln.

Wenn sich Ihre Website auf Fitness- oder Gesundheitsthemen konzentriert, können Fortschrittsbalken verwendet werden, um die Trainingsintensität, Ernährungsinformationen oder den Fortschritt bei der Erreichung von Gesundheitszielen anzuzeigen.

Darüber hinaus kann das Hinzufügen eines Fortschrittsbalkens zu Beiträgen über Statistiken oder Befragungen die Daten verständlicher und ansprechender machen. Anstatt nur Prozentsätze aufzulisten, können Sie die Daten mit farbigen Fortschrittsbalken visuell darstellen.

Aus diesem Grund haben wir 2 einfache Methoden entwickelt, um einen Fortschrittsbalken in Ihre WordPress-Website einzufügen. Sie können die unten stehenden Links verwenden, um zu Ihrer bevorzugten Methode zu gelangen:

Methode 1: Hinzufügen eines Fortschrittsbalkens mit einem Page-Builder (besser anpassbar)

Eine effektive Möglichkeit, Ihrer WordPress Website eine Fortschrittsleiste hinzuzufügen, ist die Verwendung eines Page-Builders mit einer integrierten Funktion für Fortschrittsleisten. Auf diese Weise wird sichergestellt, dass sich der Fortschrittsbalken nahtlos in das Gesamtdesign Ihres Themes einfügt.

Für diese Methode verwenden wir Thrive Architect, einen leistungsstarken Page-Builder, der viele verschiedene Themes-Templates und eine benutzerfreundliche Drag-and-drop-Schnittstelle bietet. Es ist eine ausgezeichnete Wahl für Anfänger und erfahrene Benutzer gleichermaßen, die ihre WordPress-Website individuell anpassen möchten.

Bedenken Sie jedoch, dass Sie bei dieser Methode Ihr Theme ändern müssen. Wenn Sie mit Ihrem aktuellen Theme zufrieden sind und nicht wechseln möchten, sollten Sie stattdessen unsere zweite Methode vorziehen.

Außerdem hat Thrive Architect keine kostenlose Version. Das heißt, Sie können unseren Thrive Themes-Gutscheincode verwenden, um bis zu 50% Rabatt auf Ihren ersten Kauf zu erhalten.

Mehr über die Plattform erfahren Sie in unserem Thrive Architect Testbericht.

Schritt 1: Installieren des Thrive Theme Builders

Um loszulegen, müssen Sie Thrive Architect einrichten. Melden Sie sich zunächst bei Ihrem Thrive Themes Konto an und laden Sie das Thrive Product Manager Plugin herunter.

Danach laden Sie das Thrive Product Manager Plugin herunter und installieren es. Eine Schritt-für-Schritt-Anleitung für die Installation eines WordPress Plugins finden Sie in unserer Anleitung für Einsteiger.

Klicken Sie zu diesem Zeitpunkt in Ihrem WordPress-Administrationsbereich auf Produktmanager .

Sobald Sie dies getan haben, können Sie auf den Button „In mein Konto einloggen“ klicken, um Ihre WordPress Website mit Ihrem Thrive Themes Konto zu verbinden.

Sie sollten nun eine Liste aller verfügbaren Thrive Themes Produkte in Ihrem Konto sehen.

Wählen Sie einfach „Thrive Architect“ und aktivieren Sie die Box „Produkt installieren“.

Danach scrollen wir nach unten zum Abschnitt „Thrive Theme Builder“ und aktivieren die Box „Theme installieren“. Wir müssen dies tun, weil Thrive Architect am besten mit einem Thrive Theme funktioniert.

Klicken Sie dann auf den Button „Ausgewählte Produkte installieren“.

Sie sollten nun sehen, dass der Thrive Product Manager die Thrive Architect und Thrive Theme Builder Plugins einrichtet.

Danach klicken Sie einfach auf „Zum Theme Builder Dashboard“.

An diesem Punkt können Sie einfach loslegen und ein WordPress Theme auswählen.

Sie können auch auf den Button „Vorschau“ klicken, um zu sehen, wie das Theme aussieht, bevor Sie auf „Auswählen“ klicken.

Wenn Sie Ihr Theme eingerichtet haben, sollten Sie nun im Theme Builder Wizard landen.

Dieser Einführungsassistent hilft Ihnen beim Upload Ihres eigenen Logos, bei der Auswahl der Markenfarben, die Sie Ihrem Theme hinzufügen möchten, und bei der Einrichtung der verschiedenen Strukturen und Templates für Ihr Theme.

Schließen Sie einfach das Onboarding ab, damit Sie mit dem nächsten Schritt fortfahren können.

Schritt 2: Fügen Sie einen Fortschrittsbalken zu Ihren WordPress Beiträgen hinzu

Fügen wir nun einen Fortschrittsbalken zu Ihren WordPress Beiträgen hinzu. Öffnen Sie zunächst den Block-Editor für einen neuen Beitrag oder einen bestehenden Beitrag.

Geben Sie dann dort den Titel Ihres neuen Beitrags ein. Klicken Sie anschließend auf den Button „Thrive Architect starten“.

Jetzt können Sie Thrive Architect verwenden, um den Inhalt für Ihren Blogbeitrag zu erstellen. Er funktioniert ähnlich wie der Block-Editor.

Das heißt, Sie können einfach auf den ‚+‘-Button klicken und ein beliebiges Element per Drag-and-drop in den Abschnitt mit der Aufschrift ‚Klicken Sie, um Text hinzuzufügen, oder ziehen Sie ein Element per Drag-and-drop aus dem rechten Bedienfeld‘.

Hier ist ein Beispiel für das Hinzufügen eines Textblocks mit dem Editor:

Das Verfahren zum Hinzufügen eines Fortschrittsbalkens ist im Wesentlichen dasselbe. Klicken Sie einfach erneut auf den „+“-Button und suchen Sie den Block „Fortschrittsbalken“.

Danach fügen Sie es einfach Ihrem Beitrag hinzu.

Danach erscheint ein Popup-Fenster, in dem Sie aufgefordert werden, ein Design für den Fortschrittsbalken auszuwählen.

Es stehen Dutzende zur Auswahl, und Sie können sie bei Bedarf später jederzeit ändern.

Sobald Sie Ihre Wahl getroffen haben, kehren Sie zur Hauptschnittstelle des Editors zurück.

Schritt 3: Individuelles Anpassen des Fortschrittsbalkens

In diesem Stadium sollten Sie auf der linken Seite eine Seitenleiste mit Optionen zur individuellen Anpassung des Fortschrittsbalkens sehen.

Es gibt viele Einstellungen zu konfigurieren, und wir werden die wichtigsten behandeln, um zu zeigen, wie man den Fortschrittsbalken ändern kann.

Im Hauptmenü Optionen können Sie das Design des Fortschrittsbalkens von einem einfachen Balken zu einem mit Knotenpunkten ändern. Knoten sind Symbole, die anzeigen, wo Sie sich im Fortschritt befinden. Wir haben diese Art von Design nur als Beispiel gewählt.

Sie können auch die Position der Beschriftung des Fortschrittsbalkens, die Höhe des Balkens und das aktuelle Niveau des Fortschrittsbalkens ändern.

Im unteren Bereich des Fensters finden Sie Optionen zum Ändern der Knotenbeschriftungen.

Um sie zu ändern, klicken Sie auf das Bleistift-Symbol „Bearbeiten“ neben der Bezeichnung.

Geben Sie nun einfach Ihr neues Etikett ein.

Klicken Sie anschließend auf das Symbol „Speichern“.

Das Tolle an Thrive ist, dass Sie jeden anderen Teil des Fortschrittsbalkens individuell anpassen können, so dass Sie ihn so gestalten können, wie Sie es möchten.

Um diese Optionen zur individuellen Anpassung in Aktion zu sehen, können Sie bei Mauszeigerkontakt auf eines der Elemente im Fortschrittsbalken zeigen und darauf klicken.

Hier haben wir den Teil des Fortschrittsbalkens ausgewählt, der den unvollständigen Fortschritt anzeigt.

In der linken Seitenleiste gibt es jetzt eine Reihe neuer Optionen.

Wenn Sie oben auf das Dropdown-Menü „Aktuelle Gestaltung“ klicken, können Sie bestimmte Teile der Leiste ändern, z. B. die Fortschrittsbeschriftungen, Symbole, Knoten und vieles mehr.

Sehen Sie sich jeden Teil an, um zu sehen, was Sie individuell anpassen können.

Lassen Sie uns einige Beispiele ausprobieren. Um die Animation der Candy Stripes in der Hintergrundleiste zu deaktivieren, wählen Sie im Menü „Aktuelles Styling“ die Option „Gruppierte Linien im Hintergrund“.

Schalten Sie dann den Button „Candy Stripe Animation“ aus.

Wenn Sie die Symbole in den Fortschrittsknoten ändern möchten, wählen Sie im Dropdown-Menü „Aktuelles Styling“ die Option „Fortschrittssymbole“.

Wählen Sie anschließend im Menü „Status“ oben die Option „Normal“.

Sie sollten nun einige Einstellungen sehen, die zum Ändern der Fortschrittsbalken-Symbole dienen.

Klicken Sie hier auf „Symbol ändern“.

Thrive Architect hat in seiner Bibliothek viele Icons für verschiedene Branchen. Stellen Sie jedoch sicher, dass das von Ihnen gewählte Symbol für einen Fortschrittsbalken geeignet ist.

Wenn Sie Ihre Wahl getroffen haben, klicken Sie einfach auf „Auswählen“.

Um den Stil des Symbols zu ändern, klicken Sie einfach auf den Button „Stil ändern“.

Hier sehen Sie einige vorgefertigte Icon-Designs, die Sie auswählen können.

Um das Aussehen der Fortschrittsanzeige zu ändern, wählen Sie die Option „Fortschrittsanzeige“ im Dropdown-Menü „Aktuelle Gestaltung“.

Hier sehen Sie einige Optionen, mit denen Sie die Farbe, Hervorhebung, Formatierung usw. des Etiketts individuell anpassen können.

Wenn Sie mit dem Aussehen des Fortschrittsbalkens zufrieden sind, klicken Sie auf „Arbeit speichern“, um Ihre Änderungen zu speichern.

Vergewissern Sie sich, dass Sie Ihren Beitrag auf dem Handy, dem Desktop und dem Tablet in der Vorschau anzeigen, damit alles gut aussieht.

So sieht unsere Website auf unserer Demo-Website aus:

Alternative: Einen kreisförmigen Fortschrittsbalken hinzufügen

Thrive Architect hat auch eine andere Art von Fortschrittsbalken in seiner Blocksammlung, den Füllungszähler. Der Fill Counter-Block sieht aus wie ein kreisförmiger Fortschrittsbalken, der sich hervorragend für die Anzeige von Statistiken eignet.

Um es hinzuzufügen, klicken Sie einfach auf den Button „+“ in der rechten Seitenleiste und suchen Sie das Element „Zähler ausfüllen“. Ziehen Sie es dann per Drag-and-drop an eine beliebige Stelle des Beitrags.

Nach dem Hinzufügen sehen Sie einige Optionen, mit denen Sie den Füllungszähler individuell anpassen können.

Sie können vor allem die Größe des Füllungszählers, den Füllungsprozentsatz und die Farben ändern und festlegen, ob der Prozentwert mit dem im Zähler angezeigten Wert übereinstimmen soll.

Sie können auch auf die Zahl innerhalb des Füllungszählers klicken, um sein Aussehen zu ändern.

Sie können die Farben, die Schriftart, die Sichtbarkeit auf verschiedenen Geräten und vieles mehr ändern.

Wenn Sie den Text unter der Prozentangabe ändern möchten, klicken Sie einfach auf den Text selbst.

Danach können Sie eine Beschreibung für den Füllungszähler eingeben.

Vergessen Sie nicht, Ihre Arbeit zu speichern, wenn Sie fertig sind.

Alternativ: Sie sind kein Fan von Thrive Architect? SeedProd Page-Builder hat auch einen Fortschrittsbalken-Block, den Sie zu Ihrem Theme oder individuellen Seiten hinzufügen können.

Weitere Informationen zur Verwendung von SeedProd finden Sie in unserer Anleitung zum Erstellen eines individuellen WordPress Themes.

Methode 2: Verwenden Sie ein kostenloses Plugin für den Fortschrittsbalken (schnell und einfach)

Diese Methode ist am besten geeignet, wenn Sie keinen Page-Builder verwenden möchten und nur ein einfaches und kostenloses WordPress Plugin für Fortschrittsbalken benötigen.

Hierfür verwenden wir das kostenlose Ultimate Blocks Plugin, das Ihrem WordPress Editor eine Menge zusätzlicher Gutenberg-Blöcke hinzufügt.

Das Tolle an diesem Plugin ist, dass der Fortschrittsbalken-Block kostenlos verfügbar ist. Sie können jedoch auf die Pro-Version des Plugins upgraden, um mehr Gutenberg-Blöcke und Optionen für die individuelle Anpassung zu erhalten.

Mehr über das Plugin erfahren Sie in unserem Testbericht über Ultimate Blocks.

Installieren und aktivieren Sie zunächst das WordPress Plugin auf Ihrer Website. Danach können Sie den Block-Editor öffnen, um einen neuen Beitrag zu erstellen oder einen bestehenden Beitrag zu bearbeiten.

Klicken Sie nun irgendwo auf der Seite auf den Button „+“ und wählen Sie den Block „Fortschrittsbalken“.

Sie haben nun erfolgreich einen Fortschrittsbalken-Block zu Ihrem veröffentlichten Beitrag hinzugefügt. Nun können Sie ihn individuell an Ihre Bedürfnisse anpassen.

In der Seitenleiste der Blockeinstellungen auf der rechten Seite sehen Sie einige Optionen zur individuellen Anpassung. Auf dem Tab „Allgemein“ können Sie die prozentuale Position des Fortschrittsbalkens von oben nach innen oder unten ändern.

Sie können auch das „Stripe“-Design deaktivieren oder aktivieren und den Wert für den aktuellen Fortschritt ändern.

Anschließend können Sie die Nummerneinstellungen individuell anpassen.

Wir haben uns dafür entschieden, die Prozentzahl nicht anzuzeigen, weil wir sie für unser Beispiel nicht für nützlich halten.

Wenn Sie sich jedoch für die Anzeige entscheiden, können Sie das Zahlenpräfix (ein Symbol, das vor der Zahl erscheint, wie ein Minuszeichen) und das Zahlensuffix (ein Symbol, das nach der Zahl erscheint, wie ein Währungszeichen) ändern.

Als Nächstes ist die responsive Steuerung dran.

Da Fortschrittsbalken etwas Platz in Ihrem Beitrag einnehmen können, möchten Sie sie vielleicht ausblenden, wenn der Beitrag von einer kleineren Ansicht aus angezeigt wird, z. B. auf einem Tablet oder einem mobilen Gerät.

Möchten Sie den Fortschrittsbalken interaktiver gestalten? Dann sollten Sie eine Eingangsanimation hinzufügen. Wenn Sie diese Funktion aktivieren, wird der Fortschrittsbalken mit einem animierten Effekt angezeigt, wenn der Betrachter nach unten scrollt.

Sie können auch einen Animationsstil wählen und die Verzögerungszeit einstellen, damit der Fortschrittsbalken zum richtigen Zeitpunkt erscheint.

Wechseln wir zum Tab ‚Stil‘, auf dem Sie das Design des Fortschrittsbalkens individuell anpassen können.

Oben können Sie das Design der Fortschrittsleiste von einer Linie in einen Kreis oder einen Halbkreis ändern. Sie können auch einen Eckenradius zum Design des Balkens hinzufügen, damit er eher kreisförmig als rechteckig und scharf aussieht.

Hier haben wir uns entschieden, den Fortschrittsbalken der Zeile oben zu halten.

Aber so sehen die kreisförmigen und halbkreisförmigen Fortschrittsbalken aus:

Wenn Sie nach unten blättern, können Sie die Dicke des Fortschrittsbalkens ändern, damit er noch mehr hervorsticht.

Vielleicht möchten Sie auch die Farbe des Fortschrittsbalkens, des Hintergrundbalkens und der Beschriftung des Fortschrittsbalkens an das Design Ihrer Website anpassen.

Ein weiteres Element, das Sie ändern können, ist der Innenabstand und Außenabstand des Fortschrittsbalkens.

Beide Einstellungen steuern im Wesentlichen den Abstand zwischen dem Fortschrittsbalken und den anderen ihn umgebenden Blöcken.

Sie können den Wert für beide Blöcke erhöhen, wenn Sie nicht wollen, dass der Fortschrittsbalken zu nah an den anderen Blöcken über oder unter ihm liegt.

Als Nächstes sollten Sie den Fortschrittsbalken mit einem Etikett oder einer Beschreibung versehen, damit die Besucher mehr Kontext aus dem Bildmaterial ziehen können.

Geben Sie über dem Fortschrittsbalken einfach einen Text ein. Sie können auch die Ausrichtung und den Stil des Textes mit Hilfe der Einstellungen in der Werkzeugleiste des Blocks ändern.

Wenn Sie mit dem Aussehen des Fortschrittsbalkens zufrieden sind, klicken Sie im Block-Editor einfach auf „Veröffentlichen“ oder „Aktualisieren“.

Sie können den Beitrag auch auf dem Handy, dem Desktop und dem Tablet anzeigen lassen, um sicherzustellen, dass der Fortschrittsbalken auf allen Geräten richtig aussieht.

Das war’s! Sie haben erfolgreich einen Fortschrittsbalken zu Ihren WordPress Beiträgen hinzugefügt.

So sieht unser Fortschrittsbalken auf unserer Demo-Website aus:

Bonus-Design-Elemente für Ihre WordPress Website

Möchten Sie Ihrer WordPress-Website weitere visuelle Elemente hinzufügen? Schauen Sie sich einfach die folgenden Artikel an:

• Hinzufügen von Initialen in WordPress-Beiträgen
• Wie man ein Countdown-Timer-Widget in WordPress einfügt
• Wie man in WordPress einen Nachrichtenticker einrichtet
• Wie man einen animierten Hintergrund in WordPress einfügt
• Wie man in WordPress eine Animation zum Zählen von Zahlen anzeigt
• Möglichkeiten, Halloween-Effekte auf Ihre WordPress Website zu bringen
• Wie man rotierende Testimonials in WordPress hinzufügt
• Hinzufügen von Funktionen Boxen mit Symbolen in WordPress
• Wie man YouTube Videos als Vollbild-Hintergrund in WordPress einfügt

Wir hoffen, dass diese Anleitung Ihnen geholfen hat zu lernen, wie Sie einen Fortschrittsbalken zu Ihren WordPress Beiträgen hinzufügen können. Sehen Sie sich auch unsere Auswahl der besten WordPress Themes und unseren Leitfaden zum Bearbeiten einer WordPress-Website an.

Wenn Ihnen dieser Artikel gefallen hat, dann abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Videotutorials. Sie können uns auch auf Twitter und Facebook finden.