Tasarım ve görünüm
Hazır tasarımlar, renkler, açık/koyu mod, menü ve müşteri paneli stilleri, özel CSS, CSS değişkenleri ve sınıf adları.
Görünüm ve site editörü
Admin → Görünüm sayfasında aktif tasarımınız, diğer hazır tasarımlar ve sayfalarınız bir aradadır. Aktif tasarımın yanındaki Siteyi düzenle (ya da tasarım kartındaki Düzenle) tek bir editör açar:
| Alan | Ne yapılır |
|---|---|
| Sol → Site | Renkler, Yazı & köşeler, Site menüsü, Alt bilgi, Müşteri paneli, Marka, Özel CSS. Buradaki ayarlar sitenin tüm sayfalarına uygulanır. |
| Sol → Sayfa bölümleri | Seçili sayfanın blokları: ekle, sırala, çoğalt, gizle, sil. |
| Orta | Canlı önizleme: üst menü, sayfa blokları ve alt bilgi. Önizlemede menüye, bir bölüme ya da alt bilgiye tıklayınca o öğenin ayarları sağda açılır. "Müşteri paneli" seçiliyken önizleme paneli gösterir. |
| Sağ | Seçili öğenin ayarları; hiçbir şey seçili değilse sayfa ayarları (başlık, adres, görünürlük, SEO açıklaması). |
| Üst çubuk | Sayfa seçici, dil, geri al/yinele, masaüstü/tablet/telefon, açık/koyu, Canlı önizleme penceresi, Taslağı kaydet, Yayınla. |
Taslağı kaydet site ayarlarını ve sayfanın taslağını kaydeder; Yayınla ayrıca sayfayı yayına alır. Canlı önizleme penceresi gerçek sitenizi yeni sekmede açar ve kaydetmediğiniz görünüm değişikliklerini orada gösterir.
Hazır tasarımlar
Her panel on beş tasarımla gelir. Hepsini tasarım galerisinde canlı demo ile görebilirsiniz.
| Tasarım | Karakter | Menü | Müşteri paneli kenar çubuğu |
|---|---|---|---|
| Standart | Ortalanmış başlık, özellik kartları | Yüzen dock, buzlu cam | Buzlu cam |
| Klasik | Giriş kartı yanında başlık, beyaz kartlar | Çubuk, menü ortada | Sade |
| Gece | Koyu cam ve neon parıltı | Yüzen dock | Buzlu cam |
| Kurumsal | Sade, güven veren, noktalı doku | Çubuk, menü solda | Sade |
| Hızlı Sipariş | Degrade başlık ve ana sayfada sipariş formu | Çubuk, menü ortada | Sade |
| Sosyal Pop | Canlı degrade, yuvarlak hatlar | Yüzen dock | Marka rengi |
| Minimal | Büyük tipografi, düz yüzeyler | Çubuk, menü solda, şeffaf | Sade, düz kartlar |
| Bayi Pro | Bayiler için yoğun, tablo ağırlıklı | Çubuk, menü solda, koyu | Koyu |
| Premium | Koyu zemin, altın vurgular | Çubuk, menü ortada, koyu | Koyu |
| Bento | Aydınlık, bento kart ızgarası, paketler, istatistik bandı | Çubuk, menü ortada, buzlu cam | Sade, gölgeli kartlar |
| Neon | Koyu, parlayan degrade başlık, geri sayım, kayan platformlar | Yüzen dock | Koyu |
| Aurora | Koyu zeminde kuzey ışığı renk geçişleri, cam kartlar, istatistik bandı | Yüzen dock | Buzlu cam |
| Brutal | Kalın siyah çizgiler, sert gölgeler, keskin köşeler | Çubuk, menü solda | Sade |
| Clean | Bol boşluk, net tipografi, ürün sayfası havası | Çubuk, menü ortada, buzlu cam | Sade, düz kartlar |
| Glass | Aydınlık buzlu cam kartlar, hızlı sipariş hero | Yüzen dock | Buzlu cam, gölgeli kartlar |
Bir tasarımı uygularken iki seçenek sunulur:
- Ana sayfayla birlikte uygula: tasarımın hazır ana sayfası oluşturulur ve yayınlanır (mevcut ana sayfanızın taslağı değiştirilir).
- Yalnızca renk ve stil: ana sayfanıza dokunulmaz.
İpucu: Tasarımlar düzen ve karakter belirler, renkler sizindir. Bir tasarımı uyguladıktan sonra ana rengi değiştirirseniz tasarım korunur, sadece renkleri değişir.
Renkler ve modlar
- Ana renk: butonlar, bağlantılar, vurgular. 12 hazır palet ya da istediğiniz hex kodu.
- İkinci renk: degradelerin ikinci durağı ve bazı vurgular. Otomatik bırakılırsa ana renkten türetilir.
- Varsayılan mod: ziyaretçi henüz seçim yapmadıysa sitenin açık mı koyu mu açılacağı. Ziyaretçi seçimini değiştirirse tarayıcısında hatırlanır.
- Zemin, kart ve yazı renkleri: açık ve koyu mod için ayrı ayrı. Boş bırakılan alan ana renkten otomatik türetilir. Yazı rengini değiştirdiğinizde ikincil yazılar, kenarlıklar ve gri tonların tamamı bu renkten hesaplanır.
Butonların yazı rengi otomatik seçilir: lime, sarı gibi açık bir ana renkte buton yazısı koyu, koyu renklerde beyaz olur.
Site menüsü
Menü düzeni:
| Değer | Görünüm |
|---|---|
Yüzen dock (dock) | Üstte boşluklu, yuvarlak hap şeklinde menü |
Çubuk · menü solda (left) | Tam genişlik çubuk; menü logonun hemen yanında |
Çubuk · menü ortada (center) | Tam genişlik çubuk; menü ortada |
Çubuk · menü sağda (right) | Tam genişlik çubuk; menü butonların yanında |
Logo üstte, menü altta (stacked) | Logo ortada üstte, menü altında |
Menü zemini: Düz (surface), Buzlu cam (glass), Marka rengi (brand), Koyu (dark), Şeffaf (transparent). Otomatik seçeneği tasarımın varsayılanını kullanır.
Dil, para birimi ve tema seçicileri: Ayrı ikonlar (icons), Bayrak ve kodlar (labels), Tek kapsül (segmented), Tek açılır menü (combined, bayrak + "TR · USD") veya Ayar ikonu (menu). Menüde göster altından açık/koyu düğmesi, para birimi ve dil ayrı ayrı gizlenebilir. Mobilde ayrı ikonlar dışındaki görünümler tek bir ayar düğmesinde toplanır.
Alt bilgi (footer)
- Düzen: Sütunlu (
columns: logo ve tanıtım yazısı solda, bağlantı grupları sütunlarda), Ortalanmış (centered), Tek satır (minimal: başlıklar ve tanıtım gizlenir, bağlantılar yan yana). - Zemin: Düz (
surface), Marka rengi (brand), Koyu (dark), Şeffaf (transparent). Yazı rengi zemine göre otomatik okunur hale gelir. - Alt bilgi yazısı: logonun altındaki tanıtım metni (en fazla 300 karakter). Boşsa her dilin varsayılan metni kullanılır.
- Bağlantılar: Admin → Menüler → Footer menüsünden gruplar ve bağlantılar eklenir; editördeki "Alt bilgi bağlantılarını düzenle" düğmesi doğrudan oraya götürür.
Müşteri paneli
- Kenar çubuğu: Sade, Buzlu cam, Marka rengi, Koyu.
- Kartlar: Çerçeveli, Gölgeli, Düz.
Müşteri panelinin zemini, kartları ve yazıları Renkler sekmesindeki zemin/kart/yazı renklerini izler.
Özel CSS
Görünüm → Özel CSS alanına yazdığınız kurallar sitenize ve müşteri panelinize yüklenir; yönetim panelinde asla yüklenmez (yanlış bir kural admin'e girmenizi engellemesin diye).
- En fazla 50.000 karakter.
@importve<style>etiketleri otomatik silinir.- Tema CSS'inden sonra yüklenir; aşağıdaki değişkenleri ezebilirsiniz.
- Kaydetmeden önce canlı önizleme penceresinde deneyebilirsiniz.
/* Ana renk tonunu sadece başlıklarda biraz koyulaştır */
.nx-h1, .nx-h2 { color: color-mix(in srgb, var(--brand-solid) 70%, var(--on-surface)); }
/* Kartları daha yuvarlak yap */
.nx-card { border-radius: 28px; }
/* Sadece "Pro" tasarımında menü çubuğuna ince alt çizgi */
html[data-design="pro"] .nx-header-bar { border-bottom: 2px solid var(--brand-solid) !important; }
/* Koyu modda müşteri paneli kartları */
html.dark .nx-dcard { background: #101418 !important; }Tailwind yardımcı sınıfları bazı yerlerde !important kullanır. Kuralınız etkisiz kalırsa sonuna !important ekleyin.
CSS değişkenleri
Tema, :root (açık mod) ve html.dark (koyu mod) üzerinde şu değişkenleri tanımlar:
| Değişken | Anlamı |
|---|---|
--bg, --background, --surface | Sayfa zemini |
--surface-container-lowest … --surface-container-highest | Kart katmanları (en açıktan en koyuya) |
--on-surface, --on-background | Ana yazı rengi |
--on-surface-variant | İkincil yazı |
--outline, --outline-variant | Kenarlıklar |
--primary | Bağlantı ve vurgu rengi (koyu modda daha açık ton) |
--brand-solid, --brand-solid-hover | Dolu buton zemini ve üzerine gelme hali |
--on-brand | Marka renkli zemin üzerindeki okunur yazı rengi |
--brand-solid-2 | Degradelerin ikinci rengi |
--secondary, --secondary-container | İkinci renk |
--nx-accent, --nx-accent-2 | Seçtiğiniz ana ve ikinci rengin ham değeri |
--radius-lg, --radius-xl, --radius-2xl, --radius-3xl | Köşe yarıçapları |
--font-family-display, --font-family-body | Başlık ve gövde fontu |
--color-indigo-50 … --color-indigo-950 | Ana rengin 11 tonluk skalası |
--color-violet-*, --color-purple-* | İkinci rengin skalası |
--color-slate-50 … --color-slate-950 | Yazı ve zeminden türetilen gri tonlar |
Köşe ayarına göre yarıçaplar (px, lg/xl/2xl/3xl): Kare 0/0/0/0, Hafif 4/6/8/10, Orta 6/9/12/16, Yuvarlak 8/12/16/24, Çok yuvarlak 12/16/22/30.
HTML öznitelikleri
<html> etiketi seçimlerinizi öznitelik olarak taşır; CSS'te bunlara göre kural yazabilirsiniz:
| Öznitelik | Değerler |
|---|---|
class="dark" | Koyu mod açıkken |
data-design | standard, classic, night, corporate, quick, pop, mono, pro, premium, bento, neon, aurora, brutal, clean, glass (admin sayfalarında admin) |
data-header | dock, left, center, right, stacked |
data-header-tone | surface, glass, brand, dark, transparent |
data-dash-sidebar | surface, glass, brand, dark |
data-dash-cards | bordered, shadow, flat |
data-footer | columns, centered, minimal |
data-footer-tone | surface, brand, dark, transparent |
Sınıf adları
Bloklar ve site iskeleti sabit nx-* sınıfları kullanır:
| Alan | Sınıflar |
|---|---|
| Sayfa ve bölümler | .nx-page, .nx-public (hizmetler, API, blog), .nx-section, .nx-block-hero, .nx-block-services … |
| Bölüm zemini | .nx-bg-none, .nx-bg-surface, .nx-bg-primary, .nx-bg-gradient |
| Hero | .nx-hero, .nx-hero--centered, --split-login, --split-order, --kpi, --type, --image |
| Yazı | .nx-h1, .nx-h2, .nx-sub, .nx-muted, .nx-eyebrow, .nx-link |
| Bileşenler | .nx-card, .nx-btn, .nx-btn-primary, .nx-btn-ghost, .nx-btn-invert, .nx-chip, .nx-badge, .nx-table, .nx-faq-item, .nx-quick-order, .nx-login-card, .nx-cta-card |
| Üst menü | .nx-header, .nx-header-bar, .nx-header-brand, .nx-header-nav, .nx-header-actions, .nx-header-cta |
| Alt bilgi | .nx-footer, .nx-footer-grid, .nx-footer-brand, .nx-footer-title, .nx-footer-links, .nx-footer-bottom |
| Müşteri paneli | .nx-dash, .nx-dash-side, .nx-dash-link, .nx-dash-link-active, .nx-dcard |
| Diyaloglar | .nx-dialog, .nx-dialog-title, .nx-dialog-btn-primary … |
Daha fazla kontrol mü istiyorsunuz? Siteyi tamamen kendi kodunuzla yazmak için Kod teması sayfasına bakın.