homefinance blog
Cum să creați margini de imagine frumoase utilizând noile opțiuni ale Divi
Trage cu ochiul Să aruncăm o privire la rezultatele la care vă puteți aștepta de la această postare: 
Cum să creați margini de imagine frumoase utilizând noile opțiuni ale Divi Abonați-vă la canalul nostru Youtube Fundal de gradient Prima posibilitate pe care o aveți pentru a obține margini frumoase de imagine este folosirea numai a unui fundal degradat. Experimentând diversele setări de fundal de gradient, puteți obține rezultate simple, dar elegante. Vă vom arăta trei exemple de margini ale imaginii care constau doar dintr-un fundal degradat. Standard Primul exemplu pe care îl vom trata este cel mai simplu și modest dintre toate; o margine standard de imagine cu gradient. Rezultatul vă vom arăta cum arata crearea astfel:
Fila Conținut Începeți prin alegerea unui fundal de gradient în fila Conținut. Pentru acest exemplu, am folosit următoarele setări:
- Prima culoare: # 081e8c
- A doua culoare: # 764f9b
- Tipul gradientului: liniar
- Direcția gradientului: 269 grade
- Poziția inițială: 40%
- Poziție finală: 60%
Fila de proiectare Următorul și ultimul lucru pe care va trebui să-l faceți este să adăugați ceva umplutură imaginii. Este atât de simplu. Accesați fila Design și adăugați „10 px” în partea de sus, jos, dreapta și stânga. 
Părțile laterale În continuare, avem o margine a imaginii care se afișează numai în partea stângă și dreapta a imaginii. Folosirea acestui tip de margine de imagine oferă o notă suplimentară frumoasă imaginii fără a pune prea mult accent pe marginea însăși.
Fila Conținut Pentru a obține acest tip de margine de imagine, începeți prin adăugarea următorului fundal de gradient la imagine:
- Prima culoare: rgba (255,255,255,0)
- A doua culoare: # 0a8da8
- Tipul gradientului: liniar
- Direcția gradientului: 166 grade
- Poziția inițială: 29%
- Poziție finală: 52%
Fila de proiectare În fila Proiectare, singurul lucru de care aveți nevoie este „10 px” de umplutură pentru partea dreaptă și cea stângă. 
Un colț Continuând, puteți crea, de asemenea, fundaluri de colț pentru imaginile de pe site-ul dvs. web. Acest tip de chenar este excelent de utilizat atunci când doriți să subliniați o culoare care este utilizată în interiorul imaginii.
Fila Conținut Pentru al treilea exemplu de imagine, utilizați următorul fundal de gradient:
- Prima culoare: rgba (58,8,1,0.58)
- A doua culoare: rgba (41.196.169,0)
- Direcția gradientului: 152deg
- Poziția inițială: 34%
- Poziție finală: 28%
Fila de proiectare Apoi, adăugați „20px” la fiecare dintre umpluturi. 
Bordură imagine și fundal gradient O altă posibilitate pe care o aveți este combinarea unui fundal degradat cu un chenar de imagine. Și acest lucru poate oferi rezultate uimitoare, așa cum veți putea asista în următoarele patru exemple. Gradient subtil Prima combinație de fundal de gradient și margine de imagine este simplă, dar frumoasă. Folosind aceleași culori pentru fundalul de gradient și pentru margine, marginea imaginii se simte cumva cum se umple de culoare.
Fila Conținut Începeți prin adăugarea următoarelor setări de fundal de gradient la imagine:
- Prima culoare: rgba (255,255,255,0)
- A doua culoare: # 777777
- Tipul gradientului: liniar
- Direcția gradientului: 180 grade
- Poziția inițială: 65%
- Poziție finală: 78%
Fila de proiectare Treceți la fila Proiectare și utilizați următoarele setări în subcategoria Border:
- Utilizați chenarul: Da
- Culoare margine: # 777777
- Lățimea chenarului: 3 px
- Stilul chenarului: solid
În cele din urmă, adăugați o umplutură de „7px” la toate opțiunile de umplere. 
În formă În continuare, avem un exemplu care este minunat pentru a atrage atenția vizitatorilor. Imaginea în sine conține, în acest caz, culori mai deschise, ceea ce creează un echilibru frumos cu marginea mai întunecată.
Fila Conținut Setările de fundal de gradient de care veți avea nevoie pentru această margine de imagine sunt următoarele:
- Prima culoare: rgba (53,0188,0,1)
- A doua culoare: # 680061
- Tipul gradientului: radial
- Direcție radială: centru
- Poziția inițială: 80%
- Poziție finală: 80%
Fila de proiectare Accesați fila Proiectare și utilizați următoarea margine:
- Utilizați chenarul: Da
- Culoare margine: # 9a00bc
- Lățimea chenarului: 1 px
- Stilul chenarului: solid
Derulați în jos și adăugați următoarea umplere la imagine:
- Sus: 7 px
- Dreapta: 5 px
- Partea de jos: 7 px
- Stânga: 5 px
Bordură dublă Utilizarea unei margini duble în combinație cu un fundal degradat poate oferi și câteva rezultate uimitoare. Aruncați o privire:
Fila Conținut Culoarea de fundal de gradient pe care am folosit-o în acest exemplu este următoarea:
- Prima culoare: rgba (224,43,32,0.61)
- A doua culoare: rgba (12.113.195,0.87)
- Tipul gradientului: radial
- Direcție radială: centru
- Poziția inițială: 71%
- Poziție finală: 93%
Fila de proiectare Continuând, utilizați următoarele setări pentru subcategoria Border:
- Utilizați chenarul: Da
- Culoare margine: # f4f4f4 (se potrivește cu culoarea de fundal a secțiunii)
- Lățimea chenarului: 8 px
- Stilul chenarului: dublu
Și adăugați „10 px” în partea de sus, jos, dreapta și stânga a căptușirii imaginii. 
Colțuri de triunghi Continuând, puteți crea, de asemenea, câteva colțuri mici în marginea dvs. utilizând opțiunea de fundal degradat în combinație cu o margine punctată.
Fila Conținut Pentru a atinge marginea imaginii pe care v-am arătat-o mai sus, utilizați următoarele setări de fundal de gradient:
- Prima culoare: rgba (163.103,6,0)
- A doua culoare: # e09900
- Tipul gradientului: radial
- Direcție radială: centru
- Poziția inițială: 97%
- Poziție finală: 97%
Fila de proiectare În fila Proiectare, va trebui să avem și următoarele setări de margine:
- Utilizați chenarul: Da
- Culoare margine: # e09900
- Lățimea chenarului: 2 px
- Stilul frontierei: punctat
În cele din urmă, vom avea nevoie de o căptușeală de „8 px” pentru căptușeala de sus, de jos, la stânga și la dreapta.
Model și fundal de gradient Ultima posibilitate pe care vrem să o punem în lumina reflectoarelor este utilizarea simultană a unui model și a unui gradient de fundal. Acest lucru vă permite să vă jucați cu aspectul imaginilor. Jucăuş Această margine conține un fundal degradat de două culori, care sunt folosite și în interiorul imaginii. Prin adăugarea unui model de fundal, imaginea oferă un pic mai multă atmosferă site-ului dvs. web. 
Fila Conținut Pentru ultimul exemplu, vom folosi următoarele setări de fundal de gradient:
- Prima culoare: rgba (4,49,96,0.51)
- A doua culoare: rgba (119,74,15,0.51)
- Tipul gradientului: liniar
- Direcția gradientului: 180 grade
- Poziția inițială: 0%
- Poziție finală: 100%
Fila de proiectare Apoi, adăugăm și un fundal de model. Modelul pe care l-am folosit în acest exemplu provine de la Toptal. Puteți utiliza modelele lor pentru tot felul de scopuri, asigurați-vă că le creditați în codul dvs., așa cum se menționează în întrebările frecvente. După ce ați adăugat fundalul modelului, utilizați și următoarele setări:
- Dimensiunea imaginii de fundal: copertă
- Poziția imaginii de fundal: Centru
- Repetarea imaginii de fundal: fără repetare
- Amestec de imagine de fundal: înmulțiți
Ultimul lucru pe care trebuie să-l faceți este să adăugați o căptușeală de „12 px” în partea de sus, jos, dreapta și stânga a căptușirii imaginii. 
Gânduri finale În această postare, v-am arătat câteva moduri diferite de a crea margini frumoase ale imaginii. Aceste opțiuni vă oferă o perspectivă asupra lucrurilor pe care le puteți face cu noile opțiuni Divi fără a utiliza CSS suplimentar. Dacă aveți întrebări sau sugestii; asigurați-vă că lăsați un comentariu în secțiunea de comentarii de mai jos! Asigurați-vă că vă abonați la newsletter-ul nostru de e-mail și la canalul YouTube, astfel încât să nu pierdeți niciodată un anunț mare, un sfat util sau un cadou gratuit Divi! Imagine prezentată de Mr Aesthetics / shutterstock.com