Przejdź do głównej treści

Jak dodać animowany licznik do przewijania w Divi

Divi: najłatwiejszy w użyciu motyw WordPress

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]

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 itp. Divi ma dedykowany moduł licznika liczb, który można wykorzystać do łatwego generowania animowanych liczników liczb.

Jednak w tym samouczku pokażemy, jak tworzyć cyfrowe liczniki, które animują przewijanie za pomocą Divi. Korzystając z opcji pozycji Divi i efektów przewijania, zaprojektujemy prosty układ do wyświetlania daty z przewijanymi liczbami.

Część 1: Tworzenie sekcji tytułowej

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

Najpierw dodaj wiersz jednej kolumny do sekcji.

Zarejestruj moduł sekcji divi

Następnie dodaj nowy moduł tekstowy do wiersza.

Zaktualizuj zawartość modułu tekstowego o:

Zapisz datę
Zapisz datę 1

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

  • Nagłówek 2 Czcionka: Prata
  • Pozycja 2 Rozmiar tekstu: 130 pikseli (komputer stacjonarny), 70 pikseli (tablet), 40 pikseli (telefon)
Modyfikacja tytułu Divi

Część 2: Tworzenie liczników z przewijaną animacją

W następnej części utworzymy trzy liczniki, które będą animować przewijane liczby, aż przestaną wyświetlać datę (miesiąc, dzień i rok). Każdy licznik zostanie zbudowany przy użyciu łącznie 5 modułów tekstowych i modułu separatora. Pierwszy moduł tekstowy będzie służył jako etykieta licznika (tj. Miesiąc, dzień, rok). Kolejne cztery moduły tekstowe będą zawierały inną liczbę (w toku), która będzie animowana podczas przewijania przy użyciu przesunięć ruchu w pionie w Divi. Niższy moduł separacji pomoże ukryć przepełnienie liczb.

Oto jak.

Dodaj drugą linię

Pod istniejącym wierszem dodaj kolejny wiersz do kolumny.

Ustawienia linii

Przed dodaniem modułu zaktualizuj parametry wiersza w następujący sposób:

  • Szerokość rynny: 1
  • Wypełnienie: 0px wysoki, 0px niski
Konfiguracja Divi border

Parametry kolumny

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

  • Wyściółka (biurko): niska 100 pikseli
  • Wypełnienie (tablet i telefon): 0px niski
Konfiguracja odstępów między kolumnami Divi

Dodaj moduł tekstowy

Następnie dodaj moduł tekstowy do kolumny.

Dodaj moduł tekstowy divi

Treść / etykieta

Do treści modułu tekstowego dodaj słowo „miesiąc”.

Określ podział miesiąca

Ustawienia projektowania tekstu

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

  • Kolor tła: #ffffff
  • Czcionka tekstu: Talk
  • Rozmiar tekstu: 40px
  • Wysokość linii tekstu: 2em
  • Szerokość: 100%
  • Wypełnienie: 20 pikseli u góry, 20 pikseli u dołu, 20 pikseli po lewej, 20 pikseli po prawej
  • Szerokość dolnej krawędzi: 5px
  • Kolor dolnej granicy: #eeeeee
Pozycja

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

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

  • Pozycja: względna
  • Indeks Z 1
Moduł Prata wordpress

Dodaj moduł tekstowy do pierwszego wydania

Po umieszczeniu pierwszego modułu tekstowego możemy rozpocząć dodawanie liczb, które będą poruszać się po zwoju. Aby dodać pierwszą liczbę, dodaj nowy moduł tekstowy pod istniejącym modułem tekstowym „Miesiąc”.

Dodaj moduł tekstowy gawędziarza

Dodaj numer / treść

Następnie zaktualizuj etykietę modułu tekstowego, tak aby brzmiała „num1” w celu ułatwienia wyszukiwania informacji. Następnie zaktualizuj zawartość o numerze „01”.

Dodaj moduł numeru divi

Ustawienia projektu dla liczby

Na karcie projektu zaktualizuj następujące elementy:

  • Czcionka tekstu: Prata
  • Kolor tekstu tekstu: # 8ab2d3
  • Rozmiar tekstu: 70 pikseli
  • Odstępy między literami: 4px
  • Wysokość linii tekstu: 1.5 em
  • Wypełnienie: pozostało 20 pikseli
Konfiguracja kolorów Divi

UWAGA: Liczby mają rozmiar tekstu 70px i wysokość linii 1.5em, co oznacza, że ​​całkowita wysokość modułu tekstowego będzie bliska 100px. Należy o tym pamiętać, gdy zaczynamy dodawać pionowe przesunięcia ruchu. Na przykład dodanie pionowego przesunięcia „1” do modułu tekstowego spowoduje przesunięcie modułu tekstowego dokładnie o 100 pikseli, co stanowi wysokość modułu tekstowego.

Przewiń efekty dla pierwszego numeru

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

Na karcie Ruch pionowy zaktualizuj następujące elementy:

  • Włącz ruch pionowy: TAK
  • Rozpocznij przesunięcie: 1 (przy 10%)
  • Średnie przesunięcie: 0 (przy 20%)
  • Przesunięcie końcowe: -1 (przy 30%)

