Przejdź do głównej treści

Jak korzystać z animowanego modułu barowego w Divi

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]

Animowane liczniki to zabawny i skuteczny sposób wyświetlania statystyk odwiedzającym. Animacja jest uruchamiana przez opóźnione ładowanie, aby nawigacja na stronie była naprawdę interesująca. W tym module możesz umieścić dowolną liczbę liczników.

moduł licznika divi.png

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. 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 na interfejsie użytkownika, jeśli jesteś podłączony do pulpitu nawigacyjnego WordPress.

używaj konstruktora divi

Po wprowadzeniu do 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. ,

bar counter divi.png

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 także wpisać słowo „Licznik prętów”, a następnie kliknąć Enter, aby wyszukać i automatycznie dodać moduł licznika prętów!

Po dodaniu modułu zostanie wyświetlona lista 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 korzystania z modułu Liczniki prętów jest zilustrowanie statystyk dla studiów przypadków. Wystarczy zidentyfikować każdy słupek za pomocą określonej funkcji lub celu projektu, aby użytkownik wiedział, które usługi są uwzględnione w projekcie. W tym przykładzie używam modułu paska, aby wyświetlić trzy cele projektu.

pokaż 3 project goals.jpg

Jak widać, u góry strony znajdują się trzy cele projektu wykorzystujące moduł „Licznik prętów”, a na dole strony znajdują się wyniki studium przypadku wykorzystującego moduł „Licznik”. Liczba ».

Zacznijmy.

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

Zaktualizuj parametry liczników słupków w następujący sposób:

Opcje zawartości

Procenty użycia: 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ść tytułu tytułu: 2em
Czcionka procentowa: domyślna
Rozmiar czcionki procentowej: 16px
Procentowy kolor tekstu: #ffffff
Wysokość linii procentowej: 2.5em

dodaj licznik divi.png count

Wróć teraz do karty Treść i wybierz + Dodaj nowy element aby dodać pierwszy licznik pręta do modułu.

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

Zaktualizuj ustawienia poszczególnych modułów w następujący sposób:

Karta Zawartość

Tytuł: Mój tytuł
Procent: 80

Zapisz ustawienia

personalizacja paska liczb divi.png

Dodaj dwa dodatkowe liczniki słupków do modułu i nadaj każdemu tytuł i wartość procentową.

pasek licznika divi lista bars.png

To wszystko!

wynik końcowy moduł divi barre.png

Opcje zawartości licznika pasków

Na karcie 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.

opcja zawartości moduł bar divi.png

Procenty użytkowania

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 pozwala dostosować kolor tła każdego licznika słupków. To ustawienie dotyczy ujemnej przestrzeni za kolorem wypełnionego paska.

Kolor tła paska

Ta opcja pozwala dostosować kolor tła wypełnionego paska. Ten kolor tła obejmuje 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 Visual Builder, te etykiety pojawią się w bloku modułu interfejsu Divi Builder.

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]

Opcje projektowania kontuaru

Na karcie Projekt 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 edycji niemal wszystkiego.

opcja projektowania modułu licznika barre.png

Kolor tekstu

Tutaj możesz wybrać, czy tekst będzie jasny, czy ciemny. Jeśli pracujesz na ciemnym tle, tekst powinien być wyraźny. Jeśli tło jest czyste, tekst powinien być czarny. Możesz dodatkowo dostosować kolor tekstu, korzystając z dodatkowych opcji koloru tekstu.

Czcionka tytułu

Możesz zmienić czcionkę tekstu, wybierając czcionkę z menu rozwijanego. Divi zawiera dziesiątki świetnych 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 interwału, aby zwiększyć lub zmniejszyć rozmiar tekstu, lub wpisać żądaną wartość 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 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 tytułu, wybierz kolor z próbnika 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ą tekstu tytułowego, użyj suwaka interwału, aby dostosować odstęp lub wprowadź rozmiar żądanego 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ęp między każdą linią tekstu tytułowego. 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.

procentowy moduł tekstowy divi barre.png

Procent tekstu

Możesz zmienić czcionkę tekstu, wybierając czcionkę z menu rozwijanego. Divi zawiera dziesiątki świetnych 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.

Procentowy rozmiar czcionki

Tutaj możesz dostosować rozmiar tekstu w procentach. Możesz przeciągnąć suwak interwału, aby zwiększyć lub zmniejszyć rozmiar tekstu, lub wpisać żądaną wartość 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 wpisać „px” lub „em” w zależności od rozmiaru, aby zmienić typ jednostki.

Procentowy kolor tekstu

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

Procentowy odstęp między literami

Odstępy między literami wpływają na odstęp między literami. Jeśli chcesz zwiększyć odstęp między literami tekstu, użyj suwaka interwału, aby dostosować odstęp lub wprowadź żądany odstęp 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 procentowej

Wysokość linii wpływa procentowo na odstęp między każdą linią tekstu. 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.

Promień obramowania

Zastosowanie promienia granicy zaokrągli rogi pręta do licznika prętów. Im większy promień granicy, tym bardziej zaokrąglone rogi.

opcja border divi builder.png

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 w zakresie 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ę „px” na coś innego, na przykład em, vh, vw itp.

Styl graniczny

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

Wypełnienie baru

Wypełnienie to przestrzeń dodana wewnątrz modułu, między krawędzią modułu a jego elementami wewnętrznymi. Tutaj możesz dodać niestandardowe górne i dolne wypełnienie do modułu pręta.

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]

Zaawansowane opcje licznika pasków

Na karcie Zaawansowane znajdziesz opcje przydatne bardziej doświadczonym projektantom 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 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.

opcje licznika zaawansowane.png

Identyfikator CSS

Wprowadź opcjonalny identyfikator CSS, który będzie używany dla tego modułu. Identyfikator może służyć do tworzenia niestandardowego stylu CSS lub tworzenia linków do poszczególnych 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 podrzędnym motywie Divi lub w niestandardowym CSS dodawanym do 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 niestandardowej sekcji 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 w znacznikach stylu. Musisz tylko wprowadzić 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 używać różnych modułów na różnych urządzeniach lub jeśli chcesz uprościć projektowanie mobilne poprzez wyeliminowanie niektórych elementów strony.

To wszystko na ten samouczek.

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ł6
ćwierkanie
Enregistrer5