Skip to main content

Dizayn İstiqaməti

Dizayn İstiqaməti addımı sizə Tema Qurucu (Theme Builder) bütün temanı yaratmadan əvvəl, saytınızın vizual dizaynını yoxlamağa, təkmilləşdirməyə və yekunlaşdırmağa imkan verir.

Ümumi Baxış​

Kşfiyyat Müsahibəsini (Discovery Interview) tamamladıqdan sonra, Tema Qurucu dizayn istiqamətini masaüstü və mobil önizləmə renderləməsi ilə təqdim edir. Bu, sizə temaya qərar verməzdən əvvəl dizaynınızın müxtəlif cihazlarda dəqiq necə görünəcəyini görməyə imkan verir.

Dizayn İstiqaməti Komponentləri​

1. Rəng Palitrası​

Temanızın rəng sxemi, o cümlədən:

  • Əsas rəng — düymələr, linklər və vurğular üçün istifadə edilən əsas brend rəngi
  • İkincil rəng — müxtəliflik üçün tamamlayıcı rəng
  • Vurğu rəngi — vacib elementlər üçün diqqət çəkən rəng
  • Neytral rənglər — fon və mətn üçün boz və ağ rənglər
  • Mətn rəngi — oxunaqlı mətn üçün əsas mətn rəngi

2. Tipoqrafiya​

Bunlar üçün font seçimləri:

  • Başlıq fontu — səhifə başlıqları və bölmə başlıqları üçün istifadə olunur
  • Mətn fontu — abzasa mətn və məzmun üçün istifadə olunur
  • Font ölçüləri — müxtəlif ekran ölçüləri üçün adaptiv ölçülənmə
  • Sətr aralığı — oxunaqlıq üçün sətirlər arasındakı boşluq
  • Font çəkisi — qalın, normal və yüngül variantlar

3. Yerləşdirmə və Boşluq​

  • Kontayner eni — məzmun üçün maksimum en
  • Padding və marginlər — elementlər ətrafındakı boşluq
  • Grid sistemi — adaptiv dizayn üçün sütun yerləşdirməsi
  • Komponent boşluğu — UI elementləri arasındakı məsafə

4. Vizual Elementlər​

  • Düymə stilləri — əsas, ikincil və üçüncül düymə dizaynları
  • Kart dizaynları — məzmun blokları üçün yerləşdirmələr
  • İkonlar — ikon stili və ölçülənməsi
  • Sərhədlər və kölgələr — incə vizual dərinlik
  • Üzərinə gəlmə effekti — interaktiv vəziyyət stilizasiyası

Önizləmə Renderləməsi​

Masaüstü Önizləmə​

Masaüstü önizləməsi dizaynınızı tam enində (adətən 1200px və ya daha geniş) göstərir:

  • Tam naviqasiya menyusu
  • Bütün sütunlarla tam yerləşdirmə
  • Böyük tipoqrafiya və boşluq
  • Bütün vizual elementlər tam ölçüdə

Mobil Önizləmə​

Mobil önizləməsi dizaynınızı mobil enində (adətən 375px) göstərir:

  • Adaptiv naviqasiya (hamburger menyusu)
  • Bir sütunlu yerləşdirmə
  • Tənzimlənmiş tipoqrafiya və boşluq
  • Toxunmağa uyğun düymə ölçüləri

Adaptiv Breakpoints​

Tema Qurucu bu breakpoints-lərdə önizləmə render edir:

CihazEnÖnizləmə
Mobil375pxPortret telefon
Planşet768pxPeyzaj planşeti
Masaüstü1200pxTam enli masaüstü
Böyük Masaüstü1920pxUltra-geniş ekran

Dizaynınızı Təkmilləşdirmək​

Tənzimləmələr Etmək​

Dizayn istiqamətini aşağıdakıları edərək təkmilləşdirə bilərsiniz:

  1. Rəngləri tənzimləmək — palitradakı istənilən rəngi dəyişin
  2. Fontları dəyişmək — fərqli şriftlər seçin
  3. Boşluğu dəyişmək — padding və marginləri tənzimləyin
  4. Yerləşdirməni yeniləmək — kontayner enlərini və grid sütunlarını dəyişin
  5. Elementləri fərdiləşdirmək — düymə stillərini, kart dizaynlarını və s. dəyişin

Önizləmə Yeniləmələri​

Dəyişikliklər real vaxtda əks olunur:

  • Masaüstü önizləməsi dərhal yenilənir
  • Mobil önizləməsi dərhal yenilənir
  • Bütün adaptiv breakpoints yenilənir
  • Dəyişiklikləri yoxlamaq üçün önizləmələr arasında keçid edə bilərsiniz

Müqayisə Görünüşü​

Dizayn istiqamətini aşağıdakılarla müqayisə edin:

  • Orijinal dizayn — nəyin dəyişdiyini görün
  • Rəqib dizaynları — ilham aldığınız saytlarla müqayisə edin
  • Əvvəlki versiyalar — daha əvvəlki dizayn istiqamətlərinə qayıdın

Dizayn İstiqamətini Təsdiqləmək​

Dizaynınızdan razılaşdıqdan sonra:

  1. Hər iki önizləməni yoxlayın — masaüstü və mobil görünüşün yaxşı olduğundan əmin olun
  2. Bütün rəngləri yoxlayın — kontrast və əlçatanlıqdan əmin olun
  3. Tipoqrafiyanı sınaqdan keçirin — bütün ölçülərdə oxunaqlığı yoxlayın
  4. Yerləşdirməni təsdiqləyin — boşluq və hizalanmanı yoxlayın
  5. Dizaynı təsdiqləyin — tema yaratmağa davam edin

Növbəti Addımlar​

Dizayn istiqamətini təsdiqlədikdən sonra:

  1. Tema Qurucu sizin tam temanızı yaradır
  2. Tema WordPress saytınıza quraşdırılır
  3. WordPress customizer istifadə edərək daha da fərdiləşdirə bilərsiniz
  4. Hospitality Menus və ya digər xüsusiyyətlərə keçin

Ən Yaxşı Praktikalara Nəzər Salmaq​

  • Real cihazlarda sınaqdan keçirin — mümkün olsa, əsl telefon və planşetlərdən istifadə edin
  • Oxunaqlığı yoxlayın — mətnin bütün ölçülərdə oxunaqlığından əmin olun
  • Kontrastı yoxlayın — əlçatanlıq üçün Validate Palette Contrast istifadə edin
  • Performansa nəzər salın — sürət üçün şəkilləri və fontları optimallaşdırın
  • Məzmunu planlaşdırın — yerləşdirmənin faktiki məzmununuzla işlədiyindən əmin olun

Problemlərin Həlli​

Önizləmə Yenilənmir​

  • Səhifəni yeniləyin
  • Brauzer cache-ini təmizləyin
  • Başqa bir brauzer cəhd edin
  • İnternet bağlantısını yoxlayın

Rənglər Fərqli Görünür​

  • Monitor rəng parametrlərinə baxın
  • Fərqli cihazlarda yoxlayın
  • Rəng kontrastını əlçatanlıq alətləri ilə təsdiqləyin
  • Rəng körlüyü simulyatorlarını nəzərdən keçirin

Tipoqrafiya Problemləri​

  • Font fayllarının yükləndiyini yoxlayın
  • Müxtəlif breakpoints-lərdə font ölçüsünü yoxlayın
  • Faktiki məzmunla sınaqdan keçirin
  • Oxunaqlıq üçün sətir uzunluğunu nəzərə alın