10 trucuri de design de fundal sunt acum posibile cu noile setări de fundal ale lui Divi

De la lansarea noii interfețe de fundal Divi, Divi a devenit și mai puternic. Noile caracteristici au deschis o mulțime de noi posibilități de proiectare. Astăzi, voi introduce câteva noi trucuri de design de care s-ar putea să nu fiți conștienți și, sperăm, vă pot inspira să creați câteva modele de fundal minunate.

Există nenumărate combinații de design de fundal și amestecuri pe care le puteți crea folosind Visual Builder. Cele 10 trucuri pe care m-am stabilit pentru această postare vor zgâria doar suprafața, dar sunt menite să vă introducă diferite concepte și să vă stârnească interesul. Majoritatea acestor trucuri de proiectare sunt realizate folosind noile opțiuni de fundal, cum ar fi noile opțiuni de fundal de gradient și combinarea imaginilor de fundal cu culorile de gradient.

Totuși, trebuie să te avertizez. Odată ce ați început să căutați în opțiunile de fundal, este posibil să nu renunțați niciodată! Este atât de distractiv. Ei bine, cel puțin a fost așa pentru mine.

Bucurați-vă.

Iată o scurtă privire asupra trucurilor de design

Cum să urmați această postare

În loc să trebuiască să încep de la zero de fiecare dată când explic un nou truc de design, am folosit același exemplu de design pentru majoritatea dintre ele și am adăugat diferite trucuri la acel design. Aceasta înseamnă că majoritatea exemplelor necesită finalizarea unui truc de design anterior înainte de a putea aborda noul truc. Trucul nr. 1-9 urmează toate aceeași configurare de bază și necesită trucul nr. 1 ca o condiție prealabilă. Deci, dacă testați caracteristicile, aș sugera să începeți cu Trick # 1.

10 trucuri de proiectare de fundal cu Divi

Abonați-vă la canalul nostru Youtube

Trucul # 1: Suprapunere diagonală

Adăugați o secțiune de lățime completă și apoi introduceți un modul de antet de lățime completă.

Apoi actualizați setările modulului antet după cum urmează:

Opțiuni de conținut

Titlu: [introduceți titlul]
Subtitlu: [introduceți subpoziția]
Adresa URL a imaginii logo-ului: [introduceți logo-ul]
Culori de gradient de fundal: rgba (12.113.195,0.55), rgba (255.255.255,0)
Tipul gradientului: liniar
Direcția gradientului: 135 grade
Poziția inițială: 60%
Poziție finală: 60% (orice lucru de 60% sau mai puțin va funcționa)

Deoarece gradientul începe și se termină în același punct, practic nu se întâmplă deloc un efect de gradient. Deci, rezultatul este cele două culori de pe fiecare parte a markerului de 60%. Acest lucru combinat cu unghiul direcției de gradient creează efectul.

Opțiuni de proiectare

Culoarea textului: deschis
Font de titlu: implicit, cu caractere aldine (B), cu majuscule (TT)
Titlu Dimensiune font: 40 px
Dimensiune font subhead: 24 px

Opțiuni avansate

Sub CSS personalizat în caseta Element principal, adăugați următorul CSS:

Padding: 150px 0;

Aceasta este doar pentru a adăuga niște umpluturi suplimentare în partea de sus și de jos a modulului antet

Salvează setările

Acum este timpul să adăugați un fundal la secțiunea de lățime completă. Accesați Setările secțiunii lățime completă făcând clic pe pictograma roată din caseta de control violet.

Apoi actualizați secțiunea Setări Opțiuni de conținut după cum urmează:

Imagine de fundal: [introduceți imaginea de fundal aici. Ar trebui să aibă o lățime de cel puțin 1960 px. Am ales această imagine de la unsplash.com și am decupat-o astfel încât secțiunea standout a imaginii să fie pe partea dreaptă.]
Utilizați Efect Parallax: DA (acest lucru este opțional, dar cred că funcționează bine cu suprapunerea diagonală)
Metoda Parallax: Parallax adevărat

Asta e! Simțiți-vă liber să reglați opacitatea culorii de gradient și gradul de direcție a gradientului pe placul dvs.

Cred că suntem la un început bun. Să trecem la al doilea truc.

Trucul nr. 2: stratificarea suprapunerilor diagonale

Acest truc de proiectare este o continuare a trucului # 1, deci asigurați-vă că ați terminat trucul nr. 1 înainte de a continua.

În trucul nr. 1, am rămas cu o suprapunere diagonală folosind opțiunea de gradient de fundal din modulul de antet Fullwidth.

