Utwórz i dostosuj pasek postępu w Elementorze

Paski postępu są efektywnym elementem w projektowaniu stron internetowych, który informuje odwiedzających w atrakcyjny sposób o postępie projektu lub celu. Elementor, jako jedno z najpopularniejszych wtyczek do tworzenia stron dla WordPressa, pozwala na łatwe dodanie paska postępu do Twoich stron internetowych. Ten przewodnik poprowadzi Cię przez poszczególne kroki w celu stworzenia i dostosowania paska postępu w Elementorze.

Najważniejsze informacje

• Paski postępu zapewniają wizualne przedstawienie postępu i celów.
• Możesz dostosować tytuł, wartości i kolory indywidualnie.
• Tekst wewnętrzny może być opcjonalnie wyświetlany lub ukrywany.
• Dostępne są różne style i opcje dostosowywania, aby dopasować pasek do Twojego projektu.

Przewodnik krok po kroku

Najpierw otwórz swoją stronę WordPressa i przejdź do edytora Elementora. Tam możesz dodać nowy element i wybrać pasek postępu.

Teraz jesteś gotowy(-a), aby wprowadzić tytuł swojego paska postępu. Przemyśl odpowiedni tytuł, na przykład "Cel sprzedażowy". To już na początku daje Twoim odwiedzającym pewne pojęcie o przedmiocie.

W kolejnym kroku musisz określić cel lub komunikat sukcesu. Przemyśl, co dokładnie chcesz pokazać i wpisz to w odpowiednie pole. Ten krok pomaga zrozumieć odwiedzającym postęp Twojego paska postępu.

Następnie możesz ustawić kolor paska postępu. To nie jest konieczne, ale to dobry moment na dostosowanie projektu. Możesz wybrać odcień pasujący do reszty swojej strony internetowej.

Następnie przejdź do procentów. Tutaj możesz ustawić swój postęp, na przykład na 40%. Pamiętaj, że maksymalna wartość można ustawić na 100%, a minimalna na 0%. Ta informacja pomaga odwiedzającym szybko ocenić postęp.

Procent może być wyświetlany lub ukryty. Często wygląda atrakcyjniej, gdy tekst jest ukryty, zwłaszcza jeśli preferujesz czysty design. Zastanów się, która wersja jest najlepsza dla Twojego projektu.

Jeśli chcesz, możesz także dodać tekst wewnętrzny zawierający liczby procentowe. Ta funkcja jest szczególnie przydatna, jeśli chcesz pokazać natychmiastowy postęp. Jeśli zdecydujesz się nie dodawać tekstu wewnętrznego, możesz również ukryć liczbę tutaj.

Teraz przejdź do stylu paska postępu. Możesz indywidualnie dostosować kolor paska, kolor tła dla niewypełnionej części oraz wysokość paska. Wybierz ciemnozielony kolor dla wypełnionej części i neutralny kolor tła, aby uzyskać czytelny wygląd.

Dodatkowo możesz zaokrąglić krawędzie paska postępu, dzięki czemu pasek będzie miała bardziej atrakcyjny kształt. Pamiętaj, że krawędzie można zaokrąglić tylko z przodu do momentu osiągnięcia 100% postępu.

Jeśli chcesz dostosować tekst wewnętrzny, tutaj możesz również zmienić kolor i typografię. Możesz zdecydować się na wyłączenie czcionki, aby skupić uwagę na postępie.

Wreszcie przystąp do zaawansowanych ustawień, gdzie możesz dostosować kolor tekstu oraz styl tekstu dla tytułu. Czarny, pogrubiony tytuł z opcjonalną cieniutką obwódką sprawi, że Twój tytuł wyróżni się.

Zapisz teraz swoje zmiany i przejdź do swojej strony, aby zobaczyć wynik. Być może zdecydujesz, że jest sens wyświetlać procent. Jeśli nie, pasek postępu i tak będzie wyglądał atrakcyjnie.

Twój pasek postępu teraz pokazuje ustawioną wartość, nie animując się od 0 do góry. Zamiast tego postęp jest od razu zobrazowany.

Jeśli korzystasz z wersji Pro Elementora, otrzymujesz dodatkowe dynamiczne atrybuty. Ta funkcja jest szczególnie przydatna do dostosowywania paska postępu na podstawie danych zewnętrznych lub nawet wartości z bazy danych.

Podsumowanie

W tym przewodniku nauczyłeś(-aś) się, jak stworzyć i dostosować pasek postępu w Elementorze. Możesz ustawić tytuł i postęp, wybrać kolory oraz wprowadzić różnorodne dostosowania, aby zintegrować atrakcyjny i efektywny pasek postępu.