# Üstbilgi (header) düzenleme: katmanlar ve bloklar

> Üst Bar, Ana Bar, Menü Barı ve Alt Bar katmanlarını açıp kapatın; arama, giriş yap, karanlık mod, menü ve son dakika bandını ayarlayın; bar rengini değiştirin.

*Yardım Merkezi / Tasarım · Güncelleme: 2026-10-15 · 7 dk okuma*

- **Kimler kullanabilir:** Site yöneticileri
- **Planlar:** Tüm planlar

Üstbilgi (header) tüm sayfalarınızın en üstünde görünen modüler alandır. Tasarım editöründe sol paneldeki **Üstbilgi (Header)** başlığı altında katman katman listelenir.

## Katmanlar

| Katman | Varsayılan bloklar |
| --- | --- |
| Üst Bar (Top Bar) | Döviz, altın ve borsa kurları (sol); şehir seçimli hava durumu (sağ) |
| Ana Bar (Main Bar) | Site logosu (sol), arama kutusu (orta), arama düğmesi, karanlık/aydınlık mod düğmesi ve Giriş Yap (sağ) |
| Menü Barı (Nav Bar) | Navigasyon ve kategori menüsü |
| Alt Bar (Bottom Bar) | SON DAKİKA akış bandı |
| Mobil Menü Çekmecesi | Telefonda menü düğmesine basınca açılan panel; Bölme 1–4 (her biri %25) |

Katman adının yanında içindeki blok sayısı yazar (ör. “Ana Bar (Main Bar) (5)”). **+ Ekle** ile o katmana yeni blok eklersiniz.

## Katman (bar) ayarları

Sol listede katmanın adına (ör. **Menü Barı (Nav Bar)**) tıklayın; sağda o katmanın ayarları açılır:

- **Katmanı Etkinleştir:** Kapatırsanız katman sitede ve önizlemede gizlenir (listede “Kapalı” yazar).
- **Sabit / Yapışkan Bar (Sticky):** Sayfa aşağı kaydırılınca bu bar ekranın üstüne yapışık kalır.
- **Kapsayıcı Genişliği:** Varsayılan (1280px) ya da **Tam Ekran Genişliği** (kenarlara sıfır).
- **Yükseklik & Dikey Dolgu:** Kompakt, Normal ya da Yüksek.
- **Bölge Genişlik Dağılımı (Sol / Orta / Sağ):** Hazır düzenler (80/20, 70/30, 50/50, 15/70/15, 20/80, 33/33/33) ya da **Hassas Genişlik Ayarı** kaydırıcılarıyla bölgelerin genişliği.
- **Bar Renk & Tasarım Ayarları:** **Açık Mod** ve **Koyu Mod** için ayrı ayrı **Arka Plan Rengi** (Varsayılan, Beyaz, Açık Gri, Gri, Koyu Slate, Siyah, Lacivert, Kırmızı/Bordo, Zümrüt, Şeffaf ya da kendi renk kodunuz), **Alt Kenarlık Çizgisi** ve rengi, **Metin ve İkon Rengi**.
- **Katmandaki Bloklar:** Bu katmandaki blokların listesi.

