Dëshironi të krijoni një rrëshqitës fizarmonikë Divi të përgjegjshme?
Një rrëshqitës fizarmonikë është një mënyrë argëtuese dhe tërheqëse për t'u shfaqur përmbajtje në një hapësirë të vogël.
Rrëshqitësit e fizarmonikës në përgjithësi 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ërmbajtje ndërsa panelet e tjera të fizarmonikës kontraktohen. Këtu kemi efektin e tipit 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 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.
Shkarkoni DIVI Tani!!!
Krijimi i një faqeje të re me Divi Builder
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
display:flex;
flex-direction: row;
align-items:center;
height: 100%;
tablette
display:flex;
flex-direction: column;
align-items:center;
height: 100%;
Krijimi i panelit të fizarmonikës me module Blurb
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ërmbajtje nga trupi. Ne gjithmonë mund ta ndryshojmë këtë 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:
zyrë
flex:1;
position: relative !important;
transition: flex 800ms !important;
Në pezullim
flex:5;
position: relative !important;
transition: flex 800ms !important;
Pastaj shtoni CSS-në e mëposhtme të personalizuar në përmbajtjen Blurb CSS:
zyrë
position: absolute !important;
width: 280px;
padding: 20px;
transition: color 400ms;
tablette
position: relative !important;
width: 100%;
height: 100%;
padding: 20px;
transition: color 400ms;
Vërshimi dhe tranzicioni
- Vërshimi horizontal: I fshehur
- Vërshimi vertikal: I fshehur
- Kohëzgjatja e tranzicionit: 400 ms
- Kurba e shpejtësisë së tranzicionit: lineare
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.
Shkarkoni DIVI Tani!!!
Përfundim
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ë.
Ju gjithashtu mund të konsultoheni burimet tona, nëse keni nevojë për më shumë elemente për të realizuar projektet tuaja të krijimit të faqeve në Internet, duke u konsultuar me udhëzuesin tonë për Krijimi i blogut të WordPress ose atë më Divi: tema më e mirë e WordPress të të gjitha kohërave.
Por në ndërkohë, ndajeni këtë artikull në rrjetet tuaja të ndryshme sociale.
...