Nuk është sekret që faqet "Rreth nesh" janë shumë të mira në drejtimin e klikimeve tek ju Faqja e internetit. Është gjithashtu ky lloj faqeje që do të theksojë pjesën njerëzore të biznesit pas saj Site Web. Duke e ditur këtë, kuptojmë se është e rëndësishme t'i kushtojmë vëmendje mënyrës se si i strukturojmë faqet, çfarë lloj informacioni ndajmë dhe si krijojmë ndërveprime.

Një gjë që mund të bëni për të përmirësuar përvojën e faqes është të siguroni një seksion të anëtarëve të ekipit që vë në pah punonjësit tuaj. Përveç kësaj, ju mund të shtoni një efekt organik pezullimi në fotot e anëtarëve të ekipit duke përdorur vetëm opsionet e integruara të Divi.

Kjo do t'ju lejojë të kurseni hapësirë ​​në faqen në të cilën po punoni dhe të krijoni një ndërveprim pezullues midis jush dhe tuajit vizitorët.

Në këtë manual, ne do t'ju tregojmë hap pas hapi se si të arrini atje. Sapo të merrni qasjen, do të jeni në gjendje të personalizoni stilin e dizajnit për t'iu përshtatur nevojave tuaja.

Le të shkojmë!

studim

Para se të zhyteni në tutorial, le të hedhim një vështrim në rezultatin në madhësi të ndryshme të ekranit.

zyrë

Telefon

Le të fillojmë rikrijimin

Shto një seksion të ri

ndarje

Krijoni një faqe të re ose hapni një ekzistuese dhe shtoni një seksion të ri duke përdorur vlerat e mëposhtme të plotësimit:

• Mbushja më e mirë: 100px
• Mbushja e poshtme: 100px

Shtoni rreshtin 1

Struktura e kolonës

Pasi të keni mbaruar duke shtuar plotësimin e personalizuar në seksionin tuaj, mund të mbyllni cilësimet e seksionit dhe të shtoni një rresht të ri duke përdorur një kolonë të vetme.

Shto një modul teksti

Shto përmbajtje H2

Shtoni një titull të Modulit të Tekstit në kolonë me një madhësi zgjedhjeje H2.

Cilësimet e tekstit H2

Pastaj shkoni te cilësimet e tekstit H2 dhe bëni disa ndryshime në pamjen e kopjes.

• Titulli 2 Font: Cinzel
• Titulli 2 Stili i tekstit: Kapele të vogla
• Titulli 2 Shtrirja e tekstit: Qendra
• Titulli 2 Tekst Madhësia: 70px

Shto një modul të ndarjes

dukshmëri

Vazhdoni të shtoni një modul të ri ndarjeje pak më poshtë titullit të Modulit të Tekstit.

• Trego ndarësin: Po

Ngjyra e ndarësit

Shkoni te skeda Design, hapni cilësimet e ngjyrave dhe ndryshoni përkatësisht ngjyrën e ndarësit:

• Ngjyra e ndarësit: # 333333

sizing

Pastaj ne do të zvogëlojmë madhësinë e ndarësit dhe ta përqendrojmë atë.

• Gjerësia: 26%
• Shtrirja e modulit: qendra

Shto linjën 2

Struktura e kolonës

Pak më poshtë vijës së mëparshme që shtuat, vazhdoni dhe shtoni një rresht të ri duke përdorur tre kolona me madhësi të barabartë.

sizing

Pa shtuar më shumë module, hapni parametrat e linjës dhe bëni disa ndryshime në parametrat e madhësisë.

• Përdorni një gjerësi me porosi: Po
• Njësia: PX
• Gjerësia e personalizuar: 2000px
• Përdorni një gjerësi të ulluqeve me porosi: Po
• Gjerësia e zorrës së trashë: 1
• Barazoni lartësitë e kolonave: Po

ndarje

Pastaj shkoni te cilësimet e ndarjes dhe shtoni vlera të personalizuara të marzhit dhe mbushjes.

• Marzhi i sipërm: 50px
• Marzhi i poshtëm: 50px
• Mbushja e sipërme: 10px
• Mbushja e poshtme: 10px
• Mbushja e majtë: 5px
• E drejta e tapiceri: 5px
• Kolona 1, 2 dhe 3 Padding në të majtë: 5px
• Kolona 1, 2 dhe 3 Padding në të djathtë: 5px

Kuti me hije

Ne gjithashtu i japim rreshtit tonë pak thellësi duke shtuar një hije kutie me parametrat e mëposhtëm:

• Forca e turbullimit të hijeve të kutisë: 80px
• Forca e përhapjes së hijes së kutisë: -14px
• Ngjyra e hijes: rgba (0,0,0,0,3)

Shtoni një modul imazhi në kolonën 1

Vendosni një imazh në një modul të imazhit

Timeshtë koha të filloni të shtoni module! Për të arritur efektin biover hover, do të na duhen dy module gjithsej. një modul imazhi dhe një modul blurb. Moduli i Imazhit do të përmbajë imazhin e anëtarit të ekipit që dëshironi të paraqisni.

Moda Blurb, ndërkohë, do të përdoret për të shtuar ikonën në këndin e poshtëm të majtë dhe biografinë e rri pezull. Shtoni një modul imazhi në kolonën e parë duke përdorur një imazh me madhësi katrore.

