Želite li da članovi vašeg tima budu predstavljeni u obliku vrtuljka sa Divi ?
Kada postavljate svoju stranicu O nama, vjerojatno ćete tamo željeti uključiti i članove svog tima. Time dopuštate posjetitelji da se povežete s ljudima koji stoje iza vaše tvrtke.
Ako tražite način da animirate odjeljak članova vašeg tima na pomicanju, svidjet će vam se ovaj vodič.
Ponovno ćemo stvoriti prekrasan vrtuljak za članove tima s automatskim pomicanjem koji se kreće kao i vi posjetitelji pomičite stranicu.
Idemo.
pregled
Prije nego što zaronimo u vodič, pogledajmo na brzinu rezultate na različitim veličinama zaslona.
Stolno računalo
Mobilna verzija
Počnimo dizajnirati s Divi
Pročitajte također: Divi: Kako otkriti sadržaj kada zadržite pokazivač iznad razdjelnika odjeljaka
Dodajte novi odjeljak
Unutarnji magovi
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.
- Razmak (gore i dolje): 200 px (stolno računalo), 100 px (tablet i telefon)
vidljivost
Kako bismo osigurali da se u našem dizajnu ne pojavljuju vodoravne trake za pomicanje, sakrit ćemo preljeve odjeljaka u naprednoj kartici.
- Horizontalni preljev: skriven
- Vertikalni preljev: skriveno
Dodajte redak #1
Struktura stupca
Nastavite dodavanjem novog retka u odjeljak pomoću sljedeće strukture stupaca:
Širina
Bez dodavanja modula, otvorite postavke linije, prebacite se na karticu dizajn i promijenite širinu i najveću širinu u postavkama veličine.
- Širina: 90%
- Maksimalna širina: 1 px
razmak
Također dodamo prilagođene gornje i donje obloge.
- Razmak (gornji i donji dio): 100 px
Dodajte tekstualni modul u stupac
Dodajte sadržaj veličine H2
Vrijeme je za dodavanje modula, počevši od prvog tekstualnog modula. Unesite a sadržaj H2 veličina po izboru.
Postavke teksta H2
Prijeđite na karticu dizajn modula i modificirajte H2 tekstualne parametre kako slijedi:
- Font: živi pijesak
- Težina fonta: polu podebljano
- Boja teksta: #000000
- Veličina teksta: 70 px (stolno računalo), 50 px (tablet), 40 px (telefon)
Dodajte modul "Razdjelnik" u stupac
vidljivost
Zatim dodajte modul šestar. Provjerite je li omogućena opcija "Prikaži razdjelnik".
- Prikaži razdjelnik: DA
Crta
Zatim napravite neke promjene u postavkama linije.
- Boja linije: #edf000
- Stil: Čvrsto
- Položaj linije: Vrh
dimenzioniranje
I dovršite parametre modula odgovarajućom izmjenom parametara veličine:
- Težina razdjelnika: 20 px
- Širina: 11%
- Modul poravnanja: lijevo
- Visina: 20 px
Dodajte redak 2
Struktura stupca
Sljedeći red! Koristite sljedeću strukturu stupaca:
dimenzioniranje
Bez dodavanja bilo kakvih modula, otvorite postavke retka i promijenite postavke veličine na sljedeći način:
- Koristi prilagođenu širinu oluka: Da
- Širina oluka: 2
- Širina: 100%
- Maksimalna širina: 100%
Razmak (samo tablet i telefon)
Zatim dodajte lijevo i desno ispunjavanje samo na malim zaslonima.
- Ispuna (lijevo i desno): 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 od stupaca u svom retku.
Gradijent pozadine
Prvo dodajte gradijentnu pozadinu svakom stupcu.
- Granice gradijenta (25%): rgba(255,255,255,0)
- Granice gradijenta (86%): rgba(0,0,0,0.84)
- Tip: linearni
- Kvadratni gradijent iznad pozadinske slike: DA
Pozadina slike
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: središte
Dodan prilagođeni CSS (samo tablet)
Dovršite postavke stupca dodavanjem prilagođenog CSS-a glavnom elementu (Za prikaz Tableta samo) svakog stupca.
Ove linije CSS koda pomoći će nam da postavimo stupce jedan ispod drugog na tabletu, umjesto da imamo dva jedan pored drugog.
width: 100% !important;
margin: 50px 0px 50px 0px !important;
Dodajte modul 'Osoba' u stupac
Dodajte sadržaj
Za dijeljenje podataka o članovima tima koristit ćemo modul Osoba.
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.
Pozadina slike
Zatim ćemo dodati sloj slike kao pozadinsku sliku za modul.
- Veličina pozadinske slike: naslovnica
- Položaj pozadinske slike: središte
Postavke teksta naslova
Prijeđite na karticu dizajn modul i promijenite postavke teksta naslova na sljedeći način:
- Razina naslova naslova: H3
- Font naslova: živi pijesak
- Težina fonta: Podebljano
- Boja teksta naslova: #ffffff
- Veličina teksta naslova: 230%
Postavke teksta tijela
Promijenite i postavke teksta teksta
- Font tijela: Open Sans
- Boja teksta: #ffffff
- Visina linije: 2,2 em
Postavke teksta objave člana tima
Zatim napravite neke promjene u tekstualnim postavkama pozicije koju obnaša član tima.
- Položaj fonta: Otvori bez
- Boja teksta pozicije: #edf000
razmak
I dovršite postavke modula dodavanjem prilagođenih vrijednosti umetanja u postavke razmaka.
- Ispuna: 70% (gore), 10% (dolje, lijevo i desno)
Klonirajte modul "Osoba" četiri puta
Nakon što završite modul Osobe, možete klonirati čitav modul četiri puta.
Postavite duplikate u preostale stupce
Postavite duplikate modula u preostala četiri stupca retka.
Također provjerite jeste li promijenili sadržaj.
Pretvorite redak u vrtuljak s automatskim pomicanjem
Vidi također: Divi: Kako stvoriti mrežu stupca fluida pri lebdenju
Promijenite veličinu reda #2
Sada, da bismo ovu liniju pretvorili u vrtuljak s automatskim pomicanjem, morat ćemo ponovno otvoriti postavke linije i promijeniti širinu i najveću širinu u postavkama veličine.
- Širina: 180%
- Maksimalna širina: 220% (stolno računalo), 100% (tablet i telefon)
Dodajte horizontalno kretanje retku 2
Dovršite postavke linije dodavanjem vodoravnog pomicanja postavkama efekta pomicanja u kartici napredan pod opcijom Pomaknite se efekti i gotovi ste!
- Omogući vodoravno kretanje: Da
- Početni ofset:
- Radna površina: 2,5
- Tablet i telefon: 0
- Srednji pomak: 0 (do 40%)
- Završni pomak:
- Stolno računalo: -25 (do 62%)
- Tablet i telefon: 0
- Okidač efekta pokreta: sredina elementa
pregled
Sad kad smo prošli sve korake, pogledajmo konačno kako to izgleda na različitim veličinama zaslona.
Stolno računalo
Preuzmite DIVI odmah!!!
Mobilni prikaz
Preuzmite DIVI odmah!!!
Zaključak
U ovom članku smo vam pokazali kako postati kreativni s ugrađenim efektima pomicanja Divi.
Konkretno, rekreirali smo prekrasan vrtuljak s članovima tima s automatskim pomicanjem. Kada posjetitelji pomičite stranicu, pojavljuje se drugi dio vrtuljka.
Nadamo se da će vas ovaj vodič inspirirati za vaše sljedeće projekte. Divi. Ako imate nedoumica ili prijedloga, potražite nas odjeljak komentara raspravljati o tome.
Također se možete konzultirati naši resursi, ako vam je potrebno više elemenata za provođenje projekata kreiranja internetskih stranica.
Ne ustručavajte se također konzultirati naš vodič o Izrada bloga WordPress ili onaj koji je uključen Divi: najbolja WordPress tema svih vremena.
Ali u međuvremenu, ovaj članak podijelite na svojim različitim društvenim mrežama.
...
