Nije tajna da su stranice "O nama" vrlo dobre u privlačenju klikova na vaše web stranica. Također će ova vrsta stranice naglasiti ljudski dio poslovanja iza web stranica. Znajući to, shvaćamo da je važno obratiti pozornost na to kako strukturiramo stranice, kakve informacije dijelimo i kako stvaramo interakcije.
Jedna od stvari koje možete učiniti za poboljšanje doživljaja stranice jest pružanje odjeljka za članove tima koji vaše zaposlenike stavlja u središte pozornosti. Povrh toga, fotografijama članova tima možete dodati biološki efekt lebdenja koristeći samo ugrađene opcije Divi.
To će vam omogućiti da uštedite prostor na stranici na kojoj radite i stvoriti lebdeću interakciju između vas i vaših posjetitelji.
U ovom vodiču pokazat ćemo vam korak po korak kako doći. Jednom kada pristupite pristupu, moći ćete prilagoditi stil dizajna prema vlastitim potrebama.
Idemo!
pregled
Prije nego što uđemo u tutorial, pogledajmo rezultat na različitim veličinama zaslona.
Biro
Mobilni
Počnimo rekreirati
Dodajte novi odjeljak
razmak
Stvorite novu stranicu ili otvorite postojeću i dodajte novi odjeljak koristeći sljedeće prilagođene vrijednosti popunjavanja:
- Najbolja obloga: 100px
- Donja obloga: 100px
Dodajte red 1
Struktura stupaca
Nakon što završite s dodavanjem prilagođenog popunjavanja u odjeljak, možete zatvoriti postavke odjeljka i dodati novi redak pomoću jednog stupca.
Dodajte tekstualni modul
Dodajte H2 sadržaj
Dodajte naslov tekstnog modula u stupac s veličinom H2 po izboru.
Postavke teksta H2
Zatim idite na postavke teksta H2 i unesite neke promjene u izgled kopije.
- Glava 2 Font: Cinzel
- Naslov 2 Font Style: Small Caps
- Naslov 2 Poravnavanje teksta: središte
- Naslov 2 Veličina teksta: 70px
Dodajte modul podjele
vidljivost
Nastavite dodavati novi modul za odvajanje odmah ispod naslova Tekstualni modul.
- Prikaži razdjelnik: Da
Boja separatora
Idite na karticu Dizajn, otvorite postavke boja i u skladu s tim promijenite boju razdjelnika:
- Boja separatora: # 333333
dimenzioniranje
Tada ćemo smanjiti veličinu razdjelnika i centrirati ga.
- Širina: 26%
- Usklađivanje modula: centar
Dodajte liniju 2
Struktura stupaca
Malo ispod prethodnog retka koji ste dodali nastavite i dodajte novi redak koristeći tri stupca jednake veličine.
dimenzioniranje
Bez dodavanja dodatnih modula, otvorite parametre retka i izvršite neke promjene u parametrima veličine.
- Koristite prilagođenu širinu: Da
- Jedinica: PX
- Prilagođena širina: 2000px
- Koristite prilagođenu širinu oluka: Da
- Širina oluka: 1
- Izjednačite visine stupaca: Da
razmak
Zatim idite na postavke razmaka i dodajte prilagođene vrijednosti margina i dodavanja.
- Gornja margina: 50px
- Donja marža: 50px
- Gornja obloga: 10px
- Donja obloga: 10px
- Lijeva obloga: 5px
- Desni desničar: 5px
- Stupac 1, 2 i 3 Padding na lijevoj strani: 5px
- Stupac 1, 2 i 3 Padding na desnoj strani: 5px
Kutija sjena
Našoj liniji također dajemo malo dubine dodavanjem sjene okvira sa sljedećim parametrima:
- Blok sila zamućenja sjena: 80px
- Sila širenja sjene kutije: -14px
- Boja sjene: rgba (0,0,0,0,3)
U stupac 1 dodajte modul slike
Umetnite sliku u modul slike
Vrijeme je da počnete dodavati module! Da bismo postigli biološki efekt lebdenja, trebat će nam ukupno dva modula. modul slike i modul blurb. Modul Slika sadržavat će sliku člana tima kojeg želite predstaviti.
U međuvremenu će se mod Blurb koristiti za dodavanje ikone u donjem lijevom kutu i biografije lebdenja. U prvi stupac dodajte slikovni modul pomoću slike kvadratne veličine.
Filteri
Dizajn koji izrađujemo u potpunosti je u sivim tonovima. Da biste ovoj slici dodali ovu sivu nijansu, idite na postavke filtara i uklonite svu zasićenost.
- Zasićenje: 0%
Dodajte modul Blurb u stupac 1
Dodajte sadržaj
Nastavite dodavanjem novog modula Blurb neposredno ispod modula slike u stupcu 1. Dodajte ime člana tima u polje za naslov i unesite dodatne informacije o članu tima u okvir. sadržaj.
Odaberite ikonu
Sljedeće što ćemo učiniti je odabrati ikonu izbora koja će se prikazati posjetitelji da postoji više od same fotografije.
Zadana boja pozadine
Zatim ćemo odabrati potpuno prozirnu boju pozadine.
- Boja pozadine: rgba (255,255,255,0)
Boja pozadine na prelijetanju
I mi ćemo promijeniti tu boju.
- Boja pozadine: rgba (255,255,255,0.88)
Zadane postavke ikone
Želimo vidljivu ikonu koja će pomoći posjetitelji da shvate da ga mogu preletjeti. Promijenite postavke ikone da biste dobili takvu ikonu.
- Boja ikone: #ffffff
- Ikona kruga: da
- Boja kruga: # 000000
- Lokacija ikone: lijevo
- Upotrijebi veličinu fonta ikone: Da
- Veličina fonta ikone: 50 piksela
Postavka pokazivača miša
Međutim, ne želimo da se ikona pojavljuje pri zadržavanju pokazivača miša. Zato umjesto toga koristimo potpuno prozirnu boju.
- Boja ikone: rgba (255,255,255,0)
- Boja kruga: rgba (255,255,255,0)
Zadane postavke naslova
Zatim idite na postavke teksta naslova i napravite neke promjene.
- Naslov Policija: Cinzel
- Font naslova: Bold
- Naslov Font Style: Mali Caps
- Naslov teksta u boji: # 000000
- Veličina naslova teksta: 0px
Zadržite pokazivač iznad tekstualnih postavki naslova
Promijenite veličinu teksta lebdeći.
- Veličina naslova teksta: 30px
Zadane postavke teksta teksta
Promijenite i postavke teksta teksta
- Policija u tijelu: Otvori Sans
- Tekst u boji tijela: # 000000
- Veličina tijela: 0px
- Visina tijela: 1.8em
Parametar tijela prilikom preleta
I opet, promijenite veličinu tijela koja lebdi.
- Veličina tijela: 14px
Zadani razmak
Posljednje, ali ne najmanje bitno, trebat ćemo stvoriti preklapanje između modula Blurb i modula slike pomoću negativne gornje margine.
- Gornja margina: -3.7vw (desktop), -9vw (tablet i telefon)
- Donja marža: 1.5vw (tablet), 2vw (telefon)
Stacionarni razmak
Promijenite prilagođene marže i vrijednosti ispunjavanja u rolveru.
- Gornja margina: -11,38vw
- Gornja obloga: 20px
- Donja obloga: 20px
- Desni desničar: 50px
Dvaput klonirajte dva modula i stavite duplikate u preostale stupce.
Završili smo sa stvaranjem prvog biološkog efekta lebdenja. Da bismo uštedjeli vrijeme, možemo dva puta klonirati dva modula u stupcu 1 i smjestiti duplikate u preostala dva stupca.
Uredite sliku i sadržaj modula Blurb
Ne zaboravite promijeniti sliku u modulu Slika i kopirati je u modulu Blurb kako biste dovršili odjeljak za članove tima!
pregled
Sad kad smo prošli sve korake, pogledajmo konačno kako smo gledali na različite veličine zaslona.
Biro
Mobilni
Završne misli
U ovom smo članku pokazali kako stvoriti biološki efekt lebdenja za fotografije članova tima koristeći samo ugrađene Divijeve mogućnosti. Naglasili smo koliko je važno stvoriti dobre stranice jer su one jedna od najposjećenijih web stranica.
Korištenje efekata bio-lebdenja za fotografije članova tima ne samo da će poboljšati kvalitetu vaše stranice, već će stvoriti interakciju s posjetiteljima. Ako imate bilo kakvih pitanja ili prijedloga, svakako ostavite komentar u odjeljku za komentare u nastavku!
Pozdrav,
Hvala vam na ovom uputstvu, bilo mi je vrlo korisno.
Međutim, susrećem se s dva mala problema:
- pozadina lebdenja se ne primjenjuje (imam dojam da se nalazi iza slike ...)
- prelet se ne otvara na isti način kao u primjeru (moj tekst ostaje na istoj visini kao ikona i ne otvara se prema gore), što daje lijep izgled.
Imate li rješenje? Hvala.
Ugodna večer
Pozdrav,
Možete li podijeliti snimku zaslona?
Pozdrav,
Hvala vam za ovaj tutorial, vrlo je dobro objašnjeno.
Međutim, imam problem kada držanje miša iznad mog pokazivača drhti i ne teče. Znate li zbog čega je ovo?
hvala
Pozdrav Sal,
Nemam pojma žao.