Posuvník akordeonu je zábavný a atraktivní způsob zobrazení obsah v omezeném prostoru. Akordeonové posuvníky jsou obvykle vyrobeny z několika prvků (nebo panelů) naskládaných vodorovně, jako záhyby záclony. A když najedete na jeden z panelů, roztáhne se a odhalí obsah zatímco ostatní akordeonové panely se stahují. Zde je dosaženo akordeonového efektu rozpínání a smršťování.
V tomto tutoriálu vám ukážu, jak vytvořit responzivní posuvník akordeonu divi pouze pomocí CSS. K tomu použijeme několik modulů divi sloužit jako akordeonové panely. Lze použít jakýkoli modul, ale pro tento příklad použijeme moduly s reklamami velmi kreativním způsobem, abychom vytvořili krásný posuvník akordeonu, který vypadá (a funguje) skvěle jak na počítači, tak na mobilu.
Vyzkoušejte to!
přehled
Zde je přehled toho, co budeme stavět v tomto tutoriálu.
Začněme tutoriál
Co potřebujete, abyste mohli začít
Nejprve musíte provést následující kroky:
- Pokud jste tak ještě neučinili, nainstalujte a aktivujte Divi téma nainstalovaný (nebo plugin divi Builder, pokud nepoužíváte Divi téma).
- Vytvořte novou stránku ve WordPressu a pomocí Divi Builderu upravte stránku na front-endu (vizuální konstruktor).
- Stahujte o různých obrázcích 5 v knihovně, které chcete použít jako obrázky na pozadí potřebné pro výuku.
Poté budete mít prázdné plátno, abyste mohli začít navrhovat v Divi.
Vytvořte na Divi posuvník s citlivým akordeonem
Vytvoření linky
Nejprve přidejte řádek sloupce do normální sekce.
Poté otevřete nastavení linky a aktualizujte následující:
- Šířka okapu: 1
- Šířka: 100%
- Maximální šířka: 800px
- Výška: 400px (desktop); 700 pixelů (tablet a telefon)
Hodnoty šířky a maximální šířky lze změnit podle vašich potřeb. Akordeon bude zmenšen a bude fungovat v jakékoli šířce řádku. Aby konstrukce fungovala, je také velmi důležité nastavení pevné výšky. Podřízené prvky (sloupec a moduly) budou mít výšku 100%. Pokud tedy nenastavíte pevnou výšku řádku, podřízené prvky nebudou mít výšku.
Parametry sloupce
Nyní, když je nastavena výška řádku, otevřete nastavení sloupce a přidejte následující kód CSS do hlavního prvku:
Kancelář
display:flex;flex-direction: row;align-items:center;height: 100%;
tableta
flex-direction: column;
Vlastnost flex zarovná akordeonové panely vodorovně na ploše a svisle na tabletu a telefonu. 100% výška umožní modulům, které přidáme, použít také hodnotu 100% výšky.
Vytvoření akordeonového panelu s moduly Souhrn
Posuvník akordeonu lze sestavit pomocí libovolného typu modulu. Pokud bychom chtěli, mohli bychom použít kombinaci různých modulů jako akordeonový panel. Ale pro tento design budeme používat Blurb Mods.
Začněte přidáním modulu prezentace na řádek.
Abstraktní design modulu
Otevřete nastavení souhrnného modulu a aktualizujte následující:
Ponechte název fiktivní a obsah z těla. Vždy to můžeme později změnit.
Poté aktualizujte ikonu prezentace následujícím způsobem:
- Ikona (plocha): ikona představující vodorovnou čáru šipky (viz screenshot)
- Ikona (vznášet se): zkontrolujte ikonu (viz screenshot)
- Ikona (tablet a telefon): ikona představující svislou šipku (viz snímek obrazovky)
kontext
Poté udělejte snímku obrázek na pozadí a překrytí gradientu následovně:
- Přidejte obrázek na pozadí široký alespoň 1000 XNUMX pixelů
- Pozice obrázku na pozadí: uprostřed vlevo
Poté přidejte překrytí pozadí.
plovák
- Pozadí levého přechodu (vznášení): # 3e215b
- Přechod na pozadí vpravo Barva (vznášení): rgba (0,0,0,0)
- Směr přechodu: 90deg
- Umístěte přechod nad obrázek na pozadí: ANO
ikona
- Barva ikony: #ffffff
- Obrázek / umístění ikon: vlevo
Pak přejděte na kartu Návrh a aktualizujte následující:
Název a text textu
- Písmo názvu: Poppins
- Název písma: Semi Bold
- Barva názvu textu: průhledná (na ploše), #ffffff (vznášet se)
- Velikost názvu textu: 23px
- Barva textu těla: průhledná (na ploše), #ffffff (vznášet se)
Výška a stín stínu
Jakmile je text stylový, přiřaďte modulu výšku 100% a stínové pole takto:
- Výška: 100%
- Shadow Box: Viz screenshot
- Stín pole Horizontální poloha: -12px
- Stín pole Svislá poloha: 0px
Blurb Vlastní CSS
Aby se naše akordeonové panely (nebo prezentační modul) mohly rozšířit a uzavřít smlouvu se zbytkem modulů, musíme přidat vlastní CSS, abychom změnili velikost modulu pomocí flex-grow. Jelikož budeme mít celkem 5 modulů, které tvoří akordeon, přidáme pro výchozí stav „flex: 1“ a ve stavu přechodu jej změníme na „flex: 5“.
Na kartě Upřesnit přidejte následující vlastní CSS, hlavní prvek Blurb:
Kancelář
flex:1;position: relative !important;transition: flex 800ms !important;
tableta
flex:5;
Potom do CSS Blurb Content přidejte následující vlastní css:
Kancelář
position: absolute !important;width: 280px;padding: 20px;transition: color 400ms;
tableta
width: 100%;height: 100%;position: relative !important;
Přetečení a přechod
- Horizontální přetečení: skryté
- Vertikální přetečení: skryté
- Trvání přechodu: 400ms
- Křivka přechodové rychlosti: lineární
Studna! Jednalo se o vážné přizpůsobení modulu prezentace. Ale dobrá zpráva je, že je pouze musíme duplikovat, abychom vytvořili zbývající akordeonové panely.
Duplikujte Blurbs a získáte více panelů akordeonu
Najeďte kurzorem na prezentační modul a čtyřikrát klikněte na ikonu duplikátu, čímž vytvoříte celkem pět akordeonových panelů (nebo modulů).
Poté aktualizujte obrázky na pozadí pro každou z nových duplikátů, které jste duplikovali.
Konečný výsledek
Závěrečné myšlenky
Tento responzivní posuvník akordeonu má opravdu některé jedinečné prvky, díky nimž je jeho používání zábavné. Akordeonové panely se rozšiřují a smršťují, zatímco se vznášejí bez neočekávaných problémů. A ikony prezentace se mění ve vznášení a v mobilních zařízeních, aby podpořily UX. Doufám, že tento design bude užitečný pro váš další projekt.
