Zazwyczaj na początku każdego roku pojawiają się na Facebooku grupy „Przeczytam 52 książki do końca roku”, „Napiszę 52 wpisy do grudnia 2016” itp. To bardzo ciekawa forma motywacji, ale jeśli prowadzisz własną stronę i chciałbyś aby Twoje zobowiązanie miało wymiar bardziej społeczny, wtedy warto skorzystać z wtyczki umieszczającej w bocznej kolumnie pasek postępu. Dzięki temu rozwiązaniu przyznasz się przed swoimi czytelnikami, że wyznaczasz konkretne cele i dążysz do ich realizacji.

Na kilku blogach widziałem ostatnio na bocznej kolumnie pasek postępu z krótką informacją o celu. Zastosowań jest wiele, można tam umieścić aktualizowany co pewien czas pasek zbiórki na jakiś konkretny cel, ilość przeczytanych książek lub napisanych artykułów. A może popuścisz wodzę fantazji i stworzysz na blogu wzorem najlepszych mechanizmów grywalizacji system nagradzania czytelników po osiągnięciu określonego celu np. darmowymi materiałami?

Wtyczka po instalacji może wyglądać w ten sposób:

Na samym początku przejdź do sekcji Wtyczki -> Dodaj nową i wpisz w wyszukiwarce nazwę Progress Bar. Zainstaluj i aktywuj wtyczkę.

Krok 2 – umieszczenie elementu na witrynie

Po aktywacji wtyczki przejdź do sekcji Wygląd -> Widgety i przeciągnij widget Progress Bar z lewej strony na prawą do wybranej przez Ciebie przestrzeni. Teraz już wystarczy, że zmienisz nazwę wtyczki i gotowe.

Krok 3 – kilka propozycji wyglądu paska postępu

Jak widzieliście na powyższej prezentacji pasek postępu stworzony na szybko przy pomocy widgetu nie prezentuje się wyjątkowo okazale. Wypadałoby coś tam zmienić tak aby nadać spersonalizowany wygląd do tego elementu witryny.

Po wnikliwym przeczytaniu dokumentacji dowiesz się, że nie trzeba wcale używać dedykowanego widgetu, aby wyświetlić na stronie pasek postępu. Co więcej – bardziej się opłaca skorzystać z innego sposobu jego dodawania.

Zobacz jakiego:

Skoro już wiesz, że widget tekstowy może być nośnikiem paska postępu – zachęcam Cię do eksperymentowania. Masz możliwość modyfikacji wyglądu shortcodu oraz umieścić ich dowolną ilość. Poniżej przedstawiam kilka złożonych konstrukcji (gotowych do wklejenia do widgetu tekstowego) oraz zrzuty ekranu pokazujące jak wyglądają:

Propozycja 1

[wppb progress=67 fullwidth=true percent=inside color=#ff2222 endcolor=#d62525]
<p>Wkrótce dowiesz się więcej!</p>

Propozycja 2

[wppb progress=26 fullwidth=true percent=inside color=#bd12c8 gradient=0.5  text="13/52"]
<p><a href="#">Chcesz dołączyć do akcji? Kliknij tutaj »</a></p>

Oczywiście zamiast # powinieneś wpisać link do strony, która zawiera więcej informacji o akcji, którą planujesz.

Propozycja 3

[wppb progress=95 fullwidth=true percent=inside color=#0da8f0 endcolor=#1fb5fb text="Zostało tylko 5%"]
<p>Jesteście świetni! Proszę o więcej :)</p>