Tutorial: Fortschrittsanzeige mit Elementor einfach gemacht

In dieser Anleitung zeigen wir Schritt für Schritt, wie du Fortschrittsbalken für deine Website in Elementor im Handumdrehen erstellst.

Womöglich hast du schon deine eigene Website mit WordPress verwirklicht, Seiten mit hochwertigen Inhalten befüllt und das schönste Design für dein Webprojekt ausgewählt. Aber ohne eine Fortschrittsanzeige scheint dir das Bild nicht nicht vollständig zu sein. Dieses kleine Ding lässt  dich nicht los. Und du möchtest wissen, wie ein Fortschrittsbalken und eine ringförmige Progress Bar zu deiner Website hinzugefügt werden können.  

Geht es um deinen Fall? Dann helfen dir gerne weiter und zeigen, wie du diese Elemente in nur 5 Minuten erstellst. Mit Hilfe vom leistungsfähigen JetElements-Plugin gelingt es dir in Elementor sehr leicht. Das Elementor-Addon bietet eine Fülle von nützlichen Widgets, einschließlich eine Progress Bar. Also, bevor wir losgehen, sollst du sicherstellen, dass dieses Plugin auf deiner WordPress-Website installiert ist.

Fortschrittsbalken

1. Öffne Elementor und finde das Progress Bar-Widget im Elements-Tab. Du entdeckst zwei gleichnamige Widgets - eines davon ist ein Standard-Widget, das Andere, das du gerade brauchst, sieht etwas anders aus. 

2. Klicke dieses Widget an und ziehe es in den neuen Abschnitt.

3. Jetzt ist das Basis-Design zu sehen, das du bearbeiten kannst.

4. Einstellungen für eine Progress Bar befinden sich links  im Tab “Content”.

5. In der Dropdown-Liste “Type” kannst du eine gewünschte Voreinstellung auswählen.

6. Dann schreib den Titel hinein und wähle ein Icon. Außerdem kannst du für den angezeigten Fortschritt den Prozentsatz einstellen.

7. Im nächsten Schritt legst du Stil-Einstellungen fest.

8. Im ersten Block lässt sich die Höhe des Fortschritts, der Hintergrund, Rahmen sowie der Stil der Statusleiste ändern.

9. Der nächste Block enthält Optionen zur Titel-Anpassung. Du kannst den Titel beliebig positionieren, das Icon sowie die Typografie-Einstellungen ändern.

10. Der letzte Block hilft dir, den Prozentsatzzu gestalten: Du kannst Position, Hintergrund, Body Type, Innen- und Außenabstand, Rahmen, Typografie, Textfarbe und Schriftgröße einstellen.

11. Nun ist dein Fortschrittsbalken fertig. 

Ringförmige Progress-Bar

1. Rufe den Elementor Page-Builder auf und finde das Circle Progress-Widget auf dem Panel “Elements”. 

2. Ziehe es in einen neuen Abschnitt, dann siehst du das vorgefertigte Element.

3. Links findest du das Menü mit Einstellungen für “Content”.

4. Im ersten Block sollst du auswählen, die der kreisförmige Fortschrittsbalken angezeigt werden soll - als Prozentzahlen oder als absolute Zahlen.

5. Im Tab “Settings” kannst du das Aussehen des Kreises ändern: Größe, Strichbreite, Strichbreite für den Hintergrund sowie Animationsdauer.

6. Der nächste Schritt ist der Content-Tab. Hier kannst du Präfixe und Suffixe hinzufügen bzw. entfernen,Tausendertrennzeichen anzeigen lassen, Titel und Untertitel hinzufügen. Außerdem ist es möglich,  die Position der Prozente ändern - sie entweder innerhalb oder außerhalb eines Kreises platzieren.

7. Im Abschnitt “Style” lässt sich die Gestaltung dieses Elements editieren.

8. Im Tab “Progress Circle Style” gibt es Grundeinstellungen für Strich, Füllfarbe, Schatten usw.

9. Im Tab “Content Style” befinden sich alle Einstellungen, die für Zahlenwerte, Titel und Untertitel wählbar sind.

Hoffentlich war diese Anleitung hilfreich, und du weißt  jetzt, wie mit dem JetElements-Plugin Fortschrittsbalken und Circle Bars zu Seiten hinzuzufügen ist. Wenn du weitere Fragen hast, schreib diese in Kommentare.

Dieses Tutorial wurde ursprünglich für MonsterPost geschrieben. Der Beitrag auf Englisch ist hier verfügbar.