Vill du designa en unik bakgrund med hjälp av mönstermasker? Divi ?
Det nya bakgrundsmönstret maskerar från Divi har öppnat många designalternativ för bakgrunder. De fungerar utmärkt med bakgrundsfärger och mönster för att skapa många unika mönster.
I den här artikeln kommer vi att se hur du skapar subtila bakgrundsmönstermasker med Divi . Vi kommer också att diskutera fördelarna med att använda en subtil mask och skapa tre exempel.
Låt oss börja.
Förhandsvisning av bakgrundsmönstermask
Innan vi börjar designa, här är en förhandstitt på vad vi kommer att bygga i denna handledning Divi.
Exempel 1
Läs också: Divi: Hur man ändrar gradienten för en bakgrund vid hovring
Exempel 2
Exempel 3
Hur man skapar en bakgrundsmask
Bakgrundsmasken kommer att täcka bakgrundsmönstret och avslöja delar av mönstret. Det fungerar väldigt Bra med bakgrundsfärger och mönster. Du kan justera bakgrunden så att den passar innehåll, justera innehåll för att passa bakgrunden eller justera båda.
Se även: Divi: Hur man använder "Gradient Builder" för att försköna dina bilder
Öppna först sektionsparametrar där du vill lägga till bakgrundsmasken.
Därefter måste du välja en bakgrundsfärg för avsnittet. Bläddra till Bakgrund. Med fliken Bakgrund vald, välj din färg bakgrund i färgväljaren.
Därefter måste du välja ett bakgrundsmönster och ställa in dess storlek och plats. Välj flik Bakgrundsmönster och klicka Lägg till bakgrundsmönster.
Detta öppnar en lista med modellalternativ. Välj ditt mönster i listan. Det kommer att slutföra avsnittet.
Därefter måste du välja en bakgrundsmask och justera dess färg och inställningar för att passa din design. Välj flik Bakgrundsmask och klicka Lägg till bakgrundsmask.
En annan modal öppnas med maskalternativ. Välj din mask bakgrund i listan. Masken kommer att vara vit tills du väljer en färg.
Justera dem bakgrundsmaskinställningar för att uppnå önskat utseende. Du kan ändra storlek, position, riktning på masken, rotation etc. Att leka med dessa inställningar kan hjälpa dig att skapa intressanta mönster.
Här är en förhandsvisning av bakgrunden vi just skapat utan några moduler. Färgerna är lika, men de är tillräckligt olika för att sticka ut lite. Detta gör att det inte blir för distraherande.
Exempel på subtila bakgrundsmönstermasker
Låt oss nu titta på tre exempel på bakgrundsmönstermasker.
Vi lägger till en bakgrundsmask till hjältedelen av gratis företagsmålsida finns i Divi.
Här är en förhandsvisning av originalsidan innan du lägger till bakgrundsmönstermaskerna.
Vi kommer också att ändra bakgrundsfärgerna på knapparna. Med samma subtila designkoncept får vi dem att sticka ut mer än i bakgrunden.
Avdelaren är ett annat element som vi kommer att se ändra färg, men detta element använder transparens för att få sin färg från bakgrunden, så vi behöver inte ändra dess färg.
Exempel 1
Detta exempel kommer att använda den ursprungliga bakgrunden och knappfärgerna.
Bakgrundsfärg
För vårt första exempel använder vi den ursprungliga bakgrundsfärgen för denna layout – #1d1d25. Vi kommer också att behålla den ursprungliga knappfärgen – #4c594c
- Bakgrundsfärg: #1d1d25
- Knappfärg: #4c594c
Bakgrundsmönster
Välj fliken Bakgrundsmönster och välj Diagonal Stripes 2. Ändra mönsterfärgen till #383838.
- Bakgrundsmönster: Diagonala ränder 2
- Mönsterfärg: #383838
- Storlek: Verklig storlek
- Upprepa Ursprung: Överst till vänster
- Mönsterupprepning: Upprepa
Bakgrundsmask
Välj sedan flik Bakgrundsmask. Välj Markör och ställ in färgen till #383838.
- Mask: Caret
- Maskfärg: #383838
Under maskfärgen väljer du alternativet att horisontell transformation och bildförhållande porträtt. Stäng avsnittsinställningarna och spara ditt arbete.
- Mask Transform: horisontellt
- Mask bildförhållande: stor (stående)
Exempel 2
För vårt andra exempel kommer vi att ändra bakgrunds- och knappfärgerna till lila.
Bakgrundsfärg
Öppna dem sektionsparametrar . se till att du finns på fliken Bakgrundsfärg och ändra det Färg i #483c56.
- Bakgrund: #483c56
Bakgrundsmönster
Välj sedan flik Ryggmönster bakgrund och välj Tuftad som bakgrundsmönstret. Ändra mönsterfärgen till #635c84.
- Bakgrundsmönster: Tuftad
- Mönsterfärg: #635c84
Sedan Välj Anpassad storlek . Detta öppnar ytterligare en uppsättning alternativ. Ändra det largeur i 10vw.
- Mönsterstorlek: Anpassad storlek
- Mönsterbredd: 10vw
- Upprepa Ursprung: uppe till vänster
- Mönsterupprepning: Upprepa
Bakgrundsmask
Nu är det dags att konfigurera vår bakgrundsmask.
Välj flik Bakgrundsmask och välj masken som heter Arch. Ändra dess färg till #67557a.
- Mask: Arch
- Maskfärg: #67557a
Ställ sedan in dess alternativ för transformation på horisontell, vertikal och rotation. För bildförhållande, välj det breda eller liggande alternativet. Stäng avsnittsinställningarna.
- Mask Transform: Horisontell, Vertikal och Rotation
- Mask bildförhållande: bred (liggande)
knapp
Slutligen, låt oss justera CTA-knappen i det här hjälteavsnittet. Vi vill att det ska smälta in i designen, men vi vill också att det ska sticka ut.
Öppna dem knappinställningar. Vi behöver bara ändra bakgrundsfärgen. Det kan ha en liknande färg som bakgrunden, men tillräckligt annorlunda för att inte gå vilse på sidan. Vi väljer en ljusare färg för bakgrunden. Vi lämnar samma textfärg.
Välj fliken Designa , bläddra till Bakgrund och ändra Knapp bakgrundsfärg i #8b4dc1. Det ger oss den kontrast vi vill ha och det fungerar utmärkt med lila bakgrund. Stäng knappinställningarna och spara din sida.
- Knappbakgrund: #8b4dc1
Exempel 3
För vårt tredje exempel kommer vi att ändra bakgrunds- och knappfärgerna till gröna med samma koncept som de två föregående exemplen.
Bakgrundsfärg
Öppna först sektionsparametrar . Med flik Bakgrundsfärg.
- Bakgrund: #497762
Bakgrundsmönster
Välj sedan fliken Bakgrundsmönster, och ändra summaparametrarna som följer.
- Bakgrundsmönster: Fyrkanter
- Mönsterfärg: #3a604e
- Storlek: Verklig storlek
- Mönsterupprepning Ursprung: Överst till vänster
- Mönsterupprepning: Upprepa
Bakgrundsmask
Välj sedan fliken Bakgrundsmask.
- Mask: Diagonala linjer
- Färg: #3a604e
Ställ sedan in följande parametrar:
- Mask Transform: horisontellt
- Mask bildförhållande: Landskap
- Storlek: Omslag
- Mask Position: Top Center
knapp
Öppna slutligen knappinställningar och välj fliken Design. Rulla ned och ändra knapp bakgrundsfärg i #61a380. Stäng modulinställningarna och spara ditt arbete.
- Knappbakgrund: #61a380
Slutliga resultat
Se även: Divi: Hur man anpassar korg- och sökikonerna i modulen "Fullwidth Menu".
Så här ser våra bakgrundsmönstermasker ut i hjältedelen av vår layout.
Exempel 1
Exempel 2
Exempel 3
Ladda ner DIVI nu!!!
Slutsats
Det här är vår titt på hur man skapar subtila bakgrundsmönstermasker med Divi. En subtil mask sticker ut precis tillräckligt för att ge bakgrunden visuell struktur. De ser bra ut utan att distrahera från dina CTAs och andra element.
Divis bakgrundsmönstermasker är enkla att använda och deras inställningar låter dig skapa något unikt. Experimentera med inställningarna för att skapa dina egna bakgrundsmönstermasker.
Vi hoppas att denna handledning kommer att inspirera dig för dina nästa Divi-projekt. Om du har några funderingar eller förslag, kontakta oss kommentaravsnittet att diskutera det.
Du kan också konsultera våra resurser, om du behöver fler element för att genomföra dina projekt för att skapa webbplatser, genom att konsultera vår guide om WordPress blogg skapande eller den på Divi: det bästa WordPress-temet genom tiderna.
Men under tiden dela den här artikeln på dina olika sociala nätverk.
.
