Przejdź do głównej treści

Jak korzystać z modułu miernika kołowego w Divi Builder

Divi: najłatwiejszy w użyciu motyw WordPress

Łatwo stwórz swoją stronę internetową dzięki Elementor

Elementor pozwala łatwo stworzyć dowolny projekt strony internetowej o profesjonalnym wyglądzie. Przestań płacić drogo za to, co możesz zrobić sam. [Bezpłatny]

Okrągły licznik pozwala w estetyczny i przekonujący sposób wyświetlić unikalną statystykę. Podczas przewijania w dół liczba jest odliczana w dół, a wykres kołowy stopniowo wypełnia się, aby dopasować się do wartości procentowej. Spróbuj połączyć wiele modułów liczników okręgów na jednej stronie, aby zapewnić odwiedzającym przyjemny sposób na poznanie swoich umiejętności biznesowych lub osobistych.

circulerire counter example divi.png

Jak dodać moduł licznika okrągłego do swojej strony

Zanim będziesz mógł dodać moduł licznika kół do swojej strony, musisz najpierw uzyskać dostęp do Divi Builder. Po zainstalowaniu motywu Divi na swojej stronie internetowej 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.

używaj konstruktora divi

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.

counter circle divi.png

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 zilustrowanie statystyk dla studiów przypadków lub pozycji portfela.

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 .

przykładowy moduł circle divi animation.gif

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.

konfiguracja licznika koła divi.png

Divi: Najlepszy motyw WordPress wszechczasów!

więcej Pobieranie 901.000, Divi jest najpopularniejszym motywem WordPress na świecie. Jest kompletny, łatwy w użyciu i zawiera więcej niż darmowe szablony 62. [Zalecane]

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

animacja divi tworzenie koła z graficznym divi.png

Zapisz ustawienia

Teraz zduplikuj dwukrotnie moduł licznika okręgów i przeciągnij każdą kopię do drugiej i trzeciej kolumny linii.

skopiuj okrągły moduł licznika divi.png

Ponieważ elementy projektu zostały przeniesione do zduplikowanych modułów, wystarczy zaktualizować tytuł i numer miernika okrągłego.

To wszystko!

Odwiedź stronę.

design counter divi builder.png

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.

circle module content section.png

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.

Szukasz najlepszych motywów i wtyczek WordPress?

Pobierz najlepsze wtyczki i motywy WordPress na Envato i łatwo stwórz swoją stronę. Już więcej niż pobrań 49.720.000. [EXCLUSIVE]

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.

opcja licznika kołowego divi.png

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.

tekst liczbowy divi budowniczy okrągły counter.png

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.

tekstowy odstęp między literami divi.png

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.

Z łatwością stwórz swój sklep internetowy

Uzyskaj woocommerce, najlepsze wtyczki e-commerce do sprzedaży produktów swoich fizycznych i cyfrowych na WordPressie. [Zalecane]

Advanced Counter Divi.png

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 do użycia w tym module. Do tworzenia niestandardowych stylów CSS można użyć klasy CSS. Możesz dodać wiele klas oddzielonych spacją. Te klasy mogą być używane w motywie Divi Child 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.

Ten artykuł zawiera komentarze 0

Zostaw komentarz

Twoj adres e-mail nie bedzie opublikowany. Wymagane pola są oznaczone *

Ta strona używa Akismet, aby zmniejszyć niechciane. Dowiedz się więcej o sposobie wykorzystania danych komentarzy.

Powrót do góry
11 akcji
udział6
ćwierkanie2
Enregistrer3