Vil du kombinere bakgrunnsmaskeinnstillinger og alternativer for mønstertransformasjon Divi å lage unike bakgrunner?
Bakgrunnsdesign er en fin måte å gi din nettstedet Web visuell stil og skiller seg ut fra mengden. De nye innstillingene for bakgrunnsmaske og mønstertransformering fra Divi kan kombineres på mange måter for å lage disse bakgrunnsmønstrene.
I denne artikkelen vil vi se hvordan du bruker bakgrunnsmaske og mønstertransformasjonsinnstillinger fra Divi for å lage interessante bakgrunner for layoutene dine Divi.
La oss begynne.
undersøkelsen
Først, her er en forhåndsvisning av hvert eksempel på forskjellige skjermstørrelser (telefon og skrivebord).
Les også: Divi: Hvordan bruke skygge- og sveveeffekter for å lage interaktivt innhold
Eksempel 1
Versjon 1 på skrivebordet
Versjon 1 på telefonen
Last ned DIVI nå!!!
Versjon 2 på skrivebordet
Versjon 2 på telefonen
Eksempel 2
Versjon 1 på skrivebordet
Versjon 1 på telefonen
Last ned DIVI nå!!!
Versjon 2 på skrivebordet
Versjon 2 på telefonen
Eksempel 3
Versjon 1 på skrivebordet
Versjon 1 på telefon
Last ned DIVI nå!!!
Versjon 2 på skrivebordet
Versjon 2 på telefonen
Alternativer for Divi Bakgrunnsmaske og mønstertransformasjon
Divis nye maske- og bakgrunnsmønsterfunksjoner inkluderer flere alternativer for å justere dem. Justeringer inkluderer horisontal og vertikal flipp, rotasjon og inversjon. For å se alternativene, gå til bakgrunnsinnstillingene for en seksjon eller linje og velg fanene Bakgrunnsmønster eller Bakgrunnsmaske.
Når du har lagt til et mønster eller en maske, vises transformasjonsinnstillingene. Bare klikk på alternativene du vil bruke. Vi kan bruke dem sammen og i hvilken som helst kombinasjon vi ønsker.
Hvordan Divis maske- og mønstertransformeringsinnstillinger fungerer
Mønsteret nedenfor er Zig Zag med standardinnstillinger.
Vi legger til en Layer Blog-maske i bildet nedenfor. La oss bruke dem til å demonstrere hvordan innstillingene for bakgrunnsmaske og mønstertransformasjon fungerer.
Horisontal flip
Det er den horisontale reverseringen. Vi brukte transformasjonsinnstillingene på både mønsteret og masken.
Vertikal flip
Dette er den vertikale flippen for mønsteret og masken.
Rotasjon
Denne viser Rotasjon for mønster og maske.
Omvendt
Dette eksemplet viser Inverter for mønster og maske.
Bakgrunnsmaske og mønstertransformasjonskombinasjoner
Selvfølgelig kan vi også bruke transformasjonsparametere i ulike kombinasjoner. Her er noen eksempler.
Dette roterer mønsteret og snur masken.
Dette eksemplet bruker vertikal vending, rotasjon og inversjon for bakgrunnsmønsteret. Bakgrunnsmasken bruker horisontal flip, vertikal flip og rotasjon.
For dette eksemplet brukte vi horisontal vending og rotasjon for bakgrunnsmønsteret, og vertikal vending og rotasjon for bakgrunnsmasken.
Eksempler på innstillinger for bakgrunnsmaske og mønstertransformasjon
La oss deretter se hvordan disse innstillingene kan brukes med Divi-oppsett. Vi bruker én del som utgangspunkt og lager tre eksempler. Vi tilpasser den og bruker transformasjonsinnstillingene for å endre den for hvert eksempel.
For våre eksempler bruker vi en modifisert versjon av Hero-delen av landingssiden for layout Eiendomsplanlegging tilgjengelig i Divi.
Her er en oversikt over den aktuelle delen. Den bruker bakgrunnsfargen: #92a5ab.
- Bakgrunn: #92a5ab
Bakgrunnsmaske og mønstertransformasjonsparametre Eksempel 1
Vårt første eksempel gir oss en bue som sitter vertikalt i midten av skjermen. Den ene siden av skjermen har et tuftet mønster. Deretter lager vi en alternativ versjon med buen vendt den andre veien.
bakgrunnsmønster
Åpne seksjonsinnstillingene, bla ned til Bakgrunn og velg fanen Bakgrunnsmønster. Velg Tufted for bakgrunnsmønsteret og Inverting for Pattern Transform.
- Bakgrunnsmønster: Tuftet
- Mønstertransformasjon: Omvendt
Bakgrunnsmaske
Velg fane Bakgrunnsmaske og velg Arch for bakgrunnsmasken. Endre maskefargen til #616d72 og sett masketransformasjonen til Inverter. Dette fullfører vår første versjon av buen med tuer.
- Bakgrunnsmaske: Arch
- Maskefarge: #616d72
- Masketransformasjon: Inverter
Eksempel 1 versjon 2
La oss deretter lage en variant av designet vårt. Bare endre maske transformasjon for bakgrunnsmønster i horisontal flip og vertikal flip. Dette endrer buen til å vende den andre retningen og forskyver mønsteret, slik at det ikke bare ser ut som et speilbilde.
- Mask Transform: snu horisontalt, snu vertikalt
Bakgrunnsmaske og mønstertransformasjonsparametre Eksempel 2
For vårt andre eksempel vil vi lage en oval i midten av skjermen med et mønster inne i ovalen. Deretter endrer vi plasseringen av mønsteret. Vi vil også modifisere denne for forskjellige skjermstørrelser.
Bakgrunnsmønster
Velg fanen i bakgrunnsinnstillingene Bakgrunnsmønster og velg cloisonne for motivet. Sett mønstertransformasjonen til Inverter.
- Mønsterbakgrunn: Shippo
- Mønstertransformasjon: Omvendt
Bakgrunnsmaske
Velg deretter fanen Bakgrunnsmaske og endre følgende innstillinger.
- Bakgrunnsmaske: Ellipse
- Farge: #758489
- Mask Transform: horisontal flipp, rotasjon
Nettbrett og telefon
Både nettbrettet og telefonen vil bruke de samme innstillingene, så vi må bare endre nettbrettets innstillinger. Velg Tablet-fanen og endre maske transformasjon i horisontal reversering.
- Masketransformasjon: horisontal vending, inversjon
Eksempel 2 versjon 2
Deretter lager vi varianten for vårt andre eksempel. Velg først fanen Bakgrunnsmønster og sett mønsterfargen til rgba(0,0,0,0.06).
- Mønsterfarge: rgba(0,0,0,0.06)
Velg deretter fanen Bakgrunnsmaske og velg Vend horisontalt, Roter og Inverter for masketransformasjonen.
- Masketransformasjon: horisontal vending, rotasjon, inversjon
Nettbrett og telefon
For nettbrett- og telefonalternativer, velg ikonet for Nettbrett . Endre maske transformasjon i horisontal reversering og inversjon. Den alternative versjonen av eksempel to er nå fullført.
- Masketransformasjon: horisontal vending, inversjon
Bakgrunnsmaske og mønstertransformasjonsparametre Eksempel 3
For vårt tredje eksempel på maske- og mønstertransformasjonsinnstillinger, bruker vi et honeycomb-mønster med en malingsmaske. Vi vil også lage en mobilversjon for denne.
bakgrunnsmønster
Velg først kategorien Enhetsinnstillinger og velg Enhetsikonet. kontor. Velg fane Bakgrunnsmønster og velg Honeycomb som bakgrunnsmønster. Endre fargen til rgba(0,0,0,0.42). For denne vil vi forlate alternativene Mønstertransformasjon deaktivert. Vi vil legge dem til for den alternative versjonen.
- Bakgrunnsmønster: Honeycomb
- Mønsterfarge: rgba(0,0,0,0.42)
- Mønstertransformasjon: ingen
Bakgrunnsmaske
Velg deretter fanen Bakgrunnsmaske. Velg Paint for bakgrunnsmasken. Endre fargen til #697b82. Velg Vend vertikal for masketransformasjonen.
- Bakgrunnsmaske: Maling
- Maskefarge: #697b82
- Mask Transform: vertikal flip
Velg deretter Dekk for størrelse. Dette åpner for noen flere alternativer. Velge Nede til høyre for plassering. Det er det for desktop-versjonen. Deretter lager vi mobilversjonen.
- Maskestørrelse: Deksel
- Maskeposisjon: Nederst til høyre
Nettbrett og telefon
Velg deretter fane nettbrettet og endre transformasjonen av masque bakgrunn i vertikal flipp og rotasjon. Dette fullfører stilen for vårt tredje eksempel. Deretter lager vi den alternative versjonen.
- Mask Transform: vertikal flip, rotasjon
Eksempel 3 versjon 2
For den alternative versjonen av dette eksemplet vil vi justere både bakgrunnsmønsteret og bakgrunnsmasken.
bakgrunnsmønster
For bakgrunnsmønsteret endrer du mønsterfargen til rgba(0,0,0,0.11). Endre mønstertransformasjonen til å vende horisontalt, vende vertikalt og rotere.
- Maskefarge: rgba(0,0,0,0.11)
- Mask Transform: horisontal flip, vertikal flip, rotasjon
bakgrunnsmaske
Velg deretter fane Bakgrunnsmaske. Endre fargen til hvit og transformasjonen av masken til horisontal flip, vertikal flip og inversjon.
- Maskefarge: #ffffff
- Mask Transform: horisontal flip, vertikal flip, inversjon
Deretter endrer du størrelsen på masken for å dekke, og velg deretter Senter for maskens plassering.
- Maskestørrelse: Deksel
- Maskeposisjon: Senter
Nettbrett og telefon
Velg til slutt fane Tabl for å lage mobilversjonen. Velg fane bakgrunnsmaske og velg de fire masketransformeringsalternativene. Dette fullfører den alternative versjonen av det tredje eksemplet.
- Mask Transform: horisontal flip, vertikal flip, rotasjon, inversjon
Endelige resultater
Her er en oversikt over hvert eksempel med forskjellige skjermstørrelser (stasjonær og telefon)
Eksempel 1
Versjon 1 på skrivebordet
Versjon 1 på telefon
Versjon 2 på skrivebordet
Versjon 2 på telefonen
Eksempel 2
Versjon 1 på skrivebordet
Versjon 1 på telefon
Versjon 2 på skrivebordet
Versjon 2 på telefon
Eksempel 3
Versjon 1 på skrivebordet
Versjon 1 på telefon
Versjon 2 på skrivebordet
Versjon 2 på telefon
Last ned DIVI nå!!!
Se også: Divi: Hvordan lage en gruppemedlemmer som en karusell
konklusjonen
Dette er vår titt på hvordan du bruker Divis bakgrunnsmaske og mønstertransformasjonsinnstillinger for å lage mange interessante bakgrunnsmønstre.
Siden mønstre og masker kan brukes sammen, kan transformasjonsinnstillingene deres også brukes sammen. Dette åpner for mange designalternativer, og gir deg enda flereoutils for å legge til eleganse til Divi-bakgrunnen din.
Den beste måten å lære å bruke dem på er å leke med justeringene og se hva du kan lage.
Vi håper denne veiledningen vil inspirere deg til dine neste Divi-prosjekter. Hvis du har noen bekymringer eller forslag, finn oss inn kommentarfeltet å diskutere det.
Du kan også konsultere ressursene våre, hvis du trenger flere elementer for å gjennomføre prosjektene dine med oppretting av nettsteder, ved å konsultere vår guide om WordPress blog oppretting eller den på Divi: tidenes beste WordPress-tema.
Men i mellomtiden, del denne artikkelen på de forskjellige sosiale nettverkene dine.
...
