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

Divi: najlepszy motyw WordPress wszechczasów!

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

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

circulerire counter example divi.png

Jak dodać cykliczny moduł licznika do swojej strony

Aby dodać moduł licznika kręgów 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 również kliknąć przycisk Użyj Visual Builder kiedy przeglądasz swoją stronę, jeśli jesteś zalogowany na swoim pulpicie nawigacyjnym WordPress.

używaj konstruktora divi

Po wprowadzeniu do programu Visual Builder można kliknąć szary przycisk plus, aby dodać nowy moduł do strony. Nowe moduły można dodawać tylko w rzędach. Jeśli zaczynasz nową stronę, nie zapomnij najpierw dodać linii do swojej strony.

counter circle divi.png

Znajdź moduł licznika kołowego na liście modułów i kliknij go, aby dodać go do swojej strony. Lista modułów jest dostępna do przeszukiwania, co oznacza, że ​​możesz również wpisać słowo "licznik kół", a następnie kliknąć enter, aby wyszukać i automatycznie dodać moduł licznika kół!

Po dodaniu modułu, zostaniesz powitany z 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 korzystania z modułu licznika kół jest zilustrowanie statystyk dla analiz przypadków lub elementów portfolio.

Wystarczy zidentyfikować każdy metr okrągły z określoną funkcją lub celem projektu, aby użytkownik wiedział, które usługi są uwzględnione w projekcie. W tym przykładzie użyję modułu "licznik okręgów", aby wyświetlić trzy cele projektu.

Jak widać na poniższym obrazku, górna część strony zawiera trzy cele projektu przy użyciu modułu Licznik prętów, a dół strony zawiera wyniki studium przypadku z wykorzystaniem modułu Licznik Liczb ,

przykładowy moduł circle divi animation.gif

Zacznijmy.

Użyj wizualnego programu budującego, aby dodać standardową sekcję z układem pełnej szerokości (kolumna 1). Następnie dodaj moduł licznika okręgów do linii.

konfiguracja licznika koła divi.png

Zaktualizuj ustawienia licznika kratek w następujący sposób:

Łatwo stwórz swoją stronę internetową z Elementor

Elementor pozwala łatwo stworzyć dowolny projekt strony internetowej o profesjonalnym wyglądzie. Przestańcie słono płacić za to, co możecie zrobić sami. [Bezpłatny]

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 numeru: # 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 okrągłego licznika.

To wszystko!

Odwiedź stronę.

design counter divi builder.png

Opcje zawartości licznika okrągłego

Na karcie Treść znajdują się wszystkie elementy treści modułu, takie jak tekst, obrazy i ikony. Wszystko, co kontroluje co pojawia się w twoim module zawsze będzie na tej karcie.

circle module content section.png

Tytuł

Wprowadź tytuł licznika okręgów. Zazwyczaj jest to słowo reprezentujące wyświetlaną statystykę. Zostanie wyświetlony pod numerem na wykresie kołowym.

nazwa

Ustaw liczbę dla okrągłego licznika. Wybierając liczbę mniejszą niż 100, wykres koła wypełni się do wartości procentowej równej wprowadzonemu numerowi. Na przykład, wprowadzając numer 20, okrąg wypełni się do 20% koloru twojego akcentu.

Znak procentu

Tutaj możesz wybrać, czy znak procentowy powinien zostać dodany po liczbie określonej powyżej.

Szukasz najlepszych motywów i wtyczek WordPress?

Pobierz najlepsze wtyczki i motywy WordPress z Envato i łatwo stwórz swoją stronę internetową. Już ponad 49.720.000 XNUMX XNUMX pobrań. [EXCLUSIVE]

Kolor tła paska

Spowoduje to zmianę koloru wypełnienia paska. Ilość koloru wypełnienia jest kontrolowana przez "liczbę" wybraną powyżej. Jeśli wybierzesz numer 50 i niebieski kolor, twój okrąg wypełni się 50% kolorem niebieskim.

