Tasarım > Tasarım Ayarları menüsünde , Header-Footer Tasarımları alanından, “Header Tasarla ” butonuna tıklayabilirsiniz. Ya da direk olarak siteadiniz.com/admin/headertasarimyonetimi.aspx adresinden erişim sağlayabilirsiniz.

Özel header tasarımı yapabilmek için öncelikle bu ekran üzerinden aktif bir tasarım tanımlaması yapılması gerekmektedir. Sonrasında oluşturulan tasarım adı üzerinden düzenlemeler yapabilirsiniz.

 

• Header Tasarım Yönetimi menüsüne girilir.
• Yeni Ekle butonuna tıklanır.
• Tanım ve tasarımın geçerli olduğu ülke- dil bilgileri girilerek kaydedilir.
• Tasarım düzenleme butonuna tıklanarak tasarım sayfasına girilir.

HEADER TASARIM SAYFASI
Sayfanızın header tasarımını desktop, tablet ve mobil görünüm için ayrı olarak özelleştirebileceğiniz bir tasarım sayfasıdır.
 

Desktop Tasarım Ekranı

Masaüstü ekranlarda sayfanızın header alanını özel olarak tasarlayabilmeniz için 3 menü yer almaktadır. Bu menüler içerisinde güncellemeler yapılarak header alanını özelleştirilebilirsiniz.



1.Hazır Şablonlar:
Mevcutta sunulan tasarımlar seçilerek header alanında kullanılabilmektedir.




2. Content Menüsü:
Header Üst Alan, Orta Alan, Alt Alan olmak üzere 3 bölüme ayrılmıştır.




                                                     


Layout Ayarları;
Container Width: Alanın başlangıcı değiştirilebilir, bu sayede alanın genişliğini ayarlayabilirsiniz.
Height: Alanın yüksekliği değiştirilebilir, böylece alanın boyutunu özelleştirebilirsiniz.
Top Bar Göster (Üst Alan için): Pasif yapıldığında, üst alan gösterilmeyecektir.

Style Ayarları;
Background:Alanın arka plan rengini değiştirebilirsiniz.
Border Color: Çerçeve rengini özelleştirebilirsiniz.
Border Bottom: Pasif yapıldığında, alt çerçeve rengi gösterilmeyecektir.
Gap: Eklenen bloklar arasındaki boşluk mesafesini ayarlayabilirsiniz.



3. Blok Listesi:
Logo, Üyelik, Sepet, Arama, Menü, Menü Style, Favori, Dil ve Para Birimi, Bölge Seçimi ve HTML blokları bulunmaktadır.


Tasarım ekranının altında yer alan blokları, header kısmında hangi alanda görünmesini istiyorsanız oraya sürükleyerek konumlandırabilirsiniz. Bu alanda menülerin ve ikonların konumlandırılabileceği üçer ayrı bölüm bulunmaktadır.

3.1. Logo
Logo, sayfanın sol üst köşesinde yer almaktadır ve markanızın kimliğini temsil eder.

Layout Ayarları;

Image: Logonuza ait görseli yükleyebilirsiniz.
Link: Logoya tıklanabilir bir bağlantı ekleyebilirsiniz
Svg Mode: Logonuzun HTML versiyonu yükleyebilirsiniz.

Style Ayarları;
Width: Logonun genişliğini istediğiniz boyutta ayarlayabilirsiniz.
Padding: Logonun etrafındaki boşluğu ayarlayabilir ve böylece logonun etrafındaki alanı kontrol edebilirsiniz.


3.2. Üyelik

Kullanıcıların üyelik girişi ve üyelik oluşturmalarına olanak sağlayan buton bloğudur.



Text Ayarları;

Size: Üye Girişi metin boyutunu değiştirebilirsiniz.
Color: Metin rengini değiştirebilirsiz.
Hover Color: Üye Girişi butonu üzerine gelindiğinde metin rengini değiştirebilirsiniz.

Icon Ayarları;
Size: Üye Girişi ikonunun boyutunu değiştirebilirsiniz.
Color: İkonun rengini değiştirebilirsiniz.
Hover Color: İkon üzerine gelindiğinde rengini farklılaştırabilirsiniz.

Drop Down Ayarları;

