Chcete použít masky a vzory pro svou sekci Hrdina v divi ?
Diviho nové masky a vzory pozadí jsou jednou z našich dosud nejúžasnějších nových designových funkcí. Každou z masek a vzorů lze zkombinovat s dalšími prvky pozadí (jako jsou barvy, obrázky a přechody) pro nespočet jedinečných kombinací pomocí pouhých několika kliknutí.
Dnes vám ukážeme, jak jej používat divi a jeho nové masky a vzory na pozadí pro návrh sekce hrdinů.
V tomto tutoriálu probereme důležité kroky potřebné k vytvoření masek a vzorů pozadí.
Dokonce si ukážeme, jak umístit obrázky na pozadí tak, aby vyhovovaly designu masky. To by vám mělo dát nářadí potřebujete vytvořit perfektní sekci Hrdina pro váš web během několika minut.
přehled
Zde je rychlý pohled na design, který vytvoříme v tomto tutoriálu.
Čtěte také: Divi: Jak vytvořit responzivní obrázkovou mřížku s odkazy a efekty přechodu
Ukázková část Hrdiny s bílou maskou a vzorem.
Zde je tmavá verze stejné sekce Hero s černou maskou a vzorem.
S tímto designem můžete snadno měnit masky a pozice masky pomocí několika kliknutí!
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 Stavitel
poté klikněte na tlačítko Začněte stavět (Sestavte od nuly)
Poté budete mít prázdné plátno, na kterém můžete začít navrhovat divi.
Jak používat Diviho masky a vzory pozadí v sekci vašeho hrdiny
1. Vytvořte strukturu rozvržení
Pro tuto sekci hrdinů použijeme klasickou strukturu rozložení s názvem a výzvou k akci vlevo a obrázkem (nebo vizuálním designem) vpravo.
Pro tento příklad bude náš vizuální design vytvořen pomocí možností pozadí Divi. Než se však dostaneme k tomu nejnutnějšímu, musíme vytvořit řádek se dvěma sloupci, abychom ušetřili místo na pravé straně stránky, abychom mohli předvést masky pozadí naší sekce a návrh vzoru.
2. Přidejte název a výzvu k akci
V levém sloupci (sloupec 1) přidejte modul Text pro svůj hlavní nadpis, modul Text pro text titulků a modul Tlačítko pro tlačítko.
3. Přidejte do sekce vertikální mezery
Aby náš návrh pozadí vypadal vysoký a krásný, musíme přidat vertikální výšku do sekce. Jednoduchý způsob, jak toho dosáhnout, je přidat výplň do horní a spodní části sekce. Mějte na paměti, že musíme upravit výplň na obrazovce tabletu a telefonu, aby bylo místo pro náš návrh pozadí, jakmile budou sloupce naskládány svisle.
Otevřete nastavení sekce. Na kartě Návrh aktualizujte výplň následovně:
- Výplň:
- Desktop: Horní 20vw, Spodní 20vw
- Tablet: horní 8vw, spodní 48vw
- Telefon: horní 8vw, spodní 70vw
4. Přidejte obrázek na pozadí a přechod
Dále můžeme do sekce přidat obrázek na pozadí a přechod. Mějte na paměti, že hlavní ohnisko obrázku na pozadí bude odhaleno na pravé straně sekce, takže použijte obrázek, který má na pravé straně to, co chcete vidět.
V tomto příkladu používáme obrázek s panoramatem města. Na pravé straně obrázku jsou bližší a lépe vypadající budovy, takže to funguje opravdu dobře.
Na kartě Obrázek na pozadí, nahrajte obrázek na pozadí sekce.
V Divi můžete snadno přidat barevný přechod na obrázek na pozadí. Pod záložkou Přechod na pozadí, přidejte na pozadí sekce následující přechod:
- Přechodové zastávky:
- 0 %: #3e22ff
- 100%: jasné
- Čtvercový přechod nad obrázkem pozadí: ANO
5. Vytvořte vzor pozadí pro sekci
Nyní, když máme připravený náš obrázek na pozadí a přechod, můžeme přidat vzor pozadí a dokončit design.
V tomto příkladu použijeme jemný vzor, který jen přidá trochu textury a dodá mu jedinečný vzhled.
Na kartě Pozadí vzory, aktualizujte následující:
- Vzor pozadí: Všívané
ASTUCE: U vzorů na pozadí je obvykle nejlepší, aby byly jemné. Zkuste použít vlastní velikosti pro menší návrhy a poté snižte krytí barev.
6. Vytvořte masku pozadí pro sekci
S naším vzorem pozadí jsme konečně připraveni otestovat zcela novou masku pozadí pro náš design. Na výběr je spousta možností a variací. Pro tento příklad použijeme voštinovou masku.
Na kartě Pozadí masky, aktualizujte následující:
- Maska: Honeycomb
- Barva masky: #ffffff
- Velikost: Kryt
7. Upravte polohu obrázku na pozadí
Protože používáme masku pozadí, část našeho obrázku na pozadí je maskovaná (nebo „maskovaná“).
V tomto příkladu se ujistíme, že pravý dolní okraj obrázku je nejviditelnější, a posuneme jej o kousek doprava, abychom zobrazili více budov.
Na kartě Obrázek aktualizujte následující:
- Pozice obrázku na pozadí: Vpravo dole
- Obrázek pozadí Horizontální posun: -4vw
8. Použijte režim prolnutí
Jedním ze způsobů, jak být kreativní se všemi těmito prvky pozadí, je přidat režim prolnutí. Režimy prolnutí lze přidat ke kterékoli z možností pozadí a lze je použít k míchání více vrstev pozadí (obrázek, přechod, maska atd.) kreativním způsobem.
V tomto příkladu prolneme obrázek pozadí s barvou přechodu. Chcete-li to provést, klepněte na kartu Obrázek na pozadí a přidejte režim prolnutí pro prolnutí barvy přechodu s obrázkem na pozadí následovně:
- Prolnutí obrázku na pozadí: Násobit
9. Upravte masku pozadí pro mobil
Je důležité zajistit, aby design masky pozadí vypadal skvěle i na mobilních zařízeních. Naštěstí vestavěné možnosti tento proces usnadňují.
Nezapomeňte, že jsme již přidali další vycpávky na tabletu a telefonu, abychom vytvořili prostor pro náš design pozadí.
Nyní vše, co musíme udělat, je použít možnosti transformace pozadí a poměru stran k úpravě masky pro mobily.
Na kartě Pozadí masky, povolte responzivní možnosti a aktualizujte následující:
Verze pro tablety
- Transformace masky: Převrátit svisle, převrátit vodorovně, Otočit
- Poměr stran masky: čtverec
Verze telefonu
- Transformace masky: Převrátit svisle, převrátit vodorovně, Otočit
- Poměr stran masky: Portrét
Výsledek
Podívejte se na design, který jsme dosud vytvořili.
Stolní počítač
Verze pro tablety
Phone Edition
10. Vytvořte tmavou verzi
Pokud chcete tmavou verzi tohoto designu, stačí změnit barvu masky pozadí na tmavou barvu (například černou).
Poté změňte barvu vzoru na černou.
Poté změňte název a text titulků na bílou. A možná budete chtít také aktualizovat barvu tlačítka.
Takhle vypadá tmavá verze.
Konečné výsledky
Viz také: Divi: Jak přizpůsobit odkaz "Přečíst více" na blogu
Zde je další pohled na naše konečné výsledky.
Stáhnout DIVI hned!!!
Proč investovat do čističky vzduchu?
Navrhněte pro vás sekci Hrdina Webové stránky je s ním skvělá zábava masky a vzory pozadí od Divi. Možnosti pozadí lze snadno změnit, abyste získali dokonalý design. A existuje spousta dalších možností, které můžete použít (například režimy prolnutí) k vytvoření ještě jedinečnějších pozadí.
Kromě toho můžete přidat masky a vzory do jakéhokoli prvku Divi, nejen do sekcí. Tak příjemnou zábavu při experimentování!
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.
...
