Cum să creați margini de imagine frumoase utilizând noile opțiuni ale Divi

În tutorialul Divi de astăzi, vă vom arăta cum să creați margini frumoase de imagine pe următorul site web pe care îl creați. Scopul acestei postări este de a demonstra cum puteți crea rezultate frumoase care să se potrivească cu imaginile pe care le utilizați (și cu restul site-ului dvs. web).

Cu noile opțiuni Divi, obținerea unor rezultate uimitoare este mai ușoară ca niciodată. Va trebui să faceți doar câteva modificări pe care vă vom arăta cum să le faceți și veți fi gata să vă duceți designul web la nivelul următor. Toate cele 8 exemple pe care vi le vom împărtăși nu vor folosi altceva decât opțiunile încorporate oferite de Divi Builder și Image Module.

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