Kant- og baggrundsbilleder er fortsat populære designelementer, når du bygger hjemmesider. Brug af de rigtige baggrundsbilleder kan tilføje personlighed og stil til dit websted uden at bruge tid og penge på tilpasset grafik. Og grænser er nyttige til at tilføje struktur til din indhold.
I dag skal vi bringe disse to sammen ved at designe baggrundsbilleder som rammer. Divi har et sæt nyttige muligheder for at tilpasse baggrundsbilleder, hvilket gør det nemt at designe baggrundsbilleder til unikke kantdesign. Dette giver os mulighed for at kombinere farver, gradienter, boksskygger og blandingstilstande på alle mulige kreative måder.
Lad os starte.
Hvad du behøver for at komme i gang
For at komme i gang har du brug for følgende:
- Le Divi-tema installeret og aktiv
- En ny side oprettet til at bygge fra bunden på frontend (visuel konstruktør)
- Billeder til brug indhold fiktiv
Derefter vil du have et tomt lærred at begynde at designe i Divi.
Generelle tip til oprettelse af baggrundsbilledmønster
Før du begynder at bygge, er her nogle generelle tip, du skal huske på, når du opretter grænsemønstre til baggrundsbilleder.
# 1 Vælg billeder med meget struktur
Det meste af tiden vil du have, at dine grænser skal være smallere. Dette betyder, at du ikke kan se meget af billedet. Det er derfor nyttigt at bruge billeder, der har meget struktur. For eksempel kan du bruge et foto af et landskab, en buket blomster eller et højt tårn. Her er nogle billeder, jeg bruger til denne vejledning.
# 2 brug gradienter og gennemsigtighed med baggrundsbilledets kanter
Baggrundsbilleder kan nogle gange være en god grænse i sig selv for din indhold. Men det meste af tiden vil du gerne tilføje overlejringer til dit baggrundsbillede for at opnå farve eller for at gøre baggrunde mørkere eller lysere. Baggrundsgradienter er en fantastisk måde at tilføje lag til dine baggrundsbilleder og skabe unikke kantdesign.
# 3 Brug fletningstilstande
Brug af blandingstilstande på dine baggrundsbilleder kan anvende unikke farver og teksturer på kantmønstre. Alt du skal gøre er at tilføje en baggrundsfarve eller en gradient med dit baggrundsbillede og derefter vælge en blandingstilstand til baggrundsbilledet. Farve, lysstyrke, multiplikation og skærm er nogle gode blandingstilstande til baggrundsbilledkanter.
Brug afrundede hjørneindstillinger til unikke former
Ikke alle kanter behøver at have lige kanter. Bland det lidt sammen! Muligheder for afrundede hjørner Divi giver dig mulighed for at forme disse hjørner kreativt.
Brug parallaks baggrundsbilleder som grænser
Det store ved parallax er, at det bringer design til live med bevægelse. Derudover, hvis du bruger baggrundsbilleder med parallaks til dine kantdesign, kan du oprette subtil bevægelse, der skiller sig ud og får dit indhold til at skille sig ud.
Baggrundsbilleddesign i Divi
Nu hvor vi forstår den generelle idé, der ligger til grund for oprettelsen af baggrundsbilledegrænsemønstre, lad os forestille os et par sammen. Vi bygger 2 forskellige modeller. Hver har et grundlæggende præsentationsmodul til at fungere som fiktivt indhold. Og vi vil bruge kolonneparametrene til at tilføje modulets baggrundsbillede.
Lad os starte med vores første design.
#1 baggrundsbillede på kant
Dette første design har en smal baggrundsbilledkant med en områdeskygge, der får det til at ligne en ramme til indholdet.
Sådan designes det.
Først skal du tilføje en række med to kolonner til en almindelig sektion.
Tilføj oversigtsmodul
Tilføj derefter et blurb-modul i venstre kolonne.
Når blurb er på plads, skal du åbne blurb-indstillinger og udtrække standardbilledet, så kun titlen og kropsindholdet er synligt.
Giv derefter din tekst en hvid baggrund.
Opdater derefter præsentationens designparametre som følger:
- Tekstens titel: Oswald
- Body Police: Lato
- Marginal 5% øverst, 5% i bunden, 5% til venstre, 5% til højre
- Polstring: 7% øverst, 7% i bunden, 10% til venstre, 10% til højre
- Rundede hjørner: 20px øverst til højre, 20px nederst til venstre
- Box Shadow: se skærmbillede
Føj baggrundsbillede til kolonnen
Dette tager os af vores præsentationsmodul. Lad os nu tilføje vores baggrundsbilledkant. For at gøre dette vil vi tilføje et baggrundsbillede til kolonnen, der indeholder Blurb-modulet. Åbn rækkeindstillingerne, derefter indstillingerne for kolonne 1, og tilføj følgende baggrund:
- Baggrundsbillede: [upload det billede du ønsker]
- Baggrundsfarve: #303a7a
- Baggrundsbillede af blanding: Lysstyrke
Opdater derefter de afrundede hjørner og skyggen af kassen som følger:
- Rundede hjørner: 20px øverst til højre, 20px nederst til venstre
- Box Shadow: se skærmbillede
Endelig resultat
Kontroller nu det endelige design.
Baggrundsbillede på kant # 2
Dette næste design fremhæver det faktum, at brug af stærkt strukturerede billeder kan skabe smukke rammer, især når du kombinerer dem med billedblandingstilstande.
Sådan designes det.
Tilføj Blurb-modulet
For at oprette designet skal vi tilføje blurb-teksten til kolonne 2 i den samme række, der indeholder design nr. 1. Gå videre og kopier designlayoutmodul nr. 1 og indsæt det i kolonne 2. Derefter opdater præsentationsmodulets indstillinger som følger:
- Rundede hjørner: gendan standardindstillinger
- Marginal: 10% øverst, 10% i bunden, 10% til venstre, 10% til højre
- Polstring: 15% øverst, 15% i bunden, 10% til venstre, 10% til højre
- Bredde på grænsen: 1px
- Border farve: #ffffff
Føj baggrundsbillede til kolonnen
Åbn linjeindstillingerne med vores modul på plads og tilføj en baggrundsgradient til 2-kolonnen.
- Venstre baggrund gradient: #f7e0a5
- Højre baggrundsgradient Farve: rgba (237,240,0,0.79)
- Gradientretning: 90deg
- Startposition: 50%
- Slutposition: 0%
Tilføj derefter et baggrundsbillede med en dejlig gradienteffekt.
- Baggrundsbillede: [download billede]
- Baggrundsbilledblanding: Farve
Som du kan se, bevarer farveblandingstilstanden lysstyrken på de to farveforløb bag billedet for at skabe et flot billedkantmønster med bløde farver.
Endelig resultat
Oplev det endelige resultat af designet.
Seneste tanker
Oprettelse af grænser med billeder er en nem måde at tilføje skønhed og personlighed til dit design. Designet fremhævet i denne vejledning er lavet for at fremhæve de muligheder, der findes med Divi i design af unikke grænser. Derfor, med de forskellige farvekombinationer, er designene ubegrænsede. Så tag nogle billeder og udforsk mere design af grænser med billeder på Divi.
Til dit helbred.
