{"id":17308,"date":"2019-02-06T15:57:40","date_gmt":"2019-02-06T15:57:40","guid":{"rendered":"https:\/\/www.templatemonster.com\/de\/blog\/?p=17308"},"modified":"2020-03-31T08:57:25","modified_gmt":"2020-03-31T08:57:25","slug":"tutorial-fortschrittsanzeige-mit-elementor-einfach-gemacht","status":"publish","type":"post","link":"https:\/\/monsterspost.com\/de\/tutorial-fortschrittsanzeige-mit-elementor-einfach-gemacht\/","title":{"rendered":"Tutorial: Fortschrittsanzeige mit Elementor einfach gemacht"},"content":{"rendered":"

In dieser Anleitung zeigen wir Schritt f\u00fcr Schritt, wie du Fortschrittsbalken f\u00fcr deine Website in Elementor im Handumdrehen erstellst.<\/p>\n

Wom\u00f6glich hast du schon deine eigene Website mit WordPress verwirklicht, Seiten mit hochwertigen Inhalten bef\u00fcllt und das sch\u00f6nste Design f\u00fcr dein Webprojekt ausgew\u00e4hlt. Aber ohne eine Fortschrittsanzeige scheint dir das Bild nicht nicht vollst\u00e4ndig zu sein. Dieses kleine Ding l\u00e4sst  dich nicht los. Und d<\/span>u m\u00f6chtest wissen, wie ein <\/span>Fortschrittsbalken<\/span> und eine ringf\u00f6rmige Progress Bar zu deiner Website hinzugef\u00fcgt werden k\u00f6nnen.  <\/span><\/p>\n

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\u00e4higen <\/span>JetElements-Plugin<\/span> gelingt es dir in Elementor sehr leicht. Das Elementor-Addon bietet eine F\u00fclle von n\u00fctzlichen Widgets, einschlie\u00dflich eine Progress Bar. Also, bevor wir losgehen, sollst du sicherstellen, dass dieses Plugin auf deiner WordPress-Website installiert ist.<\/span><\/p>\n

Fortschrittsbalken<\/h3>\n

1. \u00d6ffne 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. <\/span><\/p>\n

\"\"<\/p>\n

2. Klicke dieses Widget an und ziehe es in den neuen Abschnitt.<\/p>\n

3. Jetzt ist das Basis-Design zu sehen, das du bearbeiten kannst.<\/span><\/p>\n

4. Einstellungen f\u00fcr eine Progress Bar befinden sich links  im Tab \u201cContent\u201d.<\/span><\/p>\n

\"\"<\/p>\n

5. In der Dropdown-Liste \u201cType\u201d kannst du eine gew\u00fcnschte Voreinstellung ausw\u00e4hlen.<\/span><\/p>\n

\"\"<\/p>\n

6. Dann schreib den Titel hinein und w\u00e4hle ein Icon. Au\u00dferdem kannst du f\u00fcr den angezeigten Fortschritt den Prozentsatz einstellen.<\/span><\/p>\n

7. Im n\u00e4chsten Schritt legst du Stil-Einstellungen fest.<\/span><\/p>\n

\"\"<\/p>\n

8. Im ersten Block l\u00e4sst sich die H\u00f6he des Fortschritts, der Hintergrund, Rahmen sowie der Stil der Statusleiste \u00e4ndern.<\/span><\/p>\n

9. Der n\u00e4chste Block enth\u00e4lt Optionen zur Titel-Anpassung. Du kannst den Titel beliebig positionieren, das Icon sowie die Typografie-Einstellungen \u00e4ndern.<\/span><\/p>\n

10. Der letzte Block hilft dir, den Prozentsatzzu gestalten: Du kannst Position, Hintergrund, Body Type, Innen- und Au\u00dfenabstand, Rahmen, Typografie, Textfarbe und Schriftgr\u00f6\u00dfe einstellen.<\/span><\/p>\n

11. Nun ist dein Fortschrittsbalken fertig. <\/span><\/p>\n