Esasy mazmuna geç

Dizaýn Ugry

Design Direction ädimi, Theme Builder doly tema döretmezden öň, temaňyzyň wizual dizaýnyny gözden geçirmäge, kämilleşdirmäge we gutarnykly tassyklamaga mümkinçilik berýär.

Umumy syn​

Discovery Interview tamamlanandan soň, Theme Builder dizaýn ugruňyzy desktop we mobile deslapky görnüş renderi bilen görkezýär. Bu, tema geçmezden öň dizaýnyňyzyň dürli enjamlarda nähili görünjekdigini takyk görmäge mümkinçilik berýär.

Design Direction düzüm bölekleri​

1. Reňk palitrasy​

Temaňyzyň reňk shemasy, şol sanda:

  • Esasy reňk — düwmeler, baglanyşyklar we aksentler üçin ulanylýan esasy brend reňki
  • Ikinji reňk — dürli görnüşlilik üçin üstüni ýetiriji reňk
  • Aksent reňki — möhüm elementler üçin tapawutlandyryjy reňk
  • Neýtral reňkler — fonlar we tekst üçin çal we ak reňkler
  • Tekst reňki — okalmagy ýeňilleşdirmek üçin esasy tekst reňki

2. Tipografiýa​

Şular üçin şrift saýlawlary:

  • Sözbaşy şrifti — sahypa atlary we bölüm sözbaşylary üçin ulanylýar
  • Esasy tekst şrifti — abzas teksti we mazmun üçin ulanylýar
  • Şrift ölçegleri — dürli ekran ölçegleri üçin responsiw ölçeglendirme
  • Setir beýikligi — okalmagy ýeňilleşdirmek üçin setirleriň arasyndaky aralyk
  • Şrift agramlary — goýy, adaty we ýeňil görnüşler

3. Ýerleşim we aralyk​

  • Konteýner giňligi — mazmun üçin iň ýokary giňlik
  • Padding we margins — elementleriň töweregindäki aralyk
  • Grid ulgamy — responsiw dizaýn üçin sütün ýerleşimi
  • Komponent aralygy — UI elementleriniň arasyndaky aralyk

4. Wizual elementler​

  • Düwme stilleri — esasy, ikinji we üçünji derejeli düwme dizaýnlary
  • Kart dizaýnlary — mazmun bloklary üçin ýerleşimler
  • Ikonlar — ikon stili we ölçegi
  • Çäkler we kölegeler — inçe wizual çuňluk
  • Üstünden geçme effektleri — interaktiw ýagdaý stili

Deslapky görnüş renderi​

Desktop deslapky görnüşi​

Desktop deslapky görnüşi dizaýnyňyzy doly giňlikde görkezýär (adatça 1200px ýa-da has giň):

  • Doly nawigasiýa menýusy
  • Ähli sütünler bilen doly ýerleşim
  • Uly tipografiýa we aralyk
  • Ähli wizual elementler doly ölçegde

Mobile deslapky görnüşi​

Mobile deslapky görnüşi dizaýnyňyzy mobile giňlikde görkezýär (adatça 375px):

  • Responsiw nawigasiýa (hamburger menýusy)
  • Bir sütünli ýerleşim
  • Sazlanan tipografiýa we aralyk
  • Degmäge amatly düwme ölçegleri

Responsiw aralyk nokatlary​

Theme Builder deslapky görnüşleri şu aralyk nokatlarynda render edýär:

EnjamGiňlikDeslapky görnüş
Mobile375pxDik telefon
Tablet768pxKese tablet
Desktop1200pxDoly giňlikli desktop
Uly Desktop1920pxÖrän giň displeý

Dizaýnyňyzy kämilleşdirmek​

Sazlamalar girizmek​

Dizaýn ugruňyzy şu ýollar bilen kämilleşdirip bilersiňiz:

  1. Reňkleri sazlamak — palitradaky islendik reňki üýtgediň
  2. Şriftleri üýtgetmek — başga şrift görnüşlerini saýlaň
  3. Aralygy üýtgetmek — padding we margins sazlaň
  4. Ýerleşimi täzelemek — konteýner giňliklerini we grid sütünlerini üýtgediň
  5. Elementleri şahsylaşdyrmak — düwme stillerini, kart dizaýnlaryny we ş.m. üýtgediň

Deslapky görnüş täzelenmeleri​

Üýtgeşmeler hakyky wagtda görkezilýär:

  • Desktop deslapky görnüşi dessine täzelenýär
  • Mobile deslapky görnüşi dessine täzelenýär
  • Ähli responsiw aralyk nokatlary täzelenýär
  • Üýtgeşmeleri barlamak üçin deslapky görnüşleriň arasynda geçip bilersiňiz

Deňeşdirme görnüşi​

Dizaýn ugruňyzy şular bilen deňeşdiriň:

  • Asyl dizaýn — nämeleriň üýtgändigini görüň
  • Bäsdeş dizaýnlary — ylham alnan saýtlar bilen deňeşdiriň
  • Öňki wersiýalar — has irki dizaýn ugurlaryna gaýdyň

Design Direction tassyklamasy​

Dizaýnyňyzdan kanagatlananyňyzdan soň:

  1. Iki deslapky görnüşi hem gözden geçiriň — desktop we mobile görnüşleriniň gowy görünýändigini barlaň
  2. Ähli reňkleri barlaň — kontrasty we elýeterliligi üpjün ediň
  3. Tipografiýany synaň — ähli ölçeglerde okalmagyny barlaň
  4. Ýerleşimi tassyklaň — aralygy we deňlenişi barlaň
  5. Dizaýny tassyklaň — tema döredilişine geçiň

Indiki ädimler​

Dizaýn ugruňyzy tassyklanyňyzdan soň:

  1. Theme Builder doly temaňyzy döredýär
  2. Tema WordPress saýtyňyza gurnalýar
  3. WordPress customizer ulanyp has giňişleýin şahsylaşdyryp bilersiňiz
  4. Hospitality Menus ýa-da beýleki aýratynlyklara geçiň

Iň gowy tejribeler​

  • Hakyky enjamlarda synaň — mümkin bolsa hakyky telefonlary we tabletleri ulanyň
  • Okalmagy barlaň — tekstiň ähli ölçeglerde okalýandygyna göz ýetiriň
  • Kontrasty barlaň — elýeterlilik üçin Palette Contrast-y tassyklamak ulanyň
  • Öndürijiligi göz öňünde tutuň — tizlik üçin suratlary we şriftleri optimizirläň
  • Mazmun üçin meýilleşdiriň — ýerleşimiň hakyky mazmunyňyz bilen işleýändigine göz ýetiriň

Näsazlyklary düzetmek​

Deslapky görnüş täzelenmeýär​

  • Sahypany täzeläň
  • Brauzer keşini arassalaň
  • Başga brauzeri synap görüň
  • Internet birikmesini barlaň

Reňkler başgaça görünýär​

  • Monitor reňk sazlamalaryny barlaň
  • Başga enjamlarda synap görüň
  • Elýeterlilik gurallary bilen reňk kontrastyny barlaň
  • Reňk körlügi simulýatorlaryny göz öňünde tutuň

Tipografiýa meseleleri​

  • Şrift faýllarynyň ýüklenýändigini barlaň
  • Dürli aralyk nokatlarynda şrift ölçegini barlaň
  • Hakyky mazmun bilen synaň
  • Okalmagy üçin setir uzynlygyny göz öňünde tutuň