Ndarësit e seksioneve vazhdojnë të jenë një element i njohur i dizajnit në Divi. Ka shumë stile të ndarësve atje, duke përfshirë disa opsione të dobishme që e bëjnë të lehtë shtimin e tranzicionit dhe sfondit unik në faqen tuaj.
Në këtë tutorial, ne do t'i përdorim ndarësit e seksioneve pak më ndryshe. Divi ju lejon të rregulloni lartësinë dhe paraqitjen e secilit ndarës. Kjo na lejon të pozicionojmë ndarësit mbi zona ose përmbajtje të caktuara në seksion. Duke përdorur opsionin hover për lartësinë e ndarësit, ne mund të shtojmë efekte unike hover që zbulojnë a përmbajtje pjesërisht e fshehur. Kjo funksionon shkëlqyeshëm për të tërhequr vëmendjen ndaj një thirrjeje për veprim ose një butoni të veçantë mbi të cilin dëshironi që njerëzit të klikojnë. vizitorët klikoni.
Le të fillojë.
Rezultati i kampionit
Çfarë duhet të filloni
Për të filluar, ju nevojiten këto:
- Le Tema divi i instaluar dhe aktiv
- Një faqe e re e krijuar për të ndërtuar nga e para në pjesën e përparme (konstruktor vizual)
- Disa imazhe bedel për t'u përdorur në dizajn. Unë do të përdor disa imazhe me sfonde transparente nga Paketë Layout Shop Shop .
Pas kësaj, ju jeni gati për të filluar!
Zbatimi i dizajnit të efektit të pezullimit të lartësisë së ndarësit të seksionit në Divi
Krijimi i seksionit dhe rreshtit
Le të fillojmë duke krijuar një seksion të rregullt me një rresht të dy kolonave.
Para se të shtoni një modul, hapni cilësimet e seksionit dhe azhurnoni sa vijon:
Shkalla e majtë e sfondit: #73ba57
Shkalla e duhur e sfondit: #2a4c23
Gjerësia: 80%
Gjerësia maksimale: 1080px
Rreshtimi i Seksionit: Qendra
Por ju gjithashtu mund të zgjidhni skemën e ngjyrave që ju pëlqen sipas imazhit tuaj. skema ime e ngjyrave është: # fff200 - # e09900 në gradient.
Shtoni titullin e seksionit
Për të shtuar titullin e seksionit, krijoni një modul teksti dhe përditësoni përmbajtje e trupit me kokën e mëposhtme h2:
Lengu
Pastaj azhurnoni vizatimin si më poshtë:
Kreu 2 Font: Lato
Kreu 2 Madhësia e tekstit: 80px
Kreu 2 Hapësira e shkronjave: -5px
Margjina: -50px në krye, -40px në fund
Z-Indeksi: -1
Marzhi i personalizuar dhe indeksi z do të lejojnë që teksti të ulet pas imazhit që do të shtojmë në hapin tjetër.
Shtoni imazhin
Nën modulin e tekstit me titullin në kolonën 1, shtoni një modul të figurës. Pastaj ngarkoni një imazh me një sfond transparent. Po përdor një imazh nga Paketa e Layout Shop Juice që është 240 pixel me 300 pixel.
Rregulloni shtrirjen e figurës në qendër.
Shtimi i një thirrje për veprim në kolonën 2
Në kolonën 2, shtoni një thirrje në modulin e veprimit.
Shtoni një URL të lidhjes së butonit për t'u siguruar që butoni shfaqet.
Sfondi CTA dhe stili i titullit
Pastaj azhurnoni parametrat e mëposhtëm të projektimit:
Ngjyra e sfondit: #ffffff
Ngjyra e tekstit:
titulli Font: Lato
Politika e peshës së titullit: e rëndë
Titulli Stili i Fonts: TT
titulli Madhësia e tekstit: 18px
Stilizoni butonin CTA
Azhurnoni modelin e butonit si më poshtë:
Ngjyra e tekstit të butonit: #ffffff
Ngjyra e sfondit të butonit: # e09900
Gjerësia e kufirit të butonave: 0 px
Stilimi i kufirit të CTA
Pastaj shtoni një kufi për të kornizuar modulin si më poshtë:
Gjerësia e kufirit: 10px
Ngjyra e kufirit: rgba (224,145,0,0.25)
Shtohet efekti i ruajtjes së lartësisë së ndarësit për të zbuluar thirrjen për veprim
Tani, është koha për të shtuar pjesën e ndarjes efekt lartësi rri pezull për të zbuluar thirrjen për veprim. Për ta bërë këtë, së pari duhet të krijojmë ndarësit tanë të seksioneve.
Shtimi i ndarësit të sipërm
Hapni parametrat e seksionit dhe ndarësin e sipërm me parametrat e mëposhtëm.
Stili i ndarësit kryesor: shih pamjen e ekranit Ngjyra e ndarësit më të lartë: # 73ba57 Lartësia e ndarësit të sipërm: 70% (i paracaktuar), 0% (i mbuluar)
Ndarësi i sipërm i rrokullisjes: horizontale
Vini re se lartësia e ndarësit fillon me një lartësi të paracaktuar prej 70%, dhe pastaj zhvendoset në një lartësi prej 0% në qarkullim.
Shtimi i ndarësit të ulët
Pastaj shtoni një ndarës më të ulët të ngjashëm me seksionin me parametrat e mëposhtëm.
Stili i ndarësit kryesor: shih pamjen e ekranit Ngjyra e ndarësit më të lartë: # 73ba57 Lartësia e ndarësit të sipërm: 70% (i paracaktuar), 0% (i mbuluar)
Ndarësi i sipërm i rrokullisjes: horizontale
Paraqitja e ndarësit: Në krye të seksionit Përmbajtje
Ky ndarës sfondi gjithashtu fillon me një lartësi prej 70% e cila ndryshon në 0% në pezull. Sidoqoftë, për shkak se opsioni i paraqitjes së ndarësit është vendosur në krye të përmbajtjes, ndarësi i seksionit fsheh pjesën e poshtme të thirrjes për veprim në kolonën 1. Pastaj, në pezull, pjesa tjetër e l zbulohet thirrja për veprim.
Shikoni rezultatin deri më tani.
Shtoi një efekt rri pezull për një tranzicion dhe dizajn unik
Për një tranzicion dhe dizajn unik të pezullimit, ne mund të shtojmë një efekt rri pezull hije që do të zhvillohet njëkohësisht me efektin e rënies së lartësisë së ndarësit. Për ta bërë këtë, shtoni hijen e kutisë së mëposhtme në seksion.
Shadow Box: shih screenshot
Pozicioni horizontal i hendekut të kutisë: 0px
Pozicioni vertikal i hijes së kutisë: 0px
Forca e Përhapjes së Shadow Box: 0px (default), 150px (rri pezull)
Ngjyra e Hijes së Kutisë: #73ba57
Ngadalësoni kohëzgjatjen e tranzicionit
Për një hap të fundit, le të ngadalësojmë kohëzgjatjen e tranzicionit.
Kohëzgjatja e tranzicionit: 700ms
Rezultati përfundimtar
Këtu është rezultati përfundimtar në desktop.
Bazuar në atë që kemi bërë më lart, ju do të jeni në gjendje të personalizoni shfaqjen në celular dhe tabletë.
Mendimet e fundit
Shpresoj që ky tutorial t'ju japë frymëzim për të krijuar efekte unike të lartësisë së ndarësit të seksionit për të zbuluar përmbajtjen. Në fakt, rregullimi i lartësisë së ndarësit të pezull mund të jetë një element i shquar i dizajnit. Dhe mostrat e dizajnit duhet t'ju ndihmojnë të filloni eksplorimin tuaj dhe modelin tuaj.
Shpresoj të dëgjoj nga ju në komente.
Për shëndetin tuaj!
