Kada budete stvarali svoju stranicu O nama, vjerojatno ćete tamo htjeti predstaviti i članove svog tima. Čineći to, dopuštate posjetitelji komunicirajte s ljudima koji stoje iza vaše tvrtke. Ako tražite način da animirate odjeljak članova vašeg tima na pomicanju, ovaj vodič bi vam mogao biti od pomoći. Napravit ćemo vrtuljak za članove tima s automatskim pomicanjem koji se pomiče kada vaš posjetitelji pomičite stranicu.
Demonstracija
Prije nego što uđemo u tutorial, pogledajmo rezultat na različitim veličinama zaslona.
Početak začeća
Dodajte novi odjeljak
razmak
Započnite dodavanjem novog redovnog odjeljka na stranicu na kojoj radite. Otvorite postavke odjeljka i dodajte prilagođene obloge na različitim veličinama zaslona.
- Gornja obloga: 200 px (radni stol), 100px (tablet i telefon)
- Donje obloge: 200 px (radni stol), 100px (tablet i telefon)
prelijeva
Kako bismo bili sigurni da se u našem dizajnu ne pojavljuje vodoravna traka za pomicanje, sakriti ćemo preljeve odjeljaka u naprednoj kartici.
- Vodoravni preljev: skriven
- Okomiti preljev: skriven
Dodajte redak br. 1
Struktura stupaca
Nastavite dodavati novi redak odjeljku koristeći sljedeću strukturu stupaca:
dimenzioniranje
Bez dodavanja bilo kakvih modula, otvorite postavke reda, prebacite se na karticu dizajn i promijenite širinu i maksimalnu širinu u postavkama veličine.
- Širina: 90%
- Maksimalna širina: 1580px
razmak
Također dodamo prilagođene gornje i donje obloge.
- Gornja obloga: 100px
- Donja obloga: 100px
Dodajte tekstualni modul u stupac
Dodajte H2 sadržaj
Vrijeme je za dodavanje modula, počevši od prvog tekstualnog modula. Unesite ga 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:
- Naziv fonta 2: Quicksand
- Naziv fonta 2: polu-podebljani
- Boja teksta predmeta 2: # 000000
- Zaglavlje 2 Veličina teksta: 70 px (desktop), 50px (tablet), 40px (telefon)
Dodajte modul za odvajanje u stupac
vidljivost
Zatim dodajte modul za odvajanje. Provjerite je li omogućena opcija "Prikaži separator".
- Pokaži separator: Da
Crta
Zatim promijenite postavke linije.
- Boja linije: # edf000
- Stil linije: čvrst
- Pozicija crte: gore
dimenzioniranje
I dovršite parametre modula izmjenom dimenzionalnih parametara u skladu s tim:
- Težina razdjelnika: 20px
- Širina: 11%
- Poravnanje modula: lijevo
- Visina: 20px
Dodajte liniju br. 2
Struktura stupaca
U sljedeći red! Upotrijebite sljedeću strukturu stupaca:
dimenzioniranje
Bez dodavanja dodatnih modula, otvorite parametre retka i izmijenite parametre veličine na sljedeći način:
- Koristite prilagođenu širinu oluka: Da
- Širina oluka: 2
- Širina: 100%
- Maks. Širina: 100%
razmak
Zatim dodajte lijevu i desnu oblogu samo na manjim zaslonima.
- Lijeva obloga: 5% (samo tablet i telefon)
- Pravo podmetanje: 5% (samo tablet i telefon)
Parametri stupca (5x)
Sada, u sljedeća tri koraka ovog vodiča, napravit ćemo neke promjene u stupcima. Primijenite tri koraka na svaki stupac u retku.
Gradijentna pozadina
Prvo dodajte pozadinu gradijenta u svaki stupac.
- 1 boja: rgba (255,255,255,0)
- 2 boja: rgba (0,0,0,0,84)
- Tip gradijenta: linearni
- Početna pozicija: 25%
- Krajnji položaj: 86%
- Postavite gradijent iznad pozadinske slike: Da
Pozadinska slika
Zatim prenesite pozadinsku sliku po vašem izboru. Ova pozadinska slika predstavlja svakog člana tima, zato za svaki stupac koristite drugačiju sliku.
- Veličina pozadinske slike: naslovnica
- Položaj pozadinske slike: Sredina
Glavni element
Dovršite postavke stupca dodavanjem prilagođenog CSS-a glavnom elementu tableta svakog stupca. Ovi retci CSS koda pomoći će nam da stupce postavimo jedan iznad drugog na tabletu, umjesto da imamo dva uporedo.
širina: 100%! važno; marža: 50px 0px 50px 0px! važno;
Dodajte osobu modul u stupac
Dodajte sadržaj
Za dijeljenje informacija o članovima tima koristit ćemo modul osobe. Dodajte prvi modul osobe u stupac 1 i upotrijebite sadržaj po vašem izboru.
Izbriši sliku
Zatim izbrišite sliku. Umjesto toga koristimo pozadinsku sliku stupca.
Pozadinska slika
Zatim ćemo dodati prekrivanje slike kao pozadinsku sliku modula. Onu koju koristimo možete pronaći preuzimanjem mape na početku ovog vodiča.
- Veličina pozadinske slike: naslovnica
- Položaj pozadinske slike: Sredina
Postavke teksta naslova
Idite na karticu dizajn modula i promijenite postavke teksta naslova na sljedeći način:
- Razina naslova: H3
- Font naslova: Quicksand
- Težina naslovnog slova: podebljano
- Boja teksta naslova: #ffffff
- Veličina teksta naslova: 230%
Postavke teksta tijela
Promijenite i postavke teksta teksta
- Font tijela: otvorena ne
- Boja teksta tijela: #ffffff
- Visina linije tijela: 2,2 em
Postavke teksta položaja
Zatim napravite neke promjene u postavkama teksta položaja.
- Pozicija fonta: Otvori Sans
- Boja teksta položaja: # edf000
razmak
I dovršite postavke modula dodavanjem prilagođenih vrijednosti umetanja u postavke razmaka.
- Gornja obloga: 70%
- Donja obloga: 10%
- Lijeva obloga: 10%
- Desna obloga: 10%
Umnožite modul Osobe 4 puta
Nakon što završite modul Osobe, možete klonirati čitav modul četiri puta.
Duplikate stavite u preostale stupce
Postavite duplikate modula u preostala četiri stupca retka. Obavezno promijenite i sadržaj.
Pretvorite red u vrtište s automatskim pomicanjem
Promijenite veličinu retka br. 2
Sada da bismo ovaj redak pretvorili u vrtuljak člana automatskog pomicanja, moramo ponovo otvoriti postavke retka i promijeniti širinu i maksimalnu širinu u postavkama veličine.
- Širina: 180%
- Maksimalna širina: 220% (radni stol), 100% (tablet i telefon)
Dodajte vodoravno kretanje linije # 2
Dovršite postavke linije dodavanjem vodoravnog kretanja postavkama efekta pomicanja na naprednoj kartici i gotovi ste!
- Aktivirajte vodoravno kretanje: Da
- Pokretanje:
- Ured: 2,5
- Tablet i telefon: 0
- Prosječni odmak: 0 (na 40%)
- Kraj pomaka:
- Ured: -25 (na 62%)
- Tablet i telefon: 0
- Učinak okidačkog pokreta: sredina elementa
pregled
Sad kad smo prošli sve korake, pogledajmo konačno kako to izgleda na različitim veličinama zaslona.
Biro
Završne misli
U ovom vodiču smo vam pokazali kako postati kreativni s ugrađenim efektima pomicanja Divi. Točnije, rekreirali smo prekrasan vrtuljak za članove tima s automatskim pomicanjem. Kada posjetitelji pomičite stranicu, pojavljuje se drugi dio vrtuljka.
