Kunne du tænke dig at skabe unikke baggrundsbilleder ved hjælp af mønsterblandingstilstanden Divi ?
De indbyggede baggrundsmønsterindstillinger af Divi giver dig mulighed for at skabe iøjnefaldende designs og tilføje stil til baggrundsbillederne af din Websted. Du kan bruge indstillingerne for blandingstilstand til at finjustere, hvordan mønsteret blander sig med baggrundsbilledet.
I denne tutorial vil vi vise dig nogle eksempler på, hvordan du tilføjer en mønsterblandingstilstand til baggrundsbillederne på din side. Følg dem for at genskabe disse looks på egen hånd, eller brug dem som inspiration til at skabe dine egne brugerdefinerede designs.
Lad os starte!
undersøgelse
Her er en forhåndsvisning af, hvad vi vil designe i denne øvelse.
Første layout
Andet layout
Tredje layout
Sådan bruger du mønsterblandingstilstande på dine Divi-baggrundsbilleder
Opret en ny side med et foruddefineret layout
Vi starter med at bruge et foruddefineret layout fra biblioteket Divi. Til dette design vil vi bruge « Marina Landing Page "Af Marina Layout Pack .
Tilføj en ny side til din Websted og giv den en titel, og vælg derefter indstillingen Brug Divi Builder.
Vi vil bruge et forudlavet layout fra Divi-biblioteket til dette eksempel, så vælg Gennemse layouts.
Find og vælg layoutet Marina landingsside.
Vælg Brug dette layout for at tilføje layoutet til din side.
Vi er nu klar til at designe.
Første layout
Til vores første design tilføjer vi et chevronmønster til det første overskriftsbillede. Dette vil tilføje visuel interesse til overskriften.
Læs også: Divi: Sådan tilpasser du "Countdown Timer"-modulet med en GIF
På grund af den blandingstilstand, vi vil anvende, vil mønsteret være mere subtilt og stadig tillade baggrundsbilledet at være synligt.
Åbn først sektionsindstillingerne og gå til sektionen Baggrund. Klik på fanen Baggrundsmønster og vælg Tilføj baggrundsmønster.
Vælg derefter mønstertypen. Som du kan se, er der mange forskellige skabeloner at vælge imellem, og de kan alle yderligere tilpasses ved hjælp af skabelonindstillingerne nedenfor.
- Mønstertype: Omvendt sildeben 2
Tilføjet "Pattern Blend"-tilstand
Til sidst skal du indstille blandingstilstanden for mønsteret. Vi vil bruge blandingstilstand Blødt lys for dette eksempel. Denne blandingstilstand gør mønsteret mere subtilt, så det ikke distraherer fra baggrundsbilledet.
- Mønsterblandingstilstand: Blødt lys
Resultat
Her er det endelige design af vores første eksempel.
Her er mobilversionen.
Andet layout
Til det andet layout vil vi bruge et bølgemønster overlejret på baggrundsbilledet og gradienten, som passer godt til sidens nautiske tema.
Først skal du navigere til afsnittet "Hvordan det virker" og åbn sektionsindstillingerne.
Åbn indstillinger Baggrund, vælg derefter fanen Baggrundsmønsterog klik Tilføj baggrundsmønster.
Til dette design vil vi bruge mønstertype Waves.
- Mønstertype: Bølger
Skift derefter mønsterfarven til hvid.
- Mønsterfarve: #FFFFFF
Tilføjet mønsterblandingstilstand
Vi kan nu tilføje blandingstilstanden til vores mønster. Indstil mønsterblandingstilstanden til Overlay.
Opdag også: Divi: Sådan tilpasser du kurven og søgeikonerne i modulet "Fuldbreddemenu".
Denne blandingstilstand gør mørke farver i baggrundsbilledet mørkere og lysner lyse farver.
- Mønsterblandingstilstand: Overlay
Resultat
Her er det endelige resultat af det andet eksempel anvendt på afsnittet "Hvordan det virker".
Og her er mobilversionen.
Tredje layout
Lad os starte vores tredje layout.
Til dette layout tilføjer vi uigennemsigtige diagonale striber til baggrunden af " Ring til aktion".
Start med at åbne sektionsindstillingerne og gå til sektionen Baggrund. Klik på fanen Baggrundsmønster, vælg derefter Tilføj baggrundsmønster.
Vælg mønster Diagonale striber.
Indstil derefter mønsterfarven.
- Mønsterfarve: rgba(255,255,255,0.25)
Vend mønsteret vandret ved hjælp af Transform Pattern-indstillingerne. Dette er endnu en parameter, der kan hjælpe dig med at finjustere mønsteret til din smag.
- Mønstertransformation: vandret
Tilføjet mønsterblandingstilstand
Til sidst skal du indstille blandingstilstanden for mønsteret. Til dette design vil vi bruge blandingstilstanden lysstyrke.
Læs også vores vejledning om: Divi: Sådan bruger du "Gradient Builder" til at forskønne dine billeder
Dette, kombineret med vores mønsterfarve, tilføjer en lys skærm til billedet, samtidig med at billedet kan ses igennem. Med dette design skiller billedet af båden sig mere ud fra baggrunden, da mønsteret tilføjer en markant kontrast.
- Mønsterblandingstilstand: Lysstyrke
Resultat
Her er det endelige design til dette afsnit.
Og her er dens mobilversion.
Endelig resultat
Lad os nu tage et kig på hele sidedesignet med mønsterblandingstilstande.
Download DIVI nu!!!
Konklusion
Tilføjelse af et mønster kan være en fantastisk måde at tilføje visuel interesse til dit baggrundsbillede, men nogle gange kan mønsteret overvælde baggrundsbilledet. Heldigvis kommer Divi med masser af blandingstilstande, så du kan tilpasse mønstrene, så meget du vil.
Vi håber, at denne vejledning vil inspirere dig til dine næste Divi-projekter. Hvis du har spørgsmål eller forslag, så find os her kommentarafsnittet at diskutere det.
Du kan også konsultere vores ressourcer, hvis du har brug for flere elementer til at gennemføre dine projekter med oprettelse af internetsider.
Tøv ikke med også at konsultere vores guide om WordPress blog oprettelse eller den ene på Divi: tidenes bedste WordPress-tema.
Men i mellemtiden del denne artikel på dine forskellige sociale netværk.
...
