Przejdź do głównej treści

Samouczek Divi: Jak korzystać z modułu licznika liczb

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. [Zalecane]

Moduł licznika liczb w motywie WordPress Divi to świetny sposób na wyświetlanie liczb w zabawny i wciągający sposób. Ten moduł jest powszechnie używany do wyświetlania statystyk dotyczących Ciebie lub Twojej firmy. Na przykład wyświetlenie liczby klientów lub obserwujących na Facebooku to świetny sposób na przedstawienie dowodów społecznych.

wyświetl numer divi wordpress.png

Jak dodać moduł Licznik Divi

Zanim będziesz mógł dodać moduł licznika do swojej strony, musisz najpierw wskoczyć do Divi Buildera. 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ę. Kliknij ten przycisk, aby aktywować Divi Builder i uzyskać 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 na pierwszym planie, jeśli jesteś podłączony do pulpitu nawigacyjnego WordPress.

divi budowniczy

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 wewnątrz linii. Jeśli zaczynasz nową stronę, nie zapomnij najpierw dodać do niej linii.

Licznik liczby divi.png

Znajdź moduł licznika liczb 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 liczb”, a następnie kliknąć „Enter”, aby automatycznie wyszukać i dodać moduł licznika liczb! Po dodaniu modułu zostaniesz przywitany przez listę opcji modułu. Te opcje są podzielone na trzy główne grupy: Treść , Koncepcja et zaawansowany .

Przykład zastosowania: użycie modułu licznika cyfrowego do wyświetlenia wyników projektu

Świetnym sposobem na użycie modułu licznika liczb jest zilustrowanie statystyk dla studiów przypadków. Po prostu oznacz każdy licznik numerem, aby użytkownik mógł łatwo zobaczyć powodzenie projektu. W tym przykładzie używam modułu licznika cyfrowego do wyświetlenia czterech wyników projektu.

Jak widać, u góry strony znajdują się trzy cele projektu wykorzystujące moduł „ Licznik barowy A na dole strony znajdują się wyniki studium przypadku z wykorzystaniem modułów liczników cyfrowych.

przykład compteur.gif

Sekcja strony, która pokazuje wyniki studium przypadku z wykorzystaniem modułów cyfrowych, wymaga użycia specjalnej sekcji. Za pomocą programu Visual Builder dodaj specjalną sekcję do strony i wybierz następujący układ:

sekcja niestandardowa divi.png

Wybierz układ kolumny 1 po prawej stronie sekcji i wprowadź tytuł i tekst wymagany dla wyników studium przypadku.

Zakres wprowadzenia divi.png

Wstaw układ kolumn 2 bezpośrednio pod układem kolumn 1 po prawej stronie sekcji.

podzielona kolumna divi.png

Teraz dodaj moduł licznika pierwszego numeru do lewej kolumny.

dodaj numer sekcji divi.png

Zaktualizuj parametry liczników liczb w następujący sposób:

Opcje zawartości

Tytuł: nowi goście
Numer: 54210
Procent znaku: WYŁ

Ł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]

Opcje projektowania

Kolor tekstu: ciemny
Czcionka tytułu: domyślna
Rozmiar czcionki tytułu: 20px
Kolor tekstu tytułu: # 405c60
Wysokość wiersza tytułu: 1em
Liczba znaków: domyślnie, pogrubiona
Liczba znaków: 60px
Numer Kolor tekstu: # e07a5e
Wysokość linii numeru: 72px

content section number divi.png

Zapisz ustawienia

Zduplikuj moduł Liczniki liczb i przeciągnij go do sąsiedniej prawej kolumny i zaktualizuj opcje Tytuł i Liczba.

counter number example construction.png

Zduplikuj wiersz zawierający dwa moduły liczników liczb, aby dwa kolejne liczniki liczb zostały wyświetlone poniżej.

cyfrowy duplikat divi.png

Następnie zaktualizuj dla nich opcje Tytuł i Numer. Teraz masz wszystkie cztery liczniki pełnego wybierania.

Nie zapomnij dodać obrazu 667 x 320 w lewej / bocznej kolumnie sekcji specjalistycznej.

To koniec! Połączenie liczników liczb i słupków na tej stronie studium przypadku naprawdę sprawia, że ​​treść jest atrakcyjna.

Moduł końcowej realizacji compteur.png

Opcje zawartości licznika cyfrowego

W zakładce treści znajdziesz wszystkie elementy treści modułu, takie jak tekst, obrazy i ikony. Wszystko to kontroluje co pojawi się w module zawsze będzie można znaleźć w tej zakładce.

