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.

Krijoni një slider me një fizarmonikë në divi

Le të fillojmë tutorialin

Çfarë duhet të filloni

Për të filluar, do të duhet të bëni sa më poshtë:

  1. 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).
  2. 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).
  3. 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.

Zgjidhni një paraqitje divi

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%;

Shtoni një kod divi css

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.

Shtoni një modul përmbledhës divi

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)
Ndarja e ikonave të konfigurimit
  • Ikona (rri pezull): ikona e kontrollit (shih screenshot)
Përdorni ikona kur rrini pezull divi
  • Ikona (tabletë dhe telefon): ikona që përfaqëson një vijë vertikale shigjete (shih screenshot)
harmonik divi përgjegjës

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
Konfigurimi abstrakt i sfondit divi

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
harmonik divi përgjegjës

ikonë

  • Ngjyra e ikonës: #ffffff
  • Imazhi / vendndodhja e ikonave: majtas
Modifikoni modulin e ikonës divi

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)
Konfigurimi i shkronjave të modulit përmbledhës Divi

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
Modifikoni madhësinë e modulit përmbledhës divi

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;

Parametri përmbledhës Divi

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;

Modifikoni stilin e modulit të tekstit divi

tablette

width: 100%;height: 100%;position: relative !important;

Kodi CSS për përmbajtjen e modulit përmbledhës

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
Konfigurimi i tejmbushjes së modulit përmbledhës të Divi

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

Krijoni një slider me një fizarmonikë në divi

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.