Czy kiedykolwiek szukałeś narzędzia do śledzenia postępów w pionie zamiast tradycyjnego paska przewijania? Jeśli nie, przejrzyj ten artykuł do końca, aby dowiedzieć się, jak go stworzyć za pomocą Elementor Pro.
Ale zanim zajmiemy się głównym tematem, najpierw przypomnijmy sobie, czym jest śledzenie postępów.
Śledzenie postępu to wskaźnik postępu, który informuje użytkownika o postępie trwającego procesu, takiego jak instalowanie aplikacji, aktualizacja, czytanie artykułu itp. . I są dwa rodzaje:
- le liniowy monitor postępu
- le okrągłe śledzenie postępów
Możesz również przeczytać: Elementor: Jak stworzyć kartę efektów z portfolio
W tym samouczku pokażemy, jak krok po kroku wstawić pionowy wskaźnik postępu do sekcji zawierającej archiwa postów.
Utwórz śledzenie postępów
W zakładce elementy z panelu narzędziElementor, wpisz w pasku wyszukiwania Śledzenie postępu. Następnie przeciągnij widżet do sekcji.
Następnie pojawi się wskaźnik postępu. Domyślnie jest zorientowany poziomo. Ale nie martw się, później zobaczysz, jak ustawić to w pionie.
Tworzony wskaźnik postępu dokonajmy niezbędnych modyfikacji w celu uzyskania pożądanego rezultatu.
Zobacz także: Elementor: Jak stworzyć kartę efektów z portfolio
Edytuj zawartość śledzenia postępów
Tutaj wybierasz rodzaj trackera i z czym jest powiązany.
Główne ustawienia to:
- typowy tropiciel: tutaj domyślna wartość to Poziomy. Jednak podczas przewijania listy, typ okrągły jest również oferowana Tobie. Zachowaj wartość domyślną.
- Postęp w stosunku do: w tym drugim ustawieniu wybierz wartość selektor. Ten wybór wywoła dodatkowe ustawienie: Selektor.
- Selektor: To pole jest przeznaczone do otrzymania identyfikatora obiektu, do którego zostanie dołączony tracker.
Wybierzmy archiwum publikacji, ponieważ jest to element, do którego dołączony jest nasz tracker.
W panelu ustawień przejdź do zakładki Zaawansowane, a następnie wpisz wartość w polu Identyfikator CSS.
Następnie wróć do panelu trackera i uzupełnij pole Selektor w menu treść.
Na koniec ustaw orientację wskaźnika postępu w prawo.
Zmień styl śledzenia postępu
W tym kroku skonfigurujemy parametry wskaźnika postępu, a także tło tego ostatniego.
Zacznij od ustawienia wskaźnika postępu.
Czytaj także: Elementor: Jak stworzyć galerię obrazów
- Dostosowanie kolor postępu pozwala wybrać między klasyczną progresją a progresją gradientową. W naszym przykładzie wybierz pierwszą opcję. Jednak niezależnie od wyboru, wydaje się, że ustawienie kolor.
- Ustaw lma kolor za pomocą globalnej palety kolorów lub próbnika kolorów.
- Rodzaj granicy: masz tu sześć propozycji (brak, pełny, podwójny, kropkowany, kropkowany, rowek). Wybierz pełną granicę.
- szerokość: Ma to na celu pogrubienie granicy wskaźnika postępu.
- Promień granicy: Domyślnie wskaźnik postępu wygląda jak prostokąt. Zmieniając promień, jego końce stają się zaokrąglone.
Na koniec ustaw piste ustawienia tła. Zauważasz, że powracają prawie te same ustawienia. Ogranicz się zatem do tych wymienionych wcześniej.
Zmień zaawansowane opcje śledzenia postępu
Aby zakończyć naszą pracę, ustawimy następujące zakładki: efekty ruchu, transformacje i niestandardowe CSS.
Zacznijmy od karty Niestandardowy CSS. Wybierz go, a następnie wstaw następujący kod w odpowiednim polu. Pozwala zdefiniować szerokość trackera. Ustawia więc szerokość na 50% wysokości okna.
Następnie obróć tracker w pionie. Aby to zrobić, wybierz podmenu Transformator, włącz obrót, a następnie wpisz 90 w pustym polu. To obróci nasz widżet o 90 stopni, dając ci pożądaną pozycję pionową.
Aby wyrównać nasz widżet na tym samym poziomie co pierwsze posty, zastosuj przesunięcie 145.
Na tym poziomie, jeśli przewiniemy naszą stronę, zobaczysz, że wskaźnik postępu znika podczas przewijania treść.
Aby rozwiązać ten problem, otworzysz zakładkę Efekty ruchu, a następnie rozwiń polecenie Szpilka i wybierz en Bas.
Tym razem, przewijając w dół, możemy zobaczyć, jak nasz monitor postępów stopniowo zapełnia się, gdy poruszamy się po naszym archiwum postów.
Pobierz Elementor Pro teraz!
Wnioski
Więc ! To tyle w tym artykule, który pokazuje, jak stworzyć pionowy monitor postępu.
Dodawanie interaktywnych elementów, takich jak pionowy wskaźnik postępu, podczas tworzenia strona internetowa może naprawdę przenieść to na wyższy poziom, czyniąc go bardziej intuicyjnym. Dodatkowo może być powiązany z całą stroną lub z treść publikacji, a nawet dowolnego innego konkretnego elementu strony. Umiejętność korzystania z niego byłaby zatem dodatkową zaletą.
Możesz jednak również skonsultować się nasze zasoby, jeśli potrzebujesz więcej elementów do realizacji projektów tworzenia stron internetowych, zapoznaj się z naszym przewodnikiem na stronie Tworzenie bloga WordPress lub ten na Divi: najlepszy motyw WordPress wszechczasów.
Ale w międzyczasie udostępnij ten artykuł w różnych sieciach społecznościowych.
...
