Preskoči na glavni sadržaj

Kako dodati animirani brojač za pomicanje na Divi

Divi: najlakša tema za WordPress

Divi: najbolja WordPress tema svih vremena!

više 901.000 preuzimanja, Divi je najpopularnija WordPress tema na svijetu. Kompletan je, jednostavan za korištenje i dolazi s više od 62 besplatnih predložaka. [Preporučeno]

Brojači animiranih brojeva popularni su na webu kao način prikazivanja numeričkih podataka koji ističu vrijednost usluga, studija slučaja itd. Divi ima namjenski modul brojača brojeva koji se može koristiti za jednostavno generiranje animiranih brojača brojeva.

Međutim, u ovom uputstvu pokazat ćemo vam kako stvoriti digitalne brojače koji animiraju pomicanje pomoću Divija. Koristeći Divijeve mogućnosti položaja i efekte pomicanja, osmislit ćemo jednostavan izgled za prikaz datuma s pomičnim brojevima.

Dio 1: Izrada odjeljka naslova

U ovom prvom dijelu stvorit ćemo jednostavan naslov za izgled.

Prvo dodajte redak od jednog stupca u odjeljak.

Registrirajte modul odjeljka za divi

Zatim u redak dodajte novi tekstualni modul.

Ažurirajte sadržaj tekstualnog modula sa sljedećim:

Spremite datum
Spremite datum 1

Zatim ažurirajte stil teksta zaglavlja na sljedeći način:

  • Naslov 2 Krstionica: Prata
  • Stavka 2 Veličina teksta: 130px (radna površina), 70px (tablet), 40px (telefon)
Izmjena naslova Divi

Dio 2: Izrada brojila s animacijom pomicanja

U ovom sljedećem dijelu stvorit ćemo tri brojača koji će animirati brojeve za pomicanje dok se ne zaustave kako bi se prikazao datum (mjesec, dan i godina). Svaki brojač bit će izgrađen pomoću ukupno 5 modula teksta i modula za razdvajanje. Prvi tekstualni modul služit će kao oznaka brojača (tj. Mjesec, dan, godina). Sljedeća četiri modula teksta sadržavat će različiti broj (u tijeku) koji će se animirati na pomicanju pomoću pomicanja vertikalnog pomicanja u Divi. Donji modul za odvajanje pomoći će sakriti preljev brojeva.

Evo kako.

Dodajte drugi redak

Ispod postojećeg retka dodajte još jedan redak u stupac.

Postavke linije

Prije dodavanja modula, ažurirajte parametre retka na sljedeći način:

  • Širina oluka: 1
  • Padding: 0px visoko, 0px low
Konfiguracija granice Divi

Parametri stupca

Zatim otvorite postavke stupca i ažurirajte ispun na sljedeći način:

  • Podstava (radni stol): 100 px
  • Padding (tablet i telefon): 0px low
Konfiguracija razmaka stupca Divi

Dodajte tekstualni modul

Zatim dodajte tekstualni modul u stupac.

Dodajte divi modul teksta

Sadržaj / oznaka

Za sadržaj tekstualnog modula dodajte riječ "mjesec".

Navedite mjesečni dio

Postavke dizajna teksta

Nakon dodavanja sadržaja ažurirajte dizajnerske postavke na sljedeći način:

  • Boja pozadine: #ffffff
  • Font teksta: Razgovarajte
  • Veličina teksta: 40px
  • Visina retka teksta: 2em
  • Širina: 100%
  • Padding: 20 piksela na vrhu, 20 piksela na dnu, 20 piksela na lijevoj strani, 20 piksela s desne strane
  • Širina donje granice: 5px
  • Boja donje granice: #eeeeee
Položaj

Zatim na kartici Napredno ažurirajte opcije položaja kako slijedi:

Jednostavno izradite svoju web stranicu s Elementor-om

Elementor vam omogućuje jednostavno stvaranje bilo kojeg dizajna web stranice s profesionalnim izgledom. Prestanite plaćati skupo za ono što možete učiniti sami. [Slobodni]

  • Pozicija: Relativno
  • Z indeks 1
Prata wordpress modul

Prvom broju dodajte tekstualni modul

