Dëshironi të krijoni një sfond unik dhe mahnitës me maska ​​dhe modele sfondi nga Divi ?

Veçori e maskave dhe modeleve të reja të sfondit të Divi përdoret më së shpeshti për seksionet e një faqeje. Por ne gjithashtu mund t'i shtojmë ato në kokë! 

Në këtë tutorial, ne do t'ju tregojmë se si të shtoni maska ​​dhe modele sfondi në një shabllon të kokës Divi duke përdorur konstruktorin themes

Është një mënyrë e shkëlqyeshme për të krijuar modele krejtësisht unike të kokës për tuaj Site Web.

Le të fillojë.

studim

Ja një vështrim i shpejtë i dizajnit që do të krijojmë në këtë tutorial.

Shkoni te ndërtuesi i temave të Divi dhe filloni të krijoni një kokë globale

Nga pulti i WordPress, shkoni te Divi > Ndërtues i Temave

Kliko në "Shto titullin global"

zgjedh "Ndërtoni titullin global".

Pas kësaj, mund të filloni të hartoni një kokë të re duke përdorur Divi Builder.

Si të shtoni maska ​​dhe modele të sfondit në një kokë divi

Krijimi i sfondit të seksionit me një ngjyrë dhe model sfondi

Lexo gjithashtu: Divi: Si të krijoni një seksion Testimoniale në formën e një rrjeti

Për të filluar, hapni cilësimet e seksionit ekzistues. 

Nën skedinë Përmbajtja, përditësoni opsionet e sfondit me cilësimet e mëposhtme:

Ngjyrë e sfondit:

  • Sfondi: #262d3f

Modeli i sfondit:

  • Modeli: Pilula
  • Ngjyra e modelit: rgba (255,255,255,0.1)
  • Madhësia e modelit: madhësia e personalizuar.
  • Gjerësia e modelit: 1 px

mbushje

Nën skedinë Projektimi, përditësoni mbushjen e seksionit si më poshtë:

  • Mbushje (lart dhe poshtë): 0 px

Kjo do të zvogëlojë pak hapësirën vertikale të kokës.

Shtoni një rresht me paraqitjen e kolonës vijuese

Përmbajtja e titullit të mbajtësit të vendeve të shtuara (një menu dhe një buton)

Në kolonën e majtë të rreshtit, shtoni një menu të re.

Zgjidhni një menu.

Më pas shtoni një logo dhe përdorni cilësimet për të personalizuar menunë dhe logon sipas dëshirës.

Në kolonën e djathtë, shtoni një modul butoni dhe gjithashtu personalizoni atë sipas dëshirës tuaj.

Krijimi i sfondit të linjës me gradient, maskë dhe model

Gradient

Hapni cilësimet e rreshtit që përmbajnë menunë dhe butonin tuaj. Më pas përditësoni opsionet e sfondit me cilësimet e mëposhtme të sfondit:

Gradient i sfondit:

  • Gradient Ndalesa 1 (50%): E qartë
  • Gradient Ndalesa 2 (75%): #ff4c00
  • Drejtimi: 90 gradë

Model

  • Modeli: Pilula
  • Ngjyra e modelit: rgba (38,45,63,0.48)
  • Madhësia e modelit: 1 piksel
  • Zhvendosja vertikale: 20 px

Shënim: Zhvendosja vertikale e modelit është vendosur në 20 pikselë sepse ka mbushje të sipërme prej 20 px në seksionin mbi vijën. Kjo siguron që modeli i seksionit të përputhet me modelin e rreshtit.

Maska e sfondit

  • Maskë: Kurriz peshku
  • Ngjyra e maskës: #262d3f

SHËNIM: Për titujt, është më mirë të mbani madhësinë e maskës të vendosur në "Extend to Fill" në mënyrë që të mbulojë hapësirën horizontale pa kompromentuar dizajnin e maskës.

Prekjet e fundit në linjë

Shiko gjithashtu: Divi: Si të përdorni "Gradient Builder" për të zbukuruar imazhet tuaja

Për të përfunduar dizajnin, ne do të shtojmë një rreze kufiri dhe disa modifikime të tjera në linjë.

Rrezja, kufiri dhe hapësira kufitare

Nën skedinë Projektimi, përditësoni mbushjen si më poshtë:

  • Mbushje (lart dhe poshtë): 5 px

Më pas jepini rreshtit një kënd të bukur të rrumbullakosur për një element shtesë të dizajnit.

  • Këndet e rrumbullakosura: 50 px
  • Gjerësia e kufirit të majtë: 50 px
  • Ngjyra e kufirit të majtë: #262d3f

Ne duhet të japim një kufi në anën e majtë të rreshtit sepse skaji katror i maskës do të tejmbush rreshtin pavarësisht nga qoshet e rrumbullakosura.

Rezultati përfundimtar

Le të shohim rezultatin përfundimtar.

Gradienti është pak delikate, kështu që ja një vështrim se si duket.

Divi

Dhe këtu është dizajni i kokës së desktopit dhe celularit.

Modelet e sfondit Divi
Modelet e sfondit Divi
Modelet e sfondit Divi

Shkarkoni DIVI Tani!!!

Përfundim

Dizajni i sfondit të kokës është vetëm maja e ajsbergut. Ka shumë kërkime për të bërë me opsionet e sfondit të disponueshme në Divi.

Shpresojmë që ky tutorial t'ju ketë ndihmuar të kuptoni se si maskat dhe modelet e sfondit të Divi mund të punojnë së bashku për të krijuar një dizajn unik të sfondit për titujt tuaj. 

Mos ngurroni të eksperimentoni me më shumë kombinime të dizajnit të sfondit për t'iu përshtatur dizajnit tuaj. Site Web ose projekti juaj i ardhshëm.

Ju gjithashtu mund të konsultoheni burimet tona, nëse keni nevojë për më shumë elementë për të realizuar projektet tuaja të krijimit të faqeve të Internetit.

Mos hezitoni të konsultoheni edhe me udhëzuesin tonë për Krijimi i blogut të WordPress ose atë më Divi: tema më e mirë e WordPress të të gjitha kohërave.

Por në ndërkohë, ndajeni këtë artikull në rrjetet tuaja të ndryshme sociale.

...