Jak tworzyć animowane liczniki przewijania za pomocą Divi

Animowane liczniki liczb są popularne w sieci jako sposób wyświetlania danych liczbowych w celu podkreślenia wartości usług, studiów przypadków i nie tylko. Divi ma dedykowany moduł licznika liczb, który może być używany do łatwego generowania animowanych liczników liczb.

Jednak w tym samouczku pokażemy, jak tworzyć liczniki liczb, które animują się podczas przewijania za pomocą Divi. Korzystając z opcji pozycji Divi i efektów przewijania, zaprojektujemy prosty układ wyświetlający datę z przewijanymi liczbami.

Sprawdź to!

zapowiedź

Oto krótkie spojrzenie na animowane liczniki przewijania, które będziemy projektować w Divi.

Pobierz układ za DARMO

Aby położyć swoje ręce na projektach z tego samouczka, najpierw musisz go pobrać za pomocą przycisku poniżej. Aby uzyskać dostęp do pobrania, musisz zapisać się na naszą listę e-mailową Divi Daily, korzystając z poniższego formularza. Jako nowy subskrybent otrzymasz jeszcze więcej dobroci Divi i darmowy pakiet Divi Layout w każdy poniedziałek! Jeśli jesteś już na liście, po prostu wpisz poniżej swój adres e-mail i kliknij pobierz. Nie będziesz „ponownie subskrybować” ani otrzymywać dodatkowych wiadomości e-mail.

Pobierz pliki

Pobierz za darmo

Dołącz do biuletynu Divi, a wyślemy Ci e-mailem kopię najlepszego pakietu układu strony docelowej Divi, a także mnóstwo innych niesamowitych i bezpłatnych zasobów, wskazówek i sztuczek Divi. Idź dalej, a w mgnieniu oka zostaniesz mistrzem Divi. Jeśli masz już subskrypcję, wpisz poniżej swój adres e-mail i kliknij Pobierz, aby uzyskać dostęp do pakietu układów.

POBIERANIE

Udało Ci się zasubskrybować. Sprawdź swój adres e-mail, aby potwierdzić subskrypcję i uzyskać dostęp do bezpłatnych cotygodniowych pakietów układów Divi!

Aby zaimportować układ na swoją stronę, po prostu wyodrębnij plik zip i przeciągnij plik JSON do Divi Builder.

Przejdźmy do samouczka, dobrze?

Czego potrzebujesz, aby zacząć

Aby rozpocząć, musisz wykonać następujące czynności:

1. Jeśli jeszcze tego nie zrobiłeś, zainstaluj i aktywuj motyw Divi.
2. Utwórz nową stronę w WordPress i użyj Divi Builder, aby edytować stronę w interfejsie (konstruktor wizualny).
3. Wybierz opcję „Buduj od podstaw”.

Następnie będziesz mieć puste płótno, aby rozpocząć projektowanie w Divi.

Część 1: Tworzenie sekcji tytułowej

W tej pierwszej części stworzymy prosty tytuł układu.

Najpierw dodaj jednokolumnowy wiersz do sekcji.

Następnie dodaj nowy moduł tekstowy do wiersza.

Zaktualizuj zawartość modułu tekstowego w następujący sposób:

<h2>Save The Date<h2>

Następnie zaktualizuj styl tekstu nagłówka w następujący sposób:

• Czcionka nagłówka 2: Prata
• Rozmiar tekstu nagłówka 2: 130px (komputer), 70px (tablet), 40px (telefon)

Część 2: Tworzenie liczników za pomocą animacji przewijania

W następnej części utworzymy trzy liczniki, które będą animować liczby podczas przewijania, aż do spoczynku, aby wyświetlić datę (miesiąc, dzień i rok). Każdy licznik zostanie zbudowany z 5 modułów tekstowych i modułu dzielnika. Pierwszy moduł tekstowy posłuży jako etykieta licznika (tj. miesiąc, dzień, rok). Kolejne cztery moduły tekstowe będą zawierały inną liczbę (w postępie), która będzie animowana podczas przewijania za pomocą pionowych przesunięć ruchu w Divi. Dolny moduł dzielnika pomoże ukryć przepełnienie liczb.

Oto jak to zrobić.

Dodaj drugi wiersz

Pod istniejącym wierszem dodaj kolejny jednokolumnowy wiersz.

Ustawienia wiersza

