Kant- og bakgrunnsbilder fortsetter å være populære designelementer når du bygger nettsteder. Ved å bruke de riktige bakgrunnsbildene kan du legge til personlighet og stil til nettstedet ditt uten å bruke tid og penger på tilpasset grafikk. Og grenser er nyttige for å legge til struktur til din innhold.
I dag skal vi bringe disse to sammen ved å designe bakgrunnsbilder som rammer. Divi har et sett med nyttige alternativer for å tilpasse bakgrunnsbilder, noe som gjør det enkelt å designe bakgrunnsbilder for unike kantdesign. Dette lar oss kombinere farger, gradienter, boksskygger og blandingsmoduser på alle slags kreative måter.
La oss begynne.
Hva du trenger for å komme i gang
For å komme i gang trenger du følgende:
- Le Divi-tema installert og aktiv
- En ny side laget for å bygge fra bunnen av på front-enden (visuell konstruktør)
- Bilder å bruke til innhold fiktiv
Etter det vil du ha et tomt lerret å begynne å designe i Divi.
Generelle tips for å lage grensemønster for bakgrunnsbilder
Før du begynner å bygge, er her noen generelle tips du må huske på når du oppretter grensemønster for bakgrunnsbilder.
# 1 Velg bilder med mye tekstur
Det meste av tiden vil du at grensene dine skal være smalere. Dette betyr at du ikke vil kunne se mye av bildet. Det er derfor nyttig å bruke bilder som har mye tekstur. For eksempel kan du bruke et bilde av et landskap, en blomsterbukett eller et høyt tårn. Her er noen bilder jeg bruker til denne opplæringen.
# 2 bruker graderinger og gjennomsiktighet med kantene til bakgrunnsbildet
Bakgrunnsbilder kan noen ganger være en flott grense for deg selv innhold. Men mesteparten av tiden vil du legge til overlegg til bakgrunnsbildet for å oppnå farger eller for å gjøre bakgrunner mørkere eller lysere. Bakgrunnsgradienter er en fin måte å legge til lag på bakgrunnsbildene og lage unike kantdesign.
# 3 Bruk flettemodusene
Ved å bruke blandingsmodus på bakgrunnsbildene dine kan du bruke unike farger og teksturer på kantmønstre. Alt du trenger å gjøre er å legge til en bakgrunnsfarge eller gradient med bakgrunnsbildet ditt og deretter velge en blandingsmodus for bakgrunnsbildet. Farge, lysstyrke, multiplikasjon og skjerm er noen gode blandingsmoduser for bakgrunnsbildekanter.
Bruk avrundede hjørnealternativer for unike former
Ikke alle grenser trenger å ha rette kanter. Bland det litt sammen! Alternativer for avrundede hjørner Divi lar deg forme disse hjørnene kreativt.
Bruk bakgrunnsbilder parallaks som grenser
Det som er bra med parallax er at det bringer design til liv med bevegelse. I tillegg, hvis du bruker bakgrunnsbilder med parallaks for kantdesignene dine, kan du lage subtile bevegelser som skiller seg ut og gjør innholdet ditt skiller seg ut.
Bakgrunnsbilde grensedesign i Divi
Nå som vi forstår den generelle ideen som ligger til grunn for å lage grensemønstre for bakgrunnsbilde, la oss tenke oss noen få sammen. Vi skal bygge 2 forskjellige modeller. Hver vil ha en grunnleggende presentasjonsmodul som skal tjene som fiktivt innhold. Og vi vil bruke kolonneparametrene for å legge til bakgrunnsgrensen til modulen.
La oss starte med vårt første design.
#1 bakgrunnsbilde på grensen
Denne første designen har en smal bakgrunnskant med en områdeskygge slik at den ser mer ut som en ramme for innholdet.
Slik utformer du det.
Først legger du til en rad med to kolonner i en vanlig seksjon.
Legg til sammendragsmodul
Legg deretter til en blurb-modul i venstre kolonne.
Når uklarheten er på plass, åpner du innstillinger for eksplosjonstekst og trekker ut standardbildet slik at bare tittelen og kroppsinnholdet er synlig.
Gi deretter teksten din hvit bakgrunn.
Oppdater deretter parameterne for presentasjonsdesign som følger:
- Teksttittel: Oswald
- Kroppspoliti: Lato
- Marg 5% øverst, 5% nederst, 5% til venstre, 5% til høyre
- Polstring: 7% øverst, 7% nederst, 10% til venstre, 10% til høyre
- Avrundede hjørner: 20px øverst til høyre, 20px nederst til venstre
- Box Shadow: se skjermbilde
Legg til bakgrunnsbilde i kolonnen
Dette tar vare på presentasjonsmodulen vår. La oss nå legge til bakgrunnsbildegrensen. For å gjøre dette vil vi legge til et bakgrunnsbilde i kolonnen som inneholder Blurb-modulen. Åpne radinnstillingene, deretter innstillingene for kolonne 1 og legg til følgende bakgrunn:
- Bakgrunnsbilde: [last opp bildet du ønsker]
- Bakgrunnsfarge: #303a7a
- Bakgrunnsbilde for blanding: Lysstyrke
Oppdater deretter de avrundede hjørnene og skyggen av boksen som følger:
- Avrundede hjørner: 20px øverst til høyre, 20px nederst til venstre
- Box Shadow: se skjermbilde
Endelig resultat
Nå, sjekk den endelige designen.
Bakgrunnsbilde på grensen # 2
Denne neste designen fremhever det faktum at bruk av svært strukturerte bilder kan skape vakre grenser, spesielt når du kombinerer dem med bildeblandingsmodus.
Slik utformer du det.
Legg til Blurb-modulen
For å lage designet, skal vi legge til uklar tekst til kolonne 2 i samme rad som inneholder design nr. 1. Gå videre og kopier designlayoutmodul nr. 1 og lim den inn i kolonne 2. Deretter, oppdater presentasjonsmodulinnstillingene som følger:
- Avrundede hjørner: gjenopprett standardinnstillinger
- Margin: 10% øverst, 10% nederst, 10% til venstre, 10% til høyre
- Polstring: 15% øverst, 15% nederst, 10% til venstre, 10% til høyre
- Bredde på grensen: 1px
- Border farge: #ffffff
Legg til bakgrunnsbilde i kolonnen
Med vår modul på plass, åpne linjeinnstillingene og legg til en bakgrunnsgradient i 2-kolonnen.
- Gradient i venstre bakgrunn: #f7e0a5
- Høyre bakgrunnsgradient Farge: rgba (237,240,0,0.79)
- Gradient Retning: 90deg
- Startposisjon: 50%
- Sluttposisjon: 0%
Legg deretter til et bakgrunnsbilde med en fin gradienteffekt.
- Bakgrunnsbilde: [last ned bilde]
- Bakgrunnsbildemiks: Farge
Som du kan se, bevarer fargeblandingsmodus lysstyrken til de to fargegradientene bak bildet for å skape et fint bildemønster med myke farger.
Endelig resultat
Oppdag det endelige resultatet av designen.
Siste tanker
Å lage grenser med bilder er en enkel måte å tilføre skjønnhet og personlighet til designet ditt. Designet som er fremhevet i denne veiledningen er laget for å markere mulighetene som er tilgjengelige med Divi i utformingen av unike grenser. Derfor, med de forskjellige fargekombinasjonene, er designene ubegrensede. Så få noen bilder og utforsk mer design av grenser med bilder på Divi.
Til helsen din.