Jednom kad je postavljen prvi modul teksta, možemo početi dodavati brojeve koji će se pomicati na pomicanju. Da biste dodali prvi broj, dodajte novi tekstualni modul u postojeći modul za tekst "Mjesec".

Dodajte tekstualni modul pripovjedača

Dodajte broj / sadržaj

Zatim ažurirajte naljepnicu modula teksta da biste pročitali "num1" radi lakšeg snalaženja. Zatim ažurirajte sadržaj brojem "01".

Dodaj modul s divi brojevima

Postavke dizajna za broj

Na kartici dizajna ažurirajte sljedeće:

  • Tekst teksta: Prata
  • Boja teksta teksta: # 8ab2d3
  • Veličina teksta teksta: 70px
  • Razmak slova u tekstu: 4 px
  • Visina retka teksta: 1.5em
  • Padding: 20px lijevo
Konfiguracija boje Divi

NAPOMENA: Brojevi imaju tekst veličine 70 px i visinu retka 1.5em, što znači da će ukupna visina tekstualnog modula biti blizu 100 px. To je važno imati na umu kad god počnemo dodavati odstupanja od vertikalnog kretanja. Na primjer, dodavanjem vertikalnog pomaka od "1" u tekstualni modul pomaknut će se tekstni modul točno 100 px, što je visina tekstualnog modula.

Pomaknite se efekti za prvi broj

U tekstualni modul dodajte sljedeće efekte pomicanja.

Na kartici Vertical Motion ažurirajte sljedeće:

  • Omogući vertikalno kretanje: DA
  • Početak pomaka: 1 (na 10%)
  • Prosječni odmak: 0 (na 20%)
  • Završno odstupanje: -1 (pri 30%)

Na kartici Fade In i Fade Out ažurirajte sljedeće:

  • Uključite fade unutra i van: DA
  • Početna neprozirnost: 0% (kod 10%)
  • Prosječna neprozirnost: 100% (kod 20%)
  • Krajnja neprozirnost: 0% (do 30%)

Obavezno postavite okidač za efekt pokreta na vrhu isječka:

  • Okidač efekta pokreta: vrh elementa
Konfiguracija modula za animaciju divi teksta

Napravite tekstualni modul za drugi broj

Umnožavanje prvog broja

Jednom kada je stvoren prvi broj, duplicirajte ga da biste stvorili tekstualni modul drugog broja. Zatim ažurirajte naljepnicu u prikazu slojeva radi bolje reference.

Dvostruki modul teksta divi 1

Ažurirajte broj / sadržaj

Otvorite parametre drugog digitalnog modula teksta i ažurirajte sadržaj brojem "02".

Uštedite broj 2 divi

Ažurirajte položaj

Zatim ažurirajte opcije položaja na sljedeći način:

  • Pozicija: Apsolutno
  • Okomiti pomak: 126px
Izmjena položaja modula divi teksta

Ažurirajte efekte pomicanja

Zatim ažurirajte efekte pomicanja na sljedeći način:

Na kartici Vertical Motion ažurirajte sljedeće:

Tražite li najbolje WordPress teme i dodatke?

Preuzmite najbolje dodatke i WordPress teme na Envato i jednostavno stvorite svoju web stranicu. Već više od preuzimanja 49.720.000. [ISKLJUČIVO]

  • Početak pomaka: 1 (na 20%)
  • Prosječni odmak: 0 (na 30%)
  • Završno odstupanje: -1 (pri 40%)

Na kartici Fade In i Fade Out ažurirajte sljedeće:

  • Početna neprozirnost: 0% (kod 20%)
  • Prosječna neprozirnost: 100% (kod 30%)
  • Krajnja neprozirnost: 0% (do 40%)
Divi. Efekt pomicanja animacije

Izradite tekstualni modul za treći broj

Umnožavanje drugog broja

Da biste stvorili tekstualni modul za treći broj, duplicirajte tekstualni modul za drugi broj.

Dvostruki tekstualni modul broj 3

Ažurirajte broj / sadržaj

Ažurirajte sadržaj brojem "03".

Izmijenite modul divi teksta

Ažurirajte efekte pomicanja

