Přejít k hlavnímu obsahu

Jak přidat animovaný čítač k posouvání na Divi

Divi: nejjednodušší téma WordPress k použití

Divi: Nejlepší WordPress téma všech dob!

více Stahování 701.000, Divi je nejoblíbenější téma WordPress na světě. Je kompletní, snadno použitelný a je dodáván s více než šablonami 62 zdarma. [Doporučeno]

Animované počitadla čísel jsou na webu populární jako způsob zobrazení číselných dat, aby se zvýraznila hodnota služeb, případové studie atd. Divi má vyhrazený modul počítadla čísel, kterým lze snadno generovat animované počitadla čísel.

V tomto kurzu vám však ukážeme, jak vytvořit digitální čítače, které se animují při posouvání pomocí Divi. Pomocí možností polohy Divi a efektů posouvání navrhneme jednoduché rozvržení pro zobrazení data s posouváním čísel.

Část 1: Vytvoření nadpisové sekce

V této první části vytvoříme jednoduchý název pro rozvržení.

Nejprve do sekce přidejte řádek jednoho sloupce.

Zaregistrujte si modul divi sekce

Poté do řádku přidejte nový textový modul.

Aktualizujte obsah textového modulu následujícím způsobem:

Uložit datum
Uložit datum 1

Poté aktualizujte styl textu záhlaví následujícím způsobem:

  • Nadpis 2 Písmo: Prata
  • Položka 2 Velikost textu: 130 pixelů (stolní), 70 pixelů (tablet), 40 pixelů (telefon)
Úprava názvu Divi

Část 2: Vytvoření čítačů s posouvací animací

V této další části vytvoříme tři čítače, které budou animovat posouvající se čísla, dokud se nezastaví, aby se zobrazilo datum (měsíc, den a rok). Každý čítač bude sestaven pomocí celkem 5 textových modulů a oddělovacího modulu. První textový modul bude sloužit jako štítek počitadla (tj. Měsíc, den, rok). Další čtyři textové moduly budou každý obsahovat jiné číslo (probíhá), které bude při posouvání animováno pomocí vertikálních posunů pohybu v Divi. Spodní separační modul pomůže skrýt přetečení čísel.

Zde je návod.

Přidejte druhý řádek

Pod existující řádek přidejte do sloupce další řádek.

Nastavení linky

Před přidáním modulu aktualizujte parametry řádku následujícím způsobem:

  • Šířka okapu: 1
  • Výplň: 0px vysoká, 0px nízká
Konfigurace hranice Divi

Parametry sloupce

Poté otevřete nastavení sloupce a aktualizujte výplň následovně:

  • Polstrování (stůl): 100px nízké
  • Výplň (tablet a telefon): 0px nízká
Konfigurace mezer mezi sloupci Divi

Přidat textový modul

Poté do sloupce přidejte textový modul.

Přidejte textový modul divi

Obsah / štítek

K obsahu textového modulu přidejte slovo „měsíc“.

Uveďte měsíční divi

Nastavení návrhu textu

Po přidání obsahu aktualizujte nastavení designu takto:

  • Barva pozadí: #ffffff
  • Textové písmo: Talk
  • Velikost textu: 40px
  • Výška řádku textu: 2em
  • Šířka: 100%
  • Výplň: 20 pixelů nahoře, 20 pixelů dole, 20 pixelů vlevo, 20 pixelů vpravo
  • Šířka dolního okraje: 5px
  • Barva dolního okraje: #eeeeee
Pozice

Poté na kartě Upřesnit aktualizujte možnosti polohy následujícím způsobem:

Vytvořte si snadno svůj web pomocí Elementoru

Elementor vám umožní snadno vytvořit jakýkoli design webových stránek s profesionálním vzhledem. Přestaňte platit drahé za to, co můžete udělat sami. [Zdarma]

  • Pozice: Relativní
  • Z index 1
WordPress modul Prata

Přidejte textový modul pro první vydání

