Chcete vytvořit karty s efektem najetí z řádků s divi ?
Karty jsou rozhodně užitečné pro zpřístupnění důležitých informací ve stručné oblasti Webové stránky. To snižuje potřebu uživatele procházet obsah z dlouhé stránky. Modul karty divi se snadno používá a je ideální pro prohlížení a obsah jednoduché na jedno kliknutí.
Ale v tomto tutoriálu vám ukážeme, jak převádět řádky divi karta a zobrazí se při umístění kurzoru myši.
Ukážeme vám také, jak vytvořit vodorovné a svislé karty. To odemkne sílu Divi vytvářet kompletní rozvržení s více moduly pro každou oblast obsah tab.
Nejsou potřeba žádné pluginy!
Začněme.
přehled
Zde je přehled karet, které v tomto tutoriálu společně vytvoříme.
Stáhnout DIVI hned!!!
Vytvořte novou stránku pomocí Divi Builder
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.
Vytváření vodorovných záložek s přechodem pomocí „řádků Divi“
V přítomné výchozí sekci přidejte řádek se dvěma sloupci.
Linka pozadí, pole výplň a stín
Než přidáme naše moduly, nejprve si trochu přizpůsobíme nastavení řádků. Otevřete Nastavení linky a aktualizujte následující:
- Barva levého přechodu: #284f91
- Barva pravého přechodu: #4646c4
- Výplň: 50 pixelů (nahoře a dole), 50 pixelů (vlevo a vpravo)
- Box Shadow: viz snímek obrazovky
- Barva stínu krabice: rgba (70,70,196,0.66)
Přidejte obsah do řádku
Nyní do našeho řádku přidáme zástupný obsah. Do sloupce 1 přidejte obrázek podle svého výběru pomocí modulu Obrázek. Zde jsme použili obrázek z balíčku rozložení « Designový balíček rozvržení konference« .
V pravém sloupci přidejte modul Výzvy k akci a aktualizujte následující:
- Adresa URL odkazu tlačítka: # (prozatím jen pro zobrazení tlačítka)
- Použít barvu pozadí: NE
- Zarovnání textu: vlevo
- Písmo názvu : Lato
- Velikost textu nadpisu: 60px (počítač), 50px (telefon)
Vytvoření záložky
Chcete-li vytvořit skutečnou kartu, na kterou uživatelé umístí ukazatel myši, aby se zobrazil obsah daného řádku, musíme vytvořit modul Text a umístit jej vpravo nahoře pomocí nějakého vlastního CSS.
Pokračujte a přidejte nový textový modul pod obrázek ve sloupci 1 a aktualizujte následující:
- Text: "Tab 1"
- Pozadí: #284f91 (to by mělo odpovídat barvě levého přechodu čáry)
- Zarovnání textu: na střed
- Barva textu: #ffffff
- Šířka: 100px
- Výška: 50px
- Okraj: -100px (nahoře), -50px (vlevo)
- Výplň: 14px (nahoře)
Nakonec přidejte následující vlastní css do hlavního prvku, abyste mu dali absolutní pozici v horní části řádku.
position: absolute !important;
top: 0;
Výška a rozteč sekce
Prozatím otevřete nastavení sekce a aktualizujte následující:
- Minimální výška: 500 pixelů (počítač), 900 pixelů (tablet), 750 pixelů (telefon)
- Okraj: 100 pixelů (nahoře a dole)
- Odsazení: 0px (nahoře a dole)
Vytvoření druhého řádku
Chcete-li vytvořit druhý řádek, duplikujte řádek, který jste vytvořili dříve. Přesuňte textový modul do sloupce 1 a obrázek do sloupce 2. Poté aktualizujte obrázek novým. To vám pomůže získat představu o tom, jak vypadá různý obsah na každé kartě.
Poté otevřete nastavení modulu Text použitý k vytvoření záložky ve sloupci 1 a přesuňte záložku doprava tak, že tam, kde tento řádek překrývá řádek výše, uvidíte záložku přímo napravo od záložky prvního řádku.
- Okraj: 50 pixelů (vlevo)
Přidán efekt hoveru
Otevřete nastavení řádku a přidejte následující filtr:
- Neprůhlednost: 70 % (výchozí), 100 % (nájezd)
Poté přidejte dobu trvání přechodu a křivku rychlosti pro efekt přechodu filtru krytí.
- Doba přechodu: 500 ms
- Křivka rychlosti přechodu: Lineární
Vytvoření třetí záložky
Nyní můžeme přidat naši poslední kartu. Chcete-li to provést, zkopírujte druhý řádek, který jste právě vytvořili. Potom přesuňte textový modul do sloupce 1 a obrázek do sloupce 2. A aktualizujte modul obrázku novým obrázkem.
Aktualizujte nastavení čáry novým gradientem pozadí.
- Barva přechodu vlevo na pozadí: #333333
- Barva přechodu pravého pozadí: #4646c4
Poté otevřete nastavení modulu Text použité k vytvoření karty ve sloupci 1 a aktualizujte barvu a okraj.
- Pozadí: #333333
- Okraj: 150 pixelů (vlevo)
Zde je návod, jak by vaše stránka měla vypadat, než umístíme naše řádky tak, aby se překrývaly.
Překrývající se linie s absolutním umístěním
Abychom překryli naše linie, musíme použít absolutní umístění. Nejprve aktualizujte výšku všech tří řádků na 100 %.
- Výška: 100 %
Poté přidejte následující vlastní CSS do hlavního prvku všech tří řádků:
position: absolute !important;
left: 0;
right: 0;
margin: auto;
Takto aktuálně vypadají naše karty.
Změna pořadí řádků při umístění kurzoru pomocí Z indexu
V tuto chvíli jste si možná všimli, že třetí řádek/záložka je v popředí. Potřebujeme tedy přeskupit řádky pomocí Z Index tak, aby se první karta zobrazovala jako první, dokud nenajedete na jinou kartu.
Čtěte také: Jak vytvořit vlastní překryvné obrázky v Divi
Chcete-li to provést, otevřete nastavení prvního řádku a aktualizujte z-index následovně:
Z-index: 10
Poté umístěte kurzor na Z index dalších dvou řádků.
Z-Index: 11 (přejetí myší)
Hotovo ! Pojďme se podívat na konečný výsledek.
Konečný výsledek
Stáhnout DIVI hned!!!
Vytváření vertikálních záložek
Pokud chcete do řádků přidat svislé tabulátory, postupujte takto.
Pokračujte a duplikujte sekci obsahující karty s přechodem, které jsme právě vytvořili, abyste měli nový design, se kterým můžete pracovat.
Poté otevřete nastavení sekce a aktualizujte následující:
- Polstrování: 10 % (vlevo a vpravo)
Aktualizujte následující nastavení pro všechny tři řádky duplicitní sekce následujícím způsobem:
- Šířka: 70 % (počítač), 70 % (tablet), 80 % (telefon)
- Maximální šířka: 980 pixelů
Dále aktualizujte směr přechodu na 90 stupňů pro všechny tři čáry.
- Směr gradientu: 90 stupňů
Nyní je čas umístit naše karty modulu Text nalevo od našich řádků, abyste získali požadované vertikální karty.
Viz také: Jak vytvořit nabídku rotujícího kola na Hover v Divi
Otevřete nastavení karty textového modulu na prvním řádku a aktualizujte následující:
- Okraj (počítač): -50 pixelů (nahoře), -150 pixelů (vlevo)
Dále otevřete kartu Nastavení modulu Text řádku 2 a aktualizujte následující:
- Okraj (počítač): 0 pixelů (nahoře), -150 pixelů (vlevo)
A pro poslední kartu ve třetím řádku aktualizujte následující:
- Okraj (počítač): 50 pixelů nahoře, -150 pixelů vlevo
Konečný výsledek
Nyní se podívejme na konečný výsledek.
Stáhnout DIVI hned!!!
Proč investovat do čističky vzduchu?
S trochou kreativity a sílou Divi můžete vytvořit pěkné vlastní karty pomocí Divi linek. Existují určitá omezení toho, co můžete zobrazit.
Například s touto konfigurací musí mít všechny řádky stejnou výšku jako sekce. Ale abyste nemuseli používat plugin, je to skvělé řešení.
Doufáme, že vás tento tutoriál inspiruje pro vaše další Divi projekty. Pokud máte nějaké obavy nebo návrhy, najděte 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.
...
