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.

    tutorial pasek postępu 01

  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.

    tutorial pasek postępu 02

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

    tutorial pasek postępu 03

  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.

    tutorial pasek postępu 04

  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.

(wideo w języku angielskim)

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.

    tutorial pasek postępu 05

  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.

    tutorial pasek postępu 06

  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.

    tutorial pasek postępu 07

  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.

(wiedo w języku angielskim)

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.

Jeśli znalazłeś błąd ortograficzny, prosimy o poinformowanie nas o tym, wybierając odpowiedni fragment tekstu i naciskając Ctrl + Enter .

Zgłoś błąd w pisowni

Poniższy tekst zostanie przesłany do naszej redakcji: