Klizač harmonika zabavan je i atraktivan način prikazivanja sadržaj u ograničenom prostoru. Klizači harmonika obično se izrađuju od nekoliko elemenata (ili ploča) naslaganih vodoravno, poput nabora zavjesa. A kada zadržite pokazivač iznad jedne od ploča, ona se proširuje i otkriva sadržaj dok se druge ploče harmonike skupljaju. Tu se postiže harmonikaški efekt širenja i skupljanja.
U ovom vodiču pokazat ću vam kako izraditi responzivni klizač harmonike Divi koristeći samo CSS. Da bismo to učinili, koristit ćemo nekoliko modula Divi da služe kao harmonika ploče. Može se koristiti bilo koji modul, ali za ovaj ćemo primjer upotrijebiti blurb module na vrlo kreativan način kako bismo stvorili prekrasan klizač harmonike koji izgleda (i radi) sjajno i na stolnom računalu i na mobilnom uređaju.
Check it out!
pregled
Ovdje je pregled onoga što ćemo graditi u ovom udžbeniku.
Počnimo udžbenik
Što trebate za početak
Za početak morat ćete učiniti sljedeće:
- Ako već niste, instalirajte i aktivirajte Divi tema instaliran (ili dodatak Divi Builder ako ne koristite Divi tema).
- Stvorite novu stranicu u WordPressu i koristite Divi Builder za uređivanje stranice na prednjem dijelu (vizualni konstruktor).
- Preuzmite o 5 različitim slikama u biblioteci da biste ih koristili kao pozadinske slike potrebne za udžbenik.
Nakon toga imat ćete prazno platno za početak dizajniranja u Divi.
Napravite klizač uz prilagodljivu harmoniku na Divi
Stvaranje crte
Za početak dodajte redak stupca u uobičajeni odjeljak.
Zatim otvorite postavke za liniju i ažurirajte sljedeće:
- Širina oluka: 1
- Širina: 100%
- Maksimalna širina: 800px
- Visina: 400px (radna površina); 700 piksela (tablet i telefon)
Vrijednosti širine i maksimalne širine mogu se mijenjati prema vašim potrebama. Harmonika će biti skalirana i raditi će u bilo kojoj širini reda. Također, postavljanje fiksne visine vrlo je važno za rad dizajna. Podređeni elementi (stupac i moduli) imat će visinu od 100%. Stoga, ako ne postavite fiksnu visinu retka, podređeni elementi neće imati visinu.
Parametri stupca
Sada kada je postavljena visina retka, otvorite postavke stupca i dodajte sljedeći CSS kôd glavnom elementu:
Biro
display:flex;flex-direction: row;align-items:center;height: 100%;
tableta
flex-direction: column;
Svojstvo flex poravnat će ploče harmonike vodoravno na radnoj površini i okomito na tabletu i telefonu. Visina od 100% omogućit će modulima koje ćemo dodati da koriste i vrijednost visine od 100%.
Izrada ploče za harmoniku s modulima Sažetak
Klizač za harmoniku može se izraditi pomoću bilo koje vrste modula. Ako smo željeli, mogli bismo koristiti kombinaciju različitih modula koji će poslužiti kao ploča za harmoniku. Ali za ovaj dizajn koristit ćemo Blurb Mods.
Započnite dodavanjem prezentacijskog modula liniji.
Dizajn apstraktnog modula
Otvorite postavke modula sažetka i ažurirajte sljedeće:
Držite naslov fiktivnim i sadržaj iz tijela. To uvijek možemo kasnije promijeniti.
Zatim ažurirajte ikonu prezentacije na sljedeći način:
- Ikona (radna površina): ikona koja predstavlja vodoravnu liniju strelice (pogledajte snimak zaslona)
- Ikona (lebdenje): ikona za provjeru (pogledajte snimak zaslona)
- Ikona (tablet i telefon): ikona koja predstavlja vertikalnu liniju strelice (pogledajte snimak zaslona)
kontekst
Zatim zamijenite pozadinsku sliku i prekrivajući gradijent na sljedeći način:
- Dodajte pozadinsku sliku širine najmanje 1000 piksela
- Položaj pozadinske slike: sredina lijevo
Zatim dodajte prekrivanje pozadine gradijenta.
plovak
- Pozadina lijevog gradijenta (lebdeći pokazivač): # 3e215b
- Pozadinski gradijent udesno Boja (lebdeći pokazivač): rgba (0,0,0,0)
- Smjer gradijenta: 90deg
- Postavite gradijent iznad pozadinske slike: DA
ikona
- Boja ikone: #ffffff
- Slika / mjesto ikona: lijevo
Zatim idite na karticu Dizajn i ažurirajte sljedeće:
Naslov i tijelo teksta
- Font naslova: Poppins
- Naziv fonta: Semi Bold
- Boja naslova teksta: prozirna (radna površina), #ffffff (zadržavanje pokazivača miša)
- Veličina naslova teksta: 23px
- Boja teksta tijela: prozirna (radna površina), #ffffff (lebdeći pokazivač)
Visina i Visina okvira
Kad je tekst moderan, modulu dodijelite visinu od 100% i okvir sjena na sljedeći način:
- Visina: 100%
- Box Shadow: Pogledajte snimak zaslona
- Sjena okvira Horizontalni položaj: -12px
- Sjena okvira Vertikalni položaj: 0px
Zamući prilagođeni CSS
Da bi se naši paneli za harmoniku (ili modul za prezentaciju) proširili i stezali s ostalim modulima, moramo dodati prilagođeni CSS da bismo promijenili veličinu modula s flex-growom. Kako ćemo imati ukupno 5 modova koji čine harmoniku, dodamo "flex: 1" za zadano stanje, a zatim ga promijenimo u "flex: 5" u stanju lebdenja.
Pod karticu Napredno dodajte sljedeći prilagođeni CSS, glavni element Blurb:
Biro
flex:1;position: relative !important;transition: flex 800ms !important;
tableta
flex:5;
Zatim dodajte sljedeći prilagođeni css u CSS Blurb sadržaj:
Biro
position: absolute !important;width: 280px;padding: 20px;transition: color 400ms;
tableta
width: 100%;height: 100%;position: relative !important;
Preljev i prijelaz
- Vodoravni preljev: skriven
- Okomiti preljev: skriven
- Trajanje prijelaza: 400ms
- Krivulja brzine prijelaza: linearna
Dobro! Bilo je to ozbiljno prilagođavanje prezentacijskog modula. Ali dobra vijest je da ih samo moramo duplicirati kako bismo stvorili preostale ploče za harmoniku.
Duplicirajte Blurbs za više ploča za harmoniku
Zadržite pokazivač iznad prezentacijskog modula i kliknite ikonu duplikata četiri puta da biste stvorili ukupno pet ploča (ili modula) za harmoniku.
Zatim ažurirajte pozadinske slike za svaki novi blurbs koji ste duplicirali.
Konačni rezultat
Završne misli
Ovaj klizač za harmoniku koji reagira zaista ima neke jedinstvene elemente koji ga čine zabavnim za upotrebu. Harmonika ploče se šire i skupljaju dok lebde bez neočekivanih problema. I ikone prezentacije mijenjaju se u lebdenju i na mobitelu kako bi pojačale UX. Nadam se da će ovaj dizajn biti koristan za vaš sljedeći projekt.
