Dodawanie licznika kołowego.

Otrzymujesz animowany pierścień, który wypełnia się, pokazując jedną kluczową liczbę, na przykład wskaźnik albo wynik. Użyj go, aby wyeksponować statystykę na stronie docelowej albo na stronie o firmie.

Dodaj licznik kołowy

Otwórz swoją stronę po zalogowaniu: przyciski kreatora pojawiają się po najechaniu na obszar treści. Twoja pierwsza strona przedstawia podstawy.

1. Najedź na kolumnę i kliknij + na jej pasku sterowania albo kliknij Add Elements na pustej stronie. Otwórz zakładkę Treść i kliknij licznik kołowy. Licznik pojawi się na górze kolumny i otworzy się okno ustawień.
2. Przeciągnij suwak Percent, aby ustawić stopień wypełnienia pierścienia, albo wpisz wartość w polu obok. Tutaj ustawiamy 78.
3. Kolor łuku wybierz w polu Foreground color.
4. Otwórz sekcję Circle content i wpisz etykietę w polu Text dla metryki.
5. W polu Icon poniżej wpisz chart w polu Search i kliknij ikonę w siatce.
6. Kliknij Zapisz w oknie dialogowym. Następnie kliknij Zapisz na pasku narzędzi u góry obszaru treści, aby zapisać stronę.

Co widzisz

Pierścień wypełnia się do ustawionego procentu, a w środku widać twoją ikonę i etykietę. Na filmie jest fioletowy, wypełniony w 78 procentach i opatrzony napisem Renewal rate. Pierścień animuje się, gdy przewinie się do widoku. Odwiedzający zobaczą go po zapisaniu i opublikowaniu strony.

Skonfiguruj licznik kołowy

Najedź na element i otwórz More > Settings na jego pasku sterowania. Opcje:

• Percent: stopień wypełnienia pierścienia, od 0 do 100.
• Dimension: rozmiar koła w pikselach, od 100 do 500.
• Foreground color: kolor wypełnionego łuku.
• Background color: kolor pustego toru.
• Fill color: kolor wewnątrz koła.
• Foreground width: grubość łuku.
• Animation: wypełnia łuk od zera. Pola Animation duration i Animation delay ustawiają czas w milisekundach.
• Animation in-viewport: czeka z animacją, aż koło przewinie się do widoku.

Każdy suwak ma obok pole liczbowe do dokładnych wartości. Sekcja Circle content określa, co widać w środku:

• Show progress: pokazuje liczbę procentów zamiast własnego tekstu i ikony. Domyślnie wyłączone.
• Text: krótka etykieta. Pola Font size i Text color nadają jej styl.
• Info: mniejszy drugi wiersz pod tekstem.
• Icon: ikona przed tekstem. Lista obok pola Search ogranicza siatkę do jednego zestawu ikon. Pola Icon size i Icon color nadają jej styl.

Jeśli go nie widać

• Licznik kołowy nie występuje w zakładce Treść. Twój profil użytkownika go ukrywa. Poproś administratora o włączenie go na stronie Profile użytkowników.
• Zniknął po przeładowaniu. Strona nie została zapisana. Dodaj go ponownie i kliknij Zapisz na pasku narzędzi u góry obszaru treści.
• Pierścień jest blady albo go nie widać. Foreground color i Background color są zbyt zbliżone do koloru strony. Najedź na element i otwórz More > Settings, a następnie wybierz kolory o większym kontraście.
• Pierścień się nie animuje. Animation jest wyłączona albo pierścień czeka, aż przewinie się do widoku. Włącz opcję Animation i przewiń koło do widoku.
• Nie widać twojego tekstu ani ikony. Show progress jest włączony, więc pierścień pokazuje procent. Wyłącz opcję Show progress w sekcji Circle content.

Co dalej?

Panel Styl, aby zmienić odstępy i tło licznika kołowego.