Gräns- och bakgrundsbilder är fortfarande populära designelement när man bygger webbplatser. Att använda rätt bakgrundsbilder kan lägga till personlighet och stil på din webbplats utan att slösa tid och pengar på anpassad grafik. Och gränser är användbara för att lägga till struktur i ditt innehåll.
Idag ska vi sammanföra dessa två styrkor genom att designa bakgrundsbilder som gränser. Divi har en uppsättning användbara alternativ för att anpassa bakgrundsbilder, vilket gör det enkelt att designa bakgrundsbilder för unika kantdesigner. Detta gör att vi kan kombinera färger, lutningar, rutskuggor och blandningslägen på alla typer av kreativa sätt.
Låt oss börja.
Vad du behöver för att komma igång
För att komma igång behöver du följande:
- Divi-tema installerat och aktivt
- En ny sida skapad för att bygga från grunden på framsidan (visuell konstruktör)
- Bilder att använda för fiktivt innehåll
Efter det har du en tom duk för att börja designa i Divi.
Allmänna tips för att skapa bakgrundsbildmönster
Innan du börjar bygga är här några allmänna tips att tänka på när du skapar gränsmönster för bakgrundsbilden.
# 1 Välj bilder med mycket textur
För det mesta vill du att dina gränser ska vara smalare. Det betyder att du inte kommer att kunna se mycket av bilden. Det är därför användbart att använda bilder som har mycket struktur. Du kan till exempel använda ett foto av ett landskap, en bukett blommor eller ett högt torn. Här är några bilder jag använder för denna handledning.
# 2 använder lutningar och transparens med bakgrundsbildens ramar
Bakgrundsbilder på egen hand kan ibland vara en utmärkt gräns för ditt innehåll. Men för det mesta vill du lägga till överlägg i din bakgrundsbild för att få lite färg eller för att göra bakgrunden mörkare eller ljusare. Bakgrundsgradienter är ett utmärkt sätt att lägga till ett överlägg i dina bakgrundsbilder och skapa unika kantmönster.
# 3 Använd sammanslagningslägen
Genom att använda blandningslägen på dina bakgrundsbilder kan du använda unika färger och texturer på kantmönster. Allt du behöver göra är att lägga till en bakgrundsfärg eller en lutning med bakgrundsbilden och sedan välja ett blandningsläge för bakgrundsbilden. Färg, ljusstyrka, multiplikation och skärm är några fantastiska blandningslägen för bakgrundsbildramar.
Använd rundade hörnalternativ för unika former
Alla gränser behöver inte ha raka kanter. Blanda lite! Divis rundade hörnalternativ gör att du kan forma dessa hörn kreativt.
Använd parallax bakgrundsbilder som gränser
Det fantastiska med parallax är att det väcker design till liv med rörelse. Dessutom, om du använder bakgrundsbilder med parallax för dina gränsdesigner kan du skapa subtila rörelser som sticker ut och gör att ditt innehåll sticker ut.
Bakgrundsbildgränsdesign i Divi
Nu när vi förstår den allmänna idén som ligger bakom skapandet av bakgrundsbildgränsmönster, låt oss föreställa oss några tillsammans. Vi kommer att bygga 2 olika modeller. Var och en kommer att ha en grundläggande presentationsmodul för att fungera som fiktivt innehåll. Och vi kommer att använda kolumnparametrarna för att lägga till bakgrundsbildgränsen för modulen.
Låt oss börja med vår första design.
#1 bakgrundsbild på gränsen
Denna första design har en smal bakgrundsbildkant med en områdesskugga för att få den att se mer ut som en ram för innehållet.
Så här utformar du det.
Lägg först till en rad med två kolumner i ett vanligt avsnitt.
Lägg till översiktsmodul
Lägg sedan till en modulmodul i den vänstra kolumnen.
När blurb är på plats öppnar du blurb-inställningar och extraherar standardbilden så att endast titeln och kroppsinnehållet syns.
Ge din text sedan en vit bakgrund.
Uppdatera sedan presentationsparametrarna enligt följande:
- Textens titel: Oswald
- Kroppspolisen: Lato
- Marginal 5% överst, 5% längst ner, 5% till vänster, 5% till höger
- Klädsel: 7% längst upp, 7% längst ner, 10% till vänster, 10% till höger
- Rundade hörn: 20px längst upp till höger, 20px längst ner till vänster
- Box Shadow: se skärmdump
Lägg till bakgrundsbild i kolumnen
Detta tar hand om vår presentationsmodul. Låt oss nu lägga till vår bakgrundsbildram. För att göra detta lägger vi till en bakgrundsbild i kolumnen som innehåller Blurb-modulen. Öppna radinställningarna, sedan inställningarna för kolumn 1 och lägg till följande bakgrund:
- Bakgrundsbild: [ladda upp bilden efter eget val]
- Bakgrundsfärg: #303a7a
- Blandningsbakgrundsbild: Ljusstyrka
Uppdatera sedan de rundade hörnen och rutans skugga enligt följande:
- Rundade hörn: 20px längst upp till höger, 20px längst ner till vänster
- Box Shadow: se skärmdump
Slutresultat
Kontrollera nu den slutliga designen.
Border bakgrundsbild # 2
Den här nästa designen belyser det faktum att användning av högstrukturerade bilder kan skapa vackra gränser, särskilt när du kombinerar dem med lägen för blandning av bilder.
Så här utformar du det.
Lägg till Blurb-modulen
För att skapa designen kommer vi att lägga till blurb-texten i kolumn 2 i samma rad som innehåller design nr 1. Fortsätt och kopiera designmodul nr 1 och klistra in den i kolumn 2. Sedan, uppdatera inställningarna för presentationsmodulen enligt följande:
- Rundade hörn: återställ standardinställningarna
- Marginal: 10% längst upp, 10% längst ner, 10% till vänster, 10% till höger
- Klädsel: 15% längst upp, 15% längst ner, 10% till vänster, 10% till höger
- Breddens bredd: 1px
- Gränsfärg: #ffffff
Lägg till bakgrundsbild i kolumnen
Med vår modul på plats, öppna radinställningarna och lägg till en bakgrundsgradient i 2-kolumnen.
- Vänster bakgrundsgradient: #f7e0a5
- Höger bakgrundsgradient Färg: rgba (237,240,0,0.79)
- Gradientriktning: 90deg
- Startposition: 50%
- Slutlig position: 0%
Lägg sedan till en bakgrundsbild med en fin gradienteffekt.
- Bakgrundsbild: [ladda ner bild]
- Bakgrundsbildmix: Färg
Som du kan se bevarar färgblandningsläget ljusstyrkan hos de två färggradienterna bakom bilden för att skapa ett fint bildmönster med mjuka färger.
Slutresultat
Upptäck slutresultatet av designen.
Senaste tankar
Att skapa gränser med bilder är ett enkelt sätt att lägga till skönhet och personlighet i din design. Designen som markeras i denna handledning är gjord för att belysa de möjligheter som finns med Divi i utformningen av unika gränser. Därför, med de olika färgkombinationerna, är designen obegränsad. Så få några bilder och utforska mer utformningen av gränser med bilder på Divi.
Till din hälsa.
