Okrągły licznik pozwala wyświetlić pojedynczą statystykę w estetyczny sposób. Podczas przewijania w dół liczba jest odliczana, a wykres kołowy stopniowo wypełnia się, dopasowując się do wartości procentowej. Spróbuj połączyć wiele modułów licznika okręgów na jednej stronie, aby dać swoim odwiedzający zabawny sposób na poznanie swojej firmy lub umiejętności osobistych.
Jak dodać moduł licznika okrągłego do swojej strony
Zanim będziesz mógł dodać moduł licznika kręgów do swojej strony, musisz najpierw uzyskać dostęp do Divi Builder. Kiedyś Motyw Divi zainstalowany na Twojej stronie, zauważysz przycisk Użyj Divi Builder nad wydawcą za każdym razem, gdy tworzysz nową stronę.
Klikając ten przycisk, będziesz mógł aktywować Divi Builder, który da ci dostęp do wszystkich modułów Divi Builder. Następnie kliknij przycisk Użyj Visual Builder aby uruchomić generator w trybie wizualnym.
Możesz także kliknąć przycisk Użyj Visual Builder podczas przeglądania witryny, jeśli jesteś zalogowany do pulpitu nawigacyjnego WordPress.
Po wejściu do programu Visual Builder możesz kliknąć szary przycisk plus, aby dodać nowy moduł do swojej strony. Nowe moduły można dodawać tylko w wierszach. Jeśli zaczynasz nową stronę, nie zapomnij najpierw dodać wiersza do swojej strony.
Znajdź moduł licznika okrągłego na liście modułów i kliknij go, aby dodać go do swojej strony. Listę modułów można przeszukiwać, co oznacza, że możesz także wpisać słowo „licznik kół”, a następnie kliknąć Enter, aby automatycznie wyszukać i dodać moduł licznika kół!
Po dodaniu modułu zostaniesz powitany listą opcji modułu. Te opcje są podzielone na trzy główne grupy: Treść , Koncepcja et zaawansowany .
Użyj przypadku, aby wyświetlić cele projektu w studium przypadku
Jednym z najlepszych sposobów wykorzystania modułu liczników kół jest ilustrowanie statystyka dla studiów przypadków lub elementów portfolio.
Po prostu zidentyfikuj każdy licznik cykliczny z określoną funkcją lub celem projektu, aby użytkownik wiedział, które usługi są zawarte w projekcie. W tym przykładzie użyję modułu „licznik kół” do wyświetlenia trzech celów projektu.
Jak widać na poniższym obrazku, na górze strony znajdują się trzy cele projektu z wykorzystaniem modułu Licznik prętów, a na dole wyniki studium przypadku z wykorzystaniem modułu Licznik .
Zacznijmy.
Użyj kreatora wizualnego, aby dodać standardową sekcję z układem o pełnej szerokości (1 kolumna). Następnie dodaj moduł licznika okręgów do rzędu.
Zaktualizuj ustawienia licznika kręgów w następujący sposób:
Opcje zawartości
Tytuł: Animacja
Numer: 80
% Znak: Tak
Bar tła paska: #e07a5e
Opcje projektowania
Kolor koła: #e07a5e
Kolor tekstu: ciemny
Czcionka tytułu: domyślna
Rozmiar czcionki tytułu: 26px
Kolor tekstu tytułu: #405c60
Numer czcionki: domyślny
Rozmiar czcionki: 46px
Kolor tekstu liczbowego: #405c60
Zapisz ustawienia
Teraz zduplikuj dwukrotnie moduł licznika okręgów i przeciągnij każdą kopię do drugiej i trzeciej kolumny linii.
Ponieważ elementy projektu zostały przeniesione do zduplikowanych modułów, wystarczy zaktualizować tytuł i numer miernika okrągłego.
To wszystko!
Odwiedź stronę.
Opcje zawartości licznika okrągłego
W zakładce Treść znajdziesz wszystkie elementy treści modułu, takie jak tekst, obrazy i ikony. Wszystko to kontroluje co pojawi się w module zawsze będzie na tej karcie.
Tytuł
Wpisz tytuł licznika kręgów. Zwykle jest to słowo reprezentujące oglądane statystyki. Zostanie wyświetlony pod liczbą na wykresie kołowym.
nazwa
Ustaw liczbę dla licznika kołowego. Wybierając liczbę mniejszą niż 100, wykres kołowy wypełni się do wartości procentowej równej wprowadzonej liczbie. Na przykład wpisanie liczby 20 wypełni okrąg w 20% kolorem akcentu.
Znak procentu
Tutaj możesz wybrać, czy znak procentu ma być dodawany po liczbie zdefiniowanej powyżej.
Kolor tła paska
Zmieni to kolor wypełnienia paska. Ilość koloru wypełnienia jest kontrolowana przez „liczbę” wybraną powyżej. Jeśli wybierzesz liczbę 50 i kolor niebieski, Twoje koło wypełni 50% kolorem niebieskim.
Etykieta administracyjna
Spowoduje to zmianę etykiety modułu w generatorze w celu łatwej identyfikacji. Podczas korzystania z widoku WireFrame w programie Visual Builder etykiety te pojawią się w bloku modułu interfejsu Divi Builder.
Opcje projektowania okrągłych liczników
Na karcie Projekt znajdziesz wszystkie opcje stylu modułu, takie jak czcionki, kolory, rozmiar i odstępy. Ta zakładka pozwala na modyfikację wyglądu Twojego modułu. Każdy moduł Divi ma długą listę ustawień projektowych, których można użyć do dostosowania prawie wszystkiego.
Kolor koła
Jest to kolor, który zostanie użyty dla niewypełnionej części koła (przestrzeń ujemna, która nie jest wypełniona kolorem tła paska zdefiniowanego w zakładce Zawartość).
Krycie koloru koła
Za pomocą tego ustawienia można zmniejszyć krycie wypełnionej części koła.
Kolor tekstu
Tutaj możesz wybrać, czy tekst ma być jasny, czy ciemny. Jeśli pracujesz na ciemnym tle, tekst powinien być jasny. Jeśli tło jest jasne, tekst powinien być czarny.
Czcionka tytułu
Możesz zmienić czcionkę tekstu, wybierając żądaną czcionkę z menu rozwijanego. Divi zawiera dziesiątki niesamowitych czcionek obsługiwanych przez Google Fonts. Domyślnie Divi używa czcionki Open Sans dla całego tekstu na Twojej stronie. Możesz także dostosować styl tekstu, używając opcji pogrubienia, kursywy, wielkich liter i podkreślenia.
Tytułowy rozmiar czcionki
Tutaj możesz dostosować rozmiar tekstu tytułowego. Możesz przeciągnąć suwak interwału, aby zwiększyć lub zmniejszyć rozmiar tekstu, lub możesz bezpośrednio wprowadzić żądaną wartość rozmiaru tekstu w polu wprowadzania po prawej stronie suwaka. Pola wejściowe obsługują różne jednostki miary, co oznacza, że możesz wpisać „px” lub „em” w zależności od rozmiaru, aby zmienić typ jednostki.
Kolor tekstu tytułu
Domyślnie wszystkie kolory tekstu w Divi są wyświetlane w kolorze białym lub ciemnoszarym. Jeśli chcesz zmienić kolor tekstu w tytule, wybierz żądany kolor z próbnika kolorów za pomocą tej opcji.
Odstępy liter tytułu
Odstępy między literami wpływają na odstępy między każdą literą. Jeśli chcesz zwiększyć odstęp między każdą literą tekstu tytułu, użyj suwaka interwału, aby dostosować odstęp, lub wprowadź żądany rozmiar odstępu w polu wprowadzania po prawej stronie suwaka. Pola wejściowe obsługują różne jednostki miary, co oznacza, że możesz wpisać „px” lub „em” w zależności od rozmiaru, aby zmienić typ jednostki.
Wysokość linii tytułowej
Wysokość linii wpływa na odstępy między wierszami tekstu tytułu. Jeśli chcesz zwiększyć odstęp między wierszami, użyj suwaka interwału, aby dostosować odstęp, lub wprowadź żądany rozmiar odstępu w polu wprowadzania po prawej stronie suwaka. Pola wejściowe obsługują różne jednostki miary, co oznacza, że możesz wpisać „px” lub „em” w zależności od rozmiaru, aby zmienić typ jednostki.
Numer policyjny
Możesz zmienić czcionkę tekstu, wybierając żądaną czcionkę z menu rozwijanego. Divi zawiera dziesiątki niesamowitych czcionek obsługiwanych przez Google Fonts. Domyślnie Divi używa czcionki Open Sans dla całego tekstu na Twojej stronie. Możesz także dostosować styl tekstu, używając opcji pogrubienia, kursywy, wielkich liter i podkreślenia.
Rozmiar czcionki liczbowej
Tutaj możesz dostosować rozmiar numerowanego tekstu. Możesz przeciągnąć suwak interwału, aby zwiększyć lub zmniejszyć rozmiar tekstu, lub możesz bezpośrednio wprowadzić żądaną wartość rozmiaru tekstu w polu wprowadzania po prawej stronie suwaka. Pola wejściowe obsługują różne jednostki miary, co oznacza, że możesz wpisać „px” lub „em” w zależności od rozmiaru, aby zmienić typ jednostki.
Kolor tekstu liczbowego
Domyślnie wszystkie kolory tekstu w Divi są wyświetlane w kolorze białym lub ciemnoszarym. Jeśli chcesz zmienić kolor tekstu, wybierz żądany kolor z próbnika kolorów za pomocą tej opcji.
Odstępy między cyframi
Odstępy między literami wpływają na odstępy między każdą literą. Jeśli chcesz zwiększyć odstęp między każdą literą w tekście, użyj suwaka interwału, aby dostosować odstęp lub wprowadź żądany rozmiar odstępu w polu wprowadzania po prawej stronie suwaka. Pola wejściowe obsługują różne jednostki miary, co oznacza, że możesz wpisać „px” lub „em” w zależności od rozmiaru, aby zmienić typ jednostki.
Wysokość linii liczbowej
Wysokość linii wpływa na odstęp między każdą linią tekstu cyfrowego. Jeśli chcesz zwiększyć odstęp między wierszami, użyj suwaka zakresu, aby dostosować odstęp, lub wprowadź żądany rozmiar w polu wprowadzania po prawej stronie suwaka. Pola wejściowe obsługują różne jednostki miary, co oznacza, że możesz wpisać „px” lub „em” w zależności od rozmiaru, aby zmienić typ jednostki.
Zaawansowane opcje licznika kołowego
Na karcie Zaawansowane znajdziesz opcje, które mogą być przydatne dla bardziej doświadczonych projektantów stron internetowych, takie jak niestandardowe atrybuty CSS i HTML. Tutaj możesz zastosować niestandardowy CSS do dowolnego z wielu elementów modułu. Możesz również zastosować niestandardowe klasy CSS i identyfikatory do modułu, których można użyć do dostosowania modułu w pliku style.css motywu potomnego.
Identyfikator CSS
Wprowadź opcjonalny identyfikator CSS do użycia w tym module. Identyfikator może służyć do tworzenia niestandardowego stylu CSS lub do łączenia z określonymi sekcjami strony.
Klasa CSS
Wprowadź opcjonalne klasy CSS, które będą używane w tym module. Klasa CSS może służyć do tworzenia niestandardowych stylów CSS. Możesz dodać wiele klas oddzielonych spacją. Te zajęcia mogą być używane w twoim Motyw Divi Dziecko lub w niestandardowym CSS, który dodajesz do swojej strony lub witryny za pomocą opcji motywu Divi lub ustawień strony Divi Builder.
Niestandardowy CSS
Niestandardowy CSS można również zastosować do modułu i dowolnych elementów wewnętrznych modułu. W sekcji Custom CSS znajdziesz pole tekstowe, w którym możesz dodać CSS bezpośrednio do każdego elementu. Wpisy CSS w tych ustawieniach są już osadzone ze znacznikami stylu. Musisz więc tylko wprowadzić reguły CSS oddzielone średnikami.
widoczność
Ta opcja umożliwia sterowanie urządzeniami, na których pojawia się Twój moduł. Możesz indywidualnie dezaktywować swój moduł na tabletach, smartfonach lub komputerach stacjonarnych. Jest to przydatne, jeśli chcesz używać różnych modów na różnych urządzeniach lub jeśli chcesz uprościć projekt mobilny, eliminując pewne elementy ze strony.
To wszystko w tym samouczku.
