Divis nya bakgrundsmönstermasker har öppnat upp för många designalternativ för bakgrunder. De fungerar utmärkt med bakgrundsfärgerna och mönstren för att skapa massor av unika mönster. I det här inlägget 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 titt på vad vi kommer att bygga i denna Divi-handledning.
Bakgrundsmönstermask Exempel ett
Mask exempel två
Mask Exempel tre
Hur man skapar en bakgrundsmask
Bakgrundsmasken täcker bakgrundsmönstret och låter delar av mönstret synas igenom. Det fungerar utmärkt med bakgrundsfärger och mönster. Du kan justera bakgrunden så att den passar innehållet, justera innehållet så att det passar bakgrunden eller justera båda.
Öppna först inställningar för avsnittet du vill lägga till bakgrundsmasken.
Därefter måste du välja en bakgrundsfärg för avsnittet. Scrolla ner till Bakgrund. Med fliken Bakgrund vald, välj din bakgrundsfärg från färgväljaren.
Därefter måste du välja ett bakgrundsmönster och ställa in dess storlek och plats. Välj Bakgrundsmönster fliken och klicka Lägg till bakgrundsmönster.
Detta öppnar en lista med mönsteralternativ. Välj ditt mönster från listan. Det kommer att fylla 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 Bakgrundsmask fliken och klicka Lägg till bakgrundsmask.
En annan modal öppnas med maskalternativ. Välj din bakgrundsmask från listan. Masken kommer att vara vit tills du väljer en färg.
Justera inställningar för bakgrundsmask för att få det utseende du vill ha. Du kan ändra storlek, position, riktning som masken är vänd mot, rotation och mer. Att leka med dessa inställningar kan hjälpa dig att skapa några intressanta mönster.
Här är en titt på bakgrunden Vi just skapade 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.
Hur man skapar en subtil bakgrundsmask
Ett av de bästa designdirektiven för en bakgrundsmask är att göra den subtil. Det bör inte vara i fokus för siddesignen. Använd den för bakgrundsstruktur för att skapa en liten mängd visuell variation. Ditt innehåll bör vara i fokus. Använd bakgrundsmasken för att stödja innehållet. Här är några saker att tänka på när du skapar en subtil bakgrundsmönstermask.
Välj Matchande färger
Välj färger för dina mönster och masker som inte skiljer sig alltför mycket från avsnittets bakgrundsfärg. Färgerna ska inte ha hög kontrast mot varandra. Färgerna ska vara tillräckligt olika för att se masken och mönstren, men inte så mycket att det är överväldigande. Använd samma färg för mönstret och bakgrunden och välj sedan en något ljusare eller mörkare färg för masken.
Justera för läsbarhet
Prioritera läsbarheten i din design. Läsbarhet bör alltid prioriteras framför att få designen att se bra ut. Innehållet i en design som ser bra ut men som är svår att läsa ignoreras.
Prova olika mönsterstorlekar
Lek med de olika mönsterstorlekarna för att se vad du kan skapa. Anpassade storlekar kan ge dig mer flexibilitet över designen och kan ge dig en mer unik design.
Prova alla inställningar för bakgrundsmask
Lek med alla bakgrundsmaskinställningar för att se vad du kan skapa. Testa också inställningarna med bakgrundsmönsterinställningarna för att se vad du gillar. Alla dessa inställningar kan arbeta tillsammans för att skapa några intressanta mönster.
Exempel på subtila bakgrundsmönstermasker
Låt oss nu titta på tre subtila exempel på bakgrundsmönstermasker. Vi lägger till bakgrundsmasken till hjältedelen av gratis målsida för företag som är tillgängligt inom Divi. Här är en titt på originalsidan innan vi 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 göra ändringar i dess färg.
Bakgrundsmönstermask Exempel ett
Det här exemplet 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 Bakgrundsmönster flik och välj Diagonala ränder 2. Ändra mönsterfärgen till #383838.
- Bakgrundsmönster: Diagonala ränder 2
- Mönsterfärg: #383838
- Mönsterstorlek: Verklig storlek
- Mönsterupprepning Ursprung: Överst till vänster
- Mönsterupprepning: Upprepa
Bakgrundsmask
Välj sedan Bakgrundsmask flik. Välj Caret och ställ in färgen på #383838.
- Mask: Caret
- Maskfärg: #383838
Under Mask Color, välj den horisontella Omvandla alternativet och porträttet Bildförhållande. Stäng avsnittets inställningar och spara ditt arbete.
- Transform: Horisontell
- Bildförhållande: Lång (porträtt)
Bakgrundsmönstermask Exempel två
För vårt andra exempel kommer vi att ändra bakgrunds- och knappfärgerna till lila.
Bakgrundsfärg
Öppna avsnittsinställningar. Se till att du är på fliken Bakgrundsfärg och ändra Bakgrundsfärg till #483c56.
- Bakgrundsfärg: #483c56
Bakgrundsmönster
Välj sedan Bakgrundsmönster fliken och välj Tuftad för bakgrundsmönstret. Ändra mönsterfärgen till #635c84.
- Bakgrundsmönster: Tuftad
- Mönsterfärg: #635c84
Välj sedan Anpassad storlek. Detta öppnar ytterligare en uppsättning alternativ. Ändra Bredd till 10vw.
- Storlek: Anpassad storlek
- Bredd: 10vw
- Mönsterupprepning Ursprung: Överst till vänster
- Mönsterupprepning: Upprepa
Bakgrundsmask
Nu är det dags att sätta upp vår bakgrundsmask. Välj Bakgrundsmask fliken och välj masken med namnet Arch. Ändra dess färg till #67557a.
- Mask: Arch
- Maskfärg: #67557a
Ställ sedan in dess Omvandla alternativ till Horisontell, Vertikal och Rotera. För Bildförhållande, välj alternativet bred eller liggande. Stäng avsnittets inställningar.
- Transformera: Horisontell, Vertikal och Rotera
- 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 knappens inställningar. Vi behöver bara ändra bakgrundsfärgen. Det kan vara en färg som liknar bakgrunden, men tillräckligt annorlunda för att den inte ska gå vilse på sidan. Vi kommer att välja en ljusare färg för bakgrunden. Vi lämnar textfärgen densamma.
Välj designflikenscrolla ner till Bakgrundoch ändra Knapp Bakgrundsfärg till #8b4dc1. Detta ger oss den kontrast vi vill ha och det fungerar utmärkt med den lila bakgrunden. Stäng knappens inställningar och spara din sida.
- Knappens bakgrundsfärg: #8b4dc1
Bakgrundsmönstermask Exempel tre
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 avsnittets inställningar. Med Bakgrundsfärg fliken vald, ändra Bakgrundsfärg till #497762.
- Bakgrundsfärg: #497762
Bakgrundsmönster
Välj sedan Bakgrundsmönster fliken, välj kvadrater och ändra färgen till #3a604e. Vi lämnar rutorna deras ursprungliga storlek och applicerar masken över de flesta av dem.
- Bakgrundsmönster: Fyrkanter
- Mönsterfärg: #3a604e
- Mönsterstorlek: Verklig storlek
- Mönsterupprepning Ursprung: Överst till vänster
- Mönsterupprepning: Upprepa
Bakgrundsmask
Välj sedan Bakgrundsmask flik. Välj Diagonala linjer för masken och ändra färgen till #3a604e.
- Mask: Diagonala linjer
- Maskfärg: #3a604e
Nästa, ställ in Omvandla till Horisontell och välj det breda eller liggande alternativet för Bildförhållande. Ställ in Storlek att täcka och Maskposition till Top Center. Stäng avsnittets inställningar.
- Transform: Horisontell
- Bildförhållande: bred (liggande)
- Storlek: Omslag
- Mask Position: Top Center
Knapp
Slutligen öppnar du knappens inställningar och välj design flik. Scrolla ner och ändra Knapp Bakgrundsfärg till #61a380. Stäng modulens inställningar och spara ditt arbete.
- Knappens bakgrundsfärg: #61a380
Resultat för bakgrundsmönstermask
Så här ser våra bakgrundsmönstermasker ut i hjältedelen av vår layout.
Bakgrundsmönstermask Exempel Ett resultat
Mask Exempel två Resultat
Mask Exempel tre Resultat