zawartość zaznaczonego obszaru wordpress divi.png

Tytuł

Wpisz tytuł licznika. Zostanie to wyświetlone pod liczbą mniejszym tekstem.

nazwa

Jest to liczba, która będzie liczona. Gdy przewiniesz stronę i dojdziesz do licznika, liczba szybko odlicza od 0, aż osiągnie ustawiony tutaj numer. Można tu umieścić tylko wartości liczbowe.

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]

Znak procentu

Tutaj możesz wybrać, czy znak procentu ma być dodawany po liczbie zdefiniowanej powyżej.

Kolor tła

Ustaw niestandardowy kolor tła dla swojego modułu lub pozostaw puste, aby użyć domyślnego koloru.

Obraz tła

Jeśli jest ustawiony, ten obraz będzie używany jako tło dla tego modułu. Aby usunąć obraz tła, po prostu usuń adres URL z pola ustawień. Obrazy tła pojawią się powyżej kolorów tła, co oznacza, że ​​kolor tła nie będzie widoczny po zastosowaniu obrazu tła.

Etykieta administratora

Spowoduje to zmianę etykiety modułu w konstruktorze w celu łatwej identyfikacji. Gdy używasz widoku WireFrame w Visual Builder, te etykiety pojawiają się w bloku modułu interfejsu Divi Builder.

Opcje projektowania (styl) miernika cyfrowego

Na karcie Projektowanie znajdziesz wszystkie opcje stylu modułu, takie jak czcionki, kolory, rozmiar i odstępy. Jest to karta, której użyjesz do zmiany wyglądu swojego modułu. Każdy moduł Divi ma długą listę parametrów projektowych, których można użyć do zmiany czegokolwiek.

projekt strefy licznik divi.png

Kolor tekstu

Tutaj możesz wybrać, czy tekst twojego tytułu powinien być jasny czy ciemny. Jeśli pracujesz na ciemnym tle, tekst powinien być wyraźny. Jeśli tło jest czyste, tekst musi być ciemny.

Czcionka tytułu

Możesz zmienić czcionkę tekstu tytułowego, wybierając żądaną czcionkę z menu rozwijanego. Divi zawiera dziesiątki dużych czcionek obsługiwanych przez Google Fonts. Domyślnie Divi używa czcionki Open Sans dla całego tekstu na 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łu. Możesz przeciągnąć suwak zakresu, aby zwiększyć lub zmniejszyć rozmiar tekstu, lub wprowadzić wartość żądanego rozmiaru tekstu bezpośrednio w polu wprowadzania po prawej stronie suwaka. Pola wejściowe obsługują różne jednostki miary, co oznacza, że ​​możesz wprowadzić „px” lub „em” w zależności od wartości swojego rozmiaru, aby zmienić typ jednostki.

Kolor tekstu tytułu

Domyślnie wszystkie kolory tekstu Divi są wyświetlane w kolorze białym lub ciemnoszarym. Jeśli chcesz zmienić kolor tekstu tytułowego, wybierz żądany kolor w próbniku kolorów za pomocą tej opcji.

Odstępy liter tytułu

Odstępy między literami wpływają na odstęp między literami. Jeśli chcesz zwiększyć odstęp między każdą literą w tekście tytułowym, użyj suwaka zakresu, 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 wartości swojego rozmiaru, aby zmienić typ jednostki.

Wysokość linii tytułowej

Wysokość linii wpływa na odstęp między wierszami tekstu tytułowego 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 wprowadzania znajduje się na prawo od kursora. Pola wejściowe obsługują różne jednostki miary, co oznacza, że ​​możesz wpisać „px” lub „em” w zależności od wartości swojego rozmiaru, aby zmienić typ jednostki.

Czcionki numeru

Możesz zmienić czcionkę tekstu, wybierając żądaną czcionkę z menu rozwijanego. Divi zawiera dziesiątki dużych czcionek obsługiwanych przez Google Fonts. Domyślnie Divi używa czcionki Open Sans dla całego tekstu na stronie. Możesz także dostosować styl tekstu, używając opcji pogrubienia, kursywy, wielkich liter i podkreślenia.

Rozmiar czcionki numeru

Tutaj możesz dostosować rozmiar tekstu cyfrowego. Możesz przeciągnąć suwak zakresu, aby zwiększyć lub zmniejszyć rozmiar tekstu, lub wprowadzić wartość żądanego rozmiaru tekstu bezpośrednio w polu wprowadzania po prawej stronie suwaka. Pola wejściowe obsługują różne jednostki miary, co oznacza, że ​​możesz wprowadzić „px” lub „em” w zależności od wartości swojego rozmiaru, aby zmienić typ jednostki.