Jakmile je první textový modul na místě, můžeme začít přidávat čísla, která se budou pohybovat na svitku. Chcete-li přidat první číslo, přidejte nový textový modul pod stávající textový modul „Měsíc“.

Přidejte textový modul vypravěče

Přidat číslo / obsah

Poté aktualizujte štítek textového modulu tak, aby byl pro snadnější orientaci čitelný „num1“. Poté aktualizujte obsah číslem „01“.

Přidejte modul divi number

Nastavení návrhu pro číslo

Na kartě Návrh aktualizujte následující:

  • Textové písmo: Prata
  • Barva textu textu: # 8ab2d3
  • Velikost textu: 70px
  • Rozestup písmen: 4px
  • Výška řádku textu: 1.5m
  • Výplň: 20px vlevo
Konfigurace barev Divi

POZNÁMKA: Čísla mají velikost textu 70px a výšku řádku 1.5em, což znamená, že celková výška textového modulu bude téměř 100px. To je důležité mít na paměti, kdykoli začneme přidávat vertikální posunutí posunu. Například přidání svislého posunu „1“ k textovému modulu posune textový modul přesně o 100 pixelů, což je výška textového modulu.

Posuňte efekty pro první číslo

Přidejte následující textové efekty do textového modulu.

Na kartě Vertikální pohyb aktualizujte následující:

  • Povolit vertikální pohyb: ANO
  • Počáteční posun: 1 (při 10%)
  • Průměrný ofset: 0 (při 20%)
  • Koncový offset: -1 (při 30%)

Na kartě Fade In a Fade Out aktualizujte následující:

  • Aktivace vyblednutí a vystoupení: ANO
  • Počáteční krytí: 0% (na 10%)
  • Průměrná neprůhlednost: 100% (při 20%)
  • Konečná krytí: 0% (až 30%)

Nezapomeňte nastavit spoušť pohybového efektu v horní části klipu:

  • Motion Effect Trigger: Element Top
Konfigurace divi textu animačního modulu

Vytvořte textový modul pro druhé číslo

Duplikujte první číslo

Jakmile je vytvořeno první číslo, duplikujte ho a vytvořte textový modul druhého čísla. Poté aktualizujte štítek v zobrazení vrstev pro lepší referenci.

Duplikovat textový modul divi 1

Aktualizujte číslo / obsah

Otevřete parametry druhého digitálního textového modulu a aktualizujte obsah číslem "02".

Uložit číslo 2 divi

Aktualizovat pozici

Poté aktualizujte možnosti polohy následujícím způsobem:

  • Pozice: Absolutní
  • Svislé odsazení: 126 pixelů
Úprava pozice textového modulu divi

Aktualizujte efekty posouvání

Poté aktualizujte efekty posouvání následujícím způsobem:

Na kartě Vertikální pohyb aktualizujte následující:

Hledáte ty nejlepší témata a pluginy aplikace WordPress?

Stáhněte si ty nejlepší pluginy a témata aplikace WordPress na Envato a snadno si vytvořte své webové stránky. Již více než stahování 49.720.000. [EXCLUSIVE]

  • Počáteční posun: 1 (při 20%)
  • Průměrný ofset: 0 (při 30%)
  • Koncový offset: -1 (při 40%)

Na kartě Fade In a Fade Out aktualizujte následující:

  • Počáteční krytí: 0% (na 20%)
  • Průměrná neprůhlednost: 100% (při 30%)
  • Konečná krytí: 0% (až 40%)
Animace posouvající efekt divi

Vytvořte textový modul pro třetí vydání

Duplikujte druhé číslo

Chcete-li vytvořit textový modul pro třetí číslo, duplikujte textový modul pro druhé číslo.

Duplicitní textový modul číslo 3

Aktualizujte číslo / obsah

Aktualizujte obsah číslem „03“.

Upravit textový modul divi

Aktualizujte efekty posouvání

Poté aktualizujte efekty posouvání:

