Preskoči na glavni sadržaj

Kako stvoriti bešavnu tranziciju s efektima pomicanja 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]

Kada dizajnirate stranicu s uslugama, želite biti sigurni da vaši posjetitelji primijete sve različite usluge koje pružate. U mnogim će slučajevima ovo biti samo jedna određena usluga koju traže, ali ako pružite pojednostavljeni način u svojoj strukturi usluga, vjerojatnije je da će ih posjetitelji tretirati sve. 

U ovom vodiču pokazat ćemo vam kako postati kreativan s Divijevim efektima pomicanja i stvoriti neprimjetan prijelaz usluge. JSON datoteku možete preuzeti i besplatno!

Idemo.

Mogući ishod

Prije nego što uđemo u tutorial, pogledajmo rezultat na različitim veličinama zaslona.

Prijelaz između odjeljka divi

1, ponovno stvorite strukturu elemenata

Dodajte odjeljak br. 1

razmak

Započnite dodavanjem novog odjeljka na stranicu na kojoj radite. Otvorite postavke odjeljka i promijenite vrijednosti popunjavanja na različitim veličinama zaslona.

  • Gornja obloga: 80px (radna površina i tablet), 0px (telefon)
  • Donja obloga: 80px
Odjeljak parametra Divi

Dodajte novi redak

Struktura stupaca

Nastavite dodavati novi redak koristeći sljedeću strukturu stupaca:

dimenzioniranje

Bez dodavanja dodatnih modula, otvorite parametre retka i primijenite sljedeće promjene dimenzionalnih parametara:

  • Koristite prilagođenu širinu oluka: Da
  • Širina oluka: 1
  • Širina: 90%
  • Maksimalna širina: 1580px
Konfiguracija razmaka razdjelnika

razmak

Zatim dodajte prilagođeni gornji i donji rub.

  • Gornja margina: 200px
  • Donja marža: 200px
Konfiguracija razmaka između razmaka

Dodajte tekstualni modul u stupac 1

Dodajte H2 sadržaj

Vrijeme je za dodavanje modula, počevši od tekstualnog modula u stupcu 1. Unesite bilo koji sadržaj H2 koji želite.

Naše usluge koje nude trenutni stručnjaci

Postavke teksta H2

Idite na karticu dizajn modula i promijenite postavke teksta H2 na sljedeći način:

  • Naslov 2. Policija: Kvartalno
  • Zaglavlje 2 Veličina teksta: 80 px (desktop), 50px (tablet), 40px (telefon)
  • Visina linije 2 glave: 1.2em
Glavni divizija policije

razmak

Zatim dodajte nižu maržu na tabletu i telefonu.

  • Donja margina: 50 piksela (samo tablet i telefon)
Konfiguracija razmaka razmaka između teksta

Dodajte tekstualni modul u stupac 2

Dodajte sadržaj

Prijeđimo na drugi stupac. Tamo je prvi modul koji nam treba tekstualni modul s određenim sadržajem opisa.

Tekstualni okvir Content divi

Postavke teksta

Prebacite se na karticu dizajna modula i u skladu s tim promijenite postavke teksta:

  • Font teksta: kabina
  • Stil teksta: velika slova
  • Boja teksta: # 000000
  • Veličina teksta: 18px (radna površina), 15px (tablet), 13px (telefon)
  • Razmak slova u tekstu: 3px (desktop), 1px (tablet i telefon)
  • Visina retka teksta: 3em
Parametar teksta Divi

Dodajte modul za odvajanje u stupac 2

vidljivost

Sljedeći i posljednji modul koji nam treba u ovom stupcu je modul za odvajanje. Provjerite je li omogućena opcija "Prikaži separator".

  • Pokaži separator: Da
Vidljivi razdjelnik

Crta

Zatim promijenite boju linije modula.

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]

  • Boja linije: # 000000
Podjela u boji pozadine

dimenzioniranje

Zatim napravite neke promjene u parametrima veličine.

  • Težina razdjelnika: 3px
  • Širina: 28%
Divi odvajanje veličine

razmak

Dodajemo i gornju maržu.

  • Gornja margina: 10px
Razmak modula separatora Divi

Dodajte odjeljak br. 2

razmak

Prijeđimo na sljedeći redoviti odjeljak. Uklonite zadanu gornju oblogu iz odjeljka.

  • Gornja obloga: 0px
