Želite li kombinirati postavke maske pozadine i opcije transformacije uzorka divi stvoriti jedinstvene pozadine?
Dizajn pozadine je odličan način da date svoj site Web vizuelni njuh i izdvajaju se iz gomile. Nove postavke maske pozadine i transformacije uzorka od divi mogu se kombinirati na mnogo načina za stvaranje ovih pozadinskih uzoraka.
U ovom članku ćemo vidjeti kako koristiti postavke maske pozadine i transformacije uzorka divi da kreirate zanimljive pozadine za svoje izglede divi.
Počnimo.
pregled
Prvo, evo pregleda svakog primjera na različitim veličinama ekrana (telefon i desktop).
Pročitajte takođe: Divi: Kako koristiti efekte sjene i lebdenja za kreiranje interaktivnog sadržaja
Primer 1
Verzija 1 na desktopu
Verzija 1 na telefonu
Preuzmite DIVI odmah!!!
Verzija 2 na desktopu
Verzija 2 na telefonu
Primer 2
Verzija 1 na desktopu
Verzija 1 na telefonu
Preuzmite DIVI odmah!!!
Verzija 2 na desktopu
Verzija 2 na telefonu
Primer 3
Verzija 1 na desktopu
Verzija 1 na telefonu
Preuzmite DIVI odmah!!!
Verzija 2 na desktopu
Verzija 2 na telefonu
Divi opcije pozadine i transformacije uzorka
Divi nove karakteristike maske i pozadinskog uzorka uključuju nekoliko opcija za njihovo prilagođavanje. Podešavanja uključuju horizontalno i vertikalno okretanje, rotaciju i inverziju. Da biste vidjeli opcije, idite na postavke pozadine dijela ili linije 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 iu bilo kojoj kombinaciji koju želimo.
Kako rade Divijeve maske i postavke transformacije uzorka
Uzorak ispod je Zig Zag sa zadanim postavkama.
Dodamo Layer Blog masku na slici ispod. Upotrijebimo ih da pokažemo kako funkcioniraju postavke maske pozadine i transformacije uzorka.
Horizontal Flip
To je horizontalni preokret. Primijenili smo postavke transformacije i na uzorak i na masku.
Vertical Flip
Ovo je vertikalni preokret za uzorak i masku.
rotacija
Ovaj prikazuje rotaciju za uzorak i masku.
Obrnuto
Ovaj primjer pokazuje Invert za uzorak i masku.
Kombinacije maske pozadine i transformacije uzorka
Naravno, možemo koristiti i parametre transformacije u raznim kombinacijama. Evo nekoliko primjera.
Ovo rotira uzorak i invertuje masku.
Ovaj primjer koristi okomito okretanje, rotaciju i inverziju za uzorak pozadine. Maska pozadine koristi horizontalno okretanje, vertikalno okretanje i rotaciju.
Za ovaj primjer, koristili smo horizontalno okretanje i rotaciju za uzorak pozadine, a vertikalno okretanje i rotaciju za masku pozadine.
Primjeri postavki maske pozadine i transformacije uzorka
Zatim, da vidimo kako se ove postavke mogu koristiti sa Divi rasporedima. Koristićemo jedan odeljak kao početnu tačku i kreiraćemo tri primera. Prilagodit ćemo ga, a zatim ćemo koristiti postavke transformacije da ga izmijenimo za svaki primjer.
Za naše primjere koristimo modificiranu verziju odjeljka Hero na odredišnoj stranici izgleda Estate Planning dostupno u Divi.
Evo pregleda dotičnog odjeljka. Koristi boju pozadine: #92a5ab.
- Pozadina: #92a5ab
Primjer 1. parametara transformacije maske pozadine i uzorka
Naš prvi primjer daje nam luk koji se nalazi okomito u sredini ekrana. Jedna strana ekrana ima čupavi uzorak. Zatim ćemo kreirati alternativnu verziju sa lukom okrenutim na drugu stranu.
pozadinski uzorak
Otvorite postavke odjeljka, skrolujte dolje do pozadina i odaberite karticu Uzorak pozadine. Odaberite Tufted za uzorak pozadine i Inverting za transformaciju uzorka.
- Uzorak pozadine: čupav
- Transformacija uzorka: obrnuto
Pozadinska maska
Odaberite karticu Pozadinska maska i odaberite svod za masku pozadine. Promijenite boju maske u #616d72 i postavite transformaciju maske na Invert. Ovo upotpunjuje našu prvu verziju mašne sa pramenovima.
- Pozadinska maska: Arch
- Boja maske: #616d72
- Transformacija maske: Invert
Primjer 1, verzija 2
Zatim napravimo varijaciju našeg dizajna. Samo modifikujte transformacija maske za pozadinski uzorak u horizontalnom i vertikalnom okretanju. Ovo mijenja luk u suprotnom smjeru i pomiče uzorak, tako da ne izgleda samo kao zrcalna slika.
- Transformacija maske: okrenite horizontalno, okrenite okomito
Primjer 2. parametara transformacije maske pozadine i uzorka
Za naš drugi primjer, kreirat ćemo oval u sredini ekrana s uzorkom unutar ovala. Zatim ćemo promijeniti položaj uzorka. Također ćemo modificirati ovaj za različite veličine ekrana.
Uzorak pozadine
U pozadinskim postavkama odaberite karticu Uzorak pozadine i odaberite Shippo za motiv. Postavite transformaciju uzorka na Invert.
- Pozadina uzorka: Shippo
- Transformacija uzorka: obrnuto
Pozadinska maska
Zatim odaberite karticu Pozadinska maska 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 morati samo promijeniti postavke tableta. Odaberite Tablet tab i modificirati transformacija maske u horizontalnom preokretu.
- Transformacija maske: horizontalno okretanje, inverzija
Primjer 2, verzija 2
Zatim ćemo kreirati varijaciju za naš drugi primjer. Prvo odaberite karticu Uzorak pozadine i postavite boju uzorka na rgba(0,0,0,0.06).
- Boja uzorka: rgba(0,0,0,0.06)
Zatim odaberite karticu Pozadinska maska 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 . Modify the transformacija maske u horizontalnom preokretu i inverziji. Alternativna verzija primjera dva je sada završena.
- Transformacija maske: horizontalno okretanje, inverzija
Primjer 3. parametara transformacije maske pozadine i uzorka
Za naš treći primjer postavki transformacije maske i uzorka, koristit ćemo uzorak saća sa maskom boje. Za ovu ćemo također napraviti mobilnu verziju.
pozadinski uzorak
Prvo odaberite karticu Postavke uređaja i odaberite ikonu uređaja. ured. Odaberite karticu Uzorak pozadine i odaberite Honeycomb za uzorak pozadine. Promijenite boju u rgba(0,0,0,0.42). Za ovu ćemo ostaviti opcije Transformacija uzorka deaktivirano. Mi ćemo ih dodati za alternativnu verziju.
- Uzorak pozadine: saće
- Boja uzorka: rgba(0,0,0,0.42)
- Transformacija uzorka: nema
Pozadinska maska
Zatim odaberite karticu BackgroundMask. izabrati boja za masku pozadine. Promijenite boju u #697b82. Odaberite Flip Vertical za transformaciju maske.
- Pozadinska maska: boja
- Boja maske: #697b82
- Transformacija maske: vertikalno okretanje
Zatim odaberite poklopac za veličinu. Ovo otvara još nekoliko opcija. Izaberi Dolje desno za lokaciju. To je to za desktop verziju. Zatim ćemo kreirati mobilnu verziju.
- Veličina maske: poklopac
- Položaj maske: dolje desno
Tablet i telefon
Zatim odaberite karticu tablet i modificirati transformaciju maska pozadina u vertikalnom okretanju i rotaciji. Ovo dovršava stil za naš treći primjer. Zatim ćemo kreirati alternativnu verziju.
- Transformacija maske: vertikalno okretanje, rotacija
Primjer 3, verzija 2
Za alternativnu verziju ovog primjera, prilagodit ćemo i uzorak pozadine i masku pozadine.
pozadinski uzorak
Za uzorak pozadine promijenite boju uzorka u rgba(0,0,0,0.11). Promijenite transformaciju uzorka na okretanje horizontalno, okretanje okomito i rotiranje.
- Boja maske: rgba(0,0,0,0.11)
- Transformacija maske: horizontalno okretanje, vertikalno okretanje, rotacija
pozadinska maska
Zatim odaberite karticu BackgroundMask. Promijenite boju u bijelu i transformaciju maske u horizontalno okretanje, vertikalno okretanje i inverziju.
- Boja maske: #ffffff
- Transformacija maske: horizontalno okretanje, vertikalno okretanje, inverzija
Zatim promijenite veličinu maske za pokrivanje, a zatim odaberite Centar za položaj maske.
- Veličina maske: poklopac
- Položaj maske: centar
Tablet i telefon
Na kraju odaberite karticu tablete da kreirate mobilnu verziju. Odaberite karticu pozadinska maska i odaberite četiri opcije transformacije maske. Ovo dovršava alternativnu verziju trećeg primjera.
- Transformacija maske: horizontalno okretanje, vertikalno okretanje, rotacija, inverzija
Konačni rezultati
Ovdje je pregled svakog primjera na različitim veličinama ekrana (Desktop i telefon)
Primer 1
Verzija 1 na desktopu
Verzija 1 na telefonu
Verzija 2 na desktopu
Verzija 2 na telefonu
Primer 2
Verzija 1 na desktopu
Verzija 1 na telefonu
Verzija 2 na desktopu
Verzija 2 na telefonu
Primer 3
Verzija 1 na desktopu
Verzija 1 na telefonu
Verzija 2 na desktopu
Verzija 2 na telefonu
Preuzmite DIVI odmah!!!
Vidi također: Divi: Kako napraviti odjeljak za članove tima kao vrtuljak
zaključak
Ovo je naš pogled na to kako koristiti Divijevu masku pozadine i postavke transformacije uzoraka za kreiranje 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šeAlati da dodate eleganciju vašoj Divi pozadini.
Najbolji način da naučite kako ih koristiti je da se poigrate s prilagodbama i vidite šta možete stvoriti.
Nadamo se da će vas ovaj vodič inspirisati za vaše sljedeće Divi projekte. Ako imate bilo kakvih nedoumica ili prijedloga, pronađite nas u odjeljak komentara da razgovaramo o tome.
Takođe možete konsultovati naši resursi, ako vam treba više elemenata za provođenje projekata kreiranja internetskih stranica, savjetujući se s našim vodičem o Izrada bloga WordPress ili onaj on Divi: najbolja WordPress tema svih vremena.
Ali u međuvremenu, ovaj članak podijelite na svojim različitim društvenim mrežama.
...