Na kartě Vertikální pohyb aktualizujte následující:

  • Počáteční posun: 1 (při 30%)
  • Průměrný ofset: 0 (při 40%)
  • Koncový offset: -1 (při 50%)

Na kartě Fade In a Fade Out aktualizujte následující:

  • Počáteční krytí: 0% (na 30%)
  • Průměrná neprůhlednost: 100% (při 40%)
  • Konečná krytí: 0% (až 50%)
Upravit animaci textového modulu

Vytvořte textový modul pro čtvrté vydání

Třetí duplicitní vydání

Chcete-li vytvořit čtvrté číslo pro posuvník, duplikujte textový modul pro třetí číslo.

Duplicitní textový modul divi číslo 4

Aktualizujte číslo / obsah

Aktualizujte obsah číslem „04“.

Nakonfigurujte hodnotu textového modulu divi

Aktualizujte efekty posouvání

Poté aktualizujte efekty posouvání:

Na kartě Vertikální pohyb aktualizujte následující:

  • Počáteční posun: 1 (při 40%)
  • Průměrný ofset: 0 (při 50%)
  • Koncový offset: 0 (při 60%)

Na kartě Fade In a Fade Out aktualizujte následující:

  • Počáteční krytí: 0% (na 40%)
  • Průměrná neprůhlednost: 100% (při 50%)
  • Konečná krytí: 100% (až 60%)
Konfigurační modul animace 4 divi

Přidejte spodní oddělovač

Pod poslední textový modul přidejte nový oddělovací modul. To se použije ke skrytí spodního přetečení posouvaného textu v zobrazení.

Přidejte modul oddělovače divi

Poté zvolte NO pro zobrazení oddělovače.

Nezobrazujte oddělovač divi

Nastavení stylu a polohy

Aktualizujte návrh oddělovače takto:

  • Barva pozadí: #ffffff
  • Šířka: 100%
  • Výška: 100px
  • Šířka horního okraje: 5px

Na kartě Upřesnit aktualizujte následující:

  • Deaktivovat na: telefon a tablet
  • Pozice: Absolutní
  • Umístění: vlevo dole

DŮLEŽITÉ: Prostor, který bude zabírat oddělovač, byl vytvořen dříve přidáním dolního odsazení 100 pixelů do sloupce. Pokud tuto výplň nepřidáte, oddělovač překročí číslice.

Snadno vytvořte svůj online obchod

Stáhněte si zdarma WooCommerce, nejlepší e-commerce pluginy pro prodej vašich fyzických a digitálních produktů na WordPress. [Doporučeno]

Vytvoření dalších čítačů a sloupců

Duplikujte sloupec 1 a aktualizujte obsah

Chcete-li vytvořit nový čítač, duplikujte sloupec 1. Tímto se automaticky vytvoří druhý sloupec se všemi prvky na místě.

Pak stačí aktualizovat obsah všech textových modulů novými texty a čísly.

Duplikovat celý sloupec divi

Duplikujte sloupec 2 a aktualizujte obsah

Jakmile je obsah všech textových modulů aktualizován ve sloupci 2, duplikujte sloupec 2 a vytvořte třetí počítadlo pro daný rok. Poté podle potřeby aktualizujte obsah každého textového modulu.

Konečný výsledek

Zde je konečný výsledek.

Další zdroje

Závěrečné myšlenky

Toto jednoduché rozložení s animovaným posouváním počitadel čísel by mělo být užitečné pro zobrazení digitálních dat novým a jedinečným způsobem. Neváhejte se zbavit konceptu rande a použít pulty na cokoli, o čem můžete snít!

Tento článek obsahuje komentáře 0

Zanechat komentář

Vaše e-mailová adresa nebude zveřejněna. Povinné položky jsou označeny *

Tato stránka používá společnost Akismet ke snížení nežádoucích účinků. Přečtěte si další informace o tom, jak se používají vaše komentáře.

Zpět na začátek
0 akcie
podíl
tweet
Zadat