Chcete zkombinovat nastavení masky pozadí a možnosti transformace vzoru divi vytvořit jedinečné pozadí?
Návrhy pozadí jsou skvělý způsob, jak dát své Webové stránky vizuální vkus a vyčnívat z davu. Nová nastavení masky pozadí a transformace vzoru z divi lze k vytvoření těchto vzorů pozadí mnoha způsoby kombinovat.
V tomto článku uvidíme, jak používat nastavení masky pozadí a transformace vzoru divi vytvořit zajímavé pozadí pro vaše rozvržení divi.
Začněme.
přehled
Nejprve je zde náhled každého příkladu na různých velikostech obrazovky (telefon a stolní počítač).
Čtěte také: Divi: Jak používat efekty stínu a vznášet se k vytváření interaktivního obsahu
Příklad 1
Verze 1 na ploše
Verze 1 na telefonu
Stáhnout DIVI hned!!!
Verze 2 na ploše
Verze 2 na telefonu
Příklad 2
Verze 1 na ploše
Verze 1 na telefonu
Stáhnout DIVI hned!!!
Verze 2 na ploše
Verze 2 na telefonu
Příklad 3
Verze 1 na ploše
Verze 1 na telefonu
Stáhnout DIVI hned!!!
Verze 2 na ploše
Verze 2 na telefonu
Možnosti masky pozadí Divi a transformace vzoru
Nové funkce masky a vzoru pozadí Divi zahrnují několik možností, jak je upravit. Úpravy zahrnují horizontální a vertikální převrácení, rotaci a inverzi. Chcete-li zobrazit možnosti, přejděte do nastavení pozadí sekce nebo čáry a vyberte kartu Vzor pozadí nebo Masku pozadí.
Jakmile přidáte vzor nebo masku, zobrazí se nastavení transformace. Jednoduše klikněte na možnosti, které chcete použít. Můžeme je použít společně a v libovolné kombinaci, kterou chceme.
Jak funguje nastavení Diviho masky a transformace vzoru
Vzor níže je Zig Zag s výchozím nastavením.
Na obrázku níže přidáváme masku blogu vrstvy. Pojďme si je použít k demonstraci toho, jak funguje nastavení masky pozadí a transformace vzoru.
Horizontální obrácení
Jde o horizontální obrat. Použili jsme nastavení transformace na vzor i masku.
Vertikální převrácení
Toto je vertikální převrácení vzoru a masky.
Rotace
Tento ukazuje Rotaci pro vzor a masku.
Zvrátit
Tento příklad ukazuje Invertovat pro vzor a masku.
Kombinace transformace masky pozadí a vzoru
Transformační parametry můžeme samozřejmě použít i v různých kombinacích. Zde jsou nějaké příklady.
Tím se vzor otočí a maska se převrátí.
Tento příklad používá pro vzorek pozadí vertikální převrácení, otočení a inverzi. Maska pozadí používá vodorovné převrácení, svislé převrácení a otočení.
V tomto příkladu jsme použili horizontální převrácení a otočení pro vzorek pozadí a vertikální převrácení a otočení pro masku pozadí.
Příklady nastavení masky pozadí a transformace vzoru
Dále se podívejme, jak lze tato nastavení použít s rozvržením Divi. Použijeme jednu sekci jako výchozí bod a vytvoříme tři příklady. Přizpůsobíme si jej a poté pomocí nastavení transformace upravíme pro každý příklad.
Pro naše příklady používáme upravenou verzi sekce Hrdina vstupní stránky rozvržení Realitní plánování k dispozici v Divi.
Zde je přehled příslušné sekce. Používá barvu pozadí: #92a5ab.
- Pozadí: #92a5ab
Parametry masky pozadí a transformace vzoru Příklad 1
Náš první příklad nám dává oblouk, který sedí svisle uprostřed obrazovky. Jedna strana obrazovky má všívaný vzor. Dále vytvoříme alternativní verzi s obloukem obráceným na druhou stranu.
vzor pozadí
Otevřete nastavení sekce, přejděte dolů Pozadí a vyberte kartu Vzor pozadí. Pro vzor pozadí vyberte Tufted a pro transformaci vzoru Inverting.
- Vzor pozadí: Všívané
- Transformace vzoru: Reverzní
Maska pozadí
Vyberte kartu Pozadí masky a zvolte Oblouk pro masku pozadí. Změňte barvu masky na #616d72 a nastavte transformaci masky na Invertovat. Tím je naše první verze luku s trsy dokončena.
- Maska pozadí: Arch
- Barva masky: #616d72
- Transformace masky: Invertovat
Příklad 1 Verze 2
Dále vytvoříme variaci našeho designu. Stačí upravit transformace masky pro vzorek pozadí při horizontálním a vertikálním převrácení. Tím se oblouk změní tak, aby směřoval opačným směrem, a vzor se posune, takže nevypadá jen jako zrcadlový obraz.
- Transformace masky: převrátit vodorovně, převrátit svisle
Parametry masky pozadí a transformace vzoru Příklad 2
Pro náš druhý příklad vytvoříme ovál ve středu obrazovky se vzorem uvnitř oválu. Dále změníme umístění vzoru. Tento také upravíme pro různé velikosti obrazovky.
Vzor pozadí
V nastavení pozadí vyberte kartu Vzorek pozadí a zvolte Shippo pro motiv. Nastavte transformaci vzoru na Invertovat.
- Pozadí vzoru: Shippo
- Transformace vzoru: Reverzní
Maska pozadí
Poté vyberte kartu Pozadí masky a změňte následující nastavení.
- Maska na pozadí: Elipsa
- Barva: #758489
- Transformace masky: horizontální převrácení, rotace
Tablet a telefon
Tablet i telefon budou používat stejné nastavení, takže budeme muset změnit pouze nastavení tabletu. Vybrat Karta Tablet a upravit transformace masky v horizontálním obrácení.
- Transformace masky: horizontální převrácení, inverze
Příklad 2 Verze 2
Dále vytvoříme variantu pro náš druhý příklad. Nejprve vyberte kartu Vzorek pozadí a nastavte barvu vzoru na rgba(0,0,0,0.06).
- Barva vzoru: rgba (0,0,0,0.06)
Poté vyberte kartu Pozadí masky a pro transformaci masky zvolte Převrátit vodorovně, Otočit a Invertovat.
- Transformace masky: horizontální převrácení, rotace, inverze
Tablet a telefon
Pro možnosti tabletu a telefonu vyberte ikonu Tablet . Upravte transformace masky v horizontálním obrácení a inverzi. Alternativní verze příkladu XNUMX je nyní dokončena.
- Transformace masky: horizontální převrácení, inverze
Parametry masky pozadí a transformace vzoru Příklad 3
Pro náš třetí příklad nastavení masky a transformace vzoru použijeme voštinový vzor s maskou barvy. Vytvoříme pro něj i mobilní verzi.
vzor pozadí
Nejprve vyberte kartu Nastavení zařízení a vyberte ikonu Zařízení. kancelář. Vyberte kartu Vzorek pozadí a jako vzor pozadí zvolte Honeycomb. Změňte barvu na rgba(0,0,0,0.42). U tohoto ponecháme možnosti Transformace vzoru deaktivován. Přidáme je pro alternativní verzi.
- Vzor pozadí: Honeycomb
- Barva vzoru: rgba (0,0,0,0.42)
- Transformace vzoru: žádná
Maska pozadí
Poté vyberte kartu Maska pozadí. Vybrat Malovat pro masku pozadí. Změňte barvu na #697b82. Pro transformaci masky zvolte Flip Vertical.
- Maska na pozadí: Barva
- Barva masky: #697b82
- Transformace masky: vertikální převrácení
Poté vyberte Krytí pro velikost. Tím se otevírá několik dalších možností. Vybrat Vpravo dole pro umístění. To je vše pro desktopovou verzi. Dále vytvoříme mobilní verzi.
- Velikost masky: Kryt
- Umístění masky: vpravo dole
Tablet a telefon
Poté vyberte kartu tablet a upravit transformaci maska pozadí ve vertikálním převrácení a otočení. Tím je styl pro náš třetí příklad dokončen. Dále vytvoříme alternativní verzi.
- Transformace masky: vertikální převrácení, rotace
Příklad 3 Verze 2
U alternativní verze tohoto příkladu upravíme jak vzor pozadí, tak masku pozadí.
vzor pozadí
U vzoru pozadí změňte barvu vzoru na rgba(0,0,0,0.11). Změňte transformaci vzoru na převrácení vodorovně, svislé převrácení a otočení.
- Barva masky: rgba (0,0,0,0.11)
- Transformace masky: horizontální převrácení, vertikální převrácení, rotace
maska pozadí
Poté vyberte kartu Maska pozadí. Změna barvy na bílou a transformace masky na horizontální převrácení, vertikální převrácení a inverzi.
- Barva masky: #ffffff
- Transformace masky: horizontální převrácení, vertikální převrácení, inverze
Dále změňte velikost masky, která se má překrýt, a poté vyberte umístění masky na střed.
- Velikost masky: Kryt
- Umístění masky: Střed
Tablet a telefon
Nakonec vyberte kartu tablette k vytvoření mobilní verze. Vyberte kartu maska pozadí a vyberte čtyři možnosti transformace masky. Tím je alternativní verze třetího příkladu dokončena.
- Transformace masky: horizontální převrácení, vertikální převrácení, rotace, inverze
Konečné výsledky
Zde je přehled každého příkladu s různými velikostmi obrazovky (počítač a telefon)
Příklad 1
Verze 1 na ploše
Verze 1 na telefonu
Verze 2 na ploše
Verze 2 na telefonu
Příklad 2
Verze 1 na ploše
Verze 1 na telefonu
Verze 2 na ploše
Verze 2 na telefonu
Příklad 3
Verze 1 na ploše
Verze 1 na telefonu
Verze 2 na ploše
Verze 2 na telefonu
Stáhnout DIVI hned!!!
Proč investovat do čističky vzduchu?
Toto je náš pohled na to, jak použít Diviho nastavení masky pozadí a transformace vzoru k vytvoření mnoha zajímavých vzorů pozadí.
Vzhledem k tomu, že vzory a masky lze používat společně, lze jejich nastavení transformace použít také společně. To otevírá mnoho designových možností a dává vám ještě vícenářadí pro přidání elegance do vašeho Divi pozadí.
Nejlepší způsob, jak se je naučit používat, je pohrát si s úpravami a zjistit, co můžete vytvořit.
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.
...
