Vill du kombinera bakgrundsmaskinställningar och mönsteromvandlingsalternativ Divi skapa unika bakgrunder?
Bakgrundsdesigner är ett bra sätt att ge dina webbplats visuell stil och sticker ut från mängden. De nya inställningarna för bakgrundsmask och mönsteromvandling från Divi kan kombineras på många sätt för att skapa dessa bakgrundsmönster.
I den här artikeln kommer vi att se hur du använder bakgrundsmask och mönsteromvandlingsinställningar från Divi för att skapa intressanta bakgrunder för dina layouter Divi.
Låt oss börja.
undersökningen
Först, här är en förhandsvisning av varje exempel på olika skärmstorlekar (telefon och skrivbord).
Läs också: Divi: Hur man använder skugg- och sväveffekter för att skapa interaktivt innehåll
Exempel 1
Version 1 på skrivbordet
Version 1 på telefonen
Ladda ner DIVI nu!!!
Version 2 på skrivbordet
Version 2 på telefonen
Exempel 2
Version 1 på skrivbordet
Version 1 på telefonen
Ladda ner DIVI nu!!!
Version 2 på skrivbordet
Version 2 på telefonen
Exempel 3
Version 1 på skrivbordet
Version 1 på telefonen
Ladda ner DIVI nu!!!
Version 2 på skrivbordet
Version 2 på telefonen
Alternativ för Divi-bakgrundsmask och mönsteromvandling
Divis nya funktioner för mask och bakgrundsmönster inkluderar flera alternativ för att justera dem. Justeringar inkluderar horisontell och vertikal vändning, rotation och inversion. För att se alternativen, gå till bakgrundsinställningarna för en sektion eller linje och välj flikarna Bakgrundsmönster eller Bakgrundsmask.
När du har lagt till ett mönster eller en mask visas transformationsinställningarna. Klicka bara på de alternativ du vill använda. Vi kan använda dem tillsammans och i vilken kombination vi vill.
Hur Divis inställningar för mask och mönsteromvandling fungerar
Mönstret nedan är Zig Zag med standardinställningar.
Vi lägger till en Layer Blog-mask i bilden nedan. Låt oss använda dem för att demonstrera hur inställningarna för bakgrundsmask och mönsteromvandling fungerar.
Horisontell Vänd
Det är den horisontella vändningen. Vi tillämpade transformeringsinställningarna på både mönstret och masken.
Vertikal flip
Detta är den vertikala vändningen för mönstret och masken.
Rotation
Den här visar Rotation för mönster och mask.
Omvänd
Det här exemplet visar Invertera för mönster och mask.
Bakgrundsmask och mönsteromvandlingskombinationer
Naturligtvis kan vi också använda transformationsparametrar i olika kombinationer. Här är några exempel.
Detta roterar mönstret och inverterar masken.
Det här exemplet använder vertikal vändning, rotation och inversion för bakgrundsmönstret. Bakgrundsmasken använder horisontell vändning, vertikal vändning och rotation.
För det här exemplet använde vi horisontell vändning och rotation för bakgrundsmönstret och vertikal vändning och rotation för bakgrundsmasken.
Exempel på inställningar för bakgrundsmask och mönsteromvandling
Låt oss sedan se hur dessa inställningar kan användas med Divi-layouter. Vi använder ett avsnitt som utgångspunkt och skapar tre exempel. Vi anpassar det och använder sedan transformeringsinställningarna för att ändra det för varje exempel.
För våra exempel använder vi en modifierad version av hjältedelen av layoutens målsida Fastighetsplanering finns i Divi.
Här är en översikt över avsnittet i fråga. Den använder bakgrundsfärgen: #92a5ab.
- Bakgrund: #92a5ab
Parametrar för bakgrundsmask och mönsteromvandling Exempel 1
Vårt första exempel ger oss en båge som sitter vertikalt i mitten av skärmen. Ena sidan av skärmen har ett tuftmönster. Därefter skapar vi en alternativ version med bågen vänd åt andra hållet.
bakgrundsmönster
Öppna avsnittsinställningarna, scrolla ner till Bakgrund och välj fliken Bakgrundsmönster. Välj Tufted för bakgrundsmönstret och Inverting för Pattern Transform.
- Bakgrundsmönster: Tuftad
- Mönsteromvandling: Omvänd
Bakgrundsmask
Välj flik Bakgrundsmask och välj Arch för bakgrundsmasken. Ändra maskfärgen till #616d72 och ställ in masktransformeringen till Invertera. Detta fullbordar vår första version av bågen med tofsar.
- Bakgrundsmask: Arch
- Maskfärg: #616d72
- Maskomvandling: Invertera
Exempel 1 version 2
Låt oss sedan skapa en variant av vår design. Ändra bara maskomvandling för bakgrundsmönster i horisontell flip och vertikal flip. Detta ändrar bågen så att den är vänd åt andra hållet och förskjuter mönstret, så att det inte bara ser ut som en spegelbild.
- Mask Transform: vänd horisontellt, vänd vertikalt
Parametrar för bakgrundsmask och mönsteromvandling Exempel 2
För vårt andra exempel skapar vi en oval i mitten av skärmen med ett mönster inuti ovalen. Därefter kommer vi att ändra placeringen av mönstret. Vi kommer också att modifiera denna för olika skärmstorlekar.
Bakgrundsmönster
Välj fliken i bakgrundsinställningarna Bakgrundsmönster och välj cloisonne för motivet. Ställ in mönsteromvandlingen till Invertera.
- Mönsterbakgrund: Shippo
- Mönsteromvandling: Omvänd
Bakgrundsmask
Välj sedan fliken Bakgrundsmask och ändra följande inställningar.
- Bakgrundsmask: Ellips
- Färg: #758489
- Mask Transform: horisontell vändning, rotation
Surfplatta och telefon
Både surfplattan och telefonen kommer att använda samma inställningar, så vi behöver bara ändra surfplattans inställningar. Välj Tablettfliken och ändra mask omvandling i horisontell vändning.
- Mask Transform: horisontell vändning, inversion
Exempel 2 version 2
Därefter skapar vi varianten för vårt andra exempel. Välj först fliken Bakgrundsmönster och ställ in mönsterfärgen till rgba(0,0,0,0.06).
- Mönsterfärg: rgba(0,0,0,0.06)
Välj sedan fliken Bakgrundsmask och välj Vänd horisontellt, Rotera och Invertera för masktransformationen.
- Mask Transform: horisontell vändning, rotation, inversion
Surfplatta och telefon
För alternativ för surfplatta och telefon, välj ikonen för Läsplatta . Ändra mask omvandling i horisontell vändning och inversion. Den alternativa versionen av exempel två är nu klar.
- Mask Transform: horisontell vändning, inversion
Parametrar för bakgrundsmask och mönsteromvandling Exempel 3
För vårt tredje exempel på inställningar för mask och mönsteromvandling kommer vi att använda ett bikakemönster med en målarmask. Vi kommer även att skapa en mobilversion för denna.
bakgrundsmönster
Välj först fliken Enhetsinställningar och välj Enhetsikonen. byrå. Välj flik Bakgrundsmönster och välj Honeycomb för bakgrundsmönstret. Ändra färgen till rgba(0,0,0,0.42). För den här lämnar vi alternativen Mönsteromvandling avaktiverad. Vi kommer att lägga till dem för den alternativa versionen.
- Bakgrundsmönster: Honeycomb
- Mönsterfärg: rgba(0,0,0,0.42)
- Mönsteromvandling: ingen
Bakgrundsmask
Välj sedan fliken Bakgrundsmask. Välj måla för bakgrundsmasken. Ändra färgen till #697b82. Välj Vänd vertikal för masktransformeringen.
- Bakgrundsmask: Måla
- Maskfärg: #697b82
- Mask Transform: vertikal flip
Välj sedan Täck för storlek. Detta öppnar upp några fler alternativ. Välja Nere till höger för plats. Det är allt för skrivbordsversionen. Därefter kommer vi att skapa den mobila versionen.
- Maskstorlek: Omslag
- Maskposition: Nederst till höger
Surfplatta och telefon
Välj sedan flik tablett och ändra omvandlingen av masque bakgrund i vertikal flip och rotation. Detta kompletterar stilen för vårt tredje exempel. Därefter skapar vi den alternativa versionen.
- Mask Transform: vertikal flip, rotation
Exempel 3 version 2
För den alternativa versionen av det här exemplet kommer vi att justera både bakgrundsmönstret och bakgrundsmasken.
bakgrundsmönster
För bakgrundsmönstret, ändra mönsterfärgen till rgba(0,0,0,0.11). Ändra mönsteromvandlingen till att vända horisontellt, vända vertikalt och rotera.
- Maskfärg: rgba(0,0,0,0.11)
- Mask Transform: horisontell vändning, vertikal vändning, rotation
bakgrundsmask
Välj sedan flik Bakgrundsmask. Ändra färgen till vit och omvandlingen av masken till horisontell flip, vertikal flip och inversion.
- Maskfärg: #ffffff
- Mask Transform: horisontell flip, vertikal flip, inversion
Ändra sedan storleken på masken för att täcka och välj sedan Center för maskens position.
- Maskstorlek: Omslag
- Mask Position: Center
Surfplatta och telefon
Välj slutligen flik Tablette för att skapa mobilversionen. Välj flik bakgrundsmask och välj de fyra masktransformeringsalternativen. Detta avslutar den alternativa versionen av det tredje exemplet.
- Mask Transform: horisontell flip, vertikal flip, rotation, inversion
Slutliga resultat
Här är en översikt över varje exempel med olika skärmstorlekar (dator och telefon)
Exempel 1
Version 1 på skrivbordet
Version 1 på telefonen
Version 2 på skrivbordet
Version 2 på telefonen
Exempel 2
Version 1 på skrivbordet
Version 1 på telefonen
Version 2 på skrivbordet
Version 2 på telefonen
Exempel 3
Version 1 på skrivbordet
Version 1 på telefonen
Version 2 på skrivbordet
Version 2 på telefonen
Ladda ner DIVI nu!!!
Se även: Divi: Hur man skapar en gruppmedlemssektion som en karusell
Slutsats
Det här är vår titt på hur du använder Divis bakgrundsmask och mönsteromvandlingsinställningar för att skapa många intressanta bakgrundsmönster.
Eftersom mönster och masker kan användas tillsammans, kan deras transformationsinställningar också användas tillsammans. Detta öppnar upp för många designalternativ, vilket ger dig ännu meroutils för att lägga till elegans till dina Divi-bakgrunder.
Det bästa sättet att lära sig använda dem är att leka med justeringarna och se vad du kan skapa.
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.
.
