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.
rrëshqitës i përgjegjshëm fizarmonikë Divi
  • 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)
rrëshqitës i përgjegjshëm fizarmonikë Divi

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;
krijoni një rrëshqitës fizarmonikë të përgjegjshëm Divi

tablette

position: relative !important;
width: 100%;
height: 100%;
padding: 20px;
transition: color 400ms;
krijoni një rrëshqitës fizarmonikë të përgjegjshëm Divi

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
krijoni një rrëshqitës fizarmonikë të përgjegjshëm Divi

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.

krijoni një rrëshqitës fizarmonikë të përgjegjshëm Divi

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.

...