Odjeljak 2 razmaka divi

prelijeva

Također sakrijte preljeve.

  • Vodoravni preljev: skriven
  • Okomiti preljev: skriven
Sakrij prelijevanje modula divi

Dodajte novi redak

Struktura stupaca

Nastavite dodavati prvi red koristeći sljedeću strukturu stupaca:

Odaberite raspored divi

dimenzioniranje

Bez dodavanja dodatnih modula, otvorite parametre linije, pristupite parametrima dimenzioniranja i izvršite sljedeće izmjene:

  • Koristite prilagođenu širinu oluka: Da
  • Širina oluka: 1
  • Izjednačite visine stupaca: Da
  • Širina: 90%
  • Maksimalna širina: 1580px
Odjeljak Divi za konfiguraciju žlijeba

razmak

Zatim uklonite sve zadane gornje i donje obloge.

  • Gornja obloga: 0px
  • Donja obloga: 0px
Postavke razmaka između modula Divi 1

Postavke 1. stupca

Boja pozadine

Zatim otvorite postavke za stupac 1 i promijenite boju pozadine.

  • Boja pozadine: # f7f7f7
Konfiguracija pozadine modula Divi line

razmak

Dovršite postavke stupaca dodavanjem prilagođenih vrijednosti umetanja na različite veličine zaslona.

  • Gornja obloga: 200 px (radni stol), 100px (tablet i telefon)
  • Donje obloge: 200 px (radni stol), 100px (tablet i telefon)
  • Lijeva obloga: 8%
  • Desna obloga: 8%
Postavke stupca modula reda

Postavke 2. stupca

razmak

Nastavite otvaranjem postavki u stupcu 2. Idite na naprednu karticu i dodajte prilagođene vrijednosti umetanja na različite veličine zaslona.

  • Top padding: 100px (desktop), 50px (tablet i telefon)
  • Donja obloga: 200px
  • Lijeva obloga: 150 px (radni stol), 0 px (tablet i telefon)
Postavke razmaka modula Divi

Dodajte modul za odvajanje u stupac 1

vidljivost

U prvom stupcu, prvi modul koji nam treba je modul za odvajanje. Provjerite je li omogućena opcija "Prikaži separator".

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]

  • Pokaži separator: Da
Prikaži razdjelnik divi 1

Crta

Zatim promijenite boju linije modula.

  • Boja linije: # 000000
Postavke separatora Divi

dimenzioniranje

Izmijenite i parametre dimenzioniranja.

  • Težina razdjelnika: 3px
  • Širina: 50%
Divi odvajanje veličine

Dodajte tekstualni modul u stupac 1

Dodajte H3 sadržaj

Sljedeći modul koji nam treba u stupcu 1 je tekstualni modul sa sadržajem H3.

Postavka odjeljka sadržaja Divi

Postavke teksta H3

Prebacite se na karticu dizajna modula i promijenite postavke teksta H3:

  • Naslov 3. Policija: Kvartalno
  • Boja teksta predmeta 3: # 000000
  • Stavka 3 Veličina teksta: 50px (radna površina), 40px (tablet), 35px (telefon)
  • Visina linije 3 glave: 1.1em

Dodajte tekstualni modul u stupac 2

Dodajte sadržaj

U drugom stupcu prvi modul koji nam treba je tekstualni modul s nekim sadržajem opisa.

Postavka modula Divi tekst

Postavke teksta

Promijenite tekstualne postavke modula na sljedeći način:

  • Font teksta: kabina
  • Stil teksta: velika slova
  • Veličina teksta: 18px (radna površina), 15px (tablet), 13px (telefon)
  • Razmak slova u tekstu: 3px (desktop), 1px (tablet i telefon)
  • Visina retka teksta: 3em
Divi podešavanje fonta kalupa za tekst

Dodajte modul gumba u stupac 2

Dodajte kopiju

Sljedeći i zadnji modul koji nam treba je modul s gumbima. Unesite kopiju po vašem izboru.

Postavka sadržaja tekstualnog modula

Postavke gumba

Zatim stilizirajte gumb.

  • Upotrijebite prilagođene stilove za gumb: Da
  • Veličina teksta gumba: 20 piksela
  • Boja teksta gumba: #ffffff
  • Boja pozadine gumba: # 000000
  • Širina obruba gumba: 0px