filtra

Dizajni që ne krijojmë është plotësisht në shkallën gri. Për të shtuar këtë hije gri në imazhin tonë, shkoni te cilësimet e filtrave dhe hiqni të gjithë ngopjen.

• Saturation: 0%

Shtoni modulin Blurb në kolonën 1

Shto përmbajtje

Vazhdoni duke shtuar një modul të ri Blurb pikërisht poshtë modulit të imazhit në kolonën 1. Shtoni emrin e anëtarit të ekipit në fushën e titullit dhe vendosni informacione shtesë për anëtarin e ekipit në kuti. përmbajtje.

Zgjidhni një ikonë

Gjëja tjetër që do të bëjmë është të zgjedhim një ikonë zgjedhjeje që do të shfaqet vizitorët se ka më shumë se një foto.

Ngjyra e parazgjedhur e sfondit

Tjetra, ne do të zgjedhim një ngjyrë të plotë transparente të sfondit.

• Ngjyra e sfondit: rgba (255,255,255,0)

Ngjyra e sfondit në mbikalim

Dhe ne do të ndryshojmë këtë ngjyrosje.

• Ngjyra e sfondit: rgba (255,255,255,0.88)

Cilësimet e parazgjedhura të ikonës

Ne duam një ikonë të dukshme që do të ndihmojë vizitorët për të kuptuar se ata mund të fluturojnë mbi të. Ndryshoni cilësimet e ikonës për të marrë një ikonë të tillë.

• Ngjyra e ikonës: #ffffff
• Rrethi ikonë: po
• Ngjyra e rreshtit: # 000000
• Vendndodhja e ikonës: majtas
• Përdorni madhësinë e shkronjave të ikonës: Po
• Madhësia e shkronjës së ikonës: 50px

Cilësimi i ikonës së rri pezull

Sidoqoftë, ne nuk duam që ikona të shfaqet në pezull. Kjo është arsyeja pse ne përdorim një ngjyrë plotësisht transparente në vend.

• Ngjyra e ikonës: rgba (255,255,255,0)
• Ngjyra e rrethit: rgba (255,255,255,0)

Cilësimet e paracaktuar të titullit

Pastaj shkoni te cilësimet e tekstit të titullit dhe bëni disa ndryshime.

• Titulli Policia: Cinzel
• Titulli Policia: Bold
• Titulli Stili i tekstit: Kapele të vogla
• Titulli i tekstit në ngjyrë: # 000000
• Titulli i tekstit Titulli: 0px

Kalo mbi cilësimet e tekstit të titullit

Ndrysho madhësinë e tekstit duke rënë pezull.

• Titulli i tekstit Titulli: 30px

Cilësimet e paracaktuar të tekstit të trupit

Ndryshoni gjithashtu cilësimet e tekstit të trupit.

• Policia e Organeve: Open Sans
• Ngjyra e trupit të tekstit: # 000000
• Madhësia e tekstit të trupit: 0px
• Lartësia e trupit: 1.8em

Parametri i trupit në fluturim

Dhe, përsëri, ndryshoni madhësinë e trupit të fluksit të tekstit.

• Madhësia e tekstit të trupit: 14px

Hapësira e paracaktuar

Së fundmi, do të duhet të krijojmë një mbivendosje midis modulit Blurb dhe modulit të figurës duke përdorur një diferencë të sipërme negative.

• Marzhi i sipërm: -3.7vw (desktop), -9vw (tablet dhe telefon)
• Marzhi i poshtëm: 1.5vw (tabletë), 2vw (telefon)

Hapësira stacionare

Ndryshoni marzhin e personalizuar dhe mbushni vlerat në rikthim.

• Marzhi i sipërm: -11,38vw
• Mbushja e sipërme: 20px
• Mbushja e poshtme: 20px
• E drejta e tapiceri: 50px

Klon dy module dy herë dhe vendosni duplikatet në kolonat e mbetura.

Ne kemi përfunduar krijimin e efektit tonë të parë biologjik. Për të kursyer kohë, ne thjesht mund të klonojmë dy modulet në kolonën 1 dy herë dhe t'i vendosim kopjet në dy kolonat e mbetura.

Redaktoni imazhin dhe përmbajtjen e modulit Blurb

Mos harroni të ndryshoni imazhin në modulin Image dhe kopjoni atë në modulin Blurb për të kompletuar pjesën e anëtarëve të ekipit!

studim

Tani që kemi kaluar të gjithë hapat, le të hedhim një vështrim përfundimtar se si dukej në madhësi të ndryshme të ekranit.

zyrë

Telefon

Mendimet e fundit

Në këtë artikull, ne ju treguam se si të krijoni një efekt organik pezullimi për fotot e anëtarëve të ekipit duke përdorur vetëm opsionet e integruara të Divi. Ne kemi theksuar se sa e rëndësishme është krijimi i faqeve të mira pasi ato janë një nga faqet e internetit më të vizituara.

Përdorimi i efekteve bio hover për fotot e anëtarëve të ekipit jo vetëm që do të përmirësojë cilësinë e faqes tuaj, por gjithashtu do të krijojë ndërveprim me vizitorët tuaj. Nëse keni ndonjë pyetje ose sugjerim, sigurohuni që të lini një koment në seksionin e komenteve më poshtë!