Folosind același exemplu, adăugați un gradient de fundal suplimentar la secțiunea lățime completă. Avem deja o imagine de fundal pentru acea secțiune, dar cu noile opțiuni ale lui Divi putem combina culorile degradate cu imaginea de fundal și apoi le putem amesteca cu anumite efecte.

Accesați setările Secțiunii lățime completă și actualizați următoarele opțiuni de conținut :

Culori de gradient de fundal: rgba (131,0,233,0,38), rgba (255,255,255,0)
Tipul gradientului: liniar
Direcția de gradient: 135 de grade (la fel ca și cealaltă direcție de gradient din modulul de antet)
Poziția inițială: 38%
Poziție finală: 38%

Acum faceți clic pe pictograma imaginii de fundal și modificați următoarele:

Folosiți Efect Parallax: Nu
Amestec de imagine de fundal: înmulțiți

Acum aveți 2 suprapuneri diagonale suprapuse care pot fi personalizate cu ușurință pentru un design unic de fundal.

Trucul # 3: Suprapunerea cercului

Acest truc de proiectare este o continuare a trucului # 1, deci asigurați-vă că ați terminat trucul nr. 1 înainte de a continua.

Acum vom transforma acea suprapunere diagonală din trucul # 1 într-o suprapunere de cerc. Pentru a face acest lucru, accesați Setările modulului Fullwidth și actualizați următoarele:

Opțiuni de conținut

Tip de gradient de fundal: radial
Direcție radială: centru
Poziția inițială: 30%
Poziție finală: 30%

Opțiuni de proiectare

Orientare text și siglă: centru

Acum verificați noul fundal al antetului.

Acest truc creează anteturi extraordinare sau apel la acțiuni. Dimensiunea suprapunerii cercului poate fi ajustată cu ușurință și răspunde bine la diferite dimensiuni ale ecranului. Chiar acum folosesc o culoare de gradient semi-transparentă deasupra unei imagini de fundal, dar ar arăta excelent fără o imagine de fundal.

Iată un exemplu de cum ar arăta fără o imagine de fundal și cu o culoare de text mai închisă.

Trucul nr. 4: stratificarea suprapunerilor de cerc pentru a crea o margine de cerc

Aceasta este o continuare din Trick # 3, unde am rămas cu adăugarea unei suprapuneri de cercuri la un modul de antet cu lățime completă. După ce suprapunerea cercului dvs. este la locul său, putem adăuga o a doua suprapunere a cercului pentru a servi drept chenar pentru prima. Facem acest lucru adăugând un alt gradient de fundal la secțiunea Fullwidth, care se află în spatele modulului Header Fullwidth.

Accesați Setările Secțiunii lățime completă și actualizați următoarele:

Opțiuni de conținut

Sub fila Imagine de fundal:

Utilizați Efect Parallax: NU
Amestec de imagine de fundal: înmulțiți

Sub fila Gradient de fundal:

Culori de gradient de fundal: rgba (0,0,0,0,45), rgba (255,255,255,0)
Tip de gradient de fundal: radial
Direcție radială: centru
Poziția inițială: 34%
Poziție finală: 34%

Salvează setările

Asta e.

De asemenea, puteți modifica cu ușurință dimensiunea cercului de gradient de fundal ajustând procentul din poziția de pornire.

Trucul # 5: Suprapunerea inversă a cercului

Aceasta este o continuare din Trick # 3, care a rămas cu o suprapunere de cerc în modulul de antet cu lățime completă. În acest moment, cercul este albastru semitransparent, iar restul imaginii de fundal nu are deloc o culoare de suprapunere. Pentru acest truc, voi schimba acest lucru și voi inversa suprapunerea cercului astfel încât suprapunerea în gradient albastru semitransparent să înconjoare cercul și în interiorul cercului să expună imaginea de fundal din spatele acestuia.

Pentru a face acest lucru, accesați Setări antet Fullwidth și actualizați următoarele:

Opțiuni de conținut

Culori de gradient de fundal: rgba (255,255,255,0), rgba (12,113,195,0,79)

Notă: Tot ce faceți cu adevărat aici este schimbarea culorilor din stânga și din dreapta. Acum culoarea transparentă este ceea ce se arată în interiorul cercului și gradientul albastru îl înconjoară. Aș crește opacitatea albastrului, astfel încât să fie puțin mai întunecat.

Verifică…

Trucul nr. 6: Suprapunere inversă a cercului cu fundal video

Aceasta este o continuare din Trick # 5, care ne-a lăsat cu o suprapunere de cerc invers cu un fundal albastru înconjurător. În prezent, cercul expune o imagine de fundal în spatele acestuia. Puteți adăuga cu ușurință un fundal video pentru a sta în spatele acestei suprapuneri de cerc. Aș sugera să folosiți un videoclip care nu distrage prea mult atenția. De asemenea, ori de câte ori folosiți videoclipuri, asigurați-vă că dimensiunea fișierului este mică, astfel încât timpul de încărcare a paginii dvs. să nu sufere.

