Tutorial: Jak dodać prostokątny lub okrągły pasek postępu w Elementor

Więc, masz już własną stronę na WordPress, dostosowałeś jej projekt i dodałeś zawartość. I tutaj, na jednym małym momencie, utknąłeś. Jak dodać prostokątny lub okrągły pasek postępu?

W tym tutorial pokeżę Ci jak stworzyć te niezbędne elementy w ciągu zaledwie 5 minut. Jest to bardzo łatwe do zrobienia w edytorze stron Elementor z pomocą wtyczki JetElements. To rozszerzenie do Elementora oferuje wiele przydatnych widżetów, w tym dwa widżety, których będziemy potrzebowali dzisiaj. Zanim zaczniesz, upewnij się, że masz zainstalowaną tą wtyczkę.

Prostokątny pasek postępu

1. Otwórz kreator stron Elementor iw panelu Elementy znajdź widżetu Progress bar. Zwróć uwagę, że zobaczysz dwa widżety o nazwie Progress bar - jeden z nich jest domyślnym widżetem kreatora Elementor, a drugi, którego właśnie będziesz potrzebował, różni się od niego zdjęciem.

   
   
2. Upuść ten widżet do nowej sekcji.
3. Zobaczyć wstępnie zaprojetowany element, z którym można pracować.
4. Po lewej stronie zobaczysz ustawienia Treść > Pasek postępu.

   
   
5. W menu rozwijanym Typ można wybrać żądane ustawienie.

   
   
6. Następnie wpisz tytuł i wybierz ikonę. Można także ustawić wartość procentową, która zostanie wyświetlana na pasku postępu.
7. Dlaej przejdź do Ustawień stylu.

   
   
8. W pierwszym bloku można zmienić wysokość paska postępu, typ tła, rodzaj obramowania i styl paska stanu postępu.
9. Następny blok pozwala na dostosowanie wyglądu tytułu. Można umieścić tytuł w dowolnym miejscu, zmienić jego wygląd i dodać ustawienia typografii.
10. Ostatni blok pomaga dostosować styl cyfr: można wybrać ich pozycję, tło, typ ciała, dopełnienie, margines, dodać ustawienia typografii, dostosować kolor tekstu i rozmiar fontu.
11. Gotowe - właśnie stworzyłeś pasek postępu.

Okrągły wskaźnik postępu

1. Otwórz kreator stron Elementor i znajdź widżet Circle progress.
2. Upuść go w nowej sekcji. Po tym zobaczysz wstępnie zaprojektowany element.
3. Po lewej stronie zobaczysz menu z ustawieniami treści.

   
   
4. W pierwszym bloku można ustawić typ wartości, którego użyje okrągły wskaźnik postępu - procent lub wartość bezwzględną.
5. Na karcie Ustawienia można zmienić wygląd samego wskaźnika: rozmiar koła, szerokość obrysu, szerokość obrysu tła, a nawet czas trwania animacji.

   
   
6. Na karcie Zawartość można dodawać lub usuwać przedrostki i przyrostki, pokazywać wartość tysiąca separatorów, dodawać tytuł i podtytuł. Tutaj można także zmienić pozycję procentową - może być wyświetlana wewnątrz lub na zewnątrz koła.
7. W sekcji Styl można dostosować projekt tego elementu.

   
   
8. Na karcie Styl okrąglego wskaźnika postępu znajdują się ustawienia bazowe, takie jak rodzaj i kolor obrysu tła, typ i kolor obrysu, styl zakończenia postępu i cień okręgu koła.
9. Na karcie Styl zawartości znajdują się ustawienia, które można zastosować do treści tego typu paska postępu - wartość postępu, tytuł i podtytuł.
10. Gotowe - proces tworzenia tego elementa został zakończony.

---

Ten artykuł został przetłumaczony z angielskiego. Oryginał można znaleźć tutaj: How to display Progress Bar and Circle Progress with Elementor – Tutorial. 

---

* * *

I to wszystko! Teraz wiesz, jak dodać zwykły lub okrógły pasek postępu na stronę za pomocą wtyczki JetElements. Jesto to bardzo proste, prawda? Jeśli masz jakieś pytania, zostaw je w komentarzach poniżej, a chętnie Ci odpowiem!

Tworzenie responsywnych stron: jakie masz opcje? [Darmowa e-książka]

Klikając przycisk akceptujesz Politykę prywatności i Regulamin korzystania z serwisu TemplateMonster.