Chtěli byste vědět, jak odhalit obsah při najetí na oddělovač sekcí v divi ?
Oddělovače sekcí zůstávají i nadále designovým prvkem divi populární. Na výběr je mnoho stylů oddělovačů s užitečnými možnostmi, které usnadňují přidání jedinečných přechodů a pozadí na stránku.
V tomto tutoriálu použijeme oddělovače sekcí trochu jinak. divi umožňuje upravit výšku a rozložení každé přepážky. To nám umožňuje umístit oddělovače nad určité oblasti nebo obsah oddílu.
Použitím možnosti přechodu pro výšku oddělovače můžeme přidat jedinečné efekty přechodu, které odhalí a obsah částečně skryté. Funguje to skvěle, když chcete upozornit na konkrétní výzvu k akci nebo tlačítko, na které mají lidé kliknout. Návštěvníci klikněte.
přehled
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.
Návrh efektu přechodu rozdělovače sekcí v Divi
Vytvoření sekce a linie
Vytvořte pravidelný úsek s řadou dvou sloupců.
Před přidáním modulu otevřete nastavení sekce a aktualizujte následující:
Přechod pozadí (vlevo): #73ba57
Přechod pozadí (vpravo): #2a4c23
Šířka: 80 %
Maximální šířka: 1px
Zarovnání řezu: Střed
Přidejte název sekce
Chcete-li přidat název sekce, vytvořte modul Text a vložte následující text:
<h2>The Juice</h2>
Dále aktualizujte design následovně:
Písmo: Lato
Velikost textu: 80px
Mezera mezi písmeny: -5px
Okraj: -50px (nahoře), -40px (dole)
Index Z: -1
Vlastní okraj a z-index umožní, aby text zůstal za obrázkem, který přidáme v dalším kroku.
Přidat obrázek
Pod modulem Text s nadpisem ve sloupci 1 přidejte modul Obrázek. Poté nahrajte obrázek s průhledným pozadím. Používáme obrázek z balíčku rozložení Obchod s džusy 240 pixelů na 300 pixelů.
Úprava zarovnání obrazu na střed.
Do sloupce 2 přidejte modul „Výzva k akci“.
Ve sloupci 2 přidejte modul Výzva k akci.
Přidejte adresu URL odkazu na tlačítko, abyste zajistili, že se tlačítko zobrazí.
CTA pozadí a styl textu nadpisu
Dále aktualizujte následující nastavení návrhu:
Pozadí: #ffffff
Barva textu: tmavá
Písmo názvu : Lato
Tloušťka písma názvu: Těžká
Styl písma: TT
Velikost textu nadpisu: 18px
Přizpůsobte tlačítko CTA
Aktualizujte design tlačítka následovně:
- Použít vlastní styly pro tlačítko: ANO
- Barva textu tlačítka: #ffffff
- Barva pozadí tlačítka: #73ba57
- Šířka okraje: 0px
Přizpůsobte ohraničení modulu CTA
Poté přidejte rámeček pro rámování modulu následovně:
Šířka okraje: 10px
Barva ohraničení: rgba (115,186,87,0.15)
Do rozdělovače byl přidán efekt hoveru, aby se odhalil modul „Výzva k akci“.
Nyní je čas přidat efekt hoveru na oddělovač sekcí, aby se odhalil modul „Výzva k akci“. Abychom to mohli udělat, musíme nejprve vytvořit naše oddělovače sekcí.
Čtěte také: Divi: Jak odhalit obsah při najetí myší na karty
Přidání horního oddělovače
Otevřete parametry sekce a horní oddělovač s následujícími parametry.
Styl horního oddělovače: viz snímek obrazovky
Barva horního oddělovače: #73ba57
Výška oddělovače: 70 % (výchozí), 0 % (při umístění kurzoru myši)
Překlopení horního rozdělovače: horizontální
Všimněte si, že výška oddělovače začíná výchozí výškou 70 % a poté se při umístění kurzoru změní na výšku 0 %.
Přidána spodní přepážka
Poté přidejte dolní oddělovač podobný oddílu s následujícími parametry.
- Styl spodního oddělovače: viz snímek obrazovky
- Barva spodního oddělovače: #73ba57
- Výška oddělovače: 70 % (výchozí), 0 % (při umístění kurzoru myši)
- Překlopení rozdělovače: Horizontální
- Uspořádání: Nad obsahem sekce
Tato spodní přepážka také začíná s výškou 70 %, která při vznášení klesne na 0 %. Protože je však možnost uspořádání rozdělovače nastavena nad obsahem, rozdělovač sekcí skryje spodní část modulu "Výzva k akci" ve sloupci 1. Poté se při najetí myší zobrazí zbytek modulu.
Podívejte se na výsledek tak daleko.
Stáhnout DIVI hned!!!
Přidán efekt stínového vznášení pole pro jedinečný přechod a design
Pro jedinečný přechod a design při vznášení můžeme přidat efekt box shadow hover, který bude probíhat současně s efektem splitter hover. Chcete-li to provést, přidejte do oddílu následující stín pole.
- Box Shadow: viz snímek obrazovky
- Horizontální pozice: 0px
- Vertikální pozice: 0px
- Síla rozprostření stínu rámečku: 0 pixelů (výchozí), 150 pixelů (umístění kurzoru)
- Barva stínu: #73ba57
Zpomalte dobu přechodu
Posledním krokem je zpomalení trvání přechodu.
Délka přechodu: 700 ms
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?
Doufáme, že vám tento článek poskytl nějakou inspiraci k vytvoření jedinečných efektů rozdělování sekcí, které odhalí obsah.
Ve skutečnosti může být nastavení hover splitteru samo o sobě skvělým designovým prvkem. Vzorové návrhy by vám navíc měly pomoci zahájit vlastní průzkum a návrhy.
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.
...
