Masz pytania? Napisz do mnie:

Być może nie raz widziałaś na stronach internetowych elementy, które przedstawiały w ciekawy sposób coś np. osiągnięcia, znajomość czegoś. Były przedstawione za pomocą pasków postępu.

Jest to ciekawsze rozwiązanie przedstawienia jakichś wartości niż po prostu napisanie „cel osiągnięty w 20%” albo „znajomość angielskiego 40%” lub „uzbierano 4000 zł z 5000 zł”.

Paski postępu można również dodać na bloga WordPress albo za pomocą wtyczki, choć jest niewiele to jednak są albo nie aktualizowane dość długo (nawet 8 lat), albo za pomocą htmla i kodu CSS.

Pasek postępu, który uzyskałam za pomocą wtyczki wygląda następująco:

Mało ciekawie, dodatkowo trzeba grzebać w kodzie CSS, aby zmienić kolor postępu.

Lepszy efekt uzyskałam za pomocą htmla i CSS (skoro i tak trzeba by było go zmieniać dla wtyczki, to lepiej napisać własny).

Efekt jaki osiągnęłam:

Dodatkowo nie było żadnego problemu z osadzeniem kodu w widgecie (zielony i zółty pasek), co w przypadku wtyczki, dodanie kodu do sidebara nie wyświetlało paska (trzeba by było instalować kolejną wtyczkę).

Elementy tworzone w html i CSS mają tę zaletę, że bardzo prosto można modyfikować ich wygląd (jak widzisz na screenie wyżej), a także nie wymagają instalowania dodatkowych wtyczek do osadzenia CSS.

 

Czego dowiesz się z kursu online:

Jak dodać pasek postępu za pomocą wtyczki.
Jak dodać pasek postępu we wpisie/stronie za pomocą htmla i CSS.
Jak dodać pasek postępu w widgecie za pomocą htmla i CSS.

Dostęp nielimitowany

Kurs tekstowy + screeny

Dostęp mobilny

Kurs płatny

Program kursu

Pasek postępu - wtyczka wp
Lekcja 1 – Instalacja wtyczki pasek 00:00:00
Lekcja 2 – Ustawienia paska postępu 00:00:00
Lekcja 3 – dodanie paska do wpisu 00:00:00
Pasek postępu - html i CSS
Lekcja 4 – Dodanie html paska do wpisu 00:00:00
Lekcja 5 – Dodanie html paska do widgetu 00:00:00
Lekcja 6 – Kod CSS pasków 00:00:00
WEŹ UDZIAŁ W KURSIE
  • 10,00 
  • Nieograniczony dostęp
1Kursanci uczestniczący

Autorka kursu

Kamila Nitschka
© Copyright by WPpraktycznie.pl 2018 Realizacja: KamilaNitschka
error: Kopiowanie zabronione
0