Chtěli byste vytvořit akordeonový posuvník divi citlivý?
Posuvník akordeonu je zábavný a atraktivní způsob zobrazení obsah na malém prostoru.
Akordeonové posuvníky se obecně skládají 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 se dostáváme k efektu roztahování a smršťování typu akordeonu.
V tomto tutoriálu vám ukážeme, jak vytvořit responzivní posuvník akordeonu divi pouze pomocí CSS. K tomu použijeme několik modulů divi sloužit jako akordeonové panely.
přehled
Zde je rychlý přehled toho, čeho v tomto tutoriálu dosáhneme.
Stáhnout DIVI hned!!!
Vytvoření nové stránky pomocí Divi Builder
Chcete-li začít, budete muset provést následující:
- Z řídicího panelu WordPress přejděte na Stránky> Přidat nové vytvořit novou stránku.
- Dejte tomu název, který vám dává smysl, a klikněte Použijte Divi Builder
- poté klikněte na tlačítko Začněte stavět (Sestavte od nuly)
Poté budete mít prázdné plátno, abyste mohli začít navrhovat v Divi.
Vytvoření responzivního akordeonového slideru v Divi
Vytvoření linky
Chcete-li začít, přidejte do běžné sekce řádek s jedním sloupcem.
Poté otevřete nastavení linky a aktualizujte následující:
- Použít vlastní šířku okapu: ANO
- Šířka žlabu: 1
- Šířka: 100 %
- Maximální šířka: 800 pixelů
- Výška: 400px (počítač); 700 pixelů (tablet a telefon)
Hodnoty šířky a maximální šířky lze změnit podle vašich potřeb. Harmonika se vejde a bude fungovat v jakékoli šířce linky.
Parametry sloupce
Nyní, když máme pro řádek definovanou výšku, otevřete nastavení sloupců a do hlavního prvku přidejte následující CSS:
Desktop
display:flex;
flex-direction: row;
align-items:center;
height: 100%;
tableta
display:flex;
flex-direction: column;
align-items:center;
height: 100%;
Vytvoření akordeonového panelu pomocí modulů Blurb
Harmonika může být postavena pomocí jakéhokoli typu modulu (modulů). Pokud bychom chtěli, mohli bychom použít kombinaci různých modulů, které by fungovaly jako harmonikový panel. Ale pro tento návrh použijeme moduly Blurb.
Začněte přidáním modulu Blurb na řádek.
Blurb Mod Design
Otevřete nastavení modulu prezentace a aktualizujte následující:
Ponechte si smyšlený název a obsah z těla. Vždy to můžeme později změnit.
Dále aktualizujte ikonu prezentace následovně:
- Ikona (Plocha): Ikona vodorovné šipky (viz snímek obrazovky)
- Ikona (umístění kurzoru): (viz snímek obrazovky)
- Ikona (tablet a telefon): (viz snímek obrazovky)
Pozadí
Poté dejte reklamě obrázek na pozadí a překryvný přechod při umístění kurzoru následovně:
- Přidejte obrázek na pozadí široký alespoň 1000 pixelů
- Pozice obrázku na pozadí: Střed vlevo
Poté přidejte překrytí pozadí.
Vznášet se
- Přechod na pozadí vlevo (přejetí): #3e215b
- Přechod na pozadí vpravo (přejetí): rgba(0,0,0,0)
- Směr gradientu: 90 stupňů
- Čtvercový přechod nad obrázkem pozadí: ANO
ikona
- Barva ikony: #ffffff
- Umístění obrázku/ikony: vpravo
Dále se přepněte na kartu Návrh a aktualizujte následující:
Název a text textu
- Písmo názvu: Poppins
- Tloušťka písma: polotučné
- Barva textu nadpisu: průhledná (Desktop), #ffffff (Hover)
- Velikost textu nadpisu: 22px
- Barva textu těla: průhledná (počítač), #ffffff (přejetí myší)
Výška krabice a stín
Po přizpůsobení textu dejte modulu výšku 100 % a stín rámečku následovně:
- Výška: 100 %
- Box Shadow: Viz snímek obrazovky
- Horizontální poloha: -12px
- Vertikální pozice: 0px
Vlastní CSS
Aby naše akordeonové panely (nebo modul Blurb) rostly a stahovaly se se zbytkem modulů, musíme přidat vlastní CSS pro změnu velikosti modulu pomocí flex-grow.
Protože budeme mít celkem 5 modulů, které tvoří akordeon, přidáme "flex:1" pro výchozí stav a poté jej změníme na "flex:5" ve stavu vznášení.
Na kartě Upřesnit přidejte do hlavního prvku Blurb následující vlastní CSS:
Kancelář
flex:1;
position: relative !important;
transition: flex 800ms !important;
Vznášet se
flex:5;
position: relative !important;
transition: flex 800ms !important;
Poté přidejte následující vlastní CSS do CSS obsahu Blurb:
Kancelář
position: absolute !important;
width: 280px;
padding: 20px;
transition: color 400ms;
tableta
position: relative !important;
width: 100%;
height: 100%;
padding: 20px;
transition: color 400ms;
Přetečení a přechod
- Horizontální přetečení: Skryté
- Vertikální přetečení: Skryté
- Délka přechodu: 400 ms
- Křivka rychlosti přechodu: Lineární
Velmi dobře! Jednalo se o seriózní přizpůsobení modulu Blurb. Ale dobrá zpráva je, že vše, co musíme udělat, je duplikovat je, abychom vytvořili zbývající akordeonové panely.
Duplicitní rozvržení pro více akordeonových panelů
Najeďte myší na prezentační modul a klikněte čtyřikrát na dvojitou ikonu, abyste vytvořili celkem pět akordeonových panelů (nebo modulů).
Dále aktualizujte obrázky na pozadí pro každý z nových reklam, které jste duplikovali.
Konečný výsledek
Nyní, když jsme prošli všemi kroky, pojďme se podívat na konečný výsledek.
Stáhnout DIVI hned!!!
Proč investovat do čističky vzduchu?
Tento citlivý akordeonový posuvník má opravdu některé jedinečné prvky, díky kterým je jeho používání zábavné. Akordeonové panely se při přejetí myší plynule roztahují a smršťují bez jakýchkoli neočekávaných závad.
A ikony prezentací se mění při umístění kurzoru myši a na mobilu, aby se zvýšilo uživatelské prostředí. Doufáme, že vás tento tutoriál inspiruje pro vaše další Divi projekty. Pokud máte nějaké obavy nebo návrhy, najdete nás v sekci komentářů diskutovat o tom.
Můžete se také poradit naše zdroje, pokud potřebujete více prvků k realizaci vašich projektů vytváření internetových stránek, nahlédněte do našeho průvodce na internetu Vytvoření blogu WordPress nebo ten, který je zapnutý Divi: nejlepší téma WordPress všech dob.
Mezitím sdílejte tento článek na různých sociálních sítích.
...