Pentru a înlocui imaginea de fundal cu un videoclip, accesați Setări secțiune lățime completă, faceți clic pe
pictograma video de fundal și adăugați videoclipul.

Acum accesați Setările antetului Fullwidth și actualizați următoarele:

Opțiuni de conținut

Culori de gradient de fundal: rgba (12.113.195,0.67), # 333333

Cu noile culori de gradient, videoclipul de fundal este vizibil numai în cerc. Iar culorile suprapuse fac ca textul să apară.

Trucul nr. 7: Suprapunerea cercului invers invers

Aceasta este o continuare a Trick # 5, care ne-a lăsat cu o suprapunere de cerc invers. Dacă reveniți la Setările antetului pentru lățime completă, puteți ajusta direcția radială la diferite setări pentru a crea aspecturi diferite pentru antet.

Accesați Setări antet Fulwidth și actualizați următoarele:

Opțiuni de conținut

Direcție radială: dreapta

Opțiuni de proiectare

Orientare text și siglă: stânga

Iată rezultatul final și câteva exemple de direcții radiale diferite:

Aceste exemple, evident, au nevoie de ceva lucru, dar îți vine ideea.

Trucul # 8: Utilizarea degradeurilor pentru efecte de umbră

Este posibil ca acest truc să nu cadă din falcă, dar este extrem de util. Pentru cei dintre noi care nu doresc să se deranjeze cu utilizarea unui editor foto precum Photoshop pentru a adăuga umbrire imaginilor dvs., aceasta este pentru dvs.

Aceasta este o continuare a Trick # 1 care a rămas cu o suprapunere diagonală folosind opțiunea de gradient de fundal din modulul de antet Fullwidth. Acum să schimbăm suprapunerea albastră semitransparentă cu o umbră întunecată care începe în stânga imaginii și se estompează treptat în dreapta. În acest fel, porțiunea principală a imaginii din dreapta rămâne neatinsă și umbra întunecată din stânga ajută la îmbunătățirea lizibilității textului.

Pentru a adăuga efectul de umbră, accesați Setările antetului pentru lățime completă și actualizați următoarele:

Opțiuni de conținut

Culori de gradient de fundal: rgba (0,0,0,0,55), rgba (0,0,0,0,0)
Direcția gradientului: 90 grade
Poziția inițială: 38%
Poziție finală: 85%

Iată rezultatul.

Trucul nr. 9: Amestec de imagine de fundal

Noile opțiuni de fundal ale lui Divi includ moduri de amestecare CSS pentru personalizarea imaginilor. Explorarea diferitelor amestecuri de imagini este foarte distractivă și tind să creeze modele surprinzătoare. Pentru cei dintre voi care nu sunt designeri, nu trebuie să cunoașteți definiția Saturației sau Luminozității pentru a profita de aceste opțiuni interesante. Va trebui să aveți o culoare de fundal sau un gradient setat în combinație cu imaginea de fundal pentru a vedea toate efectele interesante (nu va funcționa într-adevăr doar cu o imagine de fundal). Apoi, jucați-vă până obțineți aspectul dorit. Rezultatele te pot surprinde.

Pentru acest exemplu, voi continua de la Trucul # 1 care a rămas cu o suprapunere diagonală folosind opțiunea de gradient de fundal din modulul de antet Fullwidth.

Accesați Setările antetului pentru lățime completă și ștergeți gradienții de fundal din Opțiunile de conținut.

Salvează setările

Acum accesați secțiunea Setări și actualizați următoarele:

Opțiuni de conținut

Culori de gradient de fundal: rgba (0,0,0,0.76), # 0c71c3
Direcția gradientului: 90 grade
Poziția inițială: 50%
Poziție finală: 50%

Nu puteți vedea încă nicio modificare. Este în regulă. Accesați fila Imagine de fundal și actualizați următoarele:

Utilizați Efect Parallax: NU
Amestec de imagine de fundal: lumină puternică

Asta e. Verificați rezultatul.

Notă: culorile utilizate aici vor crea efecte diferite pe baza imaginii de fundal pe care o utilizați. Așadar, vă sugerez să vă jucați cu culorile și opțiunile de amestecare până când veți obține una care vă place.

Trucul # 10: Stratificarea pentru a adăuga mai multe culori pe fundalul de gradient.

În mod implicit, fiecare secțiune, rând, coloană și modul pot avea două gradiente de culoare. Cu toate acestea, atunci când le combinați și le stratificați una peste alta, puteți crea 5 culori pentru fundalul dvs. de gradient. Și atunci când aceste 5 culori se amestecă, puteți crea un spectru destul de cool.

