Želite li izraditi klizač harmonike Divi uzvratni?
Klizač harmonika zabavan je i atraktivan način prikazivanja sadržaj u malom prostoru.
Harmonika klizači općenito se sastoje od nekoliko elemenata (ili ploča) naslaganih vodoravno poput nabora zavjese. 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. Ovdje dobivamo efekt širenja i skupljanja tipa harmonike.
U ovom vodiču pokazat ćemo 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.
pregled
Evo kratkog pregleda onoga što ćemo postići u ovom vodiču.
Preuzmite DIVI odmah!!!
Izrada nove stranice s Divi Builderom
Da biste započeli, morat ćete učiniti sljedeće:
- S WordPress nadzorne ploče idite na Stranice> Dodaj novo za stvaranje nove stranice.
- Dajte mu naslov koji vam ima smisla i kliknite Koristite Divi Builder
- zatim kliknite Počnite graditi (Gradi od ogrebotina)
Nakon toga imat ćete prazno platno za početak dizajniranja u Divi.
Izrada responzivnog klizača harmonike u Diviju
Stvaranje crte
Za početak dodajte redak s jednim stupcem u uobičajeni odjeljak.
Zatim otvorite postavke linije i ažurirajte sljedeće:
- Koristi prilagođenu širinu oluka: DA
- Širina oluka: 1
- Širina: 100%
- Maksimalna širina: 800 px
- Visina: 400 px (Desktop); 700px (tablet i telefon)
Vrijednosti širine i maksimalne širine mogu se promijeniti prema vašim potrebama. Harmonika će pristajati i raditi u bilo kojoj širini linije.
Parametri stupca
Sada kada imamo definiranu visinu za red, otvorite postavke stupca i dodajte sljedeći CSS u glavni element:
desktop
display:flex;
flex-direction: row;
align-items:center;
height: 100%;
tableta
display:flex;
flex-direction: column;
align-items:center;
height: 100%;
Stvaranje ploče harmonike s Blurb modulima
Klizač harmonika može se izraditi koristeći bilo koju vrstu modula. Ako bismo htjeli, mogli bismo upotrijebiti kombinaciju različitih modula koji bi djelovali kao harmonika ploča. Ali za ovaj dizajn koristit ćemo Blurb module.
Započnite dodavanjem Blurb modula liniji.
Blurb Mod Design
Otvorite postavke prezentacijskog modula i ažurirajte sljedeće:
Zadrži izmišljeni naslov 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): vodoravna ikona strelice (pogledajte snimak zaslona)
- Ikona (prelazak pokazivačem): (pogledajte snimak zaslona)
- Ikona (tablet i telefon): (pogledajte snimak zaslona)
Pozadina
Zatim dajte reklamiranoj slici pozadinsku sliku i sloj gradijenta pri lebdenju na sljedeći način:
- Dodajte pozadinsku sliku širine najmanje 1000 px
- Položaj pozadinske slike: sredina lijevo
Zatim dodajte prekrivanje pozadine gradijenta.
Lebdjeti
- Gradijent pozadine lijevo (lebdeći): #3e215b
- Desni (prelazi) pozadinski gradijent: rgba(0,0,0,0)
- Smjer gradijenta: 90 stupnjeva
- Kvadratni gradijent iznad pozadinske slike: DA
ikona
- Boja ikone: #ffffff
- Položaj slike/ikone: desno
Zatim se prebacite na karticu Dizajn i ažurirajte sljedeće:
Naslov i tijelo teksta
- Font naslova: Poppins
- Težina fonta: polu-podebljano
- Boja teksta naslova: prozirna (Desktop), #ffffff (Hover)
- Veličina teksta naslova: 22px
- Boja teksta u tijelu: prozirna (radna površina), #ffffff (lebdjenje)
Visina kutije i sjena
Nakon što je tekst prilagođen, dajte modulu visinu od 100% i sjenu okvira kako slijedi:
- Visina: 100%
- Box Shadow: Pogledajte snimak zaslona
- Horizontalni položaj: -12px
- Okomiti položaj: 0px
Prilagođeni CSS
Kako bi naše ploče harmonike (ili Blurb modul) rasle i skupljale se s ostalim modulima, moramo dodati prilagođeni CSS za promjenu veličine modula pomoću flex-grow-a.
Budući da ćemo imati ukupno 5 modula koji čine harmoniku, dodajemo "flex:1" za zadano stanje i zatim ga mijenjamo u "flex:5" u stanju lebdenja.
Na kartici Napredno dodajte sljedeći prilagođeni CSS u glavni Blurb element:
Biro
flex:1;
position: relative !important;
transition: flex 800ms !important;
Na lebdjenju
flex:5;
position: relative !important;
transition: flex 800ms !important;
Zatim dodajte sljedeći prilagođeni CSS CSS-u Blurb sadržaja:
Biro
position: absolute !important;
width: 280px;
padding: 20px;
transition: color 400ms;
tableta
position: relative !important;
width: 100%;
height: 100%;
padding: 20px;
transition: color 400ms;
Preljev i prijelaz
- Horizontalni preljev: skriven
- Vertikalni preljev: skriveno
- Trajanje prijelaza: 400 ms
- Krivulja brzine prijelaza: linearna
Vrlo dobro! Bila je to ozbiljna prilagodba Blurb modula. Ali dobra vijest je da sve što moramo učiniti je duplicirati ih kako bismo stvorili preostale ploče harmonike.
Dvostruki rasporedi za više harmonika ploča
Zadržite pokazivač miša iznad prezentacijskog modula i kliknite dvostruku ikonu četiri puta kako biste stvorili ukupno pet panela (ili modula) harmonike.
Zatim ažurirajte pozadinske slike za svaki od novih reklama koje ste duplicirali.
Konačni rezultat
Sad kad smo prošli kroz sve korake, da vidimo krajnji rezultat.
Preuzmite DIVI odmah!!!
Zaključak
Ovaj responzivni harmonika klizač doista ima neke jedinstvene elemente koji ga čine zabavnim za korištenje. Paneli harmonike se neprimjetno šire i skupljaju pri prelasku mišem bez ikakvih neočekivanih grešaka.
A ikone prezentacije mijenjaju se dok lebdite i na mobilnom uređaju kako biste poboljšali UX. Nadamo se da će vas ovaj vodič inspirirati za vaše sljedeće Divi projekte. Ako imate nedoumica ili prijedloga, potražite nas odjeljak komentara raspravljati o tome.
Također se možete konzultirati naši resursi, ako vam treba više elemenata za provođenje projekata kreiranja internetskih stranica, savjetujući se s našim vodičem na internetu Izrada bloga WordPress ili onaj koji je uključen Divi: najbolja WordPress tema svih vremena.
Ali u međuvremenu, ovaj članak podijelite na svojim različitim društvenim mrežama.
...
