Vil du lage unike bakgrunnsbilder ved å bruke mønsterblandingsmodusen til Divi ?

De innebygde bakgrunnsmønsterinnstillingene til Divi lar deg lage iøynefallende design og legge til stil til bakgrunnsbildene til din nettstedet Web. Du kan bruke innstillinger for blandingsmodus for å finjustere hvordan mønsteret blander seg med bakgrunnsbildet. 

I denne opplæringen skal vi vise deg noen eksempler på hvordan du legger til en mønsterblandingsmodus til bakgrunnsbildene på siden din. Følg dem for å gjenskape disse lookene på egen hånd, eller bruk dem som inspirasjon til å lage dine egne tilpassede design.

La oss begynne!

undersøkelsen

Her er en forhåndsvisning av hva vi skal utforme i denne opplæringen.

Første layout

Divi-mønsterblandingsmodus

Andre layout

Divi-mønsterblandingsmodus

Tredje layout

Divi-mønsterblandingsmodus

Slik bruker du mønsterblandingsmoduser på Divi-bakgrunnsbildene dine

Opprett en ny side med et forhåndsdefinert oppsett

Vi starter med å bruke en forhåndsdefinert layout fra biblioteket Divi. For dette designet vil vi bruke «Marina landingsside 'Av Marina Layout Pack .

Legg til en ny side til din nettstedet Web og gi den en tittel, og velg deretter alternativet Bruk Divi Builder.

Vi vil bruke en forhåndsdefinert layout fra Divi-biblioteket for dette eksemplet, så velg Bla gjennom layouter.

Divi bakgrunnsmønsterblandingsmodus Bla gjennom layouter

Finn og velg oppsettet Marina landingsside.

Divi bakgrunnsmønsterblandingsmodus Søkeoppsett

Velg Bruk denne layouten for å legge til oppsettet på siden din.

Divi bakgrunnsmønsterblandingsmodus Bruk layout

Vi er nå klare til å designe.

Første layout

For vår første design legger vi til et chevronmønster til det første overskriftsbildet. Dette vil legge litt visuell interesse til overskriften. 

Les også: Divi: Hvordan tilpasse "Countdown Timer"-modulen med en GIF

På grunn av blandingsmodusen vi vil bruke, vil mønsteret være mer subtilt og fortsatt la bakgrunnsbildet være synlig.

Først åpner du seksjonsinnstillingene og går til seksjonen Bakgrunn. Klikk på fanen Bakgrunnsmønster og velg Legg til bakgrunnsmønster.

Divi 1 Bakgrunnsmønster Blandingsmodus Layout Legg til bakgrunnsmønster

Deretter velger du mønstertypen. Som du kan se, er det mange forskjellige maler å velge mellom, og de kan alle tilpasses ytterligere ved hjelp av malinnstillingene nedenfor.

  • Mønstertype: Omvendt fiskebein 2

Lagt til "Pattern Blend"-modus

Til slutt, still inn blandingsmodus for mønsteret. Vi vil bruke blandingsmodus Mykt lys for dette eksemplet. Denne blandingsmodusen gjør mønsteret mer subtilt slik at det ikke distraherer fra bakgrunnsbildet.

  • Mønsterblandingsmodus: Mykt lys
Divi bakgrunnsmønsterblandingsmodus Mønsterblandingsmodus Layout 1

Resultat

Her er den endelige utformingen av vårt første eksempel.

Divi 1 Bakgrunnsmønsterblandingsmodus Layout Endelig design

Her er mobilversjonen.

Divi 1 Bakgrunnsmønsterblandingsmodus Layout Endelig design Mobil

Andre layout

For den andre layouten bruker vi et bølgemønster som er lagt over bakgrunnsbildet og gradienten, som passer godt med sidens nautiske tema.

Naviger først til delen "Hvordan det fungerer" og åpne seksjonsinnstillingene. 

Åpne innstillinger Bakgrunn, og velg deretter fanen Bakgrunnsmønsterog klikk Legg til bakgrunnsmønster.

Divi 2 Bakgrunnsmønster Blandingsmodus Layout Legg til bakgrunnsmønster

For dette designet vil vi bruke mønstertype Bølger.

  • Mønstertype: Bølger
Divi 2 Bakgrunnsmønster Blandingsmodus Layout Velg mønster

Endre deretter mønsterfargen til hvit.

  • Mønsterfarge: #FFFFFF
Divi bakgrunnsmønsterblandingsmodus Layout 2 mønsterfarge

Lagt til mønsterblandingsmodus

Vi kan nå legge til blandingsmodus til mønsteret vårt. Sett mønsterblandingsmodus til overlay

Oppdag også: Divi: Hvordan tilpasse kurven og søkeikonene til modulen "Fullbreddsmeny".

Denne blandingsmodusen gjør mørke farger i bakgrunnsbildet mørkere og lysere lyse farger.

  • Mønsterblandingsmodus: Overlegg
Divi 2 Bakgrunnsmønster blandingsmodus Layout Velg blandingsmodus

Resultat

Her er det endelige resultatet av det andre eksemplet brukt på seksjonen "Hvordan det fungerer".

Divi 2 Bakgrunnsmønsterblandingsmodus Layout Endelig design

Og her er mobilversjonen.

Divi Bakgrunnsmønster Blending Mode 2 Layout Endelig design Mobil

Tredje layout

La oss starte vår tredje layout. 

For denne layouten legger vi til ugjennomsiktige diagonale striper i bakgrunnen til " Call to Action".

Start med å åpne seksjonsinnstillingene og gå til seksjonen Bakgrunn. Klikk på fanen Bakgrunnsmønster, og velg deretter Legg til bakgrunnsmønster.

Divi 3 Bakgrunnsmønster Blandingsmodus Layout Legg til bakgrunnsmønster

Velg mønster Diagonale striper.

Divi 3 Bakgrunnsmønster Blandingsmodus Layout Velg mønster

Deretter setter du mønsterfargen.

  • Mønsterfarge: rgba(255,255,255,0.25)
Divi bakgrunnsmønsterblandingsmodus Layout 3 mønsterfarge

Vend mønsteret horisontalt ved å bruke Transform Pattern-innstillingene. Dette er en annen parameter som kan hjelpe deg med å finjustere mønsteret til din smak.

  • Mønstertransformasjon: horisontal
Divi 3 Bakgrunnsmønsterblandingsmodus Layoutmønstertransformasjon

Lagt til mønsterblandingsmodus

Til slutt, still inn blandingsmodus for mønsteret. For dette designet vil vi bruke blandingsmodus lysstyrken

Les også vår guide om: Divi: Hvordan bruke "Gradient Builder" for å forskjønne bildene dine

Dette, kombinert med mønsterfargen vår, legger til en lyssterk skjerm til bildet samtidig som bildet kan vises gjennom. Med dette designet skiller bildet av båten seg mer ut fra bakgrunnen ettersom mønsteret tilfører en særegen kontrast.

  • Mønsterblandingsmodus: Lysstyrke
Divi 3-oppsett for blandingsmodus for bakgrunnsmønster Blandingsmodus

Resultat

Her er det endelige designet for denne delen.

Divi 3 Bakgrunnsmønsterblandingsmodus Layout Endelig design

Og her er mobilversjonen.

Divi-mønsterblandingsmodus

Endelig resultat

La oss nå ta en titt på helsidedesignet med mønsterblandingsmoduser.

Divi-mønsterblandingsmodus

Last ned DIVI nå!!!

konklusjonen

Å legge til et mønster kan være en fin måte å legge til visuell interesse for bakgrunnsbildet ditt, men noen ganger kan mønsteret overvelde bakgrunnsbildet. Heldigvis kommer Divi med mange blandingsmoduser slik at du kan tilpasse mønstrene så mye du vil. 

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.

Ikke nøl med å også konsultere vår guide på WordPress blog oppretting eller den på Divi: tidenes beste WordPress-tema.

Men i mellomtiden, del denne artikkelen på de forskjellige sosiale nettverkene dine.

...