Na karcie Pojawianie się i zanikanie zaktualizuj następujące elementy:

  • Włączaj i wyłączaj ściemnianie: TAK
  • Początkowe krycie: 0% (przy 10%)
  • Średnie krycie: 100% (przy 20%)
  • Koniec krycia: 0% (do 30%)

Upewnij się, że wyzwalacz dla efektu ruchu jest ustawiony na górze klipu:

  • Wyzwalacz efektu ruchu: góra elementu
Konfiguracja tekstu divi modułu animacji

Utwórz moduł tekstowy dla drugiego numeru

Zduplikuj pierwszy numer

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

Zduplikowany moduł tekstowy divi 1

Zaktualizuj numer / treść

Otwórz parametry drugiego cyfrowego modułu tekstowego i zaktualizuj zawartość o numerze „02”.

Zapisz numer 2 divi

Zaktualizuj pozycję

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

  • Pozycja: absolutna
  • Przesunięcie pionowe: 126px
Modyfikacja pozycji modułu divi text

Zaktualizuj efekty przewijania

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

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

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]

  • Rozpocznij przesunięcie: 1 (przy 20%)
  • Średnie przesunięcie: 0 (przy 30%)
  • Przesunięcie końcowe: -1 (przy 40%)

Na karcie Pojawianie się i zanikanie zaktualizuj następujące elementy:

  • Początkowe krycie: 0% (przy 20%)
  • Średnie krycie: 100% (przy 30%)
  • Koniec krycia: 0% (do 40%)
Animacja efektu przewijania divi

Utwórz moduł tekstowy dla trzeciego wydania

Zduplikuj drugi numer

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

Powielony numer modułu tekstowego 3

Zaktualizuj numer / treść

Zaktualizuj treść o numerze „03”.

Zmodyfikuj moduł Divi Text

Zaktualizuj efekty przewijania

Następnie zaktualizuj efekty przewijania:

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

  • Rozpocznij przesunięcie: 1 (przy 30%)
  • Średnie przesunięcie: 0 (przy 40%)
  • Przesunięcie końcowe: -1 (przy 50%)

Na karcie Pojawianie się i zanikanie zaktualizuj następujące elementy:

  • Początkowe krycie: 0% (przy 30%)
  • Średnie krycie: 100% (przy 40%)
  • Koniec krycia: 0% (do 50%)
Edytuj animację modułu tekstowego

Utwórz moduł tekstowy dla czwartego wydania

Trzeci duplikat problemu

Aby utworzyć czwarty numer licznika przewijania, zduplikuj moduł tekstowy dla trzeciego numeru.

Zduplikowany moduł tekstowy numer divi 4

Zaktualizuj numer / treść

Zaktualizuj treść o numerze „04”.

Skonfiguruj wartość modułu Divi Text

Zaktualizuj efekty przewijania

Następnie zaktualizuj efekty przewijania:

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

  • Rozpocznij przesunięcie: 1 (przy 40%)
  • Średnie przesunięcie: 0 (przy 50%)
  • Przesunięcie końcowe: 0 (przy 60%)

Na karcie Pojawianie się i zanikanie zaktualizuj następujące elementy:

  • Początkowe krycie: 0% (przy 40%)
  • Średnie krycie: 100% (przy 50%)
  • Koniec krycia: 100% (do 60%)
Moduł konfiguracji animacji 4 divi

Dodaj dolny separator

Pod ostatnim modułem tekstowym dodaj nowy moduł separatora. Będzie to używane do ukrycia dolnego przepełnienia przewijanego tekstu w widoku.

Dodaj moduł separatora divi

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

Nie wyświetlaj separatora divi

Ustawienia stylu i pozycji

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

  • Kolor tła: #ffffff
  • Szerokość: 100%
  • Wysokość: 100px
  • Szerokość górnej ramki: 5 pikseli

Na karcie Zaawansowane zaktualizuj następujące elementy:

  • Dezaktywuj: telefon i tablet
  • Pozycja: absolutna
  • Lokalizacja: u dołu po lewej

WAŻNE: Miejsce, które będzie zajmować separator, zostało utworzone wcześniej przez dodanie do kolumny wypełnienia dolnego o 100 pikseli. Jeśli nie dodasz tego wypełnienia, separator będzie nakładał się na cyfry.

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]

Tworzenie dodatkowych liczników i kolumn

Zduplikuj kolumnę 1 i zaktualizuj treść

Aby utworzyć nowy licznik, zduplikuj kolumnę 1. Spowoduje to utworzenie drugiej kolumny z automatycznie umieszczonymi wszystkimi elementami.

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

Zduplikuj divi całej kolumny

Zduplikuj kolumnę 2 i zaktualizuj treść

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

Ostateczny wynik

Oto wynik końcowy.

Inne zasoby

końcowe przemyślenia

Ten prosty układ z animowanymi, przewijanymi licznikami liczb powinien być przydatny do wyświetlania danych cyfrowych w nowy i niepowtarzalny sposób. Nie wahaj się porzucić pojęcia daty i używaj liczników do wszystkiego, o czym tylko możesz marzyć!

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
0 akcji
udział
ćwierkanie
Enregistrer