Background: Üzerine gelinidğinde açılan menünün arkaplan rengini değiştirebilirsiniz.
Size: Açılan menü içerisindeki metinlerin boyutlarını değiştirebilirsiniz.
Name Color: Üye girişi yapıldıktan sonra kullanıcı adının rengini farklılaştırabilirsiniz.
Color: Açılan menü içerisindeki metinlerin rengini değiştirebilirsiniz. (Üye Girişi- Üye Ol)
Hover Color: Açılan menüdeki metinlerin üzerine gelindiğinde yazı rengini değiştirebilirsiniz.
Hover Background: Açılan menüdeki metinlerin üzerine gelindiğinde arka plan rengini değiştirebilirsiniz.

Switch Ayarları;

Icon: Pasif olduğunda üye girişi ikonu görüntülenmez.
Title: Pasif olduğunda Üye Girişi yazısı görüntülenmez.
Kullanıcı Adı: Pasif olduğunda üye girişi yapan kullanıcı adı sayfanın üzerinde görüntülenmez.
Üye Ol: Pasif olduğunda Üye Ol menü seçeneği görüntülenmez.



3.3. Sepet





Layout Ayarları;
Sağdan Açılır Sepet: Pasif olduğunda ve sepetim ikonuna tıklandığında /sepetim sayfasına gider. Aktif olursa sepet, aynı sayfada olacak şeklide ekranın sağ tarafında açılır.
Icon: Sepet ikonunu üç farklı şekilde özelleştirebilirsiniz.

Text Ayarları;
Size: Sepetim metin yazısı boyutunu değiştirebilirsiniz.
Color: Sepetim metin rengini değiştirebilirsiniz.
Hover Color: Sepetim metni üzerine gelindiğinde rengini farklılaştırabilirsiniz.

Icon Ayarları;
Size: Sepetim ikonunun boyutunu değiştirebilirsiniz.
Color: İkonun rengini değiştirebilirsiniz.
Hover Color: İkon üzerine gelindiğinde rengini farklılaştırabilirsiniz.

Switch Ayarları;
Icon:  Pasif olduğunda Sepetim ikonu görüntülenmez.
Product Number: Pasif olduğunda Sepetteki ürün sayısı görüntülenmez.
Total Price: Pasif olduğunda sepet toplam tutarı görüntülenmez.
Title: Pasif olduğunda Sepetim metin yazısı görüntülenmez.



3.4. Menü





Layout Ayarları;
Icon Type: Aktif yapıldığında menü görünüm ikonu eklenmektedir.  



Pasif yapıldığında menü isimleri content alanında metin olarak görünmektedir. Ek olarak Align ayarı açılmaktadır.



Align:
Resimsiz Menü-> Menü üzerine gelindiğinde açılan menü listesi yanında resim görüntülenmektedir. Menü Ekleme alanında Resim alanı açılmaktadır.
Resimsiz Menü-> Menü Ekleme alanında resim alanı yer almaz. Sadece Menü adı ve linkleme yapılabilir.

Menü Şablonlar;

Menü görünümünüze ait şablonunuzu buradan değiştirebilirsiniz.

Menü Ekleme Ayarları;
Menü Adı: Menü adı girilir.
Link: Tıklanan menünün yönlendirileceği sayfa linki girilir.
Kolon Sayısı: Açılır menü listesi için 1den farklı sayı girilir.
Menü Üst Etiket Metin: Menü adının üstüne metin yazısı olarak eklenir
Menü Alt Etiket Metin: Menü adının altına metin yazısı olarak eklenir
Resim: Resimli menü aktifken görüntülenir. Resim Seç alanından .gif .png .jpeg .jpg uzantılı resim eklenebilmektedir.
HTML Alan: HTML formatta resim uzantısı girilebilir.
Menü Aktif: Pasife alındığında eklenen menü ana sayfada görüntülenmez.
Yapılan değişiklikler sonrasında Güncelle butonuna tıklanmalıdır.  Yeni menü oluşturmak için Yeni Ekle butonuna tıklanmalıdır.




Menüler;
Var olan menüler üzerinden düzenleme yapılabilir veya menü silinebilir.



3.5. Favori




Text Ayarları;
Size: Favorilerim metin yazısı boyutunu değiştirebilirsiniz.
Color: Favorilerim metin rengini değiştirebilirsiniz.

Icon Ayarları;
Size: Favorilerim ikonunun boyutunu değiştirebilirsiniz.
Color: Favorilerim ikon rengini değiştirebilirsiniz.

Switch Ayarları;
Icon:  Pasif olduğunda Favorilerim ikonu görüntülenmez.
Title: Pasif olduğunda Favorilerim metin yazısı görüntülenmez.