Postavka stila gumba Divi
  • Font gumba: Kvartalno
  • Težina slova gumba: podebljano
Postavke boje gumba Divi

razmak

Također dodajte prilagođene padding.

  • Gornja obloga: 50px
  • Donja obloga: 50px
  • Lijevo oblaganje: 100px
  • Desna obloga: 100px
Postavke razmaka gumba modula Divi

Položaj

I prema tome promijenite gumb:

  • Pozicija: Apsolutno
  • Lokacija: donje lijevo
Podešavanje položaja modula gumba Divi

Klonirajte liniju onoliko puta koliko je potrebno

Nakon što kompletirate liniju i sve njene module, možete klonirati liniju tri puta.

Kloniraj divi modul

Promijenite sav sadržaj

Obavezno uredite sav sadržaj u duplikatnim linijama.

Uređivanje sadržaja odjeljka divi

2. Primijenite efekte pomicanja

Učinci pomicanja u prvom redu

Horizontalno kretanje

Nakon što dovršite sve retke u odjeljku, vrijeme je da dodate efekte pomicanja. Otvorite prvi red odjeljka i dodajte vodoravno kretanje.

  • Aktivirajte vodoravno kretanje: Da
  • Startni pomak: -5
  • Prosječni odmak: 0 (na 26%)
  • Krajnji odmak: 0
  • Učinak okidačkog pokreta: sredina elementa
Primijenite efekte pomicanja divi

Blijedi i izlazi

Koristite i dolazni i odlazni efekt izblijedjenja.

  • Uključite izblijedjenje i van: Da
  • Početna neprozirnost: 100%
  • Prosječna neprozirnost: 100% (kod 50%)
  • Krajnja neprozirnost: 0% (do 53%)
  • Učinak okidačkog pokreta: sredina elementa
Konfigurirajte odjeljak fade animacije divi

Učinci pomicanja srednjeg reda

Okomito kretanje

Zatim ćemo dodati efekte pomicanja u sve retke između prvog i posljednjeg retka odjeljka. Prvo upotrijebite vertikalni pokret:

Jednostavno izradite svoju mrežnu trgovinu

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

  • Aktivirajte okomito kretanje: Da
  • Startni pomak: -4
  • Prosječni odmak: 0 (na 26%)
  • Krajnji odmak: 0
  • Učinak okidača pokreta: sredina elementa
Konfiguracija aniacije pomicanja Divi

Blijedi i izlazi

Također aktivirajte ulazni i vanjski efekt izblijedjenja.

  • Uključite izblijedjenje i van: Da
  • Početna neprozirnost: 0%
  • Prosječna neprozirnost: 100% (od 27% do 50%)
  • Odstupanje kraja: 0 (pri 53%)
  • Učinak okidačkog pokreta: sredina elementa
Divi linija fade animacija

Učinci pomicanja zadnjeg retka

Okomito kretanje

Zatim otvorite posljednji redak odjeljka i dodajte sljedeće okomito kretanje:

  • Aktivirajte okomito kretanje: Da
  • Startni pomak: -4
  • Prosječni odmak: 0 (na 26%)
  • Krajnji odmak: 0
  • Učinak okidačkog pokreta: sredina elementa
Animacija pomicanja modula Divi line

Blijedi i izlazi

S dolaznim i odlaznim efektom bledi i gotovi ste!

  • Uključite izblijedjenje i van: Da
  • Početna neprozirnost: 0%
  • Prosječna neprozirnost: 100% (od 27% do 50%)
  • Krajnja neprozirnost: 100% (do 53%)
  • Učinak okidačkog pokreta: sredina elementa
Postavke animacije izgleda modula Divi line

Konačni rezultat

Sad kad smo prošli sve korake, pogledajmo konačno kako to izgleda na različitim veličinama zaslona.

Završni demo

Završne misli

U ovom smo vam članku pokazali kako stvoriti lijep prijelaz usluge s efektima pomicanja Divi. Čak i prije nego što jedan servis nestane, počinje se pojavljivati ​​drugi, dajući lijep prijelaz oku ugodan. Ovaj pristup pomoći će vam da istaknete svaku uslugu na pojedinačnoj razini. Također možete besplatno preuzeti datoteku JSON! Ako imate pitanja ili prijedloge, slobodno ostavite komentar u odjeljku za komentare u nastavku.

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