Imaginile de chenar și de fundal continuă să fie elemente de design populare atunci când construiesc site-uri web. Utilizarea imaginilor de fundal potrivite poate adăuga personalitate și stil site-ului dvs. fără a cheltui timp și bani pe grafică personalizată. Și marginile sunt utile pentru a adăuga structură cuprins.

Astăzi le vom aduce pe acestea două împreună prin proiectarea imaginilor de fundal ca margini. Divi are un set de opțiuni utile pentru personalizarea imaginilor de fundal, facilitând proiectarea imaginilor de fundal pentru modele unice de chenar. Acest lucru ne permite să combinăm culorile, degradeurile, umbrele casetei și modurile de amestecare în tot felul de moduri creative.

Să începem.

Ce ai nevoie pentru a începe

Pentru a începe, aveți nevoie de următoarele:

  1. Le Divi tema instalat și activ
  2. O nouă pagină creată de la zero pe front-end (constructor vizual)
  3. Imagini de folosit cuprins fictiv

După aceea, veți avea o pânză goală pentru a începe să proiectați Divi.

Sfaturi generale pentru crearea modelelor de frontieră pentru imagini de fundal

Înainte de a începe construirea, iată câteva sfaturi generale de care trebuie să țineți cont atunci când creați modele de chenar pentru imagini de fundal.

# 1 Alegeți imagini cu multă textură

De cele mai multe ori, veți dori ca marginile dvs. să fie mai înguste. Aceasta înseamnă că nu veți putea vedea o mare parte din imagine. Prin urmare, este util să utilizați imagini care au multă textură. De exemplu, puteți utiliza o fotografie a unui peisaj, un buchet de flori sau un turn înalt. Iată câteva imagini pe care le folosesc pentru acest tutorial.

Varietate darriete plan

# 2 utilizează gradienți și transparență cu marginile imaginii de fundal

Imaginile de fundal pot fi uneori o margine grozavă pentru tine cuprins. Dar de cele mai multe ori veți dori să adăugați suprapuneri imaginii de fundal pentru a obține culoare sau pentru a face fundalurile mai întunecate sau mai deschise. Gradienții de fundal sunt o modalitate excelentă de a adăuga straturi imaginilor de fundal și de a crea modele unice de chenar.

# 3 Folosiți modurile de îmbinare

Folosiți gradiențiUtilizarea modurilor de amestecare pe imaginile de fundal poate aplica culori și texturi unice modelelor de margine. Tot ce trebuie să faceți este să adăugați o culoare de fundal sau un gradient cu imaginea de fundal și apoi să selectați un mod de amestecare pentru imaginea de fundal. Culoarea, Luminozitatea, Înmulțirea și ecranul sunt câteva moduri excelente de amestecare pentru marginile imaginii de fundal.

Utilizați opțiuni de colț rotunjit pentru forme unice

Borduri cu colțuri rotunjite

Nu toate marginile trebuie să aibă margini drepte. Amestecă puțin! Opțiuni de colț rotunjit Divi vă permit să modelați aceste colțuri în mod creativ.

Utilizați imagini de fundal de paralaxă ca margini

Utilizați imagini de paralaxă ca marginiLucrul grozav al paralelei este că dă viață designului prin mișcare. În plus, dacă utilizați imagini de fundal cu paralaxă pentru desenele de margine, puteți crea o mișcare subtilă care să iasă în evidență și să vă scoată în evidență conținutul.

Proiectare de bordură a imaginii de fundal în Divi

Acum că am înțeles ideea generală care stă la baza creării modelelor de frontieră a imaginilor de fundal, să ne imaginăm câteva împreună. Vom construi diferite modele 2. Fiecare va avea un modul de prezentare de bază pentru a servi drept conținut fictiv. Și vom folosi parametrii coloanei pentru a adăuga marginea imaginii de fundal a modulului.

Să începem cu primul nostru design.

#1 imagine de fundal de bord

Acest prim design are o margine îngustă a imaginii de fundal cu o umbră de zonă pentru a face să semene mai mult cu un cadru pentru conținut.

Iată cum se poate proiecta.

Mai întâi, adăugați un rând de două coloane într-o secțiune obișnuită.

Alegeți un aspect cu coloană dublă

