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ë kufizuar. Rrëshqitësit e fizarmonikës zakonisht bëhen nga disa elementë (ose panele) të grumbulluara 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 fizarmonikë kontraktohen. Këtu arrihet efekti fizarmonikë i zgjerimit dhe tkurrjes.
Në këtë tutorial, unë do t'ju tregoj 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ë. Mund të përdoret çdo modul, por për këtë shembull ne do të përdorim modulet blurb në një mënyrë shumë kreative për të krijuar një rrëshqitës të bukur fizarmonikë që duket (dhe funksionon) shkëlqyeshëm si në desktop ashtu edhe në celular.
Check it out!
studim
Këtu është një përmbledhje e asaj që ne do të ndërtojmë në këtë tutorial.
Le të fillojmë tutorialin
Çfarë duhet të filloni
Për të filluar, do të duhet të bëni sa më poshtë:
- Nëse nuk e keni bërë tashmë, instaloni dhe aktivizoni Tema divi instaluar (ose shtojcën Divi Ndërtues nëse nuk jeni duke përdorur Tema divi).
- Krijoni një faqe të re në WordPress dhe përdorni Divi Builder për të modifikuar faqen në pjesën e përparme (konstruktor vizual).
- Shkarkoni në lidhje me imazhe të ndryshme 5 në bibliotekë për të përdorur si imazhe sfondi të nevojshme për mësimin.
Pas kësaj, ju do të keni një kanavacë të zbrazët për të filluar projektimin në Divi.
Krijoni një slider me një fizarmonikë të përgjegjshëm në Divi
Krijimi i linjës
Për të filluar, shtoni një rresht të një kolone në seksionin e rregullt.
Pastaj hapni cilësimet për linjën dhe azhurnoni si vijon:
- Gjerësia e zorrës së trashë: 1
- Gjerësia: 100%
- Gjerësia maksimale: 800px
- Lartësia: 400px (desktop); 700px (tabletë dhe telefon)
Vlerat e gjerësisë dhe gjerësisë maksimale mund të ndryshohen në përputhje me nevojat tuaja. Fizarmonika do të shkallëzohet dhe do të funksionojë në çdo gjerësi rreshti. Gjithashtu, vendosja e një lartësie fikse është shumë e rëndësishme që dizajni të funksionojë. Elementet e fëmijëve (kolona dhe modulet) do të kenë një lartësi prej 100%. Prandaj, nëse nuk vendosni lartësinë fikse të rreshtit, elementët fëmijë nuk do të kenë një lartësi.
Parametrat e kolonës
Tani që është vendosur lartësia e rreshtit, hapni cilësimet e kolonës dhe shtoni kodin e mëposhtëm CSS në elementin kryesor:
zyrë
display:flex;flex-direction: row;align-items:center;height: 100%;
tablette
flex-direction: column;
Prona fleksibël do të përafrojë panelet e fizarmonikës horizontalisht në desktop dhe vertikalisht në tabletë dhe telefon. Lartësia 100% do të lejojë që modulet që do të shtojmë të përdorin edhe vlerën 100% të lartësisë.
Krijimi i panelit fizarmonik me modulet Përmbledhje
Rrëshqitësi i fizarmonikës mund të ndërtohet duke përdorur çdo lloj moduli. Nëse do të dëshironim, mund të përdorim një kombinim të moduleve të ndryshëm për të shërbyer si një panel fizarmonikë. Por për këtë dizajn, ne do të përdorim Modat e Blurb.
Filloni duke shtuar një modul prezantimi në rresht.
Dizajni i modulit abstrakt
Hapni cilësimet e modulit përmbledhës dhe azhurnoni si vijon:
Mbajeni titullin fiktiv dhe përmbajtje nga trupi. Ne gjithmonë mund ta ndryshojmë këtë më vonë.
Pastaj azhurnoni ikonën e prezantimit si më poshtë:
- Ikona (desktop): ikona që përfaqëson një vijë horizontale shigjete (shih screenshot)
- Ikona (rri pezull): ikona e kontrollit (shih screenshot)
- Ikona (tabletë dhe telefon): ikona që përfaqëson një vijë vertikale shigjete (shih screenshot)
Contexte
Pastaj jepni një pamje të sfondit dhe një mbivendosje të gradientit si më poshtë:
- Shtoni një imazh sfondi që është të paktën 1000 pixel të gjerë
- Pozicioni i imazhit të sfondit: qendra majtas
Pastaj shtoni një mbivendosje të sfondit gradient.
shket
- Sfond i gradientit të majtë (rri pezull): # 3e215b
- Shkalla e sfondit në të djathtën Ngjyra (rri pezull): rgba (0,0,0,0)
- Drejtimi i gradientit: 90deg
- Vendosni gradientin mbi imazhin e sfondit: PO
ikonë
- Ngjyra e ikonës: #ffffff
- Imazhi / vendndodhja e ikonave: majtas
Pastaj shkoni te skeda Design dhe azhurnoni sa vijon:
Titulli dhe trupi i tekstit
- Font Titulli: Poppins
- Titulli i fontit: Semi Bold
- Ngjyra e Titullit të Tekstit: transparent (desktop), #ffffff (rri pezull)
- Titulli i tekstit Titulli: 23px
- Ngjyra e tekstit të trupit: transparent (desktop), #ffffff (rri pezull)
Lartësia dhe hija e kutisë
Pasi teksti është elegant, caktoni modulit një lartësi prej 100% dhe një kuti hije si më poshtë:
- Gjatësia: 100%
- Shadow Box: Shih screenshot
- Hija e kutisë Pozita horizontale: -12px
- Hija e kutisë Pozicioni vertikal: 0px
Shpërndaj CSS me porosi
Në mënyrë që panelet tona fizarmonike (ose moduli i prezantimit) të zgjerohen dhe tkurren 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. Ndërsa do të kemi gjithsej 5 modë që përbëjnë fizarmonikën, ne shtojmë "flex: 1" për gjendjen e paracaktuar, pastaj e ndryshojmë në "flex: 5" në gjendjen e rri pezull.
Nën skedën Advanced, shtoni CSS të mëposhtme të personalizuar, elementi kryesor Blurb:
zyrë
flex:1;position: relative !important;transition: flex 800ms !important;
tablette
flex:5;
Pastaj shtoni css-in e mëposhtëm të personalizuar në CSS Blurb Content:
zyrë
position: absolute !important;width: 280px;padding: 20px;transition: color 400ms;
tablette
width: 100%;height: 100%;position: relative !important;
Vërshimi dhe tranzicioni
- Rrjedhja horizontale: e fshehur
- Vërshimi vertikal: i fshehur
- Kohëzgjatja e tranzicionit: 400ms
- Kurba e shpejtësisë së tranzicionit: linear
Mirë! Ishte një personalizim serioz i një moduli prezantimi. Por lajmi i mirë është, gjithçka që duhet të bëjmë është t'i kopjojmë ato për të krijuar panelet e mbetura të fizarmonikës.
Dublikoni Blurbs për më shumë panele fizarmonike
Lëvizni sipër modulit të prezantimit dhe klikoni në ikonën e kopjuar katër herë për të krijuar gjithsej pesë panele fizarmonike (ose module).
Pastaj azhurnoni imazhet e sfondit për secilën prej turbullirave të reja që keni kopjuar.
Rezultati përfundimtar
Mendimet e fundit
Ky rrëshqitës i harmonishëm i fizarmonikës ka me të vërtetë disa elementë unikë që e bëjnë atë argëtues në përdorim. Panelet e fizarmonikës zgjerohen dhe tkurren ndërsa qëndrojnë pezull pa probleme të papritura. Dhe ikonat e prezantimit ndryshojnë ndërsa rri pezull dhe në celular për të rritur UX. Shpresoj që ky dizajn të jetë i dobishëm për projektin tuaj të ardhshëm.