> **İpucu:** Üstbilginin rengini değiştirmek için ilgili katmanı (çoğunlukla **Ana Bar**) seçin ve **Arka Plan Rengi**’ne kendi renk kodunuzu yazın (ör. #d7050f). Değiştirdiğiniz alanın yanında **Sıfırla** çıkar.

## Blokları taşıma ve hizalama

- Her bloğun ayarlarında **Başka Katmana Taşı** ile bloğu başka bir bara taşıyabilirsiniz.
- **Katman İçi Hizalama / Konum:** Sol, Orta ya da Sağ.
- Sol listedeki **↑ / ↓** okları ya da önizlemedeki araç çubuğu ile aynı katmandaki sırayı değiştirin.

## Arama kutusu ve arama düğmesi

- **Görünüm:** Dolu, Çerçeveli, Alt çizgili, Sade, Siyah, Site rengi, Gölgeli kart, Şeffaf, Butonlu ya da Yalnızca ikon.
- **Boyut & Geometri:** Yükseklik, köşe yuvarlaklığı, genişlik ve en fazla genişlik (px).
- **Yer tutucu metin:** Kutuda görünen yazı (ör. “Haberlerde ara…”).
- **Renk Özelleştirme:** Aydınlık ve Koyu Mod için arka plan, kenarlık, yazı, ikon, yer tutucu ve üzerine gelince (hover) renkleri. Boş bıraktığınız alanlarda seçili tasarımın renkleri kullanılır.

## Karanlık / aydınlık mod düğmesi

Ziyaretçi bu düğmeye basınca site karanlık ya da aydınlık temaya geçer. Düğmenin stilini, boyutunu, köşe yuvarlamasını ve iki tema için renklerini ayarlayabilirsiniz. İstemiyorsanız bloğu silin.

## Giriş Yap düğmesi

- **Düğme Metni:** Giriş yapılmamışken görünen yazı; okur giriş yapınca adı ve avatarı görünür.
- **Görünüm Düzeni:** İkon + Metin, Yalnızca İkon ya da Yalnızca Metin.
- **Buton Tasarımı:** Dolu, Çerçeveli, Yumuşak, Degrade, Siyah, Hayalet, Bağlantı, Parlayan, 3D, Neon ve daha fazlası.
- **İkon Seçimi**, **Boyut**, **Şekil**, **Köşe Yuvarlaklığı** ve **Hover / Dikkat Efekti**.
- **Renk Özelleştirme:** Açık ve Koyu Mod için normal ve üzerine gelince renkleri; **Tüm Renkleri Sıfırla** ile varsayılana dönün.

Okur üyeliğini kapattıysanız bu bloğu kaldırabilirsiniz. Bkz. [okur hesapları](https://ulakom.com/md/yardim/okur-etkilesimi/okur-hesaplari.md).

## Menü (Navigasyon & Kategori)

- **Üzerine Gelince (Hover) Efekti:** Varsayılan, Renk değişimi, Alt çizgi (soldan kayarak / ortadan açılan / anında), Kalın alt çizgi, Degrade çizgi, Üst çizgi, Alt nokta, Köşeli parantez [ ], Dolu hap, Açık hap, Kayan dolgu, Çerçeve, Fosforlu kalem, Parlama, Yukarı kalkma, Büyüme. Önizlemede üzerine gelerek deneyin.
- **Menü başlıklarını BÜYÜK HARF yaz** seçeneği.
- **Gösterilecek Menü** ve renkler: menü yazı rengi, üzerine gelince yazı rengi, açılır menü renkleri (her biri saydamlık ayarıyla).

Menüdeki öğelerin kendisi (hangi kategoriler, sıra, alt menüler) tasarım editöründen değil **Yönet → Menü** sayfasından düzenlenir. Bkz. [kategoriler ve menü](https://ulakom.com/md/yardim/yayin/kategoriler-ve-menu.md).

## Son Dakika akış bandı

- **Rozet & Başlık:** Rozet metni (ör. SON DAKİKA), ikon (ör. Yıldırım) ve rozet stili.
- **Akış & Animasyon:** Aşağıdan Yukarı, Kayan Bant ya da Solarak Geçiş; **Haber Değişim Aralığı** (ör. 4 saniye); ok butonları ve sıra sayacı (1/5).
- **Görünüm & Etkileşim:** Haber saati, kategori etiketi, fare üzerine gelince duraklat.
- **Kutu Yuvarlaklığı** ve renkler: rozet, saat rozeti, kategori rozeti, oklar, şerit/kutu arka planı ve kenarlığı.

## Üst Bar: kurlar ve hava durumu

Döviz/altın/borsa bloğu ve hava durumu bloğu Üst Bar’dadır. Bloklara tıklayıp gösterimlerini ve konumlarını ayarlayın; istemiyorsanız silin ya da **Katmanı Etkinleştir** ile tüm Üst Bar’ı kapatın.

## Mobil Menü Çekmecesi

Telefonda menü simgesine basınca açılan paneldir. Bölme 1–4’ün her birine **+ Ekle** ile blok ekleyebilir, göz simgesiyle bölmeyi gizleyebilirsiniz. Önizlemeyi üst çubuktan **mobil** görünüme alarak kontrol edin.

## Üstbilgiyi başka sitede kullanma

Katman ayarlarının sağ üstündeki **indir** simgesi o katmanın ayarlarını dosya olarak dışa aktarır, **yükle** simgesi içe aktarır. Tüm tasarımı taşımak için bkz. [içe ve dışa aktarma](https://ulakom.com/md/yardim/siteler/ice-ve-disa-aktarma.md).

## İlgili makaleler

- [Logoyu değiştirme, site simgesi ve renkler](https://ulakom.com/md/yardim/tasarim/logo-renk-ve-yazi-tipi.md)
- [Tasarım editörüne giriş](https://ulakom.com/md/yardim/tasarim/tasarim-editoru.md)
- [Kategoriler ve menü düzeni](https://ulakom.com/md/yardim/yayin/kategoriler-ve-menu.md)
- [Altbilgi (footer) düzenleme](https://ulakom.com/md/yardim/tasarim/altbilgi-footer-duzenleme.md)

---

Kaynak sayfa: https://ulakom.com/yardim/tasarim/ustbilgi-header-duzenleme