Klizač za harmoniku je zabavan i atraktivan način prikazivanja sadržaja u ograničenom prostoru. Klizači za harmoniku obično su napravljeni od nekoliko elemenata (ili panela) naslaganih vodoravno, poput nabora zavjese. A kada zadržite pokazivač iznad jednog od panela, on se širi kako bi otkrio sadržaja dok se ostali paneli harmonike skupljaju. Tu se postiže efekat harmonike širenja i skupljanja.
U ovom tutorijalu pokazat ću vam kako da napravite klizač za harmoniku koji odgovara divi koristeći samo CSS. Da bismo to učinili, koristit ćemo nekoliko modula divi da služe kao harmonika paneli. Bilo koji modul se može koristiti, ali za ovaj primjer ćemo koristiti blurb module na vrlo kreativan način da napravimo prekrasan klizač za harmoniku koji izgleda (i radi) odlično i na desktopu i na mobilnom uređaju.
Check it out!
pregled
Ovdje je pregled onoga što ćemo izgraditi u ovom tutorialu.
Počnimo udžbenik
Šta vam je potrebno 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).
- Kreirajte novu stranicu u WordPressu i koristite Divi Builder za uređivanje stranice na prednjem kraju (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-ju.
Napravite klizač sa harmonikom koja reaguje na Divi
Stvaranje linije
Za početak, dodajte red stupca u redovan 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 radiće u bilo kojoj širini reda. Takođe, postavljanje fiksne visine je vrlo 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 reda, 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 poravnać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 harmonike sa modulima Sažetak
Klizač za harmoniku može se napraviti pomoću bilo koje vrste modula. Ako smo željeli, mogli bismo koristiti kombinaciju različitih modula koji će služiti kao panel 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 sledeće:
Neka naslov bude fiktivan i sadržaja iz tela. To uvijek možemo promijeniti kasnije.
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 postavite zamućenju pozadinsku sliku i gradijent prekrivanja na sljedeći način:
- Dodajte sliku u pozadini koja je široka 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 / lokacija ikona: levo
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 (lebdeći pokazivač)
- Veličina naslova teksta: 23px
- Boja teksta tijela: prozirna (radna površina), #ffffff (lebdeći pokazivač)
Visina i Senka kutije
Jednom kada je tekst moderan, dodijelite modulu visine 100% i okvir sjena na sljedeći način:
- Visina: 100% \ t
- Box Shadow: Pogledajte snimak zaslona
- Sjena kutije Horizontalni položaj: -12px
- Sjena okvira Vertikalni položaj: 0px
Blurb Custom CSS
Da bi se naši paneli za harmoniku (ili modul za prezentaciju) proširili i stezali sa ostalim modulima, moramo dodati prilagođeni CSS da bismo promijenili veličinu modula pomoću flex-grow. Budući da ćemo imati ukupno 5 modula koji čine harmoniku, dodamo "flex: 1" za zadano stanje, a zatim ga promijenimo u "flex: 5" u stanju lebdenja.
Pod karticu Advanced 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;
Prelivanje i tranzicija
- Vodoravni preliv: skriven
- Vertikalni preliv: 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 slike u pozadini za svaki od novih duplikata koje ste duplicirali.
Konačni rezultat
Final misli
Ovaj klizač za harmoniku koji reagira zaista ima neke jedinstvene elemente koji ga čine zabavnim za upotrebu. Paneli harmonike se šire i skupljaju dok lebde bez neočekivanih problema. I ikone prezentacije mijenjaju se u lebdenju i na mobilnom uređaju kako bi pojačale UX. Nadam se da će ovaj dizajn biti koristan za vaš sljedeći projekt.