3.7. Dil ve Para Birimi


Siteniz için tanımlı olan dil ve para biriminiz otomatik olarak gelmektedir.
Örnek: Türkçe-TRY


Style Ayarları;
Size: Metin yazısı boyutunu değiştirebilirsiniz.
Color: Metin rengini değiştirebilirsiniz.
Hover Color: Metin üzerine gelindiğinde rengini farklılaştırabilirsiniz.
Dropdown Position: Sağa Yaslı – Sola Yaslı şekilde konumu değiştirebilirsiniz.

3.8. Bölge Seçimi


Müşterinin tanımlı olan mağaza bölgelerine yönlendirme sağlanabilmektedir.


Text Ayarları;

Size: Metin yazısı boyutunu değiştirebilirsiniz.
Color: Metin rengini değiştirebilirsiniz.
Hover Color: Metin üzerine gelindiğinde rengini farklılaştırabilirsiniz.

Icon Ayarları;

Size: İkon boyutunu değiştirebilirsiniz.
Color: İkon rengini değiştirebilirsiniz.
Hover Color: İkon üzerine gelindiğinde rengini farklılaştırabilirsiniz.

3.9. Arama




Layout Ayarı;

Icon Type: Pasif olduğunda arama input alanı ile birlikte arama ikonu birlikte görüntülenir.
Aktif olduğunda sadece arama ikonu görüntülenir.

Input Ayarları;

Width: Arama input alanının genişliğini değiştirebilirsiniz.
Height: Arama input alanının yüksekliğini değiştirebilirsiniz.
Size: Input alanı içerisinde yer alan “Arama” metninin boyutunu değiştirebilirsiniz.
Border Radius: Input alanının kenarlarını ovalleştirebilirsiniz.
Padding: Input alanı içerisindeki metin alanının dış sınıra olan (border) mesafesini değiştirebilirsiniz.
Background: Input alanı rengini değiştirebilirsiniz.
Color: Input alanı içerisindeki “Arama” metin yazısı rengini değiştirebilirsiniz.
Border Color: Input alanının dış çerçevesinin rengini değiştirebilirsiniz.


Icon Ayarları;

Size: Ara ikonunun boyutunu değiştirebilirsiniz.
Color: Ara ikonunun rengini değiştirebilirsiniz.
Backgorund: Ara ikonunun arka plan rengini değiştirebilirsiniz.

3.10. HTML

Header alanınıza birden fazla HTML bloğu ekleyerek özelleştirme yapabilirsiniz.




3.11. Menü Style
Sitenizde yer alan kategori menülerini bu menü blok ayarı alanı üzerinden özelleştirebilirsiniz.



Layout Ayarları;

Align: Sola Yasla, Ortala, Sağa Yasla seçenekleri bulunmaktadır.Bu seçimlere göre menü adları content içerisinde konumlanmaktadır.

Link Ayarları;

Size: Menü adlarının boyutunu değiştirebilirsiniz.
Gap: Menüler arasındaki boşluk mesafesiniz değiştirilebilirsiniz.
Font Weight: Menü adlarının boyutunu değiştirebilirsiniz.
Color: Menü adlarının rengini değiştirebilirsiniz.
Hover Color: Menü adlarının üzerine gelindiğinde farklı renk yapabilirsiniz.

Açılır Menü Ayarları;

Container Width: Açılan menü listesindeki menü adları arasındaki mesafeyi güncelleyebilirsiniz.
Align: Sola Yasla, Ortala, Sağa Yasla seçenekleri ile menü başlıkları konumlandırılabilirsiniz.
Background: Açılan menü listesinin arka plan rengini değiştirilebilirsiniz.




Kolon Ayarları;

Size: Açılır menü listesinde adlarının boyutu size kısmından güncellenir.
Line Height: Açılır menü listesinin boyutu güncellenebilir.
Title Gap: Açılır menü listesindeki menü başlıkları arasında mesafeyi değiştirebilirsiniz.
Gap: Açılır menü listesinde yer alan alt menüler arasındaki boşluk mesafesini değiştirebilirsiniz.
Font Weight: Açılır menü listesinde yer alan alt menü başlıkları yazı boyutlarının genişliğini değiştirebilirsiniz.
Color: Menü adlarının rengini değiştirebilirsiniz.
Hover Color: Menü adlarının üzerine gelindiğinde renk ayarı değiştirilirsiniz.



Sub Ayarları;

