Kada dizajnirate svoju stranicu usluga, želite biti sigurni da vaša posjetitelji primijetite sve različite usluge koje pružate. U mnogim slučajevima to će biti samo jedna specifična usluga koju traže, ali ako pružite pojednostavljen način u strukturi svoje usluge, vjerojatnije je da će vaša posjetitelji nositi se sa svima njima.
U ovom vodiču pokazat ćemo vam kako postati kreativni s efektima pomicanja Divi i stvoriti besprijekoran prijelaz usluge. Također ćete moći besplatno preuzeti JSON datoteku!
Idemo.
Mogući ishod
Prije nego što uđemo u tutorial, pogledajmo rezultat na različitim veličinama zaslona.
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
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
razmak
Zatim dodajte prilagođeni gornji i donji rub.
- Gornja margina: 200px
- Donja marža: 200px
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 sadržaj H2 po vašem izboru.
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
razmak
Zatim dodajte nižu maržu na tabletu i telefonu.
- Donja margina: 50 piksela (samo tablet i telefon)
Dodajte tekstualni modul u stupac 2
Dodajte sadržaj
Prijeđimo na drugi stupac. Tu je prvi modul koji trebamo tekstualni modul s određenim sadržaj opis.
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
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
Crta
Zatim promijenite boju linije modula.
- Boja linije: # 000000
dimenzioniranje
Zatim napravite neke promjene u parametrima veličine.
- Težina razdjelnika: 3px
- Širina: 28%
razmak
Dodajemo i gornju maržu.
- Gornja margina: 10px
Dodajte odjeljak br. 2
razmak
Prijeđimo na sljedeći redoviti odjeljak. Uklonite zadanu gornju oblogu iz odjeljka.
- Gornja obloga: 0px
prelijeva
Također sakrijte preljeve.
- Vodoravni preljev: skriven
- Okomiti preljev: skriven
Dodajte novi redak
Struktura stupaca
Nastavite dodavati prvi red koristeći sljedeću strukturu stupaca:
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
razmak
Zatim uklonite sve zadane gornje i donje obloge.
- Gornja obloga: 0px
- Donja obloga: 0px
Postavke 1. stupca
Boja pozadine
Zatim otvorite postavke za stupac 1 i promijenite boju pozadine.
- Boja pozadine: # f7f7f7
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 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)
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".
- Pokaži separator: Da
Crta
Zatim promijenite boju linije modula.
- Boja linije: # 000000
dimenzioniranje
Izmijenite i parametre dimenzioniranja.
- Težina razdjelnika: 3px
- Širina: 50%
Dodajte tekstualni modul u stupac 1
Dodajte H3 sadržaj
Sljedeći modul koji nam treba u stupcu 1 je tekstualni modul s sadržaj H3.
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.
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
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.
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
- Font gumba: Kvartalno
- Težina slova gumba: podebljano
razmak
Također dodajte prilagođene padding.
- Gornja obloga: 50px
- Donja obloga: 50px
- Lijevo oblaganje: 100px
- Desna obloga: 100px
Položaj
I prema tome promijenite gumb:
- Pozicija: Apsolutno
- Lokacija: donje lijevo
Klonirajte liniju onoliko puta koliko je potrebno
Nakon što kompletirate liniju i sve njene module, možete klonirati liniju tri puta.
Promijenite sav sadržaj
Obavezno uredite sav sadržaj u duplikatnim linijama.
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
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
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:
- Aktivirajte okomito kretanje: Da
- Startni pomak: -4
- Prosječni odmak: 0 (na 26%)
- Krajnji odmak: 0
- Učinak okidača pokreta: sredina elementa
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
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
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
Konačni rezultat
Sad kad smo prošli sve korake, pogledajmo konačno kako to izgleda na različitim veličinama zaslona.
Završne misli
U ovom smo vam članku pokazali kako stvoriti prekrasan prijelaz za posluživanje s efektima pomicanja Divi. Čak i prije nego što jedan servis nestane, drugi se počinje pojavljivati, dajući lijep prijelaz koji je ugodan za oko. Ovakav pristup pomoći će vam da svaku uslugu istaknete na individualnoj razini. Također ste mogli besplatno preuzeti JSON datoteku! Ako imate pitanja ili prijedloga, slobodno ostavite komentar u odjeljku za komentare u nastavku.
