Divis nya bakgrundsmönster lägger till många visuella designalternativ till alla Divi-layouter. Dessa återkommande bakgrundsmönster ser bra ut, men de kan användas för mer än bara ett upprepande mönster. Vi kan också använda dem som en enda bakgrundsgrafik för att uppmärksamma specifika områden på skärmen eller bryta upp visuella element. Divis bakgrundsmönsterinställningar, i det här fallet Custom Size, ger oss många designalternativ. I det här inlägget kommer vi att titta på tre exempel och se hur du lägger till en anpassad storlek till ditt bakgrundsmönster med Divi för att hjälpa dig att få idéer för din egen Divi-webbplats.
Förhandsvisning
Låt oss först se vad vi kommer att göra. Här är en titt på varje bakgrundsmönster på skrivbordet, surfplattan och telefonens skärmstorlekar.
Första bakgrundsmönster i anpassad storlek
Skrivbord
Läsplatta
Telefon
Andra bakgrundsmönster i anpassad storlek
Skrivbord
Läsplatta
Telefon
Tredje bakgrundsmönster i anpassad storlek
Skrivbord
Läsplatta
Telefon
Bakgrundsmönster med anpassad storlek
För våra exempel använder Vi det första avsnittet från gratis Acai Bowl Landing Page tillgänglig inom Divi. Vi lägger till tre olika bakgrundsmönster och anpassar dem för vart och ett av enhetsalternativen. Avsnittet för mina exempel använder bakgrundsfärgen #f9f3fd. Vi behåller den här bakgrundsfärgen och lägger till bakgrundsmönster till den.
Första bakgrundsmönster med anpassad storlek
Vårt första exempel kommer att lägga till diagonala ränder som bara visas längst ner i avsnittet. Vi behöver olika inställningar för datorer, surfplattor och telefoner.
Öppna först avsnittsinställningar genom att klicka på kugghjulsikonen för avsnittet.
Scrolla sedan ner till Bakgrund. Vi kommer att göra justeringar av alla tre skärmstorlekarna, så låt oss börja med att välja tablett icon som visas när vi håller muspekaren över Bakgrundsalternativen.
Välj bakgrundsmönster
Se sedan till att Desktop är valt, välj Bakgrundsmönster fliken och klicka Lägg till bakgrundsmönster.
Välj rullgardinsmenyn under bakgrundsmönstret.
Välj den Diagonala ränder bakgrundsmönster från listan. Vi kan modifiera det här mönstret, så att det inte bara är en skärm full av ränder. Så vi kommer att använda detta för att skapa vår unika bakgrund.
- Bakgrundsmönster: Diagonala ränder
Inställningar för bakgrundsmönster
Ändra Mönster färg till rgba(68,40,84,0,13). Denna färg smälter väl ihop med vår bakgrundsfärg.
- Mönsterfärg: rgba(68,40,84,0.13)
Öppna sedan Mönsterstorlek rullgardinsmenyn och välj Anpassad storlek. Ställ in mönsterhöjden till 41vh, mönsterupprepningsursprunget till botten i mitten och mönsterupprepningen till Repetera X (horisontellt). Detta ger oss kontroll över bakgrundsmönstrets storlek och placering på skärmen.
- Mönsterstorlek: Anpassad storlek
- Höjd: 41vh
- Upprepa Ursprung: Botten mitten
- Upprepa: Upprepa X (horisontell)
Bakgrundsinställningar för surfplatta
Därefter måste vi få bakgrunden att fungera bra med olika skärmstorlekar. Vi måste justera mönsterhöjden baserat på skärmstorleken. Rulla tillbaka upp till bakgrundsinställningarna och välj Tablettikon.
Ändra Mönsterhöjd till 30vh.
Telefonens bakgrundsinställningar
Bläddra slutligen tillbaka upp till bakgrundsinställningarna och välj Telefonikon.
Ändra Mönsterhöjd till 25vh. Stäng modulens inställningar och spara din sida.
Andra bakgrundsmönster med anpassad storlek
Vårt andra exempel på bakgrundsmönster i anpassad storlek kommer att lägga till en cirkel i mitten av skärmen. För vår design kommer den att synas bakom acai-skålen i vår utvalda bild.
Välj bakgrundsmönster
I den avsnittsinställningarscrolla ner till Bakgrund och välj surfplattans ikon för att öppna enhetens skärmstorleksinställningar. Välj den SkrivbordsflikenVälj Fliken Bakgrundsmönsteroch klicka Lägg till bakgrundsmönster.
Vi vill Polka Dots för detta exempel. Detta är standardalternativet, så du behöver faktiskt inte öppna rullgardinsmenyn för den här. Vi visar alternativen om du byter från ett annat bakgrundsmönster till det här. Prickar visas automatiskt när du klickar på Lägg till bakgrundsmönster. Dubbelklicka på mönstret eller använd rullgardinsmenyn för att ändra det.
- Bakgrundsmönster: Polka Dots
Ändra Färg till vitt. Detta gör att vi kan lägga till en vit cirkel i bakgrunden.
Nästa. ställ in Mönsterstorlek till Custom, den Höjd till 400vh, och Upprepa ursprung att centrera. Dessa inställningar styr storleken och placeringen av prickarna. I det här fallet har vi skapat en enda prick som ska visas i bakgrunden.
- Mönsterstorlek: Anpassad storlek
- Mönsterhöjd: 400vh
- Upprepa Ursprung: Center
Bakgrundsinställningar för surfplatta
Därefter måste vi se till att det fungerar bra på alla skärmstorlekar. Välj den tablettfliken.
Ändra sedan Mönsterhöjd till 300vh.
Telefonens bakgrundsinställningar
Slutligen, gå tillbaka till bakgrundsinställningarna och välj telefonfliken för att öppna telefonens skärmstorleksinställningar.
Ändra Mönsterhöjd till 200vh. Stäng modulens inställningar och spara din sida.
Tredje exempel på bakgrundsmönster med anpassad storlek
Det här exemplet visar en enda sicksacklinje genom mitten av avsnittet. För den här behöver vi inte justera telefonen separat. Vi låter den följa surfplattans inställningar.
Välj bakgrundsmönster
För vårt tredje exempel på bakgrundsmönster i anpassad storlek, öppna avsnittsinställningar och scrolla ner till Bakgrund. Håll muspekaren över Bakgrundsinställningarna och klicka på surfplatta-ikonen för att öppna enhetsinställningarna. Välj den Skrivbordsfliken och välj Fliken Bakgrundsmönster. Klick Lägg till bakgrundsmönster.
Öppna Dropdown-ruta för bakgrundsmönster och välj Zig Zag 2. Det här mönstret fyller skärmen med zig-zag-linjer, men vi justerar det så att det bara visar en linje.
- Bakgrundsmönster: Zig Zag 2
Ändra bakgrundsmönstret Färg till rgba(68,40,84,0,09). Den här färgen har inte hög kontrast till vår bakgrundsfärg, så den kommer inte att distrahera.
- Bakgrundsmönsterfärg: rgba(68,40,84,0.09)
Ställ in Mönsterstorlek till anpassad storlek, den Mönsterhöjd till 20vh, den Mönster Upprepa Ursprung till Center, och Upprepa mönster för att upprepa X (horisontell). Precis som de andra exemplen styr detta mönstrets storlek och position.
- Mönsterstorlek: Anpassad storlek
- Mönsterhöjd: 20vh
- Upprepa Ursprung: Center
- Mönsterupprepning: Upprepa X (horisontellt)
Bakgrundsinställningar för surfplatta
Bläddra slutligen tillbaka till början av bakgrundsinställningarna och klicka på surfplatta-ikonen. Telefoninställningarna kommer automatiskt att använda dessa inställningar, så vi behöver inte göra justeringar på telefonfliken.
Scrolla ner till Mönsterhöjd och ändra den till 10vh. Stäng modulens inställningar och spara din sida.
Resultat
Här är en titt på varje bakgrundsmönster på skrivbordet, surfplattan och telefonens skärmstorlekar.
Första bakgrundsmönster i anpassad storlek
Skrivbord
Läsplatta
Telefon
Andra bakgrundsmönster i anpassad storlek
Skrivbord
Läsplatta
Telefon
Tredje bakgrundsmönster i anpassad storlek
Skrivbord
Läsplatta
Telefon
Avslutande tankar
Det är vår titt på hur du lägger till en anpassad storlek till ditt bakgrundsmönster med Divi. Divis nya bakgrundsmönster har öppnat många designalternativ. Dessa mönster ser bra ut med våra layouter. Konceptet med att använda en anpassad storlek för ett bakgrundsmönster innebär att vi inte är låsta till att bara upprepa mönster. Divis bakgrundsmönster kan användas till mycket mer. Med hjälp av koncepten som vi täckte här kan du använda vilket som helst av Divis bakgrundsmönster för att skapa dina egna unika bakgrundsdesigner.
Vi vill höra från dig. Har du lagt till en anpassad storlek till ditt bakgrundsmönster med Divi? Berätta för oss om din upplevelse i kommentarerna.