Animowane liczniki to zabawny i skuteczny sposób wyświetlania statystyka dla Twojej odwiedzający. Animacja jest uruchamiana przez leniwe ładowanie, aby nawigacja po stronie była naprawdę interesująca. W tym module możesz umieścić dowolną liczbę liczników.
Jak dodać moduł licznika słupków do swojej strony
Zanim będziesz mógł dodać moduł licznika słupkó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 Twojej witryny na froncie, jeśli jesteś zalogowany do pulpitu nawigacyjnego WordPress.
W programie Visual Builder możesz kliknąć szary przycisk plusa, aby dodać nowy moduł do swojej strony. Nowe moduły można dodawać tylko wewnątrz linii. Jeśli zaczynasz nową stronę, pamiętaj, aby najpierw dodać wiersz do swojej strony. .
Znajdź moduł licznika słupków 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 również wpisać słowo „Licznik słupków”, a następnie nacisnąć Enter, aby automatycznie znaleźć i dodać moduł licznika słupków!
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 przypadków, aby wyświetlić cele projektu w studium przypadku
Jednym z najlepszych sposobów wykorzystania modułu Liczniki słupków jest zilustrowanie statystyka dla studiów przypadku. Wystarczy oznaczyć każdy słupek konkretną funkcją lub przeznaczeniem projektu, aby użytkownik wiedział, jakie usługi są objęte projektem. W tym przykładzie używam modułu bar do wyświetlenia trzech celów projektu.
Jak widać, na górze strony znajdują się trzy cele projektu z wykorzystaniem modułu „Licznik słupków”, a na dole wyniki studium przypadku z wykorzystaniem modułu „Licznik słupków”.
Zacznijmy.
Użyj kreatora wizualnego, aby dodać standardową sekcję z układem o pełnej szerokości (1 kolumna). Następnie dodaj moduł licznika prętów do linii.
Zaktualizuj ustawienia liczników słupków w następujący sposób:
Opcje zawartości
Procent wykorzystania: WŁ
Kolor tła: #dddddd
Kolor tła paska: #e07a5e
Opcje projektowania
Kolor tekstu: ciemny
Czcionka tytułu: domyślna
Rozmiar czcionki tytułu: 20px
Kolor tekstu tytułu: #405c60
Wysokość wiersza tytułu: 2em
Procent czcionki: domyślny
Procentowy rozmiar czcionki: 16px
Procentowy kolor tekstu: #ffffff
Wysokość linii procentowej: 2.5 em
Teraz wróć do zakładki Treść i wybierz + Dodaj nowy element aby dodać pierwszy licznik słupków do modułu.
Zaktualizuj ustawienia poszczególnych modułów w następujący sposób:
Karta Zawartość
Tytuł: Mój tytuł
procent: 80
Zapisz ustawienia
Dodaj jeszcze dwa liczniki słupków do modułu i nadaj każdemu tytuł oraz wartość procentową.
To wszystko!
Opcje zawartości licznika słupków
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.
Procent użycia
Domyślnie wartości procentowe są wyświetlane w liczniku paska kolorów. Ten tekst można wyłączyć za pomocą tego ustawienia, dzięki czemu wizualny wykres słupkowy mówi sam za siebie.
Kolor tła
Ta opcja umożliwia dostosowanie koloru tła każdego licznika słupków. To ustawienie dotyczy ujemnej przestrzeni za wypełnionym kolorem paska.
Kolor tła paska
Ta opcja umożliwia dostosowanie koloru tła wypełnionego paska. Ten kolor tła zastępuje poprzednie ustawienie koloru tła.
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 lady barowej
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 tekstu
Tutaj możesz wybrać, czy Twój tekst będzie jasny, czy ciemny. Jeśli pracujesz na ciemnym tle, tekst powinien być jasny. Jeśli tło jest jasne, tekst powinien być czarny. Możesz dodatkowo dostosować kolor tekstu, korzystając z dodatkowych opcji koloru tekstu, które znajdują się poniżej.
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.
Procent tekstu
Możesz zmienić czcionkę swojego tekstu, wybierając wybraną 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 w procentach
Tutaj możesz dostosować rozmiar tekstu w procentach. Możesz przeciągnąć suwak zakresu, aby zwiększyć lub zmniejszyć rozmiar tekstu, lub możesz bezpośrednio wprowadzić żądaną wartość rozmiaru tekstu w polu wejściowym 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 swojego wzrostu, aby zmienić typ jednostki.
Kolor tekstu w procentach
Domyślnie wszystkie kolory tekstu w Divi są białe lub ciemnoszare. Jeśli chcesz zmienić kolor tekstu w procentach, wybierz żądany kolor z próbnika kolorów za pomocą tej opcji.
Odstęp między literami w procentach
Odstępy między literami wpływają na odstępy między poszczególnymi literami. Jeśli chcesz zwiększyć odstęp między każdą literą tekstu o wartość procentową, użyj suwaka zakresu, aby dostosować odstęp lub wprowadź żądany rozmiar odstępu w polu wejściowym 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 swojego wzrostu, aby zmienić typ jednostki.
Wysokość linii procentowej
Wysokość linii wpływa na odstęp między poszczególnymi liniami tekstu w procentach. Jeśli chcesz zwiększyć odstęp między wierszami, użyj suwaka zakresu, aby dostosować odstęp lub wprowadź żądany rozmiar odstępu w polu wejściowym 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 swojego wzrostu, aby zmienić typ jednostki.
promień granicy
Zastosowanie promienia krawędzi spowoduje zaokrąglenie rogów paska w liczniku prętów. Im większy promień obramowania, tym bardziej zaokrąglone są rogi.
Użyj granicy
Włączenie tej opcji spowoduje umieszczenie ramki wokół modułu. To obramowanie można dostosować za pomocą następujących parametrów warunkowych.
Kolor obramowania
Ta opcja wpływa na kolor obramowania. Wybierz kolor niestandardowy z próbnika kolorów, aby zastosować go do obramowania.
Szerokość granicy
Domyślnie krawędzie mają szerokość 1 piksela. Możesz zwiększyć tę wartość, przeciągając suwak zakresu lub wprowadzając niestandardową wartość w polu wprowadzania po prawej stronie suwaka. Obsługiwane niestandardowe jednostki miary, co oznacza, że możesz zmienić domyślną jednostkę z „px” na inną, np. Em, vh, vw itp.
Styl graniczny
Krawędzie obsługują osiem różnych stylów, w tym: jednolity, kropkowany, kropkowany, podwójny, rowek, grzbiet, wstawka i początek. Wybierz żądany styl z menu rozwijanego, aby zastosować go do obramowania.
wypełnienie paska
Wyściółka to przestrzeń dodana wewnątrz modułu, między krawędzią modułu a jego elementami wewnętrznymi. Tutaj możesz dodać niestandardowe wypełnienie górne i dolne do modułu paska.
Zaawansowane opcje licznika słupków
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 mają być używane w tym module. Klasy CSS można używać do tworzenia niestandardowych stylów CSS. Możesz dodać wiele klas oddzielonych spacją. Tych klas można używać w motywie potomnym Divi lub w niestandardowym CSS, który dodajesz do swojej strony lub witryny internetowej 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.
