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!