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
- 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.
- Upuść ten widżet do nowej sekcji.
- Zobaczyć wstępnie zaprojetowany element, z którym można pracować.
- Po lewej stronie zobaczysz ustawienia Treść > Pasek postępu.
- W menu rozwijanym Typ można wybrać żądane ustawienie.
- Następnie wpisz tytuł i wybierz ikonę. Można także ustawić wartość procentową, która zostanie wyświetlana na pasku postępu.
- Dlaej przejdź do Ustawień stylu.
- W pierwszym bloku można zmienić wysokość paska postępu, typ tła, rodzaj obramowania i styl paska stanu postępu.
- 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.
- 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.
- Gotowe - właśnie stworzyłeś pasek postępu.
Okrągły wskaźnik postępu
- Otwórz kreator stron Elementor i znajdź widżet Circle progress.
- Upuść go w nowej sekcji. Po tym zobaczysz wstępnie zaprojektowany element.
- Po lewej stronie zobaczysz menu z ustawieniami treści.
- 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ą.
- 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.
- 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.
- W sekcji Styl można dostosować projekt tego elementu.
- 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.
- 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ł.
- 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.