Posuvník na akordeón je zábavný a atraktívny spôsob zobrazenia obsah v obmedzenom priestore. Akordeónové posúvače sa zvyčajne skladajú z niekoľkých prvkov (alebo panelov) naskladaných vodorovne, ako sú záhyby záclon. A keď umiestnite kurzor myši na jeden z panelov, rozbalí sa a odhalí obsah zatiaľ čo ostatné akordeónové panely sa sťahujú. Tu sa dosiahne akordeónový efekt expanzie a kontrakcie.
V tomto návode vám ukážem, ako vytvoriť citlivý akordeónový posúvač divi iba pomocou CSS. Na tento účel použijeme niekoľko modulov divi slúžiť ako akordeónové panely. Dá sa použiť akýkoľvek modul, ale v tomto príklade použijeme moduly s reklamami veľmi kreatívnym spôsobom na vytvorenie krásneho posúvača akordeónu, ktorý vyzerá (a funguje) skvele na počítači aj na mobile.
Vyskúšajte to!
prehľad
Tu je prehľad toho, čo vytvoríme v tomto návode.
Začnime tutoriál
Čo potrebujete, aby ste začali
Na začiatok budete musieť urobiť nasledujúce kroky:
- Ak ste tak ešte neurobili, nainštalujte a aktivujte Divi téma nainštalovaný (alebo plugin divi Builder, ak nepoužívate Divi téma).
- Vytvorte novú stránku v programe WordPress a pomocou nástroja Divi Builder upravte stránku na klientskom rozhraní (vizuálny konštruktor).
- Stiahnite si asi 5 rôzne obrázky z knižnice, ktoré použijete ako obrázky na pozadí potrebné pre výučbu.
Potom budete mať prázdne plátno, aby ste mohli začať navrhovať v Divi.
Vytvorte na Divi posúvač s responzívnym akordeónom
Vytvorenie linky
Na začiatok pridajte riadok stĺpca do normálnej sekcie.
Potom otvorte nastavenia linky a aktualizujte nasledujúce:
- Šírka odkvapov: 1
- Šírka: 100%
- Maximálna šírka: 800px
- Výška: 400px (desktop); 700 pixelov (tablet a telefón)
Hodnoty šírky a maximálnej šírky je možné meniť podľa vašich potrieb. Akordeón bude zmenšený a bude fungovať v akejkoľvek šírke riadku. Pre fungovanie dizajnu je tiež veľmi dôležité nastavenie pevnej výšky. Podradené prvky (stĺpec a moduly) budú mať výšku 100%. Ak teda nenastavíte pevnú výšku riadku, podradené prvky nebudú mať výšku.
Parametre stĺpca
Teraz, keď je nastavená výška riadku, otvorte nastavenia stĺpca a do hlavného prvku pridajte nasledujúci kód CSS:
kancelária
display:flex;flex-direction: row;align-items:center;height: 100%;
tableta
flex-direction: column;
Vlastnosť flex zarovná akordeónové panely vodorovne na ploche a zvisle na tablete a telefóne. 100% výška umožní, aby moduly, ktoré pridáme, mohli tiež používať hodnotu 100% výšky.
Vytvorenie akordeónového panelu s modulmi Súhrn
Posuvník akordeónu je možné zostaviť pomocou ľubovoľného typu modulu. Ak by sme chceli, mohli by sme použiť kombináciu rôznych modulov, ktoré by slúžili ako akordeónový panel. Ale pre tento dizajn budeme používať Blurb Mods.
Začnite pridaním prezentačného modulu do riadku.
Návrh abstraktného modulu
Otvorte nastavenia súhrnu modulu a aktualizujte nasledujúce:
Ponechajte názov fiktívny a obsah z tela. Vždy to môžeme neskôr zmeniť.
Potom aktualizujte ikonu prezentácie nasledujúcim spôsobom:
- Ikona (pracovná plocha): ikona predstavujúca vodorovnú čiaru so šípkou (pozri snímku obrazovky)
- Ikona (kurzor myši): začiarknite ikonu (pozri snímku obrazovky)
- Ikona (tablet a telefón): ikona predstavujúca zvislú čiaru šípky (pozri snímku obrazovky)
kontext
Potom dajte obrázku obrázok na pozadí a prekrytie gradientu nasledovne:
- Pridajte obrázok na pozadí, ktorý je široký minimálne 1000 XNUMX pixelov
- Pozícia obrázka na pozadí: v strede vľavo
Potom pridajte prekrytie pozadia.
plavák
- Ľavé prechodové pozadie (vznášanie sa): # 3e215b
- Pozdĺžny gradient vpravo Farba (vznášanie sa): rgba (0,0,0,0)
- Smer sklonu: 90deg
- Umiestnite prechod nad obrázok na pozadí: ÁNO
ikona
- Farba ikony: #ffffff
- Obrázok / umiestnenie ikon: vľavo
Potom prejdite na kartu Návrh a aktualizujte nasledujúce položky:
Názov a text textu
- Písmo názvu: Poppins
- Názov písma: Semi Bold
- Farba názvu textu: priehľadná (na pracovnej ploche), #ffffff (vznášanie sa)
- Veľkosť textu textu: 23px
- Farba textu tela: priehľadná (na pracovnej ploche), #ffffff (vznášanie sa)
Výška a tienenie skrinky
Keď je text štýlový, priraďte modulu výšku 100% a tieňové pole nasledovne:
- Výška: 100%
- Tieň poľa: pozri snímku obrazovky
- Tieň škatule Horizontálna poloha: -12px
- Tieň škatule Zvislá poloha: 0px
Blurb Custom CSS
Aby sa naše akordeónové panely (alebo prezentačný modul) mohli rozširovať a sťahovať s ostatnými modulmi, musíme pridať vlastné CSS, aby sme zmenili veľkosť modulu pomocou flex-grow. Pretože budeme mať celkom 5 módov, ktoré tvoria akordeón, pridáme pre predvolený stav „flex: 1“, potom ho v stave vznášania zmeníme na „flex: 5“.
Na kartu Rozšírené pridajte nasledujúci vlastný CSS, hlavný prvok Blurb:
kancelária
flex:1;position: relative !important;transition: flex 800ms !important;
tableta
flex:5;
Potom pridajte do CSS Blurb Content nasledujúci vlastný súbor CSS:
kancelária
position: absolute !important;width: 280px;padding: 20px;transition: color 400ms;
tableta
width: 100%;height: 100%;position: relative !important;
Prepad a prechod
- Horizontálny prepad: skrytý
- Vertikálny prepad: skrytý
- Trvanie prechodu: 400ms
- Krivka prechodovej rýchlosti: lineárna
Nuž! Išlo o vážne prispôsobenie prezentačného modulu. Ale dobrá správa je, že ich musíme len duplikovať a vytvoriť tak zostávajúce akordeónové panely.
Duplikujte Blurbs pre získanie ďalších harmonikových panelov
Umiestnením kurzora myši na prezentačný modul a štvornásobným kliknutím na ikonu duplikát vytvoríte celkovo päť panelov (alebo modulov) harmoniky.
Potom aktualizujte obrázky na pozadí pre každú z nových duplikácií rozmazania.
Konečný výsledok
záverečné myšlienky
Tento responzívny akordeónový posúvač má skutočne niektoré jedinečné prvky, vďaka ktorým je jeho použitie zábavné. Akordeónové panely sa rozširujú a sťahujú pri vznášaní bez neočakávaných problémov. A ikony prezentácie sa menia pri vznášaní a na mobilných zariadeniach, aby podporili UX. Dúfam, že tento dizajn bude užitočný pre váš ďalší projekt.