Size: Ana menü->alt menü->menü içerisindeki açılan menü adlarının boyutunu değiştirebilirsiniz.
Line Height: Ana menü->alt menü->menü içerisindeki açılan menüler arasındaki çizgi genişliğini değiştirebilirsiniz.
Gap: Eklenen menüler arasındaki boşluk mesafesini ayarlayabilirsiniz.
Font Weight: Ana menü->alt menü->menü içerisindeki açılan menü adlarının yazı tipi genişliğini değiştirebilirsiniz.
Sub Up Tag Size:
Sub Down Tag Size:
Color: Ana menü->alt menü->menü içerisindeki açılan menü adlarının rengini değiştirebilirsiniz.
Hover Color: Ana menü->alt menü->menü içerisindeki açılan menü adının üzerine gelindiğinde rengini farklı yapabilirsiniz.



Menü Resim Ayarları;

Resimli menü aktif olduğunda menü listesindeki resim ile menü adları arasında konumlandırma sağlayabilirsiniz.


 

Tablet – Mobil Tasarım Ekranı

Tablet ve mobil ekranlarınızda sayfanızın header alanının görünümünü tasarlayabilmeniz için menü düzenleme alanları yer almaktadır. Bu menüler içerisinde güncellemeler yapılarak header alanınızı özelleştirilebilirsiniz.

Menü Ekranı;
Menü ekleme ve menü düzenleme işlemlerini bu ayar ekranından düzenleyebilirsiniz.

Menü Aktif butonu pasif yapıldığında menü listesinde görüntülenmez.

Menüye resim ekleyebilirsiniz.



Mobil Menü Ekranı:



Layout Ayarları;

Background: Açılan menü arka plan rengini değiştirebilirsiniz.
Border Color: Menüler arasındaki çizgi rengini değiştirebilirsiniz.
Border Bottom: Pasif olduğunda menüler arasındaki çizgiler kalkmaktadır.
Padding: Menü listesi etrafındaki alan boşluğunu değiştirebilirsiniz.
Margin: Menü adları arasındaki mesafeyi değiştirebilirsiniz.

Menu Button Ayarları;

Size: Menü buton görünümünün boyutunu değiştirebilirsiniz.
Color: Menü buton görünümünün rengini değiştirebilirsiniz.



Menu Top Ayarları;



Background: Açılan menü listesinin üst kısmının rengini değiştirebilirsiniz.
Close Button Background: Açılır menüyü kapatma butonu arka plan rengini değiştirebilirsiniz.
Close Button Color: Açılır menüyü kapatma butonu rengini değiştirebilirsiniz.
Close Button Size: Açılır menüyü kapatma boyutu değiştirebilirsiniz.
Back Button Color:
Back Button Size:
Back Button Font Weight:



Link Ayarları;

Color: Menü adlarının rengini değiştirebilirsiniz.
Size: Menü adlarının boyutunu değiştirebilirsiniz.
Font Weight: Menü adlarının genişliğini değiştirebilirsiniz.
Link Up Tag Size:
Link Up Tag Size:
Height: Menü butonlarının yüksekliğini değiştirebilirsiniz.
Backgound Color: Menü adlarının adını değiştirebilirsiniz.



Kolon Ayarları;

Color: Ana menüye tıklandıktan sonra açılan alt menülerin rengini değiştirebilirsiniz.
Size: Ana menüye tıklandıktan sonra açılan alt menülerin boyutunu değiştirebilirsiniz.
Font Weight: Ana menüye tıklandıktan sonra açılan alt menülerin yazı tipi denişliğini değiştirebilirsiniz.
Kolon Up Tag Size:
Kolon Up Tag Size:



Sub Ayarları;
Color: Ana menü->alt menü->menü içerisindeki açılan menü adlarının rengini değiştirebilirsiniz.
Size: Ana menü->alt menü->menü içerisindeki açılan menü adlarının boyutunu değiştirebilirsiniz.
Font Weight: Ana menü->alt menü->menü içerisindeki açılan menü adlarının yazı tipi genişliğini değiştirebilirsiniz.
Sub Up Tag Size:
Sub Up Tag Size:



Favorilerim Göster: Aktif olduğunda Favorilerim butonu eklenen content alan içerisinde görünmektedir.
Dil ve Para Birimi Göster: Aktif olduğunda Dil ve Para Birimi butonu eklenen content alan içerisinde görünmektedir.
Mağaza Bölge Göster: Aktif olduğunda Mağaza Bölgesi butonu eklenen content alan içerisinde görünmektedir.