Przed dodaniem dowolnego modułu zaktualizuj ustawienia wierszy w następujący sposób:

• Szerokość rynny: 1
• Padding: 0px na górze, 0px na dole

Ustawienia kolumny

Następnie otwórz ustawienia kolumny i zaktualizuj dopełnienie w następujący sposób:

• Wypełnienie (komputer): 100px dół
• Wypełnienie (tablet i telefon): 0px dół

Dodaj moduł tekstowy

Następnie dodaj moduł tekstowy do kolumny.

Treść/etykieta

Dla zawartości modułu tekstowego dodaj słowo „Miesiąc”.

Ustawienia projektowania tekstu

Po dodaniu zawartości zaktualizuj ustawienia projektu w następujący sposób:

• Kolor tła: #ffffff
• Czcionka tekstu: Prata
• Rozmiar tekstu: 40px
• Wysokość linii tekstu: 2em
• Szerokość: 100%
• Padding: 20px góra, 20px dół, 20px lewo, 20px prawo
• Szerokość dolnego obramowania: 5px
• Kolor dolnej krawędzi: #eeeeee

Pozycja

Następnie w zakładce Zaawansowane zaktualizuj opcje pozycji w następujący sposób:

• Pozycja: Względny
• Indeks Z 1

Dodaj moduł tekstowy dla pierwszego numeru

Gdy pierwszy moduł tekstowy jest już na miejscu, możemy zacząć dodawać liczby, które będą się poruszać podczas przewijania. Aby dodać pierwszy numer, dodaj nowy moduł tekstowy pod istniejącym modułem tekstowym „Miesiąc”.

Dodaj numer/treść

Następnie zaktualizuj etykietę modułu tekstowego, aby zawierała „num1”, aby ułatwić sobie odniesienie. Następnie zaktualizuj zawartość o numer „01”.

Ustawienia projektu dla numeru

Na karcie projekt zaktualizuj następujące elementy:

• Czcionka tekstu: Prata
• Kolor tekstu: #8ab2d3
• Rozmiar tekstu: 70px
• Odstępy między literami tekstu: 4px
• Wysokość linii tekstu: 1,5 em
• Dopełnienie: pozostało 20 pikseli

UWAGA: Liczby mają rozmiar tekstu 70px i wysokość wiersza 1,5em, co oznacza, że ​​całkowita wysokość modułu tekstowego będzie bliska 100px. Należy o tym pamiętać za każdym razem, gdy zaczynamy dodawać przesunięcia ruchu w pionie. Na przykład dodanie pionowego przesunięcia „1” do modułu tekstowego spowoduje przesunięcie modułu tekstowego dokładnie o 100px, co jest wysokością modułu tekstowego.

Efekty przewijania dla pierwszej liczby

Dodaj następujące efekty przewijania do modułu tekstowego.

Na karcie Ruch w pionie zaktualizuj następujące elementy:

• Włącz ruch pionowy: TAK
• Przesunięcie początkowe: 1 (przy 10%)
• Przesunięcie środkowe: 0 (przy 20%)
• Przesunięcie końcowe: -1 (przy 30%)

W zakładce Fading In and Out zaktualizuj następujące elementy:

• Włącz pojawianie się i zanikanie: TAK
• Początkowe krycie: 0% (przy 10%)
• Średnie krycie: 100% (przy 20%)
• Końcowe krycie: 0% (przy 30%)

Pamiętaj, aby ustawić wyzwalacz efektu ruchu na górze elementu:

• Wyzwalacz efektu ruchu: Góra elementu

Utwórz moduł tekstowy dla drugiej liczby

Zduplikuj pierwszy numer

Po utworzeniu pierwszego numeru zduplikuj go, aby utworzyć moduł tekstowy dla drugiego numeru. Następnie zaktualizuj etykietę w widoku warstw, aby uzyskać lepsze odniesienie.

Zaktualizuj numer/zawartość

Otwórz ustawienia dla drugiego modułu tekstowego numeru i zaktualizuj zawartość o numer „02”.

Aktualizuj pozycję

Następnie zaktualizuj opcje pozycji w następujący sposób:

• Pozycja: bezwzględna
• Przesunięcie pionowe: 126px

Zaktualizuj efekty przewijania

Następnie zaktualizuj efekty przewijania w następujący sposób:

Na karcie Ruch w pionie zaktualizuj następujące elementy:

