Descărcați 5 imagini GRATUITE la frontieră pentru Divi

Publicat: 2018-10-01

Este întotdeauna minunat să ai resurse suplimentare pe care le poți folosi atunci când construiești un nou site web pentru tine sau pentru un client. De aceea, ne asigurăm că primiți noi pachete de aspect în fiecare săptămână. Dar există și alte resurse care pot fi utile, cum ar fi „imagini de margine” sau imagini pe care le puteți folosi de-a lungul unei părți sau altei a unui element de design Divi pentru a adăuga o înflorire stilistică. Utilizarea opțiunilor încorporate Divi împreună cu aceste imagini de margine poate aduce rezultate uimitoare. În această postare, v-am furnizat 5 imagini de margine diferite pe care le puteți descărca gratuit mai jos. Vă vom explica cum puteți utiliza aceste imagini de margine în avantajul dvs. și să creați un rezultat final uimitor.

Să ajungem la asta!

previzualizare

Să aruncăm o privire la diferitele imagini de frontieră pe care le veți putea descărca mai jos în această postare. Pentru fiecare dintre forme, veți găsi 4 versiuni: una sus, jos, stânga și dreapta. Aceste imagini vă vor permite să obțineți exact același rezultat așa cum se arată în primele patru imagini de mai jos:

forme de margine

Descărcați fișierele imagine GRATUIT

Pentru a pune mâna pe imaginile de margini gratuite, va trebui mai întâi să le descărcați folosind butonul de mai jos. Pentru a avea acces la descărcare, va trebui să vă abonați la lista noastră de e-mail Divi Daily folosind formularul de mai jos. Ca nou abonat, veți primi și mai multe bunătăți Divi și un pachet Divi Layout gratuit în fiecare luni! Dacă sunteți deja pe listă, pur și simplu introduceți adresa de e-mail de mai jos și faceți clic pe descărcare. Nu veți fi „resubscris” și nu veți primi e-mailuri suplimentare.

Descărcați fișierele
Descarcă gratis

Descarcă gratis

Înscrieți-vă la buletinul informativ Divi și vă vom trimite prin e-mail o copie a pachetului final de planificare a paginii de destinație Divi, plus o mulțime de alte resurse, sfaturi și trucuri uimitoare și gratuite Divi. Urmăriți-vă și veți fi un maestru Divi în cel mai scurt timp. Dacă sunteți deja abonat, pur și simplu introduceți adresa de e-mail de mai jos și faceți clic pe descărcare pentru a accesa pachetul de aspect.

V-ați abonat cu succes. Vă rugăm să verificați adresa de e-mail pentru a vă confirma abonamentul și pentru a obține acces la pachetele de layout Divi săptămânale gratuite!

Abordare

  • După ce descărcați și dezarhivați folderul care conține toate cele 5 imagini de margine, veți găsi 4 subfoldere: marginea de sus, marginea de jos, marginea din stânga și marginea din dreapta
  • Acest lucru înseamnă că există un total de 20 de fișiere de imagini disponibile pentru dvs. de utilizat
  • Mai târziu, în această postare, veți găsi setările însoțitoare care corespund fiecărei părți ale frontierei
  • În plus, puteți combina imaginile de la margini cu suprapuneri de gradient
  • Aceste suprapuneri de culori vă vor ajuta să faceți ca imaginile să apară la fel de vibrante sau subtile pe care doriți
  • Sunteți liber să utilizați aceste imagini de frontieră fără restricții, chiar și în scopuri comerciale

Crearea designului general

Adăugați o secțiune nouă

Spațiere

Să începem prin a crea designul general pe care l-am folosit pentru a prezenta imaginile de la margini. Deschideți o pagină nouă sau existentă, adăugați o nouă secțiune obișnuită și adăugați câteva umpluturi personalizate:

  • Căptușeală superioară: 300 px
  • Căptușeală inferioară: 300 px

forme de margine

Adăugați un rând nou

Structura coloanei

Continuați adăugând un rând nou în secțiunea dvs. utilizând următoarea structură de coloane:

forme de margine

Dimensionare

Fără a adăuga încă module, deschideți setările rândului, accesați setările Dimensionare și faceți lățimea completă a rândului.

  • Faceți acest rând lățime completă: Da

forme de margine

Adăugați modulul de text al titlului în coloana 1

Adăugați casetă de conținut H2

Să începem să adăugăm câteva module! Primul modul necesar este un modul de text. Adăugați una la prima coloană și adăugați copia H2 la alegere în caseta de conținut.

forme de margine

Setări text antet

Apoi, faceți câteva modificări la setările de text H2 din fila Proiectare.

  • Titlul 2 Font: Abril Fatface
  • Titlul 2 Dimensiune text: 80 px (desktop), 70 px (tabletă), 50 px (telefon)

forme de margine

Spațiere

