Chtěli byste navrhnout jedinečné pozadí pomocí vzorových masek? divi ?
Nový vzor pozadí maskuje z divi otevřeli mnoho možností designu pro pozadí. Skvěle spolupracují s barvami pozadí a vzory a vytvářejí mnoho jedinečných vzorů.
V tomto článku uvidíme, jak vytvořit jemné masky se vzorem pozadí divi . Probereme také výhody použití jemné masky a vytvoříme tři příklady.
Začněme.
Náhled masky pozadí
Než začneme navrhovat, zde je náhled toho, co budeme stavět v tomto tutoriálu divi.
Příklad 1
Čtěte také: Divi: Jak změnit gradient pozadí při najetí myší
Příklad 2
Příklad 3
Jak vytvořit masku na pozadí
Maska pozadí zakryje vzor pozadí a odhalí části vzoru. Funguje to velmi dobré s barvy a vzory pozadí. Pozadí můžete upravit tak, aby odpovídalo obsah, upravte obsah přizpůsobit pozadí nebo upravit obojí.
Viz také: Divi: Jak používat "Tvůrce přechodů" ke zkrášlení obrázků
Nejprve otevřete parametry sekce kam chcete přidat masku pozadí.
Dále budete muset vybrat barvu pozadí sekce. Přejděte na Pozadí. Když je vybrána karta Pozadí, vyberte si barvu pozadí ve výběru barvy.
Dále budete muset vybrat vzor pozadí a nastavit jeho velikost a umístění. Vyberte kartu Vzorek pozadí a klikněte na tlačítko Přidat vzor pozadí.
Otevře se seznam možností modelu. Vyberte si svůj vzor v seznamu. Tím se sekce dokončí.
Dále si budete muset vybrat masku pozadí a upravit její barvu a nastavení tak, aby vyhovovala vašemu návrhu. Vyberte kartu Pozadí masky a klikněte na tlačítko Přidat masku pozadí.
Otevře se další modal s možnostmi masky. Vyberte si masku pozadí v seznamu. Maska bude bílá, dokud si nevyberete barvu.
Upravte je nastavení masky pozadí k dosažení požadovaného vzhledu. Můžete změnit velikost, polohu, směr masky, rotaci atd. Pohrávání si s těmito nastaveními vám může pomoci vytvořit zajímavé návrhy.
Zde je náhled pozadí, které jsme právě vytvořili bez jakýchkoli modulů. Barvy jsou podobné, ale jsou dostatečně odlišné, aby trochu vynikly. Díky tomu není příliš rušivý.
Příklady jemných vzorů masky pozadí
Nyní se podívejme na tři příklady masky vzoru pozadí.
Do sekce Hrdina přidáme masku pozadí bezplatná firemní vstupní stránka k dispozici v Divi.
Zde je náhled původní stránky před přidáním masek vzoru pozadí.
Změníme také barvy pozadí tlačítek. Pomocí stejných jemných designových konceptů je necháme vyniknout více než na pozadí.
Oddělovač je dalším prvkem, u kterého uvidíme měnit barvu, ale tento prvek používá průhlednost k získání barvy z pozadí, takže nebudeme muset měnit jeho barvu.
Příklad 1
Tento příklad použije původní barvy pozadí a tlačítka.
Barva pozadí
V našem prvním příkladu používáme pro toto rozvržení původní barvu pozadí – #1d1d25. Zachováme také původní barvu tlačítka – #4c594c
- Barva pozadí: #1d1d25
- Barva tlačítka: #4c594c
Vzor pozadí
Vyberte kartu Vzor pozadí a zvolte Diagonální pruhy 2. Změňte barvu vzoru na #383838.
- Vzor pozadí: Diagonální pruhy 2
- Barva vzoru: #383838
- Velikost: Skutečná velikost
- Opakujte počátek: Vlevo nahoře
- Opakování vzoru: Opakujte
Maska pozadí
Poté vyberte kartu Maska pozadí. Vybrat Caret a nastavte barvu na #383838.
- Maska: Caret
- Barva masky: #383838
Pod barvou masky vyberte možnost horizontální transformace a poměr stran portrét. Zavřete nastavení sekce a uložte svou práci.
- Transformace masky: vodorovně
- Poměr stran masky: velký (na výšku)
Příklad 2
V našem druhém příkladu změníme barvu pozadí a tlačítka na fialovou.
Barva pozadí
Otevřete je parametry sekce . ujisti se že ty jsou na kartě Barva pozadí a změnit to Barva v #483c56.
- Pozadí: #483c56
Vzor pozadí
Poté vyberte kartu Zadní vzor pozadí a jako vzor pozadí zvolte Tufted. Změňte barvu vzoru na #635c84.
- Vzor pozadí: Všívané
- Barva vzoru: #635c84
Pak si vyberte Vlastní velikost . Tím se otevře další sada možností. Změň to largeur v 10vw.
- Velikost vzoru: Vlastní velikost
- Šířka vzoru: 10vw
- Opakujte počátek: vlevo nahoře
- Opakování vzoru: Opakujte
Maska pozadí
Nyní je čas nakonfigurovat naši masku pozadí.
Vyberte kartu Pozadí masky a vyberte masku s názvem Arch. Změňte jeho barvu na #67557a.
- Maska: Arch
- Barva masky: #67557a
Dále nastavte jeho možnosti pro proměna na vodorovnou, svislou a rotaci. Pro poměr stran, vyberte možnost na šířku nebo na šířku. Zavřete nastavení sekce.
- Transformace masky: Horizontální, Vertikální a Rotace
- Poměr stran masky: Široký (na šířku)
knoflík
Nakonec upravme tlačítko CTA v této sekci Hrdina. Chceme, aby splýval s designem, ale zároveň chceme, aby vynikl.
Otevřete je nastavení tlačítek. Budeme muset změnit pouze barvu pozadí. Může mít podobnou barvu jako pozadí, ale dostatečně odlišnou, aby se na stránce neztratila. Pro pozadí zvolíme světlejší barvu. Ponecháme stejnou barvu textu.
Vyberte kartu Design , přejděte na Pozadí a upravit Barva pozadí tlačítka v #8b4dc1. Poskytuje nám požadovaný kontrast a skvěle se s ním pracuje fialové pozadí. Zavřete nastavení tlačítka a uložte stránku.
- Pozadí tlačítka: #8b4dc1
Příklad 3
V našem třetím příkladu změníme barvu pozadí a tlačítka na zelenou pomocí stejných konceptů jako v předchozích dvou příkladech.
Barva pozadí
Nejprve otevřete parametry sekce . S tab Barva pozadí.
- Pozadí: #497762
Vzor pozadí
Poté vyberte kartu Vzorek pozadía změňte parametry součtu podle toho.
- Vzor pozadí: čtverce
- Barva vzoru: #3a604e
- Velikost: Skutečná velikost
- Počátek opakování vzoru: Vlevo nahoře
- Opakování vzoru: Opakujte
Maska pozadí
Poté vyberte kartu Maska pozadí.
- Maska: Diagonální čáry
- Barva: #3a604e
Dále nastavte následující parametry:
- Transformace masky: vodorovně
- Poměr stran masky: Na šířku
- Velikost: Kryt
- Umístění masky: nahoře uprostřed
knoflík
Nakonec otevřete nastavení tlačítek a vyberte kartu Návrh. Přejděte dolů a změňte barva pozadí tlačítka v #61a380. Zavřete nastavení modulu a uložte svou práci.
- Pozadí tlačítka: #61a380
Konečné výsledky
Viz také: Divi: Jak přizpůsobit košík a ikony vyhledávání v modulu "Nabídka plné šířky".
Takto vypadají naše masky se vzorem pozadí v sekci hrdiny našeho rozvržení.
Příklad 1
Příklad 2
Příklad 3
Stáhnout DIVI hned!!!
Proč investovat do čističky vzduchu?
Toto je náš pohled na to, jak pomocí Divi vytvořit jemné masky se vzorem pozadí. Jemná maska vynikne tak akorát, aby poskytla pozadí vizuální texturu. Vypadají skvěle, aniž by odváděly pozornost od vašich CTA a dalších prvků.
Masky se vzorem pozadí Divi se snadno používají a jejich nastavení vám umožní vytvořit něco jedinečného. Experimentujte s nastavením a vytvořte si vlastní masky vzoru pozadí.
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.
...