Etykieta administracji

Spowoduje to zmianę tagu modułu w generatorze w celu łatwej identyfikacji. Podczas korzystania z widoku WireFrame w Visual Builder, etykiety te pojawią się w bloku modułów interfejsu Divi Builder.

Opcje projektowania okrągłych liczników

Na karcie Projektowanie znajdziesz wszystkie opcje stylu modułu, takie jak czcionki, kolory, rozmiar i odstępy. Ta zakładka pozwala zmienić wygląd twojego modułu. Każdy moduł Divi ma długą listę parametrów projektowych, których można użyć do modyfikacji prawie wszystkiego.

opcja licznika kołowego divi.png

Kolor koła

Jest to kolor, który zostanie użyty dla niewypełnionej części okręgu (ujemna przestrzeń, która nie jest wypełniona kolorem tła paska zdefiniowanego na karcie Zawartość).

Krycie koloru koła

Możesz zmniejszyć krycie wypełnionej części koła, używając tego parametru.

Kolor tekstu

Tutaj możesz wybrać, czy tekst ma być jasny czy ciemny. Jeśli pracujesz z ciemnym tłem, tekst powinien być wyraźny. Jeśli twoje tło jest jasne, twój tekst powinien być czarny.

Czcionka tytułu

Możesz zmienić czcionkę tekstu, wybierając z menu rozwijanego wybraną czcionkę. Divi zawiera dziesiątki wspaniałych czcionek z Google Fonts. Domyślnie Divi używa czcionki Open Sans dla całego tekstu na twojej stronie. Możesz także dostosować styl tekstu za pomocą pogrubienia, kursywy, wielkich i podkreślonych opcji.

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 wprowadzić żądaną wartość wielkości tekstu bezpośrednio do pola wprowadzania po prawej stronie suwaka. Pola wprowadzania danych obsługują różne jednostki miary, co oznacza, że ​​można wprowadzić "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 jako białe lub ciemnoszare. Jeśli chcesz zmienić kolor tekstu tytułu, wybierz wybrany kolor z próbnika kolorów za pomocą tej opcji.

Odstępy liter tytułu

Odstępy liter wpływają na przestrzeń 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ć spację lub wprowadź rozmiar pożądanego odstępu w polu wprowadzania po prawej stronie suwaka. Pola wprowadzania danych obsługują różne jednostki miary, co oznacza, że ​​można wprowadzić "px" lub "em" w zależności od rozmiaru, aby zmienić typ jednostki.

Wysokość linii tytułowej

Wysokość wiersza wpływa na odstęp między wierszami tekstu tytułu. Jeśli chcesz zwiększyć odstęp między liniami, użyj suwaka interwału, aby dostosować spację lub wprowadź żądany rozmiar odstępu w polu wprowadzania po prawej stronie suwaka. Pola wprowadzania danych obsługują różne jednostki miary, co oznacza, że ​​można wprowadzić "px" lub "em" w zależności od rozmiaru, aby zmienić typ jednostki.

Numer policji

Możesz zmienić czcionkę tekstu, wybierając z menu rozwijanego wybraną czcionkę. Divi zawiera dziesiątki wspaniałych czcionek z Google Fonts. Domyślnie Divi używa czcionki Open Sans dla całego tekstu na twojej stronie. Możesz także dostosować styl tekstu za pomocą pogrubienia, kursywy, wielkich i podkreślonych opcji.

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

Numer rozmiaru czcionki

Tutaj możesz dopasować rozmiar ponumerowanego tekstu. Możesz przeciągnąć suwak interwału, aby zwiększyć lub zmniejszyć rozmiar tekstu, lub możesz wprowadzić żądaną wartość wielkości tekstu bezpośrednio do pola wprowadzania po prawej stronie suwaka. Pola wprowadzania danych obsługują różne jednostki miary, co oznacza, że ​​można wprowadzić "px" lub "em" w zależności od rozmiaru, aby zmienić typ jednostki.