Adăugați modul rezumat

Apoi adăugați un modul blurb în coloana din stânga.

Adăugați modul rezumat divi

Odată ce blurb-ul este instalat, deschideți setările de blurb și extrageți imaginea implicită, astfel încât doar titlul și conținutul corpului să fie vizibile.

Resetați imaginea implicită

Apoi, dați textului un fundal alb.

Apoi actualizați parametrii de proiectare a prezentării după cum urmează:

  • Titlul textului: Oswald
  • Corpul poliției: Lato
  • Marja 5% în partea de sus, 5% în partea de jos, 5% în stânga, 5% în dreapta
  • Tapițerie: 7% în partea de sus, 7% în partea de jos, 10% în stânga, 10% în dreapta
  • Colțuri rotunjite: 20px în dreapta sus, 20px în partea stângă jos
  • Box Shadow: vezi captura de ecran

Stilul modulului rezumat modificat

Adăugați o imagine de fundal în coloană

Aceasta are grijă de modulul nostru de prezentare. Acum să adăugăm marginea imaginii de fundal. Pentru a face acest lucru, vom adăuga o imagine de fundal în coloana care conține modulul Blurb. Deschideți setările rândului, apoi setările pentru coloana 1 și adăugați următorul fundal:

  • Imagine de fundal: [încărcați imaginea dorită]
  • Culoarea fundalului: #303a7a
  • Imagine de fundal de amestec: Luminozitate

Combinarea fundalului de culoare DiviApoi actualizați colțurile rotunjite și umbra cutiei după cum urmează:

  • Colțuri rotunjite: 20px în dreapta sus, 20px în partea stângă jos
  • Box Shadow: vezi captura de ecran

Modificarea coloanei de frontieră Divi

Rezultat final

Acum, verificați designul final.

Rezultatul final divi border cu imagine

Imaginea de fundal a numărului # 2

Imagine cu margine pătratăAcest următor design evidențiază faptul că utilizarea imaginilor cu textură înaltă poate crea granițe frumoase, mai ales atunci când le combinați cu modurile de amestecare a imaginilor.

Iată cum se poate proiecta.

Adăugați modulul Blurb

Pentru a crea designul, vom adăuga textul blurb în coloana 2 a aceluiași rând care conține designul 1. Continuați și copiați modulul de aspect # 1 și lipiți-l în coloana 2. Apoi, actualizați setările modulului de prezentare după cum urmează:

  • Colțuri rotunjite: restaurați setările implicite
  • Marja: 10% în partea de sus, 10% în partea de jos, 10% în stânga, 10% în dreapta
  • Tapițerie: 15% în partea de sus, 15% în partea de jos, 10% în stânga, 10% în dreapta
  • Lățimea marginii: 1px
  • Culoarea frontierei: #ffffff

Configurarea spațiului modulului rezumat DiviAdăugați o imagine de fundal în coloană

Cu modulul nostru în loc, deschideți setările liniei și adăugați un gradient de fundal la coloana 2.

  • Gradient de fundal stânga: #f7e0a5
  • Culoare gradient dreapta fundal: rgba (237,240,0,0.79)
  • Gradient Direcție: 90deg
  • Poziția de pornire: 50%
  • Poziția finală: 0%

marginea desenelor imagine de fundal divi

Apoi adăugați o imagine de fundal cu un efect de gradient frumos.

  • Imagine de fundal: [descărcați imaginea]
  • Mix de imagini de fundal: Culoare

Divi mix de culori

După cum puteți vedea, modul de amestecare a culorilor păstrează luminozitatea celor două gradiente de culoare din spatele imaginii pentru a crea un model frumos de margine de imagine cu culori moi.

Rezultat final

Descoperă rezultatul final al proiectării.

Rezultatul final divi

Ultimele gânduri

Crearea de chenare cu imagini este o modalitate ușoară de a adăuga frumusețe și personalitate designului dvs. Designul evidențiat în acest tutorial este făcut pentru a evidenția posibilitățile disponibile cu Divi în proiectarea de chenare unice. Prin urmare, cu diferitele combinații de culori, desenele sunt nelimitate. Deci, obțineți câteva imagini și explorați mai mult designul chenarelor cu imagini pe Divi.

Pentru sănătatea ta.