Gå till innehållet

Hur man skapar gränser med bakgrunder på Divi

Divi: det enklaste WordPress-temat att använda

Divi: Det bästa WordPress-temat hela tiden!

mer 901.000-nedladdningar, Divi är det mest populära WordPress-temat i världen. Den är komplett, lätt att använda och levereras med mer än 62 gratis mallar. [Rekommenderas]

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:

  1. Divi-tema installerat och aktivt
  2. En ny sida skapad för att bygga från grunden på framsidan (visuell konstruktör)
  3. 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.

Variety darriete plan

# 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

Använd lutningarGenom 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

Gränser med rundade hörn

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

Använd parallaxbilder som gränserDet 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.

Skapa enkelt din webbplats med Elementor

Med Elementor kan du enkelt skapa en webbdesign med ett professionellt utseende. Sluta betala dyra för vad du kan göra själv. [Fritt]

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.

Välj en dubbel kolumnlayout

Lägg till översiktsmodul

Lägg sedan till en modulmodul i den vänstra kolumnen.

Lägg till divi-sammanfattningsmodul

När blurb är på plats öppnar du blurb-inställningar och extraherar standardbilden så att endast titeln och kroppsinnehållet syns.

Återställ standardbild

Ge din text sedan en vit bakgrund.

Letar du efter de bästa WordPress-teman och plugins?

Ladda ner de bästa plugins och WordPress-teman på Envato och enkelt skapa din webbplats. Redan mer än 49.720.000-nedladdningar. [EXKLUSIV]

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

Modifierad sammanfattningsmodulstil

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

Sammanfoga divi färgbakgrundUppdatera 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

Ändring av divi border column

Slutresultat

Kontrollera nu den slutliga designen.

Slutresultat divi gräns med bild

Border bakgrundsbild # 2

Bild med fyrkantig kantDen 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

Divi sammanfattningsmodulavståndskonfigurationLä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%

gränsritningar bakgrundsbild divi

Lägg sedan till en bakgrundsbild med en fin gradienteffekt.

  • Bakgrundsbild: [ladda ner bild]
  • Bakgrundsbildmix: Färg

Divi färgblandning

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.

Skapa enkelt din webbutik

Ladda ner gratis WooCommerce, de bästa e-handelspluggarna för att sälja dina fysiska och digitala produkter på WordPress. [Rekommenderas]

Slutresultat

Upptäck slutresultatet av designen.

Slutresultat divi

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.

Den här artikeln innehåller kommentarer 0

Lämna en kommentar

Din e-postadress kommer inte att publiceras. Obligatoriska fält är markerade *

Den här webbplatsen använder Akismet för att minska oönskade. Läs mer om hur dina kommentarer data används.

Tillbaka till toppen
4 aktier
del4
tweet
Enregistrer