Chcete skombinovať nastavenia masky pozadia a možnosti transformácie vzoru divi vytvoriť jedinečné pozadie?
Návrhy pozadia sú skvelým spôsobom, ako dať svoje webové stránky vizuálny vkus a vyčnievať z davu. Nové nastavenia masky pozadia a transformácie vzoru z divi môžu byť kombinované mnohými spôsobmi na vytvorenie týchto vzorov pozadia.
V tomto článku uvidíme, ako používať nastavenia masky pozadia a transformácie vzorov z divi vytvoriť zaujímavé pozadie pre vaše rozloženia divi.
Začnime.
prehľad
Najprv je tu ukážka každého príkladu na rôznych veľkostiach obrazovky (telefón a počítač).
Čítajte tiež: Divi: Ako používať efekty tieňa a vznášania na vytváranie interaktívneho obsahu
Príklad 1
Verzia 1 na pracovnej ploche
Verzia 1 na telefóne
Stiahnite si DIVI teraz!!!
Verzia 2 na pracovnej ploche
Verzia 2 na telefóne
Príklad 2
Verzia 1 na pracovnej ploche
Verzia 1 na telefóne
Stiahnite si DIVI teraz!!!
Verzia 2 na pracovnej ploche
Verzia 2 na telefóne
Príklad 3
Verzia 1 na pracovnej ploche
Verzia 1 na telefóne
Stiahnite si DIVI teraz!!!
Verzia 2 na pracovnej ploche
Verzia 2 na telefóne
Možnosti masky pozadia Divi a transformácie vzoru
Nové funkcie masky a vzoru pozadia Divi zahŕňajú niekoľko možností na ich úpravu. Úpravy zahŕňajú horizontálne a vertikálne preklápanie, otáčanie a inverziu. Ak chcete zobraziť možnosti, prejdite na nastavenia pozadia sekcie alebo čiary a vyberte kartu Vzor pozadia alebo Maska pozadia.
Po pridaní vzoru alebo masky sa zobrazia nastavenia transformácie. Stačí kliknúť na možnosti, ktoré chcete použiť. Môžeme ich použiť spolu a v ľubovoľnej kombinácii.
Ako fungujú nastavenia Diviho masky a transformácie vzoru
Vzor nižšie je Zig Zag s predvolenými nastaveniami.
Na obrázku nižšie pridávame masku blogu vrstvy. Využime ich na ukážku, ako fungujú nastavenia masky pozadia a transformácie vzoru.
Horizontálne preklopenie
Ide o horizontálny obrat. Nastavenia transformácie sme aplikovali na vzor aj masku.
Vertikálne preklopenie
Toto je vertikálne prevrátenie vzoru a masky.
Rotácia
Toto ukazuje Rotáciu pre vzor a masku.
Reverz
Tento príklad ukazuje Invertovať pre vzor a masku.
Kombinácie transformácie masky pozadia a vzoru
Samozrejme, transformačné parametre môžeme použiť aj v rôznych kombináciách. Tu je niekoľko príkladov.
Tým sa vzor otočí a maska sa prevráti.
Tento príklad používa pre vzor pozadia vertikálne prevrátenie, otočenie a inverziu. Maska pozadia používa horizontálne prevrátenie, vertikálne prevrátenie a rotáciu.
V tomto príklade sme použili horizontálne prevrátenie a rotáciu pre vzor pozadia a vertikálne prevrátenie a rotáciu pre masku pozadia.
Príklady nastavení masky pozadia a transformácie vzoru
Ďalej sa pozrime, ako možno tieto nastavenia použiť s rozložením Divi. Použijeme jednu časť ako východiskový bod a vytvoríme tri príklady. Prispôsobíme ho a potom použijeme nastavenia transformácie na jeho úpravu pre každý príklad.
Pre naše príklady používame upravenú verziu sekcie Hero na vstupnej stránke rozloženia Plánovanie nehnuteľností dostupné v Divi.
Tu je prehľad príslušnej sekcie. Používa farbu pozadia: #92a5ab.
- Pozadie: #92a5ab
Príklad parametrov transformácie masky pozadia a vzoru 1
Náš prvý príklad nám dáva oblúk, ktorý sedí vertikálne v strede obrazovky. Jedna strana obrazovky má všívaný vzor. Ďalej vytvoríme alternatívnu verziu s oblúkom otočeným na druhú stranu.
vzor pozadia
Otvorte nastavenia sekcie, prejdite nadol pozadia a vyberte kartu Vzor pozadia. Pre vzor pozadia vyberte Všívané a pre transformáciu vzoru Inverting.
- Vzor pozadia: Všívané
- Transformácia vzoru: Obrátená
Maska pozadia
Vyberte kartu Maska pozadia a vyber si Oblúk pre masku pozadia. Zmeňte farbu masky na #616d72 a nastavte transformáciu masky na Invertovať. Tým je naša prvá verzia luku s trsmi hotová.
- Maska pozadia: Arch
- Farba masky: #616d72
- Transformácia masky: Invertovať
Príklad 1 Verzia 2
Ďalej vytvoríme variáciu nášho dizajnu. Stačí upraviť transformácia masky pre vzor pozadia pri horizontálnom a vertikálnom prevrátení. Tým sa oblúk zmení na opačný smer a vzor sa odsadí, takže nevyzerá len ako zrkadlový obraz.
- Transformácia masky: prevrátiť horizontálne, prevrátiť vertikálne
Príklad parametrov transformácie masky pozadia a vzoru 2
V našom druhom príklade vytvoríme ovál v strede obrazovky so vzorom vo vnútri oválu. Ďalej zmeníme umiestnenie vzoru. Tento tiež upravíme pre rôzne veľkosti obrazovky.
Vzor pozadia
V nastaveniach pozadia vyberte kartu Vzor pozadia a vyber si Shippo pre motív. Nastavte transformáciu vzoru na Invertovať.
- Pozadie vzoru: Shippo
- Transformácia vzoru: Obrátená
Maska pozadia
Potom vyberte kartu Maska pozadia a zmeňte nasledujúce nastavenia.
- Maska pozadia: Elipsa
- Farba: #758489
- Transformácia masky: horizontálne prevrátenie, rotácia
Tablet a telefón
Tablet aj telefón budú používať rovnaké nastavenia, takže budeme musieť zmeniť iba nastavenia tabletu. Vyberte Karta Tablet a upraviť transformácia masky v horizontálnom obrate.
- Transformácia masky: horizontálne prevrátenie, inverzia
Príklad 2 Verzia 2
Ďalej vytvoríme variáciu pre náš druhý príklad. Najprv vyberte kartu Vzor pozadia a nastavte farbu vzoru na rgba(0,0,0,0.06).
- Farba vzoru: rgba (0,0,0,0.06)
Potom vyberte kartu Maska pozadia a pre transformáciu masky vyberte Flip Horizontal, Rotate a Invert.
- Transformácia masky: horizontálne prevrátenie, rotácia, inverzia
Tablet a telefón
Pre možnosti tabletu a telefónu vyberte ikonu Tablet . Upravte transformácia masky v horizontálnom reverze a inverzii. Alternatívna verzia príkladu dva je teraz dokončená.
- Transformácia masky: horizontálne prevrátenie, inverzia
Príklad parametrov transformácie masky pozadia a vzoru 3
Pre náš tretí príklad nastavení masky a transformácie vzoru použijeme voštinový vzor s maskou farby. Pre tento vytvoríme aj mobilnú verziu.
vzor pozadia
Najprv vyberte kartu Nastavenia zariadenia a vyberte ikonu Zariadenie. kancelária. Vyberte kartu Vzor pozadia a ako vzor pozadia vyberte Honeycomb. Zmeňte farbu na rgba (0,0,0,0.42). Pre tento ponecháme možnosti Transformácia vzoru deaktivovaný. Pridáme ich pre alternatívnu verziu.
- Vzor pozadia: Honeycomb
- Farba vzoru: rgba (0,0,0,0.42)
- Transformácia vzoru: žiadna
Maska pozadia
Potom vyberte kartu BackgroundMask. Vybrať maľovať pre masku pozadia. Zmeňte farbu na #697b82. Pre transformáciu masky vyberte Flip Vertical.
- Maska pozadia: Farba
- Farba masky: #697b82
- Transformácia masky: vertikálne prevrátenie
Potom vyberte veko pre veľkosť. To otvára niekoľko ďalších možností. Vyberte si Vpravo dole pre umiestnenie. To je všetko pre počítačovú verziu. Ďalej vytvoríme mobilnú verziu.
- Veľkosť masky: Kryt
- Poloha masky: vpravo dole
Tablet a telefón
Potom vyberte kartu tablet a upraviť transformáciu maskovať pozadie pri vertikálnom prevrátení a otočení. Toto dokončí štýl pre náš tretí príklad. Ďalej vytvoríme alternatívnu verziu.
- Transformácia masky: vertikálne prevrátenie, rotácia
Príklad 3 Verzia 2
Pre alternatívnu verziu tohto príkladu upravíme vzor pozadia aj masku pozadia.
vzor pozadia
Pre vzor pozadia zmeňte farbu vzoru na rgba(0,0,0,0.11). Zmeňte transformáciu vzoru na prevrátenie vodorovne, zvislo a otočenie.
- Farba masky: rgba (0,0,0,0.11)
- Transformácia masky: horizontálne prevrátenie, vertikálne prevrátenie, rotácia
maska pozadia
Potom vyberte kartu BackgroundMask. Zmena farby na bielu a transformácia masky na horizontálne prevrátenie, vertikálne preklopenie a inverziu.
- Farba masky: #ffffff
- Transformácia masky: horizontálne prevrátenie, vertikálne prevrátenie, inverzia
Potom zmeňte veľkosť masky na pokrytie a potom vyberte polohu masky na stred.
- Veľkosť masky: Kryt
- Poloha masky: Stred
Tablet a telefón
Nakoniec vyberte kartu tablette na vytvorenie mobilnej verzie. Vyberte kartu maska pozadia a vyberte štyri možnosti transformácie masky. Týmto sa dokončí alternatívna verzia tretieho príkladu.
- Transformácia masky: horizontálne prevrátenie, vertikálne prevrátenie, rotácia, inverzia
Konečné výsledky
Tu je prehľad každého príkladu s rôznymi veľkosťami obrazovky (stolný počítač a telefón)
Príklad 1
Verzia 1 na pracovnej ploche
Verzia 1 na telefóne
Verzia 2 na pracovnej ploche
Verzia 2 na telefóne
Príklad 2
Verzia 1 na pracovnej ploche
Verzia 1 na telefóne
Verzia 2 na pracovnej ploche
Verzia 2 na telefóne
Príklad 3
Verzia 1 na pracovnej ploche
Verzia 1 na telefóne
Verzia 2 na pracovnej ploche
Verzia 2 na telefóne
Stiahnite si DIVI teraz!!!
Pozri tiež: Divi: Ako vytvoriť sekciu členov tímu ako kolotoč
záver
Toto je náš pohľad na to, ako použiť Diviho nastavenia masky pozadia a transformácie vzorov na vytvorenie mnohých zaujímavých vzorov pozadia.
Keďže vzory a masky je možné použiť spolu, ich nastavenia transformácie možno použiť aj spoločne. To otvára mnoho dizajnových možností a ponúka vám ešte viacoutils pridať eleganciu do pozadia Divi.
Najlepší spôsob, ako sa ich naučiť používať, je pohrať sa s úpravami a zistiť, čo môžete vytvoriť.
Dúfame, že vás tento návod inšpiruje pre vaše ďalšie Divi projekty. Ak máte nejaké obavy alebo návrhy, nájdite nás v časť s komentármi diskutovať o tom.
Môžete sa tiež poradiť naše zdroje, ak potrebujete viac prvkov na realizáciu svojich projektov tvorby internetových stránok, konzultujte nášho sprievodcu na internete Tvorba blogu WordPress alebo jeden na Divi: najlepšia téma WordPress všetkých čias.
Ale medzičasom zdieľajte tento článok na rôznych sociálnych sieťach.
...