Zatim ažurirajte efekte pomicanja:

Na kartici Vertical Motion ažurirajte sljedeće:

  • Početak pomaka: 1 (na 30%)
  • Prosječni odmak: 0 (na 40%)
  • Završno odstupanje: -1 (pri 50%)

Na kartici Fade In i Fade Out ažurirajte sljedeće:

  • Početna neprozirnost: 0% (kod 30%)
  • Prosječna neprozirnost: 100% (kod 40%)
  • Krajnja neprozirnost: 0% (do 50%)
Uređivanje animacije tekstualnog modula

Za četvrti broj izradite tekstualni modul

Treće izdanje duplikata

Da biste stvorili četvrti broj brojača za pomicanje, duplicirajte tekstualni modul za treći broj.

Dvostruki tekstualni modul divi broj 4

Ažurirajte broj / sadržaj

Ažurirajte sadržaj brojem "04".

Konfigurirajte vrijednost divi tekstualnog modula

Ažurirajte efekte pomicanja

Zatim ažurirajte efekte pomicanja:

Na kartici Vertical Motion ažurirajte sljedeće:

  • Početak pomaka: 1 (na 40%)
  • Prosječni odmak: 0 (na 50%)
  • Odstupanje kraja: 0 (pri 60%)

Na kartici Fade In i Fade Out ažurirajte sljedeće:

  • Početna neprozirnost: 0% (kod 40%)
  • Prosječna neprozirnost: 100% (kod 50%)
  • Krajnja neprozirnost: 100% (do 60%)
Modul za konfiguraciju animacije 4 divi

Dodajte donji separator

Ispod posljednjeg modula za tekst dodajte novi modul za razdvajanje. To će se koristiti za skrivanje donjeg preljeva pomičnog teksta u prikazu.

Dodajte modul za razdvajanje divi

Zatim odaberite NE za prikaz separatora.

Ne prikazuj razdjelnik divi

Postavke stila i položaja

Ažurirajte dizajn separatora na sljedeći način:

  • Boja pozadine: #ffffff
  • Širina: 100%
  • Visina: 100px
  • Širina gornje granice: 5px

Na kartici Napredno ažurirajte sljedeće:

  • Deaktiviraj na: telefon i tablet
  • Pozicija: Apsolutno
  • Lokacija: donje lijevo

VAŽNO: Prostor koji će zauzeti separator stvoren je ranije dodavanjem donjeg ispuna od 100 piksela u stupac. Ako ne dodate ovo popunjavanje, separator će se preklapati sa znamenkama.

Jednostavno izradite svoju mrežnu trgovinu

Preuzmite besplatnu WooCommerce, najbolji e-trgovinski dodatak za prodaju fizičkih i digitalnih proizvoda na WordPressu. [Preporučeno]

Izrada dodatnih brojača i stupaca

Umnožavanje stupca 1 i ažuriranje sadržaja

Da biste stvorili novi brojač, duplicirajte stupac 1. Time će se stvoriti drugi stupac sa svim elementima na mjestu automatski.

Tada trebate samo ažurirati sadržaj svih tekstualnih modula novim tekstovima i brojevima.

Duplikat cijelog stupca

Umnožavanje stupca 2 i ažuriranje sadržaja

Nakon što se sadržaj svih tekstualnih modula ažurira u stupcu 2, duplicirajte stupac 2 kako biste stvorili treći brojač za godinu. Zatim ažurirajte sadržaj svakog tekstualnog modula po potrebi.

Konačni rezultat

Evo konačnog rezultata.

Ostali resursi

Završne misli

Ovaj jednostavan izgled s animiranim brojačima pomicanja brojeva trebao bi biti koristan za prikaz digitalnih podataka na nov i jedinstven način. Slobodno izbacite koncept datuma i koristite brojače za sve o čemu možete sanjati!

Ovaj članak sadrži komentare 0

Ostavi komentar

Vaša email adresa neće biti objavljena. Obavezna polja su označena *

Ova web stranica koristi Akismet kako bi smanjila neželjene. Saznajte više o načinu upotrebe podataka o vašim komentarima.

Povratak na vrh
0 dionice
udio
cvrkut
Prijaviti