[vc_row content_placement = "middle" css = ". vc_custom_1508940533685 {background-color: # f8f6f6! important;}" el_id = "themeforestpro"] [vc_column width = "3/4" css = ". vc_custom_1502759058885 {margin-bottom: 0 ! important; border-bottom-width: 0px! important; padding-bottom: 0px! important;} "] [vc_column_text]

Divi: cea mai ușoară temă WordPress de utilizat

[/ vc_column_text] [/ vc_column] [vc_column width = "1/4"] [vcex_button url = "https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&tid1=divibeforepostmobile" target = "blank" size = "small" align = "center" color = "green" font_family = "Raleway" font_weight = "600" style = "flat" custom_color = "# ffffff" custom_hover_color = "# ffffff"] DOWNLOAD [/ vcex_button] [/ vc_column] [/ vc_row]

Divi: cea mai bună temă WordPress din toate timpurile!

mai mult Descărcări 901.000, Divi este cea mai populară temă WordPress din lume. Este completă, ușor de folosit și are mai mult de șabloane gratuite 62.

Imaginile de margine și de fundal continuă să fie elemente de design populare atunci când construiți site-uri web. Utilizarea imaginilor de fundal potrivite poate adăuga personalitate și stil site-ului dvs., fără a pierde timp și bani pe grafica personalizată. Și marginile sunt utile pentru a adăuga structură la conținutul dvs.

Astăzi vom aduce împreună aceste două puncte forte prin proiectarea imaginilor de fundal, precum chenarele. Divi are un set de opțiuni utile pentru personalizarea imaginilor de fundal, ceea ce face mai ușoară proiectarea imaginilor de fundal pentru modele de margini unice. Acest lucru ne permite să combinăm culorile, gradientele, umbrele cutiei ș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. Tema Divi instalată și activă
  2. O nouă pagină creată de la zero pe front-end (constructor vizual)
  3. Imagini de utilizat pentru conținut fictiv

După aceea, veți avea o pânză goală pentru a începe proiectarea în 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 excelentă pentru conținutul dvs. Dar, de cele mai multe ori, veți dori să adăugați suprapuneri la imaginea de fundal pentru a obține o anumită culoare sau pentru a face fundalurile mai întunecate sau mai deschise. Gradientele de fundal sunt o modalitate excelentă de a adăuga o suprapunere imaginilor dvs. de fundal și de a crea modele de margini unice.

# 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

Toate granițele nu trebuie să aibă margini drepte. Amestecă puțin! Opțiunile rotunjite ale colțului 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.

Creați cu ușurință site-ul dvs. web cu Elementor

Elementor vă permite să creați Ușor și Gratuit orice site web sau design de blog cu aspect profesional. Nu mai plătiți mult pentru un site web pe care îl puteți face singur.

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.

Vrei să-ți vinzi produsele pe internet?

Descărcați gratuit WooCommerce, cele mai bune pluginuri de comerț electronic pentru a vă vinde produsele fizice și digitale pe WordPress și pentru a vă crea cu ușurință magazinul online. Perfect pentru incepatori.

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.

4 acțiuni
acțiune4
tweet
Registru