Kolor tekstu cyfrowego

Domyślnie wszystkie kolory tekstu Divi są wyświetlane w kolorze białym lub ciemnoszarym. Jeśli chcesz zmienić kolor tekstu cyfrowego, wybierz żądany kolor w próbniku kolorów za pomocą tej opcji.

Odstępy między literami cyfrowymi

Odstępy między literami wpływają na odstęp między literami. Jeśli chcesz zwiększyć odstęp między każdą literą w tekście numerycznym, użyj suwaka zakresu, 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 wprowadzić „px” lub „em” w zależności od wartości swojego rozmiaru, aby zmienić typ jednostki.

Wysokość linii numeru

Wysokość linii wpływa na odstęp między wierszami tekstu cyfrowego 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 wprowadzania znajduje się po prawej stronie kursora. Pola wejściowe obsługują różne jednostki miary, co oznacza, że ​​możesz wprowadzić „px” lub „em” w zależności od wartości swojego rozmiaru, aby zmienić typ jednostki.

Użyj granicy

Włączenie tej opcji spowoduje umieszczenie ramki wokół twojego modułu. Tę granicę można dostosować za pomocą następujących parametrów warunkowych.

Kolor obramowania

Ta opcja wpływa na kolor obramowania. Wybierz kolor niestandardowy w próbniku kolorów, aby zastosować go do obramowania.

Szerokość granicy

Domyślnie ramki mają szerokość piksela 1. Możesz zwiększyć tę wartość, przeciągając suwak zakresu lub wprowadzając wartość niestandardową w polu wprowadzania po prawej stronie suwaka. Obsługiwane niestandardowe jednostki miary, co oznacza, że ​​możesz zmienić domyślną jednostkę „px” na coś innego, np. Em, vh, vw itp.

Styl graniczny

Obramowania obsługują osiem różnych stylów: bryłowy, kropkowany, kropkowany, podwójny, rowek, grzbiet, wkładka i start. Wybierz żądany styl z menu rozwijanego, aby zastosować go do obramowania.

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]

Niestandardowe wypełnienie

Wypełnienie to przestrzeń dodana wewnątrz modułu, między krawędzią modułu a jego elementami wewnętrznymi. Możesz dodać niestandardowe wartości wypełnienia do jednej z czterech stron modułu. Aby usunąć niestandardowy margines, usuń wartość dodaną z pola wprowadzania. Domyślnie te wartości są mierzone w pikselach, ale w polach wejściowych można wprowadzić niestandardowe jednostki miary.

Zaawansowane opcje licznika numerów

Na karcie Zaawansowane znajdziesz opcje, które mogą być przydatne bardziej doświadczonym projektantom stron internetowych, takie jak niestandardowe atrybuty CSS i HTML. Tutaj możesz zastosować niestandardowy CSS do jednego z wielu elementów modułu. Możesz także zastosować niestandardowe klasy i identyfikatory CSS do modułu, których można użyć do dostosowania modułu w pliku style.css motywu podrzędnego.

digital counter section design.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 określonych sekcji strony.

Klasa CSS

Wprowadź opcjonalne klasy CSS, które będą używane dla tego modułu. Klasy CSS można użyć do utworzenia niestandardowego stylu CSS. Możesz dodać wiele klas oddzielonych spacją. Tych klas można używać w motywie podrzędnym Divi lub w niestandardowym arkuszu stylów 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 jednego z wewnętrznych elementów modułu. W sekcji Niestandardowy CSS znajdziesz pole tekstowe, w którym możesz dodać niestandardowe arkusze stylów CSS bezpośrednio do każdego elementu. Wpisy CSS w tych parametrach są już opakowane w znaczniki stylu. Wpisz reguły CSS oddzielone średnikami.

widoczność

Ta opcja pozwala kontrolować urządzenia, na których pojawia się moduł. Możesz wyłączyć moduł indywidualnie na tabletach, smartfonach lub komputerach stacjonarnych. Jest to przydatne, jeśli chcesz korzystać z różnych modułów na różnych urządzeniach lub chcesz uprościć projektowanie mobilne poprzez wyeliminowanie niektórych elementów strony.

Inne samouczki Divi

Ten artykuł zawiera komentarze 0

Zostaw komentarz

Twój adres e-mail nie zostanie 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ł4
ćwierkanie1
Enregistrer6