Želite li kombinirati postavke pozadinske maske i opcije transformacije uzorka? Divi stvoriti jedinstvene pozadine?
Dizajni pozadine izvrstan su način da date svoje web stranica vizualni njuh i izdvojiti se iz gomile. Nova pozadinska maska i postavke transformacije uzorka iz Divi mogu se kombinirati na mnogo načina za stvaranje ovih pozadinskih uzoraka.
U ovom ćemo članku vidjeti kako koristiti postavke pozadinske maske i transformacije uzorka Divi za stvaranje zanimljivih pozadina za vaše rasporede Divi.
Počnimo.
pregled
Prvo, ovdje je pregled svakog primjera na različitim veličinama zaslona (telefon i stolno računalo).
Pročitajte također: Divi: Kako koristiti efekte sjene i lebdenja za stvaranje interaktivnog sadržaja
Primjer 1
Verzija 1 na radnoj površini
Verzija 1 na telefonu
Preuzmite DIVI odmah!!!
Verzija 2 na radnoj površini
Verzija 2 na telefonu
Primjer 2
Verzija 1 na radnoj površini
Verzija 1 na telefonu
Preuzmite DIVI odmah!!!
Verzija 2 na radnoj površini
Verzija 2 na telefonu
Primjer 3
Verzija 1 na radnoj površini
Verzija 1 na telefonu
Preuzmite DIVI odmah!!!
Verzija 2 na radnoj površini
Verzija 2 na telefonu
Divi pozadinska maska i opcije transformacije uzorka
Divi nove značajke maske i uzorka pozadine uključuju nekoliko opcija za njihovu prilagodbu. Prilagodbe uključuju vodoravno i okomito okretanje, rotaciju i inverziju. Da biste vidjeli opcije, idite na pozadinske postavke odjeljka ili retka i odaberite kartice Pozadinski uzorak ili Pozadinska maska.
Nakon što dodate uzorak ili masku, pojavljuju se postavke transformacije. Jednostavno kliknite na opcije koje želite koristiti. Možemo ih koristiti zajedno i u bilo kojoj kombinaciji koju želimo.
Kako funkcioniraju Divi maske i postavke transformacije uzorka
Uzorak ispod je Cik-cak sa zadanim postavkama.
Dodajemo Layer Blog masku na sliku ispod. Iskoristimo ih da pokažemo kako funkcioniraju postavke maske pozadine i transformacije uzorka.
Horizontalni preokret
To je horizontalni obrat. Primijenili smo postavke transformacije i na uzorak i na masku.
Vertikalni preokret
Ovo je okomiti preokret za uzorak i masku.
Rotacija
Ovo prikazuje rotaciju za uzorak i masku.
Obrnuto
Ovaj primjer prikazuje Invert za uzorak i masku.
Kombinacije pozadinske maske i transformacije uzorka
Naravno, transformacijske parametre možemo koristiti iu raznim kombinacijama. Evo nekoliko primjera.
Ovo rotira uzorak i preokreće masku.
Ovaj primjer koristi okomito okretanje, rotaciju i inverziju za pozadinski uzorak. Pozadinska maska koristi vodoravno okretanje, okomito okretanje i rotaciju.
U ovom smo primjeru koristili vodoravno okretanje i rotaciju za pozadinski uzorak, a okomito okretanje i rotaciju za pozadinsku masku.
Primjeri postavki pozadinske maske i transformacije uzorka
Zatim, da vidimo kako se te postavke mogu koristiti s Divi izgledima. Koristit ćemo jedan odjeljak kao početnu točku i izradit ćemo tri primjera. Prilagodit ćemo ga, a zatim upotrijebiti postavke transformacije da ga modificiramo za svaki primjer.
Za naše primjere koristimo modificiranu verziju odjeljka Hero odredišne stranice izgleda Planiranje nekretnina dostupan u Divi.
Ovdje je pregled predmetnog odjeljka. Koristi boju pozadine: #92a5ab.
- Pozadina: #92a5ab
1. primjer parametara pozadinske maske i transformacije uzorka
Naš prvi primjer daje nam luk koji se nalazi okomito u središtu zaslona. Jedna strana zaslona ima čupavi uzorak. Zatim ćemo stvoriti alternativnu verziju s lukom okrenutim na drugu stranu.
pozadinski uzorak
Otvorite postavke odjeljka, pomaknite se dolje do pozadina i odaberite karticu Pozadinski uzorak. Odaberite Tufted za pozadinski uzorak i Inverting za Pattern Transform.
- Uzorak pozadine: čupava
- Transformacija uzorka: Obrnuto
Pozadinska maska
Odaberite karticu Maska za pozadinu i odaberite Svod za masku pozadine. Promijenite boju maske u #616d72 i postavite transformaciju maske na Invert. Time je završena naša prva verzija mašne s čupercima.
- Pozadinska maska: Arch
- Boja maske: #616d72
- Transformacija maske: Invert
Primjer 1, verzija 2
Zatim, stvorimo varijaciju našeg dizajna. Samo izmijenite transformacija maske za pozadinski uzorak u vodoravnom i okomitom preokretu. Ovo mijenja luk tako da gleda u drugom smjeru i pomiče uzorak, tako da ne izgleda samo kao zrcalna slika.
- Transformacija maske: okrenuti vodoravno, okrenuti okomito
2. primjer parametara pozadinske maske i transformacije uzorka
Za naš drugi primjer, stvorit ćemo oval u središtu zaslona s uzorkom unutar ovala. Zatim ćemo promijeniti položaj uzorka. Također ćemo modificirati ovaj za različite veličine zaslona.
Uzorak pozadine
U postavkama pozadine odaberite karticu Pozadinski uzorak i odaberite Shippo za motiv. Postavite transformaciju uzorka na Invert.
- Pozadina uzorka: Shippo
- Transformacija uzorka: Obrnuto
Pozadinska maska
Zatim odaberite karticu Maska za pozadinu i promijenite sljedeće postavke.
- Pozadinska maska: Elipsa
- Boja: #758489
- Transformacija maske: horizontalno okretanje, rotacija
Tablet i telefon
I tablet i telefon će koristiti iste postavke, tako da ćemo samo morati promijeniti postavke tableta. Odaberite Kartica tableta i izmijeniti transformacija maske u horizontalnom preokretu.
- Transformacija maske: horizontalno okretanje, inverzija
Primjer 2, verzija 2
Zatim ćemo izraditi varijaciju za naš drugi primjer. Najprije odaberite karticu Pozadinski uzorak i postavite Boju uzorka na rgba(0,0,0,0.06).
- Boja uzorka: rgba(0,0,0,0.06)
Zatim odaberite karticu Maska za pozadinu i odaberite Flip Horizontal, Rotate i Invert za transformaciju maske.
- Transformacija maske: horizontalno okretanje, rotacija, inverzija
Tablet i telefon
Za opcije tableta i telefona odaberite ikonu Tablet . Izmijenite transformacija maske u horizontalnom obratu i inverziji. Alternativna verzija drugog primjera sada je dovršena.
- Transformacija maske: horizontalno okretanje, inverzija
3. primjer parametara pozadinske maske i transformacije uzorka
Za naš treći primjer postavki transformacije maske i uzorka koristit ćemo uzorak saća s maskom boje. Također ćemo napraviti mobilnu verziju za ovaj.
pozadinski uzorak
Najprije odaberite karticu Postavke uređaja i odaberite ikonu uređaja. ured. Odaberite karticu Pozadinski uzorak i odaberite Honeycomb za uzorak pozadine. Promijenite boju u rgba(0,0,0,0.42). Za ovaj ćemo ostaviti opcije Transformacija uzorka deaktivirano. Dodat ćemo ih za alternativnu verziju.
- Uzorak pozadine: saće
- Boja uzorka: rgba(0,0,0,0.42)
- Transformacija uzorka: nema
Pozadinska maska
Zatim odaberite karticu Pozadinska maska. Izabrati obojiti za masku pozadine. Promijenite boju u #697b82. Odaberite Flip Vertical za transformaciju maske.
- Pozadinska maska: Boja
- Boja maske: #697b82
- Transformacija maske: okomito okretanje
Zatim odaberite Pokriti za veličinu. Ovo otvara još nekoliko opcija. Odaberite Dolje desno za lokaciju. To je to za desktop verziju. Zatim ćemo izraditi mobilnu verziju.
- Veličina maske: navlaka
- Položaj maske: dolje desno
Tablet i telefon
Zatim odaberite karticu tablet i modificirati transformaciju maska pozadina u okomitom okretanju i rotaciji. Ovo dovršava stil za naš treći primjer. Zatim ćemo izraditi zamjensku verziju.
- Transformacija maske: okomito okretanje, rotacija
Primjer 3, verzija 2
Za alternativnu verziju ovog primjera, prilagodit ćemo i pozadinski uzorak i pozadinsku masku.
pozadinski uzorak
Za pozadinski uzorak promijenite boju uzorka u rgba(0,0,0,0.11). Promijenite transformaciju uzorka na vodoravno okretanje, okomito okretanje i rotiranje.
- Boja maske: rgba(0,0,0,0.11)
- Transformacija maske: vodoravno okretanje, okomito okretanje, rotacija
pozadinska maska
Zatim odaberite karticu Pozadinska maska. Promijenite boju u bijelu i transformaciju maske u horizontalno okretanje, okomito okretanje i inverziju.
- Boja maske: #ffffff
- Transformacija maske: vodoravno okretanje, okomito okretanje, inverzija
Zatim promijenite veličinu maske za pokrivanje, zatim odaberite Središte za položaj maske.
- Veličina maske: navlaka
- Položaj maske: centar
Tablet i telefon
Na kraju odaberite karticu tableta stavljena za izradu mobilne verzije. Odaberite karticu pozadinska maska i odaberite četiri opcije transformacije maske. Ovo dovršava alternativnu verziju trećeg primjera.
- Transformacija maske: vodoravno okretanje, okomito okretanje, rotacija, inverzija
Konačni rezultati
Ovdje je pregled svakog primjera s različitim veličinama zaslona (stolno računalo i telefon)
Primjer 1
Verzija 1 na radnoj površini
Verzija 1 na telefonu
Verzija 2 na stolnom računalu
Verzija 2 na telefonu
Primjer 2
Verzija 1 na stolnom računalu
Verzija 1 na telefonu
Verzija 2 na stolnom računalu
Verzija 2 na telefonu
Primjer 3
Verzija 1 na radnoj površini
Verzija 1 na telefonu
Verzija 2 na stolnom računalu
Verzija 2 na telefonu
Preuzmite DIVI odmah!!!
Vidi također: Divi: Kako stvoriti odjeljak za članove tima kao vrtuljak
Zaključak
Ovo je naš pogled na to kako koristiti Divijeve pozadinske maske i postavke transformacije uzorka za stvaranje mnogih zanimljivih pozadinskih uzoraka.
Budući da se uzorci i maske mogu koristiti zajedno, njihove postavke transformacije također se mogu koristiti zajedno. Ovo otvara mnoge mogućnosti dizajna, dajući vam još višeoutils za dodavanje elegancije vašim Divi pozadinama.
Najbolji način da naučite kako ih koristiti je da se poigrate s prilagodbama i vidite što možete stvoriti.
Nadamo se da će vas ovaj vodič inspirirati za vaše sljedeće Divi projekte. Ako imate nedoumica ili prijedloga, potražite nas odjeljak komentara raspravljati o tome.
Također se možete konzultirati naši resursi, ako vam treba više elemenata za provođenje projekata kreiranja internetskih stranica, savjetujući se s našim vodičem na internetu Izrada bloga WordPress ili onaj koji je uključen Divi: najbolja WordPress tema svih vremena.
Ali u međuvremenu, ovaj članak podijelite na svojim različitim društvenim mrežama.
...