• Przesunięcie początkowe: 1 (przy 20%)
• Przesunięcie środkowe: 0 (przy 30%)
• Przesunięcie końcowe: -1 (przy 40%)

W zakładce Fading In and Out zaktualizuj następujące elementy:

• Początkowe krycie: 0% (przy 20%)
• Średnie krycie: 100% (przy 30%)
• Końcowe krycie: 0% (przy 40%)

Utwórz moduł tekstowy dla trzeciego numeru

Zduplikuj drugą liczbę

Aby utworzyć moduł tekstowy dla trzeciego numeru, zduplikuj moduł tekstowy dla drugiego numeru.

Zaktualizuj numer/zawartość

Zaktualizuj zawartość o numer „03”.

Zaktualizuj efekty przewijania

Następnie zaktualizuj efekty przewijania:

Na karcie Ruch w pionie zaktualizuj następujące elementy:

• Przesunięcie początkowe: 1 (przy 30%)
• Przesunięcie środkowe: 0 (przy 40%)
• Przesunięcie końcowe: -1 (przy 50%)

W zakładce Fading In and Out zaktualizuj następujące elementy:

• Początkowe krycie: 0% (przy 30%)
• Średnie krycie: 100% (przy 40%)
• Końcowe krycie: 0% (przy 50%)

Utwórz moduł tekstowy dla czwartej liczby

Zduplikuj trzeci numer

Aby utworzyć czwartą liczbę dla licznika przewijania, zduplikuj moduł tekstowy dla trzeciej liczby.

Zaktualizuj numer/zawartość

Zaktualizuj zawartość o numer „04”.

Zaktualizuj efekty przewijania

Następnie zaktualizuj efekty przewijania:

Na karcie Ruch w pionie zaktualizuj następujące elementy:

• Przesunięcie początkowe: 1 (przy 40%)
• Przesunięcie środkowe: 0 (przy 50%)
• Przesunięcie końcowe: 0 (przy 60%)

W zakładce Fading In and Out zaktualizuj następujące elementy:

• Początkowe krycie: 0% (przy 40%)
• Średnie krycie: 100% (przy 50%)
• Końcowe krycie: 100% (przy 60%)

Dodaj dolną przegrodę

Pod ostatnim modułem tekstowym dodaj nowy moduł rozdzielający. Będzie to używane do ukrycia dolnego przepełnienia tekstu, który będzie przewijany do widoku.

Następnie wybierz opcję NIE, aby wyświetlić dzielnik.

Ustawienia stylu i pozycji

Zaktualizuj projekt przegrody w następujący sposób:

• Kolor tła: #ffffff
• Szerokość: 100%
• Wysokość: 100px
• Szerokość górnej krawędzi: 5px

Na karcie Zaawansowane zaktualizuj następujące elementy:

• Wyłącz na: telefonie i tablecie
• Pozycja: bezwzględna
• Lokalizacja: dolny lewy

WAŻNE: Przestrzeń, którą zajmie dzielnik, została utworzona wcześniej poprzez dodanie do kolumny dolnego wypełnienia o wielkości 100px. Jeśli nie dodasz tego dopełnienia, dzielnik nałoży się na liczby.

Tworzenie większej liczby liczników i kolumn

Powiel kolumnę 1 i zaktualizuj zawartość

Aby utworzyć nowy licznik, zduplikuj kolumnę 1. Spowoduje to automatyczne utworzenie drugiej kolumny ze wszystkimi elementami.

Następnie wystarczy zaktualizować zawartość wszystkich modułów tekstowych o nowy tekst i liczby.

Powiel kolumnę 2 i zaktualizuj zawartość

Po zaktualizowaniu zawartości wszystkich modułów tekstowych w kolumnie 2, zduplikuj kolumnę 2, aby utworzyć trzeci licznik dla roku. Następnie zaktualizuj zawartość każdego modułu tekstowego zgodnie z potrzebami.

Ostateczny wynik

Oto ostateczny wynik.

Końcowe przemyślenia

Ten prosty układ z przewijanymi animowanymi licznikami liczb powinien być przydatny do wyświetlania danych liczbowych w świeży i niepowtarzalny sposób. Zachęcamy do porzucenia koncepcji dat i korzystania z liczników do wszystkiego, co tylko możesz wymyślić!

Czekam na kontakt z Państwem w komentarzach.

Pozdrawiam!