Iată cum o faci. Mai întâi, adăugați o secțiune regulată cu un rând de structură cu 1 coloană. Apoi, în interiorul rândului, adăugați un modul Blurb.

Actualizați setările modulului Blurb după cum urmează:

Opțiuni de conținut

Titlu: [introduceți titlul]
Conținut: [introduceți conținut]

Opțiuni de proiectare

Culoarea textului: deschis
Orientare text: centru
Font antet: implicit, aldin (B)
Dimensiune font antet: 56 px
Dimensiunea fontului corpului: 22 px
Căptușeală personalizată: 100 px sus, 100 px jos

Deoarece textul blurb este alb pe un fundal alb, nu îl puteți vedea încă, dar este în regulă. O vei face în curând. Este timpul să începeți să adăugați culorile degradate.

Vom lucra din spate în față, de la stânga la dreapta. Pentru a începe, accesați secțiunea Setări și actualizați următoarele:

Opțiuni de conținut

Culori de gradient de fundal: # ff0077, # 0c71c3
Direcția gradientului: 90 grade
Poziția inițială: 0%
Poziție finală: 30%

Opțiuni de proiectare

Căptușeală personalizată: 0 px sus, 0 px jos

Acum să actualizăm următorul nostru nivel de culoare de gradient - rândul nostru. Accesați Setările rândului și actualizați următoarele:

Opțiuni de conținut

Culori de gradient de fundal: rgba (255.255.255,0), # 8300e9
Direcția gradientului: 90 grade
Poziția inițială: 25%
Poziție finală: 50%
Coloana 1 Culori de gradient de fundal: rgba (255,255,255,0), # e02b20
Direcția gradientului: 90 grade
Poziția inițială: 50%
Poziție finală: 75%

Opțiuni de proiectare
Faceți acest rând lățime completă: DA
Utilizați lățimea personalizată a jgheabului: DA
Lățimea jgheabului: 1
Căptușeală personalizată: 0 px sus, 0 px jos

Salvează setările

Acum, pentru ultimul strat de gradient, trebuie să mergem la Blurb Module și să actualizăm următoarele:

Opțiuni de conținut
Culori de gradient de fundal: rgba (255,255,255,0), # edf000
Direcția gradientului: 90 grade
Poziția inițială: 75%
Poziție finală: 100%

Opțiuni de proiectare

Căptușeală personalizată: 100 px sus, 100 px jos

Asta e. Acum aveți cinci culori degradate care se amestecă pentru a crea un fundal destul de colorat.

Nu uitați, puteți schimba, de asemenea, Gradient Type în Radial (circular) și puteți schimba complet designul (durează aproximativ 20 de secunde).

Dacă schimbați tipul de gradient în Radial pentru toate straturile (secțiune, rând, coloană și modul de blurb), veți obține așa ceva.

Bonus Trick

Iată un exemplu de modul în care puteți stratifica imagini de fundal cu paralaxă. Aceasta este o secțiune obișnuită cu o imagine de fundal folosind True Parallax. În interiorul secțiunii este un rând de 1 coloană care a fost făcut lățime completă și fără umplutură, astfel încât să se întindă pe toată lățimea secțiunii. La rând, am adăugat o imagine de fundal transparentă cu câteva cercuri de gradient (ar trebui să arate ca bule) folosind metoda CSS Parallax. Apoi am adăugat un modul de îndemn la rând cu un fundal transparent. Această combinație creează mișcare atunci când derulați secțiunea de pe pagină.

Acest truc este puțin mai implicat, deoarece necesită crearea unei fotografii personalizate în afara Divi. Pur și simplu sper să vă arăt posibilitățile.

Încă câteva exemple

Voi încheia acest lucru cu câteva exemple de design pe care le-am construit în timp ce testam aceleași trucuri menționate în această postare.

Gânduri finale

Sper că v-a plăcut să explorați aceste noi opțiuni de fundal și să fiți încântați de posibilitățile pe care le aduc. Și, deoarece aceste opțiuni sunt disponibile pentru secțiuni, rânduri, coloane și module, puteți aplica aceste trucuri de proiectare pe orice parte a site-ului dvs. web. Dacă nu ați făcut-o deja, luați ceva timp pentru a săpa puțin mai adânc și a lăsa să curgă acele sucuri creative. Sunt încrezător că, dacă vă faceți timp pentru a explora opțiunile de fundal pentru dvs., veți fi încântați să le implementați în următorul dvs. proiect. Abia aștept să văd cu ce ai venit.

Aștept cu nerăbdare să auzim de la dvs. în comentarii.