Continuați adăugând o marjă în partea de sus a acestui modul de text.

  • Marja superioară: 150 px

forme de margine

Adăugați modulul de text link în coloana 1

Adăugați un link la caseta de conținut

Chiar sub titlul Modul text pe care tocmai l-ați adăugat, continuați și adăugați un nou modul text. Folosim acest modul de text ca buton, deci asigurați-vă că adăugați un link la CTA.

forme de margine

Setări text link

Apoi, modificați setările pentru textul linkului în fila Proiectare.

  • Link Greutate font: Ultra Bold
  • Stil font de legătură: majuscule
  • Culoare text link: # 000000
  • Dimensiune text link: 21 px

forme de margine

Spațiere

Adăugați niște margini superioare pentru a crea spațiu între acest modul de text și cel anterior.

  • Marja superioară: 100 px

forme de margine

Frontieră

În cele din urmă, adăugați o margine inferioară subtilă la linkul Modul text.

  • Lățimea marginii inferioare: 1 px
  • Culoarea chenarului inferior: # 333333

forme de margine

Adăugați modulul de descriere a textului în coloana 2

Setări text

A doua coloană are nevoie doar de o descriere Modul text. După adăugarea de conținut în caseta de conținut, aplicați următoarele setări de text:

  • Dimensiune text: 22 px (desktop), 20 px (tabletă), 18 px (telefon)
  • Înălțimea liniei de text: 2.6em
  • Orientare text: justificați

forme de margine

Dimensionare

Faceți ca setările de dimensionare să se potrivească și cu dimensiuni diferite ale ecranului:

  • Lățime: 82% (desktop), 100% (tabletă și telefon)

forme de margine

Spațiere

Și, în cele din urmă, adăugați niște margini de sus și de jos.

  • Marja superioară: 100 px
  • Marja inferioară: 100 px

forme de margine

Adăugarea formelor de frontieră

Setări de fundal la marginea stângă

Acum, după ce am finalizat proiectarea generală, putem începe să adăugăm imagini de margine! Vom începe cu marginea stângă. Găsiți imaginea de margine dorită în folderul „Bordura stângă” și încărcați-o ca imagine de fundal a secțiunii. Apoi, aplicați următoarele setări pentru imaginea de fundal:

  • Dimensiunea imaginii de fundal: dimensiunea reală
  • Poziția imaginii de fundal: Centrul Stânga
  • Repetarea imaginii de fundal: fără repetare

forme de margine

Setări de fundal la marginea dreaptă

Sau, puteți găsi imaginea dvs. de margine la alegere în folderul „Bordura dreaptă” și adăugați-o ca fundal al secțiunii folosind următoarele setări:

  • Dimensiunea imaginii de fundal: dimensiunea reală
  • Poziția imaginii de fundal: centru dreapta
  • Repetarea imaginii de fundal: fără repetare

forme de margine

Setări de fundal de margine de sus

Același lucru este valabil și pentru imaginea de la marginea de sus, dar, în schimb, utilizați următoarele setări de fundal:

  • Dimensiunea imaginii de fundal: dimensiunea reală
  • Poziția imaginii de fundal: Centrul de sus
  • Repetarea imaginii de fundal: fără repetare

forme de margine

Setări fundal fundal margine

Sau, nu în ultimul rând, puteți găsi imaginile de la marginea de jos în folderul „Bordura de jos” și le puteți combina cu aceste setări de fundal ale secțiunii:

  • Dimensiunea imaginii de fundal: dimensiunea reală
  • Poziția imaginii de fundal: Centrul de jos
  • Repetarea imaginii de fundal: fără repetare

forme de margine

Amestecați culorile folosind suprapunerea semitransparentă

Pentru fiecare dintre formele de margine incluse, puteți decide să adăugați și o suprapunere de culoare. Această suprapunere vă ajută să faceți ca imaginile de la margini să arate mai subtile. Pentru a adăuga o suprapunere, accesați setările secțiunii și adăugați un fundal degradat deasupra imaginii de fundal a chenarului.

  • Culoare 1: #ffffff
  • Culoare 2: rgba (255.255.255,0.36)
  • Direcția gradientului: 141 grade
  • Plasați gradientul deasupra imaginii de fundal: Da

forme de margine

previzualizare

Acum, că am parcurs toți pașii, să aruncăm o privire finală asupra câtorva modele potențiale pe care le puteți realiza folosind aceste imagini de margine gratuite.

forme de margine

Gânduri finale

În această postare, am împărtășit 5 imagini de frontieră diferite pe care le puteți descărca gratuit. Puteți utiliza aceste imagini de margine pentru orice site web la care lucrați, fără restricții. Vă încurajăm să le încercați pe toate și să creați modele uimitoare. Dacă aveți întrebări sau sugestii, asigurați-vă că lăsați un comentariu în secțiunea de comentarii de mai jos!