Për këtë ju do të duhet të shkoni Divi >> Opsionet e Temave nga pulti i WordPress
Çaktivizo navigimin fiks
Atje do t'ju duhet të çaktivizoni "Shirit i fiksuar i navigimit" për t'u siguruar që nuk ka mbetur hapësirë në krye të faqes tuaj.
Shiriti i fiksuar i navigimit: i çaktivizuar
Fshih shiritin kryesor të menusë në faqe
Hap cilësimet e faqes
Shkoni te faqja ku dëshironi të shtoni menunë ngjitëse të zgjerueshme dhe hapni cilësimet e faqes.
Shto CSS të personalizuar
Fshihni menunë kryesore duke shtuar rreshtat e mëposhtëm të kodit CSS në faqen tuaj.
#main-header {
display: none;
}
Shtoni një seksion të ri në fund të faqes
Pavarësisht se cilin shembull dëshironi të rikrijoni, disa nga hapat bazë mbeten të njëjtë. Hapi i parë është të shtoni një seksion të rregullt në fund të faqes.
ndarje
Hapni cilësimet e seksionit dhe ndryshoni cilësimet e mëposhtme në skedën Projektimi nën opsion ndarje.
Mbushje (lart dhe poshtë): 0 px
Shto një rresht të ri
Struktura e kolonës
Vazhdoni duke shtuar një rresht të ri duke përdorur strukturën e mëposhtme të kolonës:
sizing
Pa shtuar ende asnjë modul, hapni cilësimet e linjës dhe ndryshoni cilësimet e mëposhtme, në skedën Projektimi nën opsion sizing
Përdorni gjerësinë e ulluqit të personalizuar: PO
Gjerësia e kanalit: 1
Gjerësia: 100%
Gjerësia maksimale: 100%
ndarje
Pastaj hiqni të gjitha mbushjet e paracaktuara të sipërme dhe të poshtme, nën opsionin ndarje.
Mbushje (lart dhe poshtë): 0 px
Elementi kryesor
Ne lejojmë që i gjithë rreshti të ngjitet në fund të faqes sonë duke shtuar dy rreshta të thjeshtë të kodit CSS në elementin e rreshtit kryesor.
bottom: 0px;
position: fixed;
Z-indeksi
Dhe ne do të sigurohemi që rreshti (dhe moduli i tekstit që do të shtojmë në hapat e ardhshëm) të qëndrojnë në krye të të gjithë përmbajtjes në faqe duke rritur indeksin Z, opsionin Drop down pozitë.
Z-indeksi: 99
Shtoni modulin e kodit në kolonë
Shtoni kodin CSS midis etiketave të stilit
Pjesa e fundit e hapave të përgjithshëm është shtimi i një moduli Kodi në rreshtin e ri. Kodi CSS që shtojmë në këtë modul të Kodit do të na ndihmojë të arrijmë efektin zbulues në lëvizje.
Ngjitni rreshtat e mëposhtëm të kodit CSS në modul:
<style>
.dt-menu li {
font-size: 0;
line-height: 0;
}
.dt-menu:hover li {
font-size: 2vh;
line-height: 2.1em;
}
</style>
Shembulli #1 Dizajni
Shtoni një modul teksti në kolonë
Shto përmbajtje
Tani që kemi kaluar nëpër të gjitha hapat, mund të fillojmë të fokusohemi në dy shembujt e ndryshëm të dizajnit, duke filluar nga i pari!
Shtoni një modul teksti në kolonën e rreshtit tuaj. Në zonën e përmbajtjes ne përdorim stilin e paragrafit për të shfaqur tekstin '≡Meny'.
Më pas vendosim të gjithë artikujt e menysë në një listë të pa renditur. Ne gjithashtu do të shtojmë një lidhje për secilin nga titujt e faqeve individualisht.
Ngjyra e parazgjedhur e sfondit
Shkoni te cilësimet e sfondit të modulit dhe ndryshoni ngjyrën e sfondit.
Sfondi: #ffffff
Ngjyra e sfondit në lëvizje
Ndrysho këtë ngjyrë të sfondit kur rri pezull.
Sfondi (Hover): rgba (255,255,255,0.83)
Sfondi i gradientit
Dhe gjithashtu shtoni sfondin e paracaktuar të gradientit.
Ngjyra e majtë: rgba (255,255,255,0)
Ngjyra e duhur: #ffffff
Pozicioni i djathtë: 60%
Cilësimet e paracaktuar të tekstit
Vazhdoni duke shkuar te skeda Projektimi dhe ndryshimi i cilësimeve të tekstit.
Fonti i tekstit: Khand
Pesha e shkronjave: Bold
Ngjyra e tekstit: #021827
Madhësia e tekstit: 3vh
Orientimi: Qendër
Vendosni cilësimet e tekstit
Ndryshoni disa nga cilësimet e tekstit të pezullimit.
Ngjyra e tekstit (Hover: rgba(255,255,255,0)
Madhësia e tekstit (Hover): 0vh
Cilësimet e tekstit të lidhjes
Më pas, shkoni te cilësimet e tekstit të lidhjes dhe ndryshoni ngjyrën e tekstit të lidhjes.
Ngjyra e tekstit të lidhjes: #000000
Lista e parazgjedhjeve (Desktop)
Kalo te cilësimet e tekstit të listës së paracaktuar dhe personalizoje sipas dëshirës. Sigurohuni që po përdorni '0px' për madhësinë e tekstit në gjendjen e tij të paracaktuar.
Fonti i listës së parregulluar: Khand
Stili i fontit të listës: TT
Rreshtimi i tekstit të listës: në qendër
Ngjyra e pa renditur e tekstit: rgba (255,255,255,0)
Madhësia e tekstit të listës së parregulluar: 0 px
Pesha e tekstit të listës: 0em
Pozicioni i stilit të listës së parregulluar: Brenda
Cilësimet e listës së pezullimit
Më pas ndryshoni disa nga vlerat në hover për të lejuar që artikujt e menusë të shfaqen.
Ngjyra e tekstit të listës (Hover): #000000
Madhësia e tekstit të listës së parregulluar (Hover): 2vh
Lartësia e tekstit të listës së parenditur (Hover): 2,1 em
Hapësira e parazgjedhur (Desktop)
Pastaj shkoni te cilësimet e ndarjes (opsioni ndarje) dhe i jepni një formë modulit Text.
Margjina (majtas dhe djathtas): 45vw (desktop), 39vw (tableti), 33vw (telefon)
Mbushje (lart dhe poshtë): 2vw (desktop), 4vw (tableti), 6vw (telefon)
Hapësira pezull
Modifikoni të njëjtat vlera kur rri pezull.
Margjina (majtas dhe djathtas): 14vw
Mbushje (sipër dhe poshtë): 8vw
Kufiri i parazgjedhur (Desktop)
Shkoni te cilësimet e kufirit dhe sigurohuni që secili nga qoshet e rrumbullakosura të ketë një vlerë prej '0px'.
Kufiri në hover
Aktivizo opsionet e pezullimit në qoshet e rrumbullakosura dhe ndryshoni vlerat lart majtas dhe djathtas lart.
Sipër majtas: 50vw
Sipër djathtas: 50vw
Kuti me hije
Vazhdoni duke i dhënë thellësi modulit duke përdorur një hije kutie. Kjo do të sigurojë që menyja të mos kalojë pa u vënë re në faqe.
Forca e turbullimit të hijeve të kutisë: 1000 px
Ngjyra e hijes: rgba (0,0,0,0.68)
Klasë CSS
Ne gjithashtu shtojmë një klasë CSS në modul.
Klasa CSS: dt-menu
Transitions
Së fundi, ulni kohëzgjatjen e tranzicionit në cilësimet e tranzicionit.
Kohëzgjatja e tranzicionit: 100 ms
Shembulli #2 Dizajni
Shtoni një modul teksti në kolonë
Shto përmbajtje
Le të kalojmë në shembullin e dytë! Këtu do të shtojmë përsëri '≡Meny' duke përdorur stilin e tekstit të paragrafit dhe artikujt e menysë duke përdorur një listë të pa renditur. Ne gjithashtu do të shtojmë një lidhje për secilin nga artikujt e menusë individualisht.
Ngjyra e parazgjedhur e sfondit (Desktop)
Shkoni te cilësimet e sfondit dhe ndryshoni ngjyrën e sfondit.
Sfondi: #ffffff
Ngjyra e sfondit në lëvizje
Ndrysho ngjyrën e sfondit kur rri pezull.
Sfondi (Hover): #f71535
Cilësimet e parazgjedhura të tekstit (Desktop)
Pastaj shkoni te skeda Projektimi dhe të bëjë disa ndryshime në pamjen e tekstit.
Fonti i tekstit: Khand
Pesha e shkronjave: Bold
Ngjyra e tekstit: #021827
Madhësia e tekstit: 3vh
Zhvendos cilësimet e tekstit
Ndrysho këto cilësime kur rri pezull.
Ngjyra e tekstit (Hover): rgba (255,255,255,0)
Madhësia e tekstit (Hover): 0vh
Cilësimet e tekstit të lidhjes
Shkoni te cilësimet e tekstit dhe ndryshoni ngjyrën e tekstit të lidhjes.
Ngjyra e tekstit të lidhjes: #ffffff
Cilësimet e tekstit të listës së parazgjedhur
Ndryshoni gjithashtu cilësimet e projektimit të artikujve të listës së pa renditur.
Fonti i listës së parregulluar: Khand
Stili i fontit të listës së parregulluar: TT
Rreshtimi i tekstit të listës: në qendër
Ngjyra e tekstit të listës së pa renditur: rgba (255,255,255,0)
Madhësia e tekstit të listës: 0 px
Lartësia e vijës së listës së parregulluar: 0em
Pozicioni i stilit të listës së parregulluar: Brenda
Cilësimet e listës së pezullimit
Dhe ndryshoni disa nga këto vlera në lëvizje.
Ngjyra e tekstit të listës së parenditur: #ffffff
Madhësia e tekstit të listës: 2vh
Lartësia e vijës së listës së parregulluar: 2,1 em
Hapësira e parazgjedhur (Desktop)
Pastaj shkoni te cilësimet e ndarjes dhe jepini modulit pak hapësirë.
Margjina (djathtas): 88 vw (desktop dhe tablet), 71 vw (telefon)
Në këtë artikull, ne ju treguam se si të krijoni një menu ngjitëse të zgjerueshme duke përdorur të Paketës së Paraqitjes së Divi Mechanic. Ne kemi mbuluar dy modele të ndryshme modelesh që mund t'i modifikoni dhe përdorni në çdo lloj uebsajti që krijoni!
Shpresojmë që ky tutorial t'ju frymëzojë për projektet tuaja të ardhshme Divi. Nëse keni ndonjë shqetësim apo sugjerim, na gjeni në pjesa e komenteve për ta diskutuar atë.
Dëshironi t'i jepni një dimension tjetër uebsajtit tuaj me një maskë sfondi Divi Sticky?
Opsionet ngjitëse të Divi ju lejojnë të krijoni një ton dizajnesh të ndryshme për faqet tuaja të internetit. Tutoriali i sotëm shton listën e gjërave që mund të bëni. Shpresojmë se kjo do të ndihmojë në ndezjen e kreativitetit tuaj.
Ne do t'ju tregojmë se si të krijoni një maskë të sfondit ngjitës.
Ky tutorial kombinon opsionet ngjitëse të Divi me mënyrat e përzierjes së filtrave.
studim
Përpara se të zhytemi në këtë tutorial, le të hedhim një vështrim të shpejtë në rezultatin në madhësi të ndryshme të ekranit.
zyrë
i lëvizshëm
Krijo një dizajn në Divi
Shto një seksion të ri
Imazhi i sfondit
Filloni duke shtuar një seksion të ri në faqen në të cilën po punoni.
Ngarko një imazh të sfondit të zgjedhjes suaj.
Madhësia e imazhit në sfond: Kopertina
ndarje
Kalo te skeda Dizajni i seksionit dhe hiq parametrat e paracaktuar të ndarjes më poshtë:
Mbushje (lart dhe poshtë): 0 px
Përmbytjet
Pastaj fshihni tejmbushjet e seksionit në skedën Avancuar.
Vërshimi horizontal: I fshehur
Vërshimi vertikal: I fshehur
Shtoni rreshtin numër 1
Struktura e kolonës
Vazhdoni duke shtuar një rresht të ri duke përdorur strukturën e mëposhtme të kolonës:
sizing
Pa shtuar asnjë modul, hapni cilësimet e linjës dhe ndryshoni parametrat e madhësisë në përputhje me rrethanat:
Gjerësia: 100%
Gjerësia maksimale: 100%
ndarje
Hiqni gjithashtu të gjitha kufijtë e paracaktuar.
Mbushje (lart dhe poshtë): 0 px
Filters
Ne gjithashtu shtojmë një modalitet përzierjeje në këtë linjë. Kjo mënyrë e përzierjes do të na ndihmojë të krijojmë një maskë më vonë në tutorial.
Modaliteti i përzierjes: Ekrani
Z-indeksi
Për t'u siguruar që ky rresht të qëndrojë poshtë rreshtit të dytë që do të shtojmë në seksion, ne ndryshojmë indeksin z në skedën Avancuar.
Z Indeksi: 9
Parametrat e kolonës
Tjetra, ne do të hapim cilësimet e kolonës.
Ngjyrë e sfondit
Ne përdorim një ngjyrë të sfondit plotësisht të bardhë.
Ngjyra e sfondit: #ffffff
Elementi kryesor CSS
Ne gjithashtu shtojmë një vlerë lartësie në elementin kryesor në skedën Avancuar.
height: 100vh;
Shtoni një modul "Tekst" në rresht
Lëreni zonën e zbrazët
Pasi të keni mbaruar me cilësimet e rreshtit, shtoni një modul Teksti në kolonën e tij.
Lëreni zonën e përmbajtjes bosh. Në vend të kësaj, ne përdorim këtë modul për të krijuar një formë që zbulon një pjesë të imazhit të sfondit të seksionit.
Ngjyrë e sfondit
Ne do të përdorim një ngjyrë më të errët të sfondit për këtë modul.
Ngjyra e sfondit: #0b3835
sizing
Më pas do të hyjmë në skedën Projektimi dhe modifikoni parametrat e madhësisë si më poshtë:
Gjerësia:
Desktop: 20vw
Tableti dhe telefoni: 70 vw
Lartësia:
Desktop: 30vh
Tableti dhe telefoni: 10vh
ndarje
Ne gjithashtu shtojmë një diferencë të lartë.
Marzhi (lart): 3vh
Kufiri
Dhe ne do të përfshijmë qoshet e rrumbullakosura.
Këndet e rrumbullakosura: 15 px
Shtoni rreshtin 2
Struktura e kolonës
Vazhdoni duke shtuar një rresht tjetër në seksion duke përdorur strukturën e mëposhtme të kolonës:
sizing
Hapni cilësimet e linjës dhe bëni ndryshimet e mëposhtme në opsionet sizing në vijim:
Gjerësia: 100%
Gjerësia maksimale: 100%
Z-indeksi
Rritni gjithashtu indeksin z të rreshtit. Kjo do të ndihmojë që përmbajtja e rreshtit të qëndrojë mbi rreshtin e mëparshëm.
Indeksi Z: 12
Shtoni një modul "Tekst" në rresht
Shto përmbajtje H2
Është koha për të shtuar module, duke filluar me një modul të parë Teksti që përmban përmbajtje H2 sipas zgjedhjes suaj.
Cilësimet e tekstit H2
Personalizoni cilësimet e tekstit H2 si më poshtë:
Fonti: Playfair Display
Rreshtimi i tekstit: në qendër
Ngjyra e tekstit: #0b3835
Madhësia:
Desktop: 150 px
Tableti dhe telefoni: 45 px
Lartësia e linjës: 1,2 em
sizing
Më pas, lundroni te cilësimet e madhësisë dhe aplikoni cilësimet e mëposhtme:
Gjerësia maksimale: 980 px
Moduli i shtrirjes: Qendra
ndarje
Përfshini gjithashtu një diferencë negative të sipërme.
Shtoni një modul "Button" në rresht
Shtoni përmbajtje në butonin
Moduli tjetër dhe i fundit që na nevojitet në këtë rresht është moduli Button. Shtoni përmbajtje sipas zgjedhjes suaj.
Shtrirja e butonave
Kalo te skeda Projektimi të modulit dhe modifikoni shtrirjen e butonit.
Shtrirja e butonave: në qendër
Cilësimet e butonit
Më pas, shkoni te cilësimet e butonit dhe aplikoni stilet e mëposhtme:
Përdorni stile të personalizuara për butonin: Po
Madhësia e tekstit të butonit: 15 px
Ngjyra e tekstit të butonit: #ffffff
Ngjyra e sfondit të butonit: #000000
Gjerësia e kufirit të butonit: 0 piksel
Rrezja e kufirit të butonit: 100 px
Fonti i butonit: Montserrat
Pesha e shkronjave të butonit: Gjysmë e trashë
Stili i shkronjave: TT
ndarje
Ne gjithashtu shtojmë vlera të personalizuara të marzhit dhe mbushjes në cilësimet e ndarjes.
Marzhi (poshtë): 60vh
Mbushje (lart dhe poshtë): 15 px
Mbushje (majtas dhe djathtas): 40 px
Aplikoni efekte ngjitëse
Hapni rreshtin numër 1
Tani që kemi ndërtuar bazën e dizajnit tonë, është koha për të aplikuar stilet ngjitëse. Hapni cilësimet e rreshtit të parë.
Aplikoni opsionet ngjitëse
Shko te skeda Avancuar dhe aplikoni cilësimet e mëposhtme të vazhdueshme:
Pozicioni ngjitës: Ngjit në krye
Kufiri i poshtëm ngjitës: Seksioni
Kompensimi nga elementët ngjitës përreth: PO
Stilet e parazgjedhura dhe ngjitëse të tranzicionit: PO
Opsionet ngjitëse të modulit të tekstit
Tani që rreshti është Sticky, ne mund të aplikojmë stile në modulin Tekst brenda rreshtit. Hapni cilësimet e modulit.
Madhësia ngjitëse
Më pas, shkoni te cilësimet e madhësisë dhe aplikoni vlerat e mëposhtme të madhësisë:
Gjerësia (Ngjitës): 80 vw
Lartësia (Ngjitës): 90vh
Koha e tranzicionit
Më në fund, lundroni te skeda Avancuar dhe të rrisë kohëzgjatjen e tranzicionit.
Kohëzgjatja e tranzicionit: 500 ms
studim
Tani që kemi kaluar të gjithë hapat, le të hedhim një vështrim përfundimtar se si duket në madhësi të ndryshme të ekranit.
Në këtë artikull, ne ju kemi treguar edhe një herë se si të bëheni krijues me opsionet ngjitëse të Divi.
Në mënyrë të veçantë, ne ju kemi treguar se si të kombinoni cilësimet e filtrit të Divi dhe opsionet ngjitëse.
Shpresojmë që ky tutorial t'ju frymëzojë për projektet tuaja të ardhshme Divi. Nëse keni ndonjë shqetësim apo sugjerim, na gjeni në pjesa e komenteve për ta diskutuar atë.
Dëshironi të krijoni një rrëshqitës fizarmonikë të përgjegjshëm Divi?
Një rrëshqitës fizarmonikë është një mënyrë argëtuese dhe tërheqëse për të shfaqur përmbajtjen në një hapësirë të vogël.
Rrëshqitësit e fizarmonikës zakonisht përbëhen nga disa elementë (ose panele) të vendosura horizontalisht si palosjet e një perde. Dhe kur rri pezull mbi një nga panelet, ai zgjerohet për të zbuluar përmbajtjen ndërsa panelet e tjera të fizarmonikës tkurren. Këtu kemi efektin si fizarmonikë të zgjerimit dhe tkurrjes.
Në këtë tutorial, ne do t'ju tregojmë se si të krijoni një rrëshqitës fizarmonikë të përgjegjshëm në Divi duke përdorur vetëm CSS. Për ta bërë këtë, ne do të përdorim disa module Divi për të shërbyer si panele fizarmonikë.
studim
Këtu është një përmbledhje e shpejtë e asaj që do të arrijmë në këtë tutorial.
Për të filluar, do t'ju duhet të bëni sa më poshtë:
Nga pulti i WordPress, shkoni te Faqet> Shto të Reja për të krijuar një faqe të re.
Jepini një titull që ka kuptim për ju dhe klikoni Përdorni Divi Builder
Pastaj kliko Filloni të ndërtoni (Ndërtoni nga Gërvishtja)
Pas kësaj, ju do të keni një kanavacë të zbrazët për të filluar projektimin në Divi.
Krijimi i rrëshqitësit të përgjegjshëm të fizarmonikës në Divi
Krijimi i linjës
Për të filluar, shtoni një rresht me një kolonë në seksionin e rregullt.
Pastaj hapni cilësimet e linjës dhe përditësoni sa vijon:
Përdorni gjerësinë e ulluqit të personalizuar: PO
Gjerësia e kanalit: 1
Gjerësia: 100%
Gjerësia maksimale: 800 px
Lartësia: 400 px (Desktop); 700 px (tableti dhe telefoni)
Vlerat e gjerësisë dhe gjerësisë maksimale mund të ndryshohen për t'iu përshtatur nevojave tuaja. Harmonika do të përshtatet dhe do të funksionojë në çdo gjerësi rreshti.
Parametrat e kolonës
Tani që kemi një lartësi të përcaktuar për rreshtin, hapni cilësimet e kolonës dhe shtoni CSS-në e mëposhtme në elementin kryesor: Desktop
Rrëshqitësi i fizarmonikës mund të ndërtohet duke përdorur çdo lloj moduli(e). Nëse dëshironim, mund të përdornim një kombinim të moduleve të ndryshme për të vepruar si një panel fizarmonikë. Por për këtë dizajn, ne do të përdorim modulet Blurb.
Filloni duke shtuar një modul Blurb në linjë.
Blurb Mod Design
Hapni cilësimet e modulit të prezantimit dhe përditësoni sa vijon:
Mbani titullin imagjinar dhe përmbajtjen e trupit. Ne gjithmonë mund ta ndryshojmë atë më vonë.
Më pas, përditësoni ikonën e prezantimit si më poshtë:
Ikona (Desktop): ikona e vijës së shigjetës horizontale (shih pamjen e ekranit)
Ikona (Hover): (shih pamjen e ekranit)
Ikona (tableti dhe telefoni): (shih pamjen e ekranit)
Sfondi
Më pas jepini turbullirës një imazh të sfondit dhe një mbivendosje të gradientit në lëvizje si më poshtë:
Shtoni një imazh të sfondit të paktën 1000 px të gjerë
Pozicioni i imazhit në sfond: në qendër të majtë
Pastaj shtoni një mbivendosje të sfondit gradient.
rri pezull
Gradienti i sfondit majtas (Hover): #3e215b
Gradienti i sfondit djathtas (rrit pezull): rgba(0,0,0,0)
Drejtimi i gradientit: 90 gradë
Gradient katror mbi sfond Imazhi: PO
ikonë
Ngjyra e ikonës: #ffffff
Vendosja e imazhit/ikonës: djathtas
Më pas, kaloni në skedën Dizajn dhe përditësoni sa vijon:
Titulli dhe trupi i tekstit
Fonti i titullit: Poppins
Pesha e shkronjave: gjysmë e theksuar
Ngjyra e tekstit të titullit: transparente (Desktop), #ffffff (Hover)
Madhësia e tekstit të titullit: 22 px
Ngjyra e tekstit të trupit: transparent (Desktop), #ffffff (Hover)
Lartësia dhe hija e kutisë
Pasi teksti të personalizohet, jepini modulit një lartësi prej 100% dhe një hije kutie si më poshtë:
lartësia: 100%
Box Shadow: Shiko pamjen e ekranit
Pozicioni horizontal: -12 px
Pozicioni vertikal: 0px
Custom CSS
Në mënyrë që panelet tona të fizarmonikës (ose moduli Blurb) të rriten dhe të kontraktohen me pjesën tjetër të moduleve, ne duhet të shtojmë CSS të personalizuar për të ndryshuar madhësinë e modulit me flex-grow.
Meqenëse do të kemi gjithsej 5 module që përbëjnë fizarmonikën, shtojmë "flex:1" për gjendjen e paracaktuar dhe më pas e ndryshojmë atë në "flex:5" në gjendjen hover.
Nën skedën Advanced, shtoni CSS-në e mëposhtme të personalizuar në elementin kryesor Blurb:
Shume mire! Ishte një personalizim serioz i një moduli Blurb. Por lajmi i mirë është se gjithçka që duhet të bëjmë është t'i dublikojmë ato për të krijuar panelet e mbetura të fizarmonikës.
Paraqitjet e dyfishta për më shumë panele fizarmonikë
Zhvendoseni mbi modulin e prezantimit dhe klikoni katër herë ikonën e dyfishtë për të krijuar gjithsej pesë panele (ose module) fizarmonikë.
Më pas, përditësoni imazhet e sfondit për secilën nga turbullimet e reja që keni dublikuar.
Rezultati përfundimtar
Tani që kemi kaluar nëpër të gjitha hapat, le të shohim rezultatin përfundimtar.
Ky rrëshqitës fizarmonikë i përgjegjshëm ka me të vërtetë disa elementë unikë që e bëjnë atë argëtues për t'u përdorur. Panelet e fizarmonikës zgjerohen dhe tkurren pa probleme me kalimin e miut pa ndonjë defekt të papritur.
Dhe ikonat e prezantimit ndryshojnë në lëvizje dhe në celular për të rritur UX-në. Shpresojmë që ky tutorial t'ju frymëzojë për projektet tuaja të ardhshme Divi. Nëse keni ndonjë shqetësim apo sugjerim, na gjeni në pjesa e komenteve për ta diskutuar atë.
Dëshironi të mësoni se si të dizajnoni mbivendosje të personalizuara të imazhit me Divi?
Mbivendosjet e imazheve kanë qenë rreth e rrotull për një kohë të gjatë në dizajnin e uebit. Ato janë të shkëlqyera për të tërhequr vizitorët duke zbuluar përmbajtje shtesë dhe elemente dizajni kur rri pezull mbi imazh.
Në këtë tutorial, ne do t'ju tregojmë se si të dizajnoni mbivendosje të personalizuara të imazhit në Divi. Këto mbivendosje do të ndryshojnë dhe do të zbulojnë elementë kur të rri pezull mbi imazh.
Nuk nevojiten shtojca.
Le të fillojmë!
studim
Ja një vështrim i shpejtë i dizajnit që do të krijojmë në këtë tutorial.
Krijo një faqe të re me Divi Builder
Nga pulti i WordPress, shkoni te Faqet> Shto të Reja për të krijuar një faqe të re.
Jepini një titull që ka kuptim për ju dhe klikoni Përdorni Divi Builder
Pastaj kliko Filloni të ndërtoni (Ndërtoni nga Gërvishtja)
Pas kësaj, ju do të keni një kanavacë të zbrazët për të filluar projektimin në Divi.
Krijimi i mbivendosjeve të personalizuara të imazheve në Divi
Dizajnoni seksionin, rreshtin dhe kolonat
Për të filluar, krijoni një rresht me tre kolona në seksionin e paracaktuar.
Hapni cilësimet e seksionit dhe shtoni ngjyrën e mëposhtme të sfondit:
Sfondi: #3a0ca3
Më pas, hapni cilësimet e kolonës 1 dhe përditësoni sa vijon:
Klasa CSS: et-overlay-container
Vërshimi horizontal: I fshehur
Vërshimi vertikal: I fshehur
Shtoni imazhin
Tani që Seksioni, Rreshti dhe Kolona janë gati, shtoni një modul të ri Imazh në Kolonën 1. Ky do të jetë imazhi kryesor pas modeleve tona të mbivendosjes.
Ngarko një imazh që duket më shumë si një portret sesa një peizazh. Sigurohuni që të jetë mjaft e gjerë për të mbuluar gjerësinë e plotë të kolonës në të gjitha madhësitë e shfletuesit.
SHËNIM: Mund të përdorni imazhe peizazhi, por mund t'ju duhet të rregulloni pozicionimin e elementeve të mbivendosjes në përputhje me rrethanat, në mënyrë që ato të mos mbivendosen.
Nën skedinë Projektimi, përditësoni sa vijon:
Marzhi (poshtë): 0 px
Nën skedinë Avancuar, shtoni klasën e mëposhtme CSS:
Klasa CSS: et-overlay-image
Shtimi i ngjyrës së mbivendosjes së imazhit duke përdorur një modul "Ndarës".
Për të krijuar ngjyrën e mbivendosjes së imazhit, ne do të përdorim një modul Divider.
Së pari, shtoni një modul Divider poshtë imazhit.
Pastaj vendoseni ndarësin në mënyrë absolute në mënyrë që të vendoset sipër imazhit:
Pozicioni: Absolut
Nën skedinë Përmbajtja, përditësoni sa vijon:
Ndarësi i shfaqjes: JO
Ngjyra e sfondit: rgba (247,37,133,0.8)
Pastaj përditësoni lartësinë dhe gjerësinë e ndarësit:
Gjerësia: 100%
lartësia: 100%
Me dizajnin në vend, shtoni klasën e mëposhtme CSS në ndarësin:
dhe-mbivendosje-artikull
SHËNIM: Kjo klasë duhet t'u shtohet të gjithë elementëve të dizajnit të mbivendosjes që dëshironi të shfaqni vetëm në lëvizje. Nëse nuk dëshironi që elementi të fshihet fillimisht, lëreni atë jashtë.
Për t'ju ndihmuar të mbani gjurmët e elementeve/moduleve të dizajnit, hapni shtresat modale dhe etiketoni ndarjen e modulit ("Ngjyra e mbivendosjes").
Teksti i kokës së mbivendosjes u shtua
Në modulin Divider, shtoni një modul të ri Teksti. Kjo do të shërbejë si teksti i mbivendosjes së kokës që do të shfaqet në krye të imazhit kur rri pezull.
Përditëso përmbajtjen me një titull H2:
<h2>Coaching</h2>
Më pas, përditësoni etiketën e modulit të tekstit për referencë në të ardhmen.
Nën skedinë Projektimi, përditësoni sa vijon:
Rreshtimi i tekstit: në qendër
Ngjyra e tekstit: e lehtë
Fonti: Cormorant Garamond
Pesha e shkronjave: Bold
Madhësia e tekstit: 40 px
Gjerësia: 100%
Gjerësia maksimale: 85%
Nën skedinë Avancuar, përditësoni pozicionin si më poshtë:
Pozicioni: Absolut
Vendndodhja: qendra e sipërme
Kompensimi vertikal: 10%
SHËNIM: Zhvendosja vertikale mund të duhet të rregullohet në varësi të madhësisë së raportit të pamjes së figurës. Për shembull, një imazh i tipit peizazh mund të kërkojë më pak kompensim
Më pas, shtoni klasat e mëposhtme CSS në modulin e tekstit:
Klasa CSS: et-overlay-item lëviz-poshtë
Përveç klasës "dhe-overlay-item", shtojmë një klasë shtesë "leviz poshte" në mënyrë që të përdorni CSS-në e personalizuar për të lëvizur kokën pak poshtë kur rri pezull.
Krijimi i tekstit të trupit të mbivendosur
Për të krijuar trupin e tekstit të mbivendosjes, ne mund të kopjojmë modulin Tekst të përdorur për kokën e mbivendosjes. Përpara se të përditësoni parametrat e dyfishtë, ndryshoni etiketën në "Trupi i mbivendosur".
Hapni cilësimet e tekstit të modulit të ri Tekst dhe përditësoni përmbajtjen e trupit me disa fjali të tekstit të paragrafit.
Nën skedinë Avancuar, ndryshoni vendndodhjen absolute të modulit në qendër.
Meqenëse nuk duam që kjo të vazhdojë të lëvizë (vetëm shfaqet), përditësoni klasën CSS për të përfshirë vetëm sa vijon:
Klasa CSS: et-overlay-item
Krijimi i butonit të mbivendosjes
Mbivendosja e fundit në këtë imazh do të jetë butoni. Për të krijuar butonin, shtoni një modul të ri Buton nën modulin e dytë të tekstit.
Përpara modifikimit të dizajnit, përditësoni pozicionin e butonit si më poshtë:
Pozicioni: absolut
Kompensimi vertikal: 10%
Tani butoni duhet të përqendrohet në pjesën e poshtme të figurës.
Në skedë Avancuar, përditësoni klasën CSS dhe shtoni një fragment të personalizuar CSS në elementin kryesor si më poshtë:
Klasa CSS: et-overlay-item lëvizja lart
Elementi kryesor CSS:
min-width: 15em;
Vini re se një klasë shtesë është shtuar në butonin për ta lëvizur atë pak lart kur rri pezull. Kjo është për të plotësuar lëvizjen poshtë të tekstit të kokës kur rri pezull.
Më pas, përditësoni cilësimet e mëposhtme të dizajnit:
Shtrirja e butonave: në qendër
Përdorni stile të personalizuara për butonin: PO
Madhësia e tekstit të butonit: 14 px
Ngjyra e sfondit: #4361ee
Gjerësia e kufirit të butonit: 0 piksel
Hapësira e shkronjave të butonave: 0,1em
Pesha e shkronjave: Bold
Stili i fontit të butonit: TT
Mbushja: 0,8em (lart dhe poshtë), 0px (majtas dhe djathtas)
Shtimi i CSS i personalizuar me modulin e kodit
Shtoni një modul Kodi poshtë butonit.
Pastaj ngjisni CSS-në e mëposhtme në përmbajtjen e kodit. Mos harroni të mbështillni kodin në etiketat e nevojshme të skriptit.
<style>
@media all and (min-width: 981px) {
.et-fb-root-ancestor .et-overlay-item {
opacity: 1; /*shows hidden overlay items when using the visual Divi Builder*/
}
.et-overlay-item {
opacity: 0; /*hides overlay items by default*/
margin-bottom: 0px;
}
.et-overlay-item, .et-overlay-image {
transition: all 400ms !important; /*sets transition speed of all overlay items*/
}
.et-overlay-container:hover .et-overlay-item {
opacity: 1; /*reveals hidden overlay items on hover*/
}
.et-overlay-container:hover .et-overlay-image {
/*add new styles here to change image on hover*/
}
.et-overlay-container:hover .et-overlay-image.et-scale {
transform: scale(1.2); /*adjust scale of image here*/
}
.et-overlay-container:hover .et-overlay-image.et-rotate {
transform: scale(1.4)
rotateZ(10deg)!important; /*adjust rotation of image and scale needed for rotation here*/
}
.et-overlay-container:hover .et-overlay-item.move-up {
margin-bottom: 15% !important; /*adjust how far you want the overlay item to move up*/
}
.et-overlay-container:hover .et-overlay-item.move-down {
margin-top: 10%; /*adjust how far you want the overlay item to move down*/
}
}
</style>
Kodi është komentuar kështu që ju mund të kuptoni se ku mund të rregulloni CSS për t'iu përshtatur nevojave tuaja.
Dubliko kolonën për më shumë dizajn
Hapni shtresën modale, së pari fshini dy kolonat boshe.
Pastaj dubliko dy herë kolonën që përmban dizajnin e mbivendosjes së imazhit. Duhet të keni gjithsej tre kolona me dizajne identike.
Krijimi i dizajnit të mbivendosjes së imazhit #2
Për këtë dizajn tjetër, ne do ta vendosim butonin në qendër të imazhit (gjithmonë i dukshëm). Më pas, ne do të zhvendosim kokën dhe tekstin e trupit në pamje nga lart dhe fundi i imazhit.
Rregulloni vendosjen e tekstit të trupit dhe klasën CSS
Hapni cilësimet e modulit të tekstit të mbivendosjes së trupit në kolonën 2 dhe përditësoni pozicionin:
Vendndodhja: në qendër të poshtme
Kompensimi vertikal: 5%
Më pas, përditësoni klasën CSS me sa vijon:
Klasa CSS: et-overlay-item lëvizja lart
Rregulloni vendndodhjen e butonit dhe klasën CSS
Më pas, hapni cilësimet e butonit në kolonën 2 dhe përditësoni vendndodhjen e mëposhtme të pozicionit:
Vendndodhja: Qendër
Më pas, hiqni klasën CSS pasi duam që butoni të mbetet gjithmonë i dukshëm.
Hapni cilësimet e modulit Divider (ngjyra e mbivendosjes) dhe ndryshoni sfondin si më poshtë:
Sfondi: rgba (67,97,238,0.8)
Pastaj hapni cilësimet e butonit dhe ndryshoni ngjyrën e sfondit:
Ngjyra e sfondit: #f72585
Rregulloni imazhin dhe klasën CSS
Pastaj hapni cilësimet e imazhit dhe ngarkoni një imazh të ri (nëse dëshironi).
Pastaj shtoni klasën e mëposhtme CSS në imazh:
Klasa CSS: et-overlay-image et-scale
Vini re se përveç klasës "et-overlay-image", ekziston një klasë shtesë e quajtur "et-scale" e cila do të rrisë madhësinë e imazhit, duke krijuar një efekt zmadhimi në lëvizje.
Krijimi i dizajnit të mbivendosjes së imazhit #3
Tani është koha për të krijuar modelin e tretë të mbivendosjes së imazhit në kolonën 3.
Rregulloni përmbajtjen e tekstit të mbivendosjes dhe klasën CSS
Filloni duke hapur cilësimet e modulit të tekstit të mbivendosjes në kolonën 3. Më pas, shtoni titullin H2 sipër tekstit të paragrafit. Tani të dy do të jenë brenda një moduli.
Pastaj hiqni klasën CSS në mënyrë që teksti të mbetet i dukshëm sipër imazhit.
Rregullo kompensimin e butonit dhe klasën CSS
Hapni cilësimet e modulit të butonit dhe përditësoni zhvendosjen e pozicionit vertikal:
Kompensimi vertikal: 5%
Hiq kokën e mbivendosjes
Më pas, hiqni modulin e tekstit të kokës së mbivendosjes.
Rregulloni ngjyrën e mbivendosjes dhe klasën CSS
Hapni cilësimet e modulit Divider (ngjyra e mbivendosjes) dhe përditësoni sfondin në sa vijon:
Ngjyra e gradientit të sfondit të majtë: rgba (67,97,238,0.8)
Ngjyra e gradientit të sfondit të djathtë: rgba (247,37,133,0.8)
Pozicioni fillestar: 25%
Pozicioni përfundimtar: 75%
Dhe meqenëse duam ta mbajmë mbivendosjen e gradientit të dukshëm gjatë gjithë kohës, hiqni klasën CSS.
Rregulloni klasën CSS të imazhit
Së fundi, ne do të shtojmë një klasë shtesë CSS (“et-rotate”) në imazhin kryesor që do të ndryshojë përmasat dhe do ta rrotullojë imazhin kur rri pezull.
Klasa CSS: et-overlay-image et-rotate
Prekjet e fundit
Para se të kontrollojmë rezultatet tona përfundimtare, duhet të bëjmë disa rregullime.
Hiq kufirin e poshtëm të paracaktuar për të gjitha modulet
Meqenëse tashmë e kemi përditësuar margjinën me një diferencë të poshtme prej 0 px, mund ta zgjerojmë këtë diferencë në të gjitha modulet.
Klikoni me të djathtën në cilësimin e margjinës dhe zgjidhni "Zgjero margjinat".
Pastaj zgjidhni të zgjeroni margjinën te Të gjitha modulet në faqe.
Hiq modulet e kodit dublikatë
Sigurohuni që të hiqni modulet shtesë të kodit që janë bartur nga dyfishimi i kolonës së parë. Ju duhet të keni vetëm një. Ju mund ta bëni këtë lehtësisht nga shtresat modale.
Rezultatet përfundimtare
Tani që tre modelet tona janë kompletuar, le të hedhim një vështrim në rezultatet përfundimtare të modeleve tona të mbivendosjes së imazhit.
Dhe këtu është dizajni në celular. Efektet e pezullimit të mbivendosjes zbatohen vetëm në desktop. Prandaj, mbivendosjet do të jenë ende të dukshme në celular.
Krijimi i mbivendosjeve të personalizuara të imazhit është në fakt shumë argëtues. Ka modele të panumërta që mund t'i provoni vizualisht me Divi Builder.
Shpresojmë që ky tutorial t'ju frymëzojë për projektet tuaja të ardhshme Divi. Nëse keni ndonjë shqetësim apo sugjerim, na gjeni në pjesa e komenteve për ta diskutuar atë.
Dëshironi të shtoni një ikonë hamburgeri në modulin e menusë Divi?
Nëse jeni duke ndërtuar kokën tuaj në Divi, ka disa mënyra për ta bërë atë.
Ne do t'ju tregojmë se si të shtoni një ikonë hamburgeri në modulin e menusë Divi. Kjo ikonë hamburger tashmë shfaqet si parazgjedhje në ekranet më të vogla. Por në këtë tutorial, ne do të sigurohemi që një ikonë hamburgeri të shfaqet edhe në desktop.
Kjo i jep një pamje minimale kokës tuaj duke shtuar gjithashtu ndërveprim.
Le të shkojnë.
studim
Përpara se të zhytemi në këtë tutorial, le t'i hedhim një vështrim të shpejtë rezultatit.
Krijo një shabllon të ri global të titullit me Divi Builder
Shkoni te Divi Theme Builder
Nga pulti i WordPress, shkoni te 'Divi > Ndërtues i Temave' pastaj kliko "Shto titullin global"
Shtoni një kokë të re globale
Do të shfaqet një menu rënëse. Për të filluar ndërtimin nga e para, vazhdoni duke zgjedhur "Ndërtoni titullin global".
Dizajnimi i dizajnit global të kokës
Cilësimet e seksionit
Ngjyrë e sfondit
Pasi të jeni në redaktuesin e shabllonit, është koha për të filluar dizajnimin e kokës. Do të vini re se tashmë ka një seksion. Hapni cilësimet e seksionit dhe shtoni një ngjyrë të sfondit.
Ngjyra e sfondit: #f6f9fb
ndarje
Kalo te skeda Projektimi të seksionit dhe modifikoni parametrat e mëposhtëm.
Mbushje (lart dhe poshtë): 0 px
Shto një rresht të ri
Struktura e kolonës
Vazhdoni duke shtuar një rresht të ri duke përdorur strukturën e mëposhtme të kolonës:
sizing
Hapni cilësimet e linjës, shkoni te skeda Projektimi dhe ndryshoni gjerësinë maksimale në cilësimet e madhësisë.
Gjerësia maksimale: 1 px
ndarje
Më pas ndryshoni mbushjen e sipërme dhe të poshtme në cilësimet e ndarjes.
Mbushje (lart dhe poshtë): 5 px
Shtoni një modul meny në kolonë
Zgjidhni menunë për të shtuar
Më pas, shtoni një modul Menu në kolonën e rreshtit dhe zgjidhni një menu dinamike sipas zgjedhjes suaj.
Shkarko logon
Ngarko një logo.
Hiq ngjyrën e sfondit
Më pas, hiqni ngjyrën e parazgjedhur të sfondit të bardhë nga moduli.
Cilësimet e tekstit të menysë
Kalo te skeda Projektimi të modulit dhe modifikoni parametrat e tekstit të menusë në përputhje me rrethanat:
Menuja e shkronjave: Poppins
Pesha e shkronjave të menysë: Gjysmë e trashë
Ngjyra e tekstit: #003e51
Madhësia e tekstit të menysë: 16 px
Rreshtimi i tekstit: djathtas
Cilësimet e menusë zbritëse
Pastaj ndryshoni cilësimet nga menyja rënëse.
Ngjyra e linjës së menysë rënëse: #7159c8
Cilësimet e ikonës
Ndryshoni gjithashtu cilësimet e ikonës.
Ngjyra e ikonës së karrocës së blerjeve: #670fff
Ngjyra e ikonës së kërkimit: #670fff
Ngjyra e ikonës së menysë së Hamburgerit: #670fff
sizing
Tjetra, shkoni te cilësimet e madhësisë dhe caktoni një gjerësi maksimale të logos.
Gjerësia maksimale e logos: 280 piksele
ndarje
Hiqni gjithashtu kufirin e poshtëm të paracaktuar nga moduli.
Marzhi (poshtë): 0 px
Bëni seksionin ngjitës
Tani që menuja jonë është në vend, ne gjithashtu do ta bëjmë seksionin ngjitës. Hapni cilësimet e seksionit, shkoni te skeda Avancuar dhe aplikoni cilësimet e mëposhtme:
Pozicioni ngjitës: Ngjit në krye
Kompensimi nga elementët ngjitës përreth: PO
Stilet e parazgjedhura dhe ngjitëse të tranzicionit: PO
Ngjyra e sfondit në gjendje ngjitëse
Më pas ndryshoni ngjyrën e sfondit të seksionit në gjendje ngjitëse.
Ngjyra e sfondit: #ffffff
Hije e kutisë ngjitëse të gjendjes
Aplikoni gjithashtu një hije kutie në seksion.
Ngjyra e hijes (Desktop): rgba (0,0,0,0)
Ngjyra e hijes (ngjitëse): rgba (0,0,0,0.04)
Shtoi një ikonë hamburgeri në modulin e Menysë
Shto ID CSS në modulin e menysë
Së pari, hapni cilësimet e modulit të Menysë, shkoni te skeda Avancuar dhe caktoni një ID CSS.
CSS ID: divi-menu
Shtoni një modul Kodi nën modulin Meny
Më pas, shtoni një modul Kodi nën modulin e Menysë.
Shtoni etiketat e skriptit dhe stilit
Ne do të përdorim kodin CSS dhe JQuery. Për t'u përgatitur për këtë, ne do të shtojmë etiketa stili dhe skripti.
Shto kodin CSS
Ne do të ngjitim rreshtat e mëposhtëm të kodit CSS midis etiketave të stilit:
Në këtë artikull, ne ju treguam se si të bëheni krijues me kokën tuaj globale në Divi Theme Builder.
Në mënyrë të veçantë, ne ju kemi treguar se si të shtoni një ikonë të menusë së hamburgerit edhe në desktop. Si parazgjedhje, një ikonë hamburgeri shfaqet në tablet dhe celular.
Shpresojmë që ky tutorial t'ju frymëzojë për projektet tuaja të ardhshme Divi. Nëse keni ndonjë shqetësim apo sugjerim, na gjeni në pjesa e komenteve për ta diskutuar atë.
Dëshironi të krijoni një menu origjinale Divi në formën e një rrote rrotulluese në lëvizje?
Krijimi i një rrote menyje rrotulluese në hover është një mënyrë argëtuese për të shfaqur lidhje të dobishme në faqen tuaj të internetit. Kjo do të ishte një mënyrë e shkëlqyer për të ofruar thirrje të shumta për veprim në një kokë për t'i drejtuar përdoruesit ku duhet të shkojnë. Dhe do të ishte gjithashtu një menu e lezetshme nënkategorie për blogun tuaj.
Në këtë tutorial, ne do t'ju tregojmë se si të krijoni një rrotë menyje rrotulluese kur rri pezull në Divi. Kjo mund të bëhet duke përdorur një kombinim të opsioneve të integruara Divi dhe disa copa të personalizuara css.
studim
Përpara se të hyjmë në këtë tutorial, le të hedhim një vështrim në rezultatin që duam të arrijmë.
Nga pulti i WordPress, shkoni te Faqet> Shto të Reja për të krijuar një faqe të re.
Jepini një titull që ka kuptim për ju dhe klikoni Përdorni Divi Builder
Pastaj kliko Filloni të ndërtoni (Ndërtoni nga Gërvishtja)
Pas kësaj, ju do të keni një kanavacë të zbrazët për të filluar projektimin në Divi.
Dizajni i rrotës së menusë rrotulluese në Divi
Krijoni seksionin dhe rreshtin 1
Në seksionin e pranishëm si parazgjedhje, shtoni një rresht me strukturën e kolonës vijuese.
Pastaj shtoni një modul teksti në rreshtin me përmbajtjen e mëposhtme.
Më pas, përditësoni dizajnin e tekstit si më poshtë:
Fonti i tekstit: Share Tech
Hapësira e shkronjave të tekstit: 1 px
Titulli 2 Madhësia e tekstit: 8vw
Shtoni rreshtin 2 për të ndërtuar rrotën
Më pas, duhet të shtojmë një rresht të ri në një kolonë poshtë rreshtit 1.
Përpara se të fillojmë të shtojmë modulet tona Teksti për lidhjet tona, duhet ta dizajnojmë linjën tonë si një rrotë. Do të ketë shumë optimizime të nevojshme në rresht për të bërë dizajnin tonë të rrotave.
Për të filluar, hapni Cilësimet e rreshtit 2 dhe përditësoni sa vijon:
Ngjyra e sfondit: #02366b
Ngjyra e gradientit të sfondit të majtë: rgba (0,0,0,0.45)
Ngjyra e gradientit të sfondit të djathtë: #02366b
Lloji i gradientit: Rrethor
Drejtimi radial: Qendër
Pozicioni fillestar: 36%
Pozicioni përfundimtar: 0%
Përdorni gjerësinë e ulluqit të personalizuar: PO
Gjerësia e kanalit: 1
Gjerësia: 500 px
Gjerësia maksimale: 500 px (Desktop), automatike (Tablet dhe telefon)
Lartësia: 500 px (Desktop), automatike (Tableti dhe telefoni)
Mbushje (Desktop): 0 px (lart dhe poshtë)
Mbushja (tableti dhe telefoni): 20 px (lart, poshtë dhe majtas)
Marzhi (Telefon): -10% (djathtas)
Ne duhet të vendosim si lartësinë ashtu edhe gjerësinë e rreshtit në 500 piksele në mënyrë që të jetë një katror i përsosur. Kjo do të na lejojë t'i japim një formë rrethore perfekte duke përdorur opsionin e këndeve të rrumbullakosura të Divi (rrezja e kufirit).
Këndet e rrumbullakosura: 50%
Më pas, ne mund të shtojmë një nivel tjetër të dizajnit të rrethit duke përdorur një hije kutie si më poshtë:
Forca e turbullimit të hijes së kutisë: 0 px
Forca e përhapjes së hijes së kutisë: 210 px
Ngjyra e hijes: rgba (2,54,107,0.66)
Më pas, do të shtojmë një fragment të vogël të CSS për të përqendruar vertikalisht përmbajtjen e rreshtit tonë. Nën skedën Avancuar, shtoni CSS-në e mëposhtme të personalizuar në elementin kryesor.
display:flex;align-items:center;
Shtimi i lidhjeve
Çdo lidhje në timon do të krijohet me një modul Tekst. Ne do të krijojmë gjithsej gjashtë module Tekst. Pesë nga modulet Tekst do të përmbajë lidhjet për timonin dhe tjetra do të përmbajë titullin e menysë.
Filloni duke krijuar një modul të ri "Text".
Më pas, përditësoni cilësimet e tekstit si më poshtë:
Trupi: “Elementi 1”
Fonti i tekstit: Share Tech
Ngjyra e tekstit: #ffffff
Madhësia: 16 px (e parazgjedhur), 20 px (Hover)
Hapësira e shkronjave: 1 px
Lartësia e rreshtit të tekstit: 60 px
Gjerësia: 250 px (Desktop), automatike (Tablet dhe telefon)
Lartësia: 60 px
Mbushje (majtas): 20 px
Ruani cilësimet për momentin. Më pas dublikojeni modulin e tekstit 4 herë për të krijuar gjithsej 5 module teksti.
Pozicionimi i lidhjeve/moduleve të tekstit
Tani jemi gati të vendosim lidhjet tona përgjatë perimetrit të timonit. Për ta bërë këtë, ne do të përditësojmë çdo modul Tekst me opsione transformimi që lëvizin/përkthejnë dhe rrotullojnë modulin në vend.
Për ta lehtësuar këtë, vendosni modalitetin e shfaqjes së kornizës së telit dhe etiketoni modulet e tekstit duke filluar me lidhjen 1 në krye deri në lidhjen 5 në fund.
Lidhja 1
Do të fillojmë duke redaktuar Lidhjen 1. Hapni cilësimet e modulit të tekstit për Lidhjen 1 dhe përditësoni sa vijon:
Rrotullimi i boshtit Z: 30 gradë (Desktop), 0 px (Tableti dhe telefoni)
Origjina: 50% (në qendër djathtas)
Lidhja 3
Meqenëse moduli Tekst për lidhjen 3 është në mes, mund ta lëmë në vend.
Lidhja 4
Hapni cilësimet e modulit të tekstit për lidhjen 2 dhe përditësoni sa vijon:
Transformimi:
Përkthe boshtin Y: -60 px (Desktop), 0px (Tablet dhe telefon)
Rrotullimi i boshtit Z: -30 gradë (Desktop), 0 px (Tableti dhe telefoni)
Origjina: 50% (në qendër djathtas)
Lidhja 5
Hapni cilësimet e modulit të tekstit për lidhjen 2 dhe përditësoni sa vijon:
Transformimi:
Përkthe boshtin Y: -120 px (Desktop), 0px (Tablet dhe telefon)
Rrotullimi i boshtit Z: -60 gradë (Desktop), 0 px (Tableti dhe telefoni)
Origjina: 50% (në qendër djathtas)
Tani le të shohim rezultatin deri tani. Vini re se si lidhjet/teksti në modulet e tekstit shkojnë në mënyrë të përsosur përgjatë perimetrit të rrethit.
Etiketa e menusë e shtuar
Për të shtuar etiketën e menysë, do të duhet të shtojmë një modul tjetër Teksti në krye të pesë moduleve të tekstit që kemi tashmë. Shkoni përpara dhe shtoni një modul të ri Teksti mbi lidhjen 1.
Më pas, përditësoni përmbajtjen e trupit me sa vijon:
Menu
Më pas, për të shpejtuar dizajnin, kopjoni stilet e modulit Tekst për lidhjen 3 dhe ngjitini këto stile të modulit në modulin e ri Tekst.
Më pas, përditësoni sa vijon:
Lartësia e linjës së tekstit: 300 px (Desktop), 20 px (Tableti dhe telefoni)
Lartësia: rivendosni cilësimin e paracaktuar (auto)
Rrotullimi i transformimit (boshti Z): 180 gradë (Desktop), 0 gradë (Tableti dhe telefoni)
Origjina e transformimit: 50% (në qendër djathtas)
Pasi të kemi përfunduar, duhet t'i japim modulit të tekstit të etiketës së menysë një pozicion absolut. Për ta bërë këtë, shtoni CSS-në e mëposhtme të personalizuar në elementin kryesor:
position: absolute!important;
Tani zbuloni rezultatin. Ju duhet të shihni se artikulli i menusë është me kokë poshtë në të djathtë të timonit.
U shtua efekti rrotullues rrotullues në linjë/rrotë
Për të shtuar efektin rrotullues të rripit në rresht, përditësoni cilësimet e rreshtit si më poshtë:
Rrotullimi i transformimit (boshti Z): 180 gradë (Desktop), 0 gradë (Hover), 0 gradë (Tableti dhe telefoni)
Më pas, përditësoni cilësimet e tranzicionit si më poshtë:
Kohëzgjatja e tranzicionit: 450 ms
Tranzicioni i kurbës së shpejtësisë: Lehtësia në dalje
Tani shikoni se si rrotullohet rrota kur rri pezull mbi të.
Krijimi i një plan urbanistik me dy kolona për seksionin
Aktualisht, faqosja përbëhet nga dy rreshta me një kolonë të vendosura njëra mbi tjetrën. Megjithatë, ne mund të përdorim veçorinë flex css për të lidhur dy rreshtat horizontalisht.
Për ta bërë këtë, ne mund të shtojmë një pjesë të vogël të CSS të personalizuar në seksion. Pasi të jetë bërë kjo, do të na duhet të rregullojmë pak hapësirën për t'i bërë gjërat siç duhet.
Hapni cilësimet e seksionit dhe shtoni css-në e mëposhtme të personalizuar në elementin kryesor:
display:flex;
Përditëso ndarjen e linjës 1
Më pas, përditësoni madhësinë dhe hapësirën e rreshtit 1 si më poshtë:
Një dizajn alternativ interesant është fshehja e gjysmës së djathtë të timonit jashtë seksionit në mënyrë që lidhjet të fshihen dhe më pas të zbulohen kur rri pezull.
Për ta bërë këtë, vazhdoni dhe kopjoni të gjithë seksionin që përmban vizatimin që sapo krijuam.
Në seksionin e kopjuar, përditësoni parametrat në rreshtin 1 si më poshtë:
Gjerësia: 70% (desktop)
Më pas, përditësoni cilësimet në rreshtin 2 për të shtyrë timonin jashtë seksionit si më poshtë:
Margjina: -250 px djathtas
Duhet të përdorim -250 px sepse gjerësia totale e rrotës është 500 px dhe duam të fshehim saktësisht gjysmën e vijës.
Më pas vendosni dukshmërinë e seksionit të fshehur si më poshtë:
Një rrotë lidhëse rrotulluese është një nga ato elemente elegante të dizajnit që mund të tërheqë vizitorët me një efekt delikate dhe unik pezullimi. Dhe është shumë e mahnitshme se sa lehtë mund të bëhet ky dizajn me cilësimet e dizajnit të integruar të Divi.
Shpresojmë që ky tutorial t'ju frymëzojë për projektet tuaja të ardhshme Divi. Nëse keni ndonjë shqetësim apo sugjerim, na gjeni në pjesa e komenteve për ta diskutuar atë.
Konfidencialiteti dhe cookies: kjo faqe përdor cookies. Duke vazhduar të shfletoni këtë faqe, ju pranoni ta përdorni.
Për të mësuar më shumë, përfshirë mënyrën e kontrollit të cookies, shihni sa vijon:
Politika e cookies