Kolor tekstu numerycznego

Domyślnie wszystkie kolory tekstu w Divi są wyświetlane jako białe lub ciemnoszare. Jeśli chcesz zmienić kolor tekstu, wybierz odpowiedni kolor w selektorze kolorów za pomocą tej opcji.

Rozstawianie ponumerowanych liter

Odstępy liter wpływają na przestrzeń między każdą literą. Jeśli chcesz zwiększyć odstęp między każdą literą tekstu, użyj suwaka interwału, aby dostosować spację lub wprowadź rozmiar pożądanego odstępu w polu wprowadzania po prawej stronie suwaka. Pola wprowadzania danych obsługują różne jednostki miary, co oznacza, że ​​można wprowadzić "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 przestrzeń między każdą linią tekstu cyfrowego. Jeśli chcesz zwiększyć odstęp między liniami, użyj suwaka zasięgu, aby dostosować spację lub wprowadź rozmiar pożądanego odstępu w polu wprowadzania po prawej stronie suwaka. Pola wprowadzania danych obsługują różne jednostki miary, co oznacza, że ​​można wprowadzić "px" lub "em" w zależności od rozmiaru, aby zmienić typ jednostki.

Łatwo stwórz swój sklep internetowy

Pobierz bezpłatne WooCommerce, najlepsze wtyczki e-commerce do sprzedaży fizycznych i cyfrowych produktów na WordPress. [Zalecana]

Zaawansowane opcje licznika okrągłego

Na karcie Zaawansowane znajdziesz opcje, które bardziej doświadczeni projektanci stron internetowych mogą uznać za użyteczne, takie jak niestandardowe atrybuty CSS i HTML. Tutaj możesz zastosować niestandardowy CSS do dowolnego z wielu elementów modułu. Do modułu można również zastosować niestandardowe klasy i identyfikatory CSS, które można wykorzystać do dostosowania modułu w pliku style.css kompozycji podrzędnej.

zaawansowany licznik divi.png

Identyfikator CSS

Wprowadź opcjonalny identyfikator CSS, który będzie używany dla tego modułu. Identyfikatora można użyć do utworzenia niestandardowego stylu CSS lub do utworzenia linków do poszczególnych sekcji strony.

Klasa CSS

Wprowadź opcjonalne klasy CSS, które będą używane dla tego modułu. Do utworzenia niestandardowego stylu CSS można użyć klasy CSS. Możesz dodać wiele klas oddzielonych spacją. Te klasy mogą być używane w kompozycji Divi Child lub niestandardowym CSS dodawanym do strony lub witryny internetowej przy użyciu opcji kompozycji Divi lub ustawień strony Divi Builder.

Niestandardowy CSS

Niestandardowy CSS można również zastosować do modułu i jednego z wewnętrznych elementów modułu. W niestandardowej sekcji CSS znajdziesz pole tekstowe, w którym możesz dodać CSS bezpośrednio do każdego elementu. Pozycje CSS w tych ustawieniach są już osadzone w znacznikach stylu. Musisz tylko wprowadzić reguły CSS oddzielone średnikami.

widoczność

Ta opcja pozwala kontrolować urządzenia, na których pojawia się twój moduł. Możesz wyłączyć moduł na tabletach, smartfonach lub pulpitach indywidualnie. Jest to przydatne, jeśli chcesz korzystać z różnych modułów na różnych urządzeniach lub jeśli chcesz uprościć projektowanie mobilne, eliminując pewne elementy strony.

To wszystko na ten samouczek.

Ten artykuł zawiera komentarze 0

Zostaw komentarz

Twoj adres e-mail nie bedzie opublikowany. Pola obowiązkowe są oznaczone symbolem *

Ta strona używa Akismet do redukcji spamu. Dowiedz się więcej o tym, jak wykorzystywane są Twoje opinie.

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