Navbar (Üst Menü) ve Mobil Menü Tasarımı
Navbar, mağazanızın her sayfasının tepesindeki çubuktur. Bu yazıda çubuğun bloklarını nasıl dizeceğinizi, menü öğelerini nasıl yöneteceğinizi ve…
Nerede bulunur: Tema Editörü → sayfa menüsünden Yapı → Üst Yapı → tuvalde Navbar bileşenine tıklayın → sağ paneldeki Özellikler Kimler için: Mağazasının üst menüsünü (logo, menü, arama, sepet) kendi zevkine göre kurmak ve telefonda açılan menüyü özelleştirmek isteyen herkes Kısaca: Navbar, mağazanızın her sayfasının tepesindeki çubuktur. Bu yazıda çubuğun bloklarını nasıl dizeceğinizi, menü öğelerini nasıl yöneteceğinizi ve telefonda açılan mobil menüyü nasıl tasarlayacağınızı anlatıyoruz.
Ne işe yarar?
Ziyaretçi mağazanıza girdiğinde ilk gördüğü şey üstteki çubuktur: solda logo, ortada kategoriler, sağda arama ve sepet. Bu çubuğa Navbar diyoruz. Ziyaretçi ürün sayfasına geçse de, sepete girse de aynı çubuk yerinde kalır; bu yüzden Navbar'ı sayfa sayfa değil, Üst Yapı içinde bir kez düzenlersiniz.
Telefonda ise yer dar olduğu için menü öğeleri gizlenir; onların yerine küçük bir menü butonu (üç çizgi) çıkar. Bu butona dokununca yandan bir panel açılır. İşte bu panele mobil menü diyoruz ve artık onu da tasarlayabiliyorsunuz.
Müşterilerinizin büyük çoğunluğu telefondan alışveriş yapar. Bilgisayardaki menüyü kurduktan sonra mutlaka telefon görünümüne geçip mobil menüyü de bir kez açıp bakın.
Navbar'ı nerede düzenlerim?
Navbar bileşeni Üst Yapı içinde durur. Oraya gitmek için:
- Üst araç çubuğunda mağaza adınızın yanındaki sayfa adına tıklayın.
- Açılan listede Yapı başlığı altındaki Üst Yapı'yı seçin.
- Tuvalde üst çubuğa tıklayın. Sağ panel Özellikler moduna geçer ve Navbar'ın ayarları açılır.
Başka bir sayfadayken ne olur? Ana Sayfa'da ya da bir özel sayfadayken de üst çubuk tuvalde görünür, ama orada düzenlenemez — yalnız önizleme amaçlı çizilir. Fareyi üstünde biraz bekletir veya tıklarsanız küçük bir kart çıkar: "Bu alan Üst Yapı'da düzenlenir." Karttaki Üst Yapı'yı düzenle butonu sizi doğrudan Üst Yapı'ya götürür. Aynı kart, sayfanın en altındaki footer için de Alt Yapı olarak çıkar. Kartı kapatmak için sağ üstteki **** işaretine ya da boş bir yere tıklamanız yeterlidir.
Ayar grupları
Navbar'ı seçtiğinizde sağ panelde şu sekmeleri görürsünüz:
| Sekme | İçinde ne var? |
|---|---|
| Kompozisyon | Çubuğun iskeleti: hazır düzen, satır sayısı, bloklar, blokların yerleşimi, mobil menü tasarımı. Asıl işin döndüğü yer. |
| Arka Plan | Çubuğun rengi, opaklığı, bulanıklık efekti. |
| Görünüm | Yazı ve menü renkleri, hover (üzerine gelince) rengi, alt kenarlık rengi, gölge. |
| Düzen | İç/dış boşluk, bloklar arası boşluk, çubuğun en fazla ne kadar genişleyeceği. |
| Görünürlük | Çubuğu belirli cihazlarda gizleme. |
| Gelişmiş | Özel ID ve özel CSS sınıfı (teknik ihtiyaçlar için; normalde boş kalır). |
Kompozisyon: çubuğun iskeleti
Hazır düzen ile başlayın
Hazır Düzen listesinden bir başlangıç şablonu seçin. Şablon, blokları sizin için yerleştirir; sonradan istediğinizi taşıyabilirsiniz.
| Hazır düzen | Nasıl görünür? |
|---|---|
| Logo Sol | Solda logo, ortada menü, sağda arama / sepet / profil. En yaygın düzen. |
| Logo Orta | Solda menü, ortada logo, sağda arama / sepet / profil. Butik görünüm. |
| İki Satır | Üst satırda logo + geniş arama kutusu + sepet, alt satırda menü. Çok kategorili mağazalar için. |
| Klasik İki Satır | Üst satırda logo ve sağda arama / sepet / profil, alt satırda sola yaslı menü. |
| Özel | Hiçbir şablona bağlı kalmadan kendiniz dizersiniz. Bir bloğu elle taşıdığınız anda düzen zaten Özel'e döner. |
Satır Sayısı ile çubuğu Tek Satır ya da İki Satır yaparsınız. İki satırda alt satır genelde menüye ayrılır.
Genel ayarlar
| Ayar | Ne yapar? |
|---|---|
| Başlık Tipi | Statik: sayfa kaydırılınca çubuk yukarı gider. Sabit: her zaman ekranın üstünde kalır. Sabit (aşağı kaydırınca gizlenir): aşağı inerken kaybolur, yukarı çıkınca geri gelir; ekranı ferah tutar. |
| Ana Sayfada Şeffaf | Ana sayfada çubuk şeffaf başlar, altındaki büyük görselin üstüne oturur; kaydırınca renklenir. Hero görseliniz varsa çok şık durur. |
| Diğer Sayfalarda Şeffaf | Aynı etkiyi diğer sayfalarda da uygular. Sayfa üstünde koyu görsel yoksa yazılar okunmayabilir; dikkatli kullanın. |
| Alt Kenarlık | Çubuğun altına ince bir çizgi çeker. |
| Satır Arası Çizgi | İki satırlı düzende satırların arasına çizgi koyar. |
Şeffaf çubuk kullanacaksanız Logo bloğunun ayarlarında Şeffaf Modda Logo alanına beyaz bir logo yükleyin. Çubuk şeffafken o logo, renklenince normal logo gösterilir.
Bloklar
Çubuk, bloklardan oluşur. Bloklar başlığındaki butonlardan istediğinizi ekleyin; blok önce Satır 1 → Sağ Bölge'ye düşer, sonra taşırsınız.
| Blok | Ne işe yarar? | Kaç tane eklenir? |
|---|---|---|
| Logo | Yazı ya da görsel logo. Ana sayfaya bağlanır. | 1 |
| Menü | Kategoriler ve linkler; açılır menülerin sahibi. Telefonda mobil menüye dönüşür. | 1 |
| Arama | İkon ya da açık arama kutusu. | 1 |
| Sepet | Sepet ikonu; içinde ürün varsa rozet gösterir. | 1 |
| Profil | Giriş / Hesabım butonu. | 1 |
| Özel Buton | "Kampanyalar", "Bize Ulaşın" gibi vurgulu bir buton. | İstediğiniz kadar |
| Sosyal Medya | Instagram, WhatsApp gibi ikonlar. | İstediğiniz kadar |
| Boşluk | İki bloğu birbirinden iter; ayarı yoktur. | İstediğiniz kadar |
Tek eklenebilen bloklar (Logo, Menü, Arama, Sepet, Profil) çubukta zaten varsa butonları soluk görünür.
Blokları yerleştirme
Her satır Sol Bölge / Orta Bölge / Sağ Bölge olmak üzere üç kutudan oluşur. Bir bloğun adını tutup başka bir kutuya sürükleyin. Kutunun üstüne geldiğinizde kutunun kenarı kesikli çizgiye döner; orada bırakın.
Her blok satırında iki küçük ikon vardır:
- Dişli () — bloğun kendi ayarlarını açar (aşağıda).
- Çöp kutusu — bloğu çubuktan kaldırır. Özel Buton ve Sosyal Medya bloklarında ayarları da silinir; geri almak için yeniden eklemeniz gerekir.
Satır başlığının sağındaki Satır Ayarları ile o satırın Yükseklik, Blok Arası Boşluk, Dikey Hizalama, Sütun Sayısı (3 sütun ya da tek geniş sütun), Yatay Hizalama ve Genişlik değerlerini değiştirirsiniz.
Mobil satırı
Bloklar listesinin en altında Mobil başlıklı ayrı bir satır görürsünüz. Bu satır, çubuğun telefonda nasıl görüneceğini belirler: telefonda yer dar olduğu için masaüstündeki dizilim aynen kullanılmaz, buradaki dizilim kullanılır. Varsayılan: solda Menü butonu, ortada Logo, sağda Sepet. Bir bloğu buraya da sürükleyerek telefonda hangi bloğun nerede çıkacağını seçersiniz. Aynı blok hem masaüstü satırında hem Mobil satırında durabilir.
Telefonda üst çubuğa üç-dört bloktan fazlasını sıkıştırmayın. Arama ve profil gibi öğeleri mobil menünün içine taşımak (aşağıya bakın) hem daha temiz durur hem de yer kazandırır.
Bir bloğun ayarları
Blok satırındaki dişliye tıklayın; ayarlar hemen altında açılır. Her bloğun altında ayrıca Mobil / Tablet / Masaüstü anahtarları vardır; açtığınız cihazda o blok gizlenir.
| Blok | Ayarları |
|---|---|
| Logo | Logo Tipi (Yazı / Görsel), Logo Yazısı ya da Logo Görseli, Şeffaf Modda Logo, Logo Genişliği / Yüksekliği. |
| Menü | Menü öğelerinin tamamı. Aşağıdaki "Menü öğeleri" bölümüne bakın. |
| Arama | Görünüm: İkon (tıklayınca arama penceresi açılır) ya da Açık Input (çubukta her zaman görünen kutu). İkon seçtiyseniz Sadece İkon / İkon + Yazı / Sadece Yazı, buton yazısı ve ikon; kutu seçtiyseniz Yer Tutucu metni ve Buton Genişliği. |
| Sepet | Görünüm (ikon / ikon + yazı / yazı), buton yazısı, ikon, Rozet Göster (sepetteki ürün sayısı). |
| Profil | Görünüm ve buton yazısı. |
| Özel Buton | Bağlantı (link seçici), Stil (Dolgulu, İkincil, Çerçeveli, Hayalet, Link, Uyarı), Buton Rengi, ikon ve ikon rengi. |
| Sosyal Medya | Platform listesi; her platformu anahtarla açıp Bağlantı (URL), stil, renk ve ikon verirsiniz. Listede olmayan bir platform için Özel Platform Ekle. Her platformun kendi cihaz görünürlüğü de vardır. |
Menü öğeleri
Menü bloğunun dişlisine tıkladığınızda menü öğelerinin listesi açılır. Öğeleri sürükleyerek sıralar, çöp kutusuyla silersiniz.
Öğe ekleme
Üç yol vardır:
| Buton | Ne yapar? |
|---|---|
| Kategoriden Ekle | Kategori listeniz açılır; seçtiğiniz üst kategoriler alt kategorileriyle birlikte menüye eklenir. |
| Özel Link Ekle | Boş bir öğe ekler; bağlantısını siz seçersiniz (sayfa, blog yazısı, dış adres vb.). |
| Kategorilerden Otomatik Oluştur | Mevcut listeyi silip tüm üst kategorilerinizden yeni bir menü kurar. Hızlı başlangıç için idealdir. |
Kategorilerden Otomatik Oluştur elle eklediğiniz öğeleri de kaldırır. Önce onu çalıştırın, özel linkleri sonra ekleyin.
Bir öğenin ayarları
Öğe satırına tıklayınca açılır:
- Bağlantı — öğenin nereye gideceği. Bağlantıyı seçince öğenin adı da otomatik olarak bağlantının adı olur.
- Açılır Menü Stili — öğenin altında alt kategori varsa, üzerine gelince nasıl açılacağı:
| Stil | Ne zaman uygun? |
|---|---|
| Otomatik | Alt öğe sayısına göre sistem karar verir. Emin değilseniz bunu seçin. |
| Yok | Açılır menü çıkmaz; öğe düz linktir. |
| Basit Liste | Alt alta kısa liste. 5'e kadar alt kategori için. |
| Sütunlar | Alt kategoriler yan yana sütunlarda, her sütunda kendi alt öğeleri. |
| Mega Grid | Tam genişlikte büyük ızgara. Çok kategorili mağazalar için. |
| Kart Grid | İkonlu kutucuklar (en fazla 4). |
| İkon Listesi | İkonlu kısa liste. |
| Sidebar | Solda liste, sağda seçilen kategorinin alt öğeleri. |
| Mega Featured | Sütunlar + sağda öne çıkan görsel alanı. |
| Mega Divider | Çizgiyle ayrılmış sütunlar + sağda büyük görsel. |
- Öne Çıkan Görsel / Başlık / Link — yalnız Mega Featured ve Mega Divider stillerinde görünür; sağdaki tanıtım alanını doldurur.
- Alt Öğeler — öğenin altındaki kategoriler. Elle Alt Öğe Ekle diyebilir, sürükleyerek sıralayabilir, her birine ayrı bağlantı verebilirsiniz.
Menü öğesini buton gibi göstermek
Bir öğeyi diğerlerinden ayırmak istiyorsanız (örneğin "İndirim") Buton Olarak Göster anahtarını açın. Açılan alanda:
| Ayar | Ne yapar? |
|---|---|
| Stil | Dolgulu, İkincil, Çerçeveli, Hayalet, Link, Uyarı. |
| Buton Rengi | Butonun arka planı. Varsayılan sekmesi tema rengini kullanır; Düz Renk ya da Gradient seçebilirsiniz. |
| Hover Arka Plan | Fare üstüne gelince arka planın alacağı renk. |
| Hover Yazı Rengi | Fare üstüne gelince yazının alacağı renk. |
| İkon, İkon Konumu, İkon Rengi | Butona ikon ekler. |
Hover Arka Plan verip Hover Yazı Rengi vermezseniz yazı olduğu gibi kalır. Koyu bir hover arka planı seçtiyseniz yazı rengini de açık bir renge çekmeyi unutmayın.
Toplu işlemler
Listenin altındaki Toplu İşlemler bölümünde Tümüne AI ile İkon Öner ile her öğeye otomatik ikon önertir, Toplu Buton Stili ile tek bir stili Tümüne Uygula dersiniz.
Renkler ve görünüm
Arka Plan sekmesi:
| Ayar | Ne yapar? |
|---|---|
| Arka Plan Rengi | Çubuğun rengi. Tema renklerinden birini seçebilir ya da özel renk verebilirsiniz. |
| Opaklık | 100'ün altına çektiğinizde çubuk yarı saydam olur, altındaki içerik hafifçe görünür. |
| Bulanıklık | Yarı saydam çubuğun arkasını buğulu gösterir (cam efekti). |
| Kaydırınca Opaklaştır | Sayfanın tepesinde yarı saydam, kaydırdıkça tam renkli. Yalnız sabit çubukta çalışır. |
Görünüm sekmesi:
| Ayar | Ne yapar? |
|---|---|
| Yazı Rengi | Logo yazısı ve genel yazı rengi. |
| Menü Yazı Rengi | Menü öğelerinin normal rengi. |
| Menü Hover Rengi | Fare bir menü öğesinin üstüne gelince yazının aldığı renk. Buton olarak gösterilen öğeler kendi hover ayarlarını kullanır. |
| Kenarlık Rengi | Alt kenarlık açıksa çizginin rengi. |
| Gölge | Çubuğun altına gölge. |
Düzen sekmesinde İç Boşluk, Dış Boşluk, Slot Boşluğu (bir bölgedeki bloklar arası mesafe) ve Maksimum Genişlik (çubuğun içeriğinin en fazla kaç piksele yayılacağı) bulunur.
Mobil menü tasarımı
Telefonda menü butonuna dokununca açılan panel eskiden sabit bir görünümdeydi. Artık Kompozisyon sekmesindeki Mobil satırının sağ üstündeki Menü Tasarımı butonuyla bu paneli kendinize göre kurarsınız. Buton, panelin altında Mobil Menü Tasarımı başlıklı bir ayar alanı açar.
Ayarlar beş küçük kutuda toplanır:
Yerleşim
| Ayar | Ne yapar? |
|---|---|
| Açılış Yönü | Panel Soldan mı Sağdan mı kayarak gelsin? Menü butonunuz sağdaysa sağdan açılması daha doğal durur. |
| Panel Genişliği | 240–420 piksel. Dar telefonlarda panel ekrandan taşmaz; sistem kenarda küçük bir boşluk bırakır. |
İçerik
| Ayar | Ne yapar? |
|---|---|
| Başlık Göster ve Başlık Metni | Panelin tepesindeki başlık. Boş bırakırsanız "Menü" yazar. |
| Logo Göster | Başlığın yanına logonuzu koyar. |
| Arama Kutusu | Panelin üstüne bir arama kutusu ekler. Telefonda çubuktan Arama bloğunu kaldırıp buraya taşımak iyi bir fikirdir. |
| Hesap Bağlantısı | Panelin altına Giriş Yap (giriş yapılmamışsa) ya da Hesabım bağlantısı koyar. |
| Özel Butonlar | Çubuğa eklediğiniz Özel Buton bloklarını panelin altında da gösterir. |
| Sosyal Medya İkonları | Sosyal Medya bloğundaki ikonları panelin altına dizer. |
| Alt Not | Panelin en altına küçük bir yazı: çalışma saatleri, destek numarası gibi. |
Menü Öğeleri
| Ayar | Ne yapar? |
|---|---|
| Öğe Stili | Sade: yalın liste. Çizgili: öğeler arasında ince çizgi. Kutulu: üzerine dokununca hafif renkli kutu. Kalın Başlık: üst öğeler büyük harf ve kalın, alt öğeler normal. |
| Öğe Boyutu | Küçük / Orta / Büyük. Kalın parmaklar için Büyük'ü deneyin. |
| Alt Menüler | Açılır-kapanır: alt kategoriler ok işaretiyle açılır. Hep açık: bütün alt kategoriler baştan görünür; az kategorisi olan mağazalar için. |
Renkler
Üç renk vardır: Arka Plan, Yazı Rengi, Vurgu Rengi (dokununca ve üstüne gelince kullanılan renk). Her birinin yanında Tema rengi anahtarı açık gelir; bu durumda mağazanızın genel tema renkleri kullanılır ve tema değişince mobil menü de uyum sağlar. Farklı bir renk istiyorsanız anahtarı kapatın, altında çıkan renk seçiciden seçin.
Koyu bir mobil menü istiyorsanız yalnız Arka Plan'ı koyu, Yazı Rengi'ni açık yapın; Vurgu Rengi'ni tema renginde bırakabilirsiniz.
Menü Butonu
Çubuktaki üç çizgili butonun kendisi:
| Ayar | Ne yapar? |
|---|---|
| Buton İkonu | Üç çizgi yerine başka bir ikon. Boş bırakılınca varsayılan üç çizgi kullanılır. |
| Buton Yazısı | İkonun yanına "Menü" gibi bir yazı. Boşsa yalnız ikon görünür. |
| Buton Stili | Sade (yalnız ikon), Çerçeveli, Dolu (tema renginde dolgulu). |
En alttaki Varsayılana Dön butonu tüm mobil menü ayarlarını başlangıç haline getirir.
Adım adım: koyu, sağdan açılan bir mobil menü
- Üst Yapı'ya geçin, Navbar'a tıklayın, Kompozisyon sekmesinde Mobil satırındaki Menü Tasarımı'na basın.
- Açılış Yönü: Sağdan. Mobil satırında Menü bloğunu Sağ Bölge'ye, Sepet'i Sol Bölge'ye sürükleyin.
- Arama Kutusu ve Hesap Bağlantısı anahtarlarını açın.
- Renkler'de Arka Plan'ın Tema rengi anahtarını kapatıp koyu bir renk, Yazı Rengi için beyaz seçin.
- Öğe Stili: Çizgili, Öğe Boyutu: Büyük.
- Üst araç çubuğundan Mobil görünüme geçin ve tuvaldeki menü butonuna tıklayın; panel açılır, sonucu görürsünüz.
- Beğendiyseniz Kaydet ve Yayınla.
Mobil menüyü tuvalde görmek için cihaz görünümünü Mobil'e almanız yeterlidir; menü butonuna tıkladığınızda panel tuvalin içinde açılır ve her ayar değişikliği anında yansır.
Sık sorulan
S: Menü öğesine hover rengi verdim ama değişmiyor. C: İki ayrı ayar var. Sıradan öğeler Görünüm → Menü Hover Rengi'ni kullanır. Buton Olarak Göster açık olan öğelerde ise butonun kendi Hover Arka Plan ve Hover Yazı Rengi ayarları geçerlidir; genel ayar onları etkilemez.
S: Menü öğeleri telefonda görünmüyor. C: Doğru davranış. Telefonda menü öğeleri çubukta değil, menü butonuna dokununca açılan panelde listelenir. Menü butonunun kendisi görünmüyorsa Mobil satırında Menü bloğunun olduğundan emin olun.
S: Mobil menüde Özel Butonlarım çıkmıyor. C: Menü Tasarımı → İçerik → Özel Butonlar anahtarının açık olduğunu ve çubukta en az bir Özel Buton bloğu bulunduğunu kontrol edin. Panel, butonları çubuktaki Özel Buton bloklarından alır; ayrıca eklemeniz gerekmez.
S: Sosyal medya ikonları mobil menüde de görünsün istiyorum. C: Menü Tasarımı → İçerik → Sosyal Medya İkonları anahtarını açın. İkonlar ve bağlantılar çubuktaki Sosyal Medya bloğundan gelir.
S: Logo mobilde çok büyük duruyor. C: Logo bloğunun Logo Genişliği / Yüksekliği değerleri masaüstü ve telefonda ortaktır; Kompozisyon ayarları cihaza göre ayrılmaz. İki ekranda da iyi duran bir yükseklik seçin (çoğu mağazada 32–40 piksel yeterlidir) ya da telefonda logoyu Mobil satırından kaldırıp mobil menüde Logo Göster ile panelin başlığına taşıyın.
S: Değişiklik yaptım ama sitede görünmüyor. C: Üst Yapı da bir sayfa gibi yayınlanmalıdır. Üst çubuktan Yayınla'ya basın. Yayınlamadan yalnız editörde görünür.
S: Menüyü sadece bir sayfada farklı istiyorum. C: Navbar tüm sayfalarda ortaktır. Tek bir sayfada farklı bir çubuk istiyorsanız o sayfanın düzenleme penceresinde Üst Yapı Göster'i kapatıp sayfanın içine ayrı bir Navbar bileşeni ekleyebilirsiniz; ama bu yolu yalnız gerçekten gerekliyse kullanın, çünkü iki ayrı menüyü güncel tutmanız gerekir.
Bu sayfa faydalı oldu mu?