Tema Tasarımı (Theme Design) Modülü
Tema Tasarımı (Theme Design) modülü, BulutPress® ile kurulan web sitenizin görünümünü tek satır CSS kodu yazmadan yönetmenizi sağlayan site geneli bir tasarım aracıdır. Sitenin varsayılan yazı tipini, yazı boyutunu, yazı rengini ve arkaplanını tek yerden belirler; ardından üst alan (header), banner bölümleri, orta alan, footer, modül başlıkları, içerik ve kategori sayfaları, e-ticaret kartları ve HTML başlıkları gibi 94 hazır hedef için arkaplan, iç ve dış boşluk, gölge, kenarlık, köşe yuvarlaklığı, hover efekti, tipografi ve mobil görünüm ayarlarını ayrı ayrı yapmanıza olanak tanır. Seçtiğiniz Google Fonts yazı tipleri siteye kendiliğinden yüklenir.
Bu rehberde Tema Tasarımı modülünün ne işe yaradığını, nasıl eklenip yayınlandığını, tüm parametrelerini (kabul edilen değer aralıklarıyla birlikte), hedef seçici kataloğunun tamamını, mobil ve masaüstü davranışını, hazır tasarım tariflerini ve sık sorulan soruları bulacaksınız.
Tema Tasarımı Modülü Nedir?
Tema Tasarımı, sayfaya görünür bir bölüm eklemeyen, bunun yerine sitenizin mevcut bölümlerinin nasıl görüneceğini belirleyen bir modüldür. Modüle girdiğiniz her ayar, sitenin stil dosyasına CSS kuralı olarak yazılır. Örneğin bir nesnede hedef olarak .modul-baslik seçip yazı rengini kırmızı yaparsanız, sitedeki tüm modül başlıkları kırmızı görünür.
Modül iki katmandan oluşur:
- Site geneli (gövde) ayarları: Sitenin
<body>etiketine uygulanan varsayılan yazı tipi, arkaplan, yazı rengi, yazı boyutu, yazı kalınlığı ve satır yüksekliği. Alt elemanlar aksi belirtilmedikçe bu değerleri miras alır. - Nesneler (hedef bazlı ayarlar): Her nesne, kataloğdan seçilen tek bir hedefe (CSS seçicisine) uygulanan stil paketidir. İstediğiniz kadar nesne ekleyebilirsiniz; her nesne CSS'e
{seçici} { ... }kuralı olarak yazılır.
Ne Zaman Kullanılır, Ne Zaman Kullanılmaz?
Kullanmanız gereken durumlar
- Sitenin yazı tipini, renklerini, boşluklarını site genelinde ve kod yazmadan değiştirmek istediğinizde.
- Tema görünümünü değiştirmek için elle CSS yazmadan önce: seçici bazlı düzenlemelerin çoğu bu modülden yapılabilir ve tek yerden yönetilir.
- Header, banner, footer gibi bölümlere arkaplan, minimum yükseklik ve boşluk vermek; modül başlıklarını, kartları, düğmeleri ve bağlantıları stillemek istediğinizde.
- Belirli bir bölümü sadece mobilde ya da sadece masaüstünde gizlemek istediğinizde.
Kullanmamanız gereken durumlar
- Sayfaya yeni bir bölüm eklemek istiyorsanız: Tema Tasarımı görünür bir bölüm üretmez. Bunun için Hero Banner, Zengin Arkaplan, Esnek Modül gibi içerik modüllerini kullanın.
- Katalog dışında bir seçici hedeflemek istiyorsanız: hedef alanına serbest CSS seçicisi yazılamaz, yalnız hazır katalogdan seçim yapılır.
- Pseudo-element (
::before,::after), özel media query veya animasyon gerekiyorsa: modülün ve kataloğun kapsamadığı bu ince ayarlar temanın Less (CSS) bölümüne yazılır.
Tema Tasarımı Modülü Nasıl Eklenir ve Yayınlanır?
- Yönetim panelinde herhangi bir sayfanın modül ekleme ekranını açın ve modül türü olarak Tema Tasarımı (Theme Design)'nı seçin. Modül site-genel grubundadır.
- Modül Başlığı alanına panelde ayırt etmenizi sağlayacak bir ad yazın (örneğin "Site Tema Ayarları"). Bu alan zorunludur.
- Konum seçmenize gerek yoktur: Tema Tasarımı konumdan bağımsız (location-free) bir modüldür ve sistem tarafından otomatik olarak Banner Alt 3 konumuna yerleştirilir. Bu modülün konumu sonradan değiştirilemez, değiştirmek de anlamsızdır.
- Site geneli ayarlarını (yazı tipi, arkaplan, renk, boyut, kalınlık, satır yüksekliği) doldurun.
- Yeni Nesne Ekle düğmesiyle hedef bazlı nesneler ekleyin ve her nesnede önce Hedef CSS Seçici'yi seçin.
- Kaydet (CTRL+S) ile modülü kaydedin. Görsel gerektiren alanlar (örn. Zemin Görseli (Mobil) ve
url(...)içeren arkaplanlar) ilk kayıttan sonra düzenleme ekranında kullanılabilir hale gelir. - Çok önemli: Modülün yayın ekranından "Tüm Sayfalarda Yayınla" seçeneğini işaretleyin. Aksi halde ayarlar yalnızca modülün eklendiği sayfada geçerli olur ve diğer sayfalarda "çalışmıyor" gibi görünür. Tüm sayfalarda yayınlanan modül, ileride eklenecek yeni sayfalarda da otomatik olarak geçerli olur.
Sitede tek bir Tema Tasarımı modülü kullanmanız önerilir; böylece tüm tema ayarlarınız tek yerden yönetilir ve birbiriyle çakışmaz.
Genel Modül Ayarları
Her modülde bulunan ortak alanların Tema Tasarımı modülündeki anlamı:
| Alan | Seçenekler / Değer | Açıklama |
|---|---|---|
| Modül Başlığı (zorunlu) | Metin | Modülü panelde tanımanızı sağlar. |
| Hangi Cihazlarda Görüntülenecek? | Mobil ve Masaüstünde (varsayılan) · Sadece Mobilde · Sadece Masaüstünde | Modülün hangi cihaz grubunda çalışacağını belirler. Tema ayarlarının tüm cihazlarda geçerli olması için varsayılan seçeneği kullanın; cihaza özel ayarlar için nesnelerdeki mobil alanlarını tercih edin. |
| Kategoride Yayınlanıyorsa | Kategori Girişi ve İçerikte (varsayılan) · Sadece Kategori Girişinde · Sadece Kategori İçeriğinde | Modül bir kategori sayfasına bağlıysa, kategorinin giriş (listeleme) sayfasında mı, içerik sayfalarında mı, yoksa ikisinde de mi geçerli olacağını belirler. |
| Modül Yapışkanlığı (px) | Sayı (boş = yapışmaz) | Görünür kutu çizen modüller içindir; Tema Tasarımı sayfaya kutu eklemediğinden boş bırakılır. |
| Yayın Durumu | Yayında (varsayılan) · Yayında Değil | "Yayında Değil" seçilirse modül sayfalara bağlı olsa da hiçbir ayar uygulanmaz. Tüm tema ayarlarını geçici olarak devre dışı bırakmak için kullanılabilir. |
| Modül Başlığı Görünümü | Başlığı Göster (varsayılan) · Başlığı Gizle | Başlık yalnızca panelde ayırt etmek için verildiğinden "Başlığı Gizle" önerilir. |
| Modül Düzenleme Yetkisi | Tüm Yöneticiler (varsayılan) · Sadece Site Sahibi | "Sadece Site Sahibi" seçilirse tema ayarlarını yalnız site sahibi değiştirebilir; ajans ve çok yöneticili sitelerde tasarımın yanlışlıkla bozulmasını önler. |
Site Geneli (Gövde) Ayarları
Bu alanlar sitenin <body> etiketine uygulanır ve tüm sayfanın varsayılanını oluşturur. Boş bırakılan alanlarda tema varsayılanı geçerli kalır.
| Alan | Kategori | Değer / Aralık | Açıklama |
|---|---|---|---|
| Yazı Tipi (Google Fonts) | Genel | 36 seçenek (boş = tarayıcı varsayılanı) | Site varsayılan yazı tipi. Seçilen Google Font, 100-900 arası tüm ağırlıklarıyla siteye otomatik eklenir. |
| Arkaplan | Genel | CSS background kısaltması, en çok 1000 karakter | Sitenin arkaplanı: düz renk, url(...) ile görsel ya da gradyan. Boş = tema varsayılanı. |
| Yazı Rengi | Genel | HEX veya rgb/rgba | Site varsayılan yazı rengi. Alt elemanlar ayrıca renk verilmedikçe bu rengi miras alır. |
| Yazı Boyutu (px) | Tipografi | 8 – 100 px | Sitenin taban yazı boyutu. em ve % birimleri bu değer üzerinden hesaplanır. |
| Yazı Kalınlığı | Tipografi | 100 – 900 (100'ün katları) | 400 = normal, 700 = kalın. Seçilen font o kalınlığı desteklemiyorsa en yakını uygulanır. |
| Satır Yüksekliği (px) | Tipografi | 8 – 100 px | Tipik değer: yazı boyutu × 1,4 – 1,6 (örn. 16 px yazı için 24 px). Dikkat: Değer piksel olarak miras kalır; kendi satır yüksekliği olmayan büyük başlıklar da bu değeri alır ve satırlar üst üste biner. Başlıklara ayrıca satır yüksekliği verin ya da bu alanı boş bırakın. |
Kullanılabilir Google Fonts yazı tipleri
Sans-serif (tırnaksız): Roboto, Roboto Condensed, Open Sans, Lato, Montserrat, Poppins, Raleway, Oswald, Nunito, PT Sans, Source Sans 3, Inter, Rubik, Work Sans, Fira Sans, Quicksand, Barlow, Mulish, Josefin Sans, Alan Sans, Instrument Sans, DM Sans, Figtree, Jost.
Serif (tırnaklı): Playfair Display, Merriweather, Lora, PT Serif, Libre Baskerville, EB Garamond, Crimson Text, Bitter, Fraunces, Cormorant Garamond, DM Serif Display.
Nesne düzeyindeki Yazı Tipi alanında bu listeye ek olarak Miras Al (inherit) seçeneği bulunur; hedef, üst elemanın yazı tipini kullanır.
Yazı kalınlığı seçenekleri: 900 (Çok Kalın), 800 (Çok Kalın), 700 (Kalın), 600 (Orta Kalın), 500 (Orta Kalın), 400 (Normal), 300 (İnce), 200 (Çok İnce), 100 (Çok İnce).
Nesne (Hedef) Ayarları
Her nesne bir hedef ve ona uygulanacak stillerden oluşur. Nesnede yalnızca doldurduğunuz alanlar CSS'e yazılır; boş bırakılan alanlar temanın mevcut görünümüne dokunmaz. Bir nesnede 44 ayar alanı vardır ve bunlar panelde aşağıdaki kategorilerle gruplanır.
Seçici: Hedef CSS Seçici
Hedef CSS Seçici her nesnede zorunludur. Alana tıklandığında açılan pencereden seçilir; serbest metin yazılamaz. Seçilen değer CSS'e {seçici} { ... } olarak yazılır. Katalogda toplam 94 hedef bulunur:
Üst Alan (Header)
| Hedef (panelde görünen ad) | CSS seçicisi |
|---|---|
| Üst Alan (tamamı) | #bolum-ust |
| Üst Bar | #bolum-ust-bar |
| Üst Şerit | #bolum-ust-serit |
| Şerit Yerleşim | #bolum-ust-serit-yerlesim |
| Şerit Sol | #bolum-ust-serit-sol |
| Şerit Sağ | #bolum-ust-serit-sag |
| Şerit Düğmeler | #bolum-ust-serit-dugmeler |
| Sepet Düğmesi | #sepet-dugme |
| Sepet Adet Rozeti | #sepet-adet |
| Arama Düğmesi | #dugme-google-arama |
Üst Bannerlar
| Hedef (panelde görünen ad) | CSS seçicisi |
|---|---|
| Üst Banner | #bolum-banner-ust |
| Üst Banner Modül Başlıkları | #bolum-banner-ust .modul-baslik |
| Üst Banner 2 | #bolum-banner-ust-2 |
| Üst Banner 2 Modül Başlıkları | #bolum-banner-ust-2 .modul-baslik |
| Üst Banner 3 | #bolum-banner-ust-3 |
| Üst Banner 3 Modül Başlıkları | #bolum-banner-ust-3 .modul-baslik |
Orta Alan
| Hedef (panelde görünen ad) | CSS seçicisi |
|---|---|
| İki Banner Arası | #bolum-iki-banner-arasi |
| Orta Üst | #bolum-orta-ust |
| Orta Üst Modül Başlıkları | #bolum-orta-ust .modul-baslik |
| Orta Üst 2 | #bolum-orta-ust-2 |
| Orta Üst 2 Modül Başlıkları | #bolum-orta-ust-2 .modul-baslik |
| Orta Üst 3 | #bolum-orta-ust-3 |
| Orta Üst 3 Modül Başlıkları | #bolum-orta-ust-3 .modul-baslik |
| Orta Alan | #bolum-orta |
| Orta Gövde | #bolum-orta-govde |
| Sol Kenar Çubuğu | #bolum-orta-sol |
| Sağ Kenar Çubuğu | #bolum-orta-sag |
| Orta Alt | #bolum-orta-alt |
| Orta Alt Modül Başlıkları | #bolum-orta-alt .modul-baslik |
| Orta Alt 2 | #bolum-orta-alt-2 |
| Orta Alt 2 Modül Başlıkları | #bolum-orta-alt-2 .modul-baslik |
| Orta Alt 3 | #bolum-orta-alt-3 |
| Orta Alt 3 Modül Başlıkları | #bolum-orta-alt-3 .modul-baslik |
Alt Bannerlar
| Hedef (panelde görünen ad) | CSS seçicisi |
|---|---|
| Alt Banner | #bolum-banner-alt |
| Alt Banner Modül Başlıkları | #bolum-banner-alt .modul-baslik |
| Alt Banner 2 | #bolum-banner-alt-2 |
| Alt Banner 2 Modül Başlıkları | #bolum-banner-alt-2 .modul-baslik |
| Alt Banner 3 | #bolum-banner-alt-3 |
| Alt Banner 3 Modül Başlıkları | #bolum-banner-alt-3 .modul-baslik |
Alt Alan (Footer)
| Hedef (panelde görünen ad) | CSS seçicisi |
|---|---|
| Footer | #bolum-footer |
| Footer Modülleri | #bolum-footer .modul |
| Footer Modül Başlıkları | #bolum-footer .modul-baslik |
| Footer Modül Nesneleri | #bolum-footer .itemInner |
Genel ve Ortak Alanlar
| Hedef (panelde görünen ad) | CSS seçicisi |
|---|---|
| Tüm Sayfa | #canvas |
| İçerik Konteyneri | .bolum-konteyner |
| Tüm Yatay Bölümler | .bolum-kolon-yatay |
| Tüm Banner Bölümleri | .bolum-banner-ust-alt |
| Banner İç Alanı | .banner-ic |
| Tüm Dikey Bölümler | .bolum-kolon-dikey |
İçerik Sayfası
| Hedef (panelde görünen ad) | CSS seçicisi |
|---|---|
| Sayfa Ana Başlığı | #sayfa-ana-baslik |
| Breadcrumb | .breadcrumb |
| Breadcrumb Öğeleri | .breadcrumb li |
| Breadcrumb Linkleri | .breadcrumb a |
| Makale Tarihleri | .article-dates |
| Sosyal Paylaşım Düğmeleri | #sosyal-paylasim-dugmeleri |
Kategori Sayfası
| Hedef (panelde görünen ad) | CSS seçicisi |
|---|---|
| Kategori Giriş Yazısı | #kategori-giris-yazisi |
| Kategori Listeleme Alanı | #kategori-icerikleri |
| Kategori Kartları | #kategori-icerikleri .itemInner |
| Kategori Kart Başlıkları | #kategori-icerikleri .itemBaslik |
| Kategori Kart Görselleri | #kategori-icerikleri .itemFigure img |
| Kategori Kart Tarihleri | #kategori-icerikleri .itemTarih |
| Devamını Oku Düğmeleri | #kategori-icerikleri .devami |
| Sayfalandırma | #kategori-sayfalandirma |
| Önceki Yazılar Bloğu | #kategori-oncekiler |
Kategori İçerikleri Listeleme Modülü (Blog Modülü)
| Hedef (panelde görünen ad) | CSS seçicisi |
|---|---|
| Blog Modülü Kartları | .modul-kategori .itemInner |
| Blog Modülü Kart Görsel Kutusu | .modul-kategori .itemFigure p |
| Blog Modülü Kart Başlıkları | .modul-kategori .itemBaslik |
| Blog Modülü Kart Görselleri | .modul-kategori .itemFigure img |
| Blog Modülü Kart Tarihleri | .modul-kategori .itemTarih |
| Blog Modülü Devamını Oku Düğmeleri | .modul-kategori .devami a |
E-Ticaret
| Hedef (panelde görünen ad) | CSS seçicisi |
|---|---|
| Raf Giriş Yazısı | #raf-giris-yazisi |
| Ürün Kartı | .raf-urun |
| Ürün Kart Başlığı | .raf-urun-baslik |
| Ürün Kart Fiyatı | .raf-urun-fiyat |
| Ürün Kart Görseli | .raf-urun-gorsel |
| Eski Fiyat | .fiyat-eski |
| Ürün Detay Başlığı | #urun-baslik |
| Ürün Detay Fiyatı | #urun-fiyat |
| Ürün Detayları | #urun-detaylar |
| Sepete Ekle Düğmesi | #sepete-ekle |
Modüller
| Hedef (panelde görünen ad) | CSS seçicisi |
|---|---|
| Modül Başlıkları | .modul-baslik |
| Modül Nesneleri | .modul .itemInner |
| Modül Nesne Başlıkları | .modul .itemBaslik |
| Modül Devamı Düğmeleri | .modul .devami |
| Artan Sayılar: Sayı | .modul-number-counter .counter-anim |
HTML Elemanları
| Hedef (panelde görünen ad) | CSS seçicisi |
|---|---|
| Tüm Başlıklar (H1-H6) | h1,h2,h3,h4,h5,h6 |
| Bağlantılar | a |
| Kalın Yazı | strong |
| Başlık 1 | h1 |
| Başlık 2 | h2 |
| Başlık 3 | h3 |
| Başlık 4 | h4 |
| Başlık 5 | h5 |
| Başlık 6 | h6 |
İpucu: .modul-baslik tüm modül başlıklarını etkiler. Yalnızca belirli bir bölümdeki başlıkları değiştirmek için o bölüme özel seçiciyi (örn. #bolum-footer .modul-baslik) kullanın. #canvas tüm sayfa kapsayıcısıdır; .bolum-konteyner içerik genişliğini taşıyan kapsayıcıdır.
Arkaplan ve Kutu
| Alan | Değer / Aralık | Açıklama |
|---|---|---|
| Arkaplan | CSS background kısaltması, en çok 1000 karakter | Hedefin arkaplanı: renk, url(...) görsel veya gradyan. Örnek: rgba(255,255,255,0.5) url(x.png) top center no-repeat. |
| Minimum Yükseklik (PC) (px) | 0 – 2000 px | Hedefin en az yüksekliği; içerik az olsa bile bölüm yüksekliğini sabitler. Tüm ekranlarda geçerlidir; mobil değeri doluysa mobilde o geçer. |
| Minimum Yükseklik (Mobil) (px) | 0 – 2000 px | Mobilde (≤767 px) geçerli minimum yükseklik. Masaüstünde yüksek tutulan hero/banner bölümlerini mobilde kısaltmak için. Boş = PC değeri. |
| Kutu Gölgesi | CSS box-shadow, en çok 240 karakter | Örnek: 0 4px 12px rgba(0,0,0,0.1). Birden çok gölge virgülle ayrılır. Boş = gölge yok. |
| Köşe Yuvarlaklığı (px) | 0 – 200 px | Dört köşeye uygulanan yarıçap. 0 = keskin köşe. Kare (1/1) kutuda genişliğin yarısı veya üzeri daire yapar (örn. 120 px kutu için 60; 200 yazmak 400 px'e kadar her genişlikte daire verir). |
| Kenarlık | CSS border kısaltması, en çok 100 karakter | Örnek: 1px solid #e0e0e0. Boş = kenarlık çizilmez. |
| Alt Kenarlık | CSS border-bottom, en çok 100 karakter | Yalnız alt kenar; başlık altı çizgisi veya kesikli satır ayracı için (örn. 1px dashed #c8b89a). Kenarlık ile birlikte girilirse alt kenarı bu değer belirler. |
| Yerleşim Biçimi | Blok (tam genişlik) · Satır içi blok (içerik kadar) · Esnek (flex) · Satır içi esnek (inline-flex) | CSS display. "Satır içi blok", düğme gibi elemanların satır boyu yayılmasını engeller; genişliği içerik ve iç boşluk belirler. |
| Yatay Dağılım (flex) | Başa yasla · Ortala · Sona yasla · İki uca yasla | CSS justify-content. Yalnızca Yerleşim Biçimi esnek (flex) iken etkilidir. "İki uca yasla" metni sola, son parçayı (örn. fiyat) sağa iter. |
| Genişlik (%) | 1 – 100 % | Kapsayıcıya göre genişlik. Tipik kalıp: 100 + En Fazla Genişlik. span/a gibi satır içi elemanlarda etkisizdir (Yerleşim Biçimi blok veya satır içi blok olmalı); img ve table'da doğrudan çalışır. |
| En Fazla Genişlik (px) | 1 – 2000 px | Genişliğin üst sınırı. Genişlik (%) 100 + 460 px → dar ekranda tam genişlik, geniş ekranda en çok 460 px. |
| En Fazla Genişlik (Mobil) (px) | 1 – 2000 px | Mobilde (≤767 px) üst sınır. Masaüstünde büyük tutulan ikon, logo veya görseli mobilde küçültmek için (örn. PC 120 → mobil 80). |
| En-Boy Oranı | 1/1 Kare · 4/3 Yatay · 3/2 Yatay · 16/9 Geniş · 3/4 Dikey · 2/3 Dikey | CSS aspect-ratio (height: auto ile basılır). Farklı boyutlu fotoğrafları eşit kutuya oturtmak ya da kare/daire kırpmak için. Görsellerde Görsel Sığdırma "Kırp (cover)" ile birlikte kullanılır. |
| Görsel Sığdırma | Kırp (cover) · Sığdır (contain) | CSS object-fit; yalnız görsel/video hedefte etkilidir. Cover kutuyu doldurup taşan kenarları keser; contain görselin tamamını gösterir. Boş = görsel kutuya gerilir. |
| Dikey Hiza (px) | -100 – 100 px | CSS vertical-align. Metin içindeki ikon görseli veya span'ı taban çizgisine göre kaydırır. Negatif = aşağı (örn. -3), pozitif = yukarı. Blok elemanlarda etkisizdir. |
Hover ve Geçiş Efektleri
| Alan | Değer / Aralık | Açıklama |
|---|---|---|
| Yazı Rengi (Hover) | HEX veya rgb/rgba | Fare üzerine gelince uygulanan yazı rengi (:hover). Özellikle bağlantı ve düğmeler için. |
| Arkaplan (Hover) | CSS background, en çok 1000 karakter | Fare üzerine gelince uygulanan arkaplan. |
| Kenarlık (Hover) | CSS border, en çok 100 karakter | Fare üzerine gelince uygulanan kenarlık. |
| Kutu Gölgesi (Hover) | CSS box-shadow, en çok 240 karakter | Kartın "havaya kalkması" etkisi için Hoverda Dikey Kayma ile birlikte kullanılır. |
| Hoverda Dikey Kayma (px) | -100 – 100 px | Negatif = yukarı (örn. -10 kartı 10 px kaldırır), pozitif = aşağı. Yumuşak hareket için Geçiş Süresi de girilmelidir. |
| Geçiş Süresi (ms) | 0 – 2000 ms | Hover değişiminin yumuşama süresi; transition: all Xms ease olarak yazılır. Tipik: 200 – 300 ms. Boş = anında geçiş. |
Boşluk Ayarları (PC ve Mobil)
| Alan | Değer | Açıklama |
|---|---|---|
| İç Boşluk (PC) | CSS padding kısaltması, birimli, en çok 100 karakter | Örn. 10px 20px. Tüm ekranlarda geçerli; mobil değeri doluysa mobilde o geçer. |
| İç Boşluk (Mobil) | CSS padding kısaltması | Mobilde (≤767 px) geçerli iç boşluk, örn. 8px 12px. Boş = PC değeri. |
| Dış Boşluk (PC) | CSS margin kısaltması, birimli, en çok 100 karakter | Örn. 0 0 20px. Tüm ekranlarda geçerli; mobil değeri doluysa mobilde o geçer. |
| Dış Boşluk (Mobil) | CSS margin kısaltması | Mobilde (≤767 px) geçerli dış boşluk, örn. 0 0 12px. Boş = PC değeri. |
Boşluk değerleri standart CSS sırasıyla yazılır: 1 değer tüm kenarlar; 2 değer dikey-yatay; 3 değer üst-yatay-alt; 4 değer üst-sağ-alt-sol. Birim (px vb.) yazmak zorunludur.
Tipografi
| Alan | Değer / Aralık | Açıklama |
|---|---|---|
| Yazı Tipi | 37 seçenek (Miras Al + 36 Google Font) | Hedefin yazı tipi. "Miras Al" üst elemanın fontunu kullanır. Boş = site varsayılanı. |
| Yazı Boyutu (PC) (px) | 8 – 200 px | Tüm ekranlarda geçerli; mobil değeri doluysa mobilde o geçer. |
| Yazı Boyutu (Mobil) (px) | 8 – 200 px | Mobilde (≤767 px) geçerli yazı boyutu. Boş = PC değeri. |
| Yazı Kalınlığı | 100 – 900 | 400 = normal, 700 = kalın. |
| Yazı Stili | Normal · İtalik | CSS font-style. Miras gelen italiği kaldırmak için "Normal". |
| Satır Yüksekliği (px) | 8 – 200 px, en çok 2 ondalık (ayırıcı nokta: 25.6) | Oran değil pikseldir: 1,6 oran için yazı boyutuyla çarpın (16 × 1.6 = 25.6). |
| Satır Yüksekliği Mobil (px) | 8 – 200 px | Mobil yazı boyutu küçültülünce satır aralığı da küçültülmelidir; boşsa masaüstü değeri mobilde aynen kalır. |
| Harf Aralığı (px) | -10 – 50 px | Negatif sıkıştırır, pozitif açar. |
| Yazı Rengi | HEX veya rgb/rgba | Boş = miras alınan renk. |
Metin Biçimi
| Alan | Seçenekler | Açıklama |
|---|---|---|
| Metin Hizalama | Sol · Orta · Sağ | CSS text-align. Kapsayıcı bir bölüme uygulanırsa içindeki tüm metinleri hizalar; satır içi (span) hedefte etkisizdir. |
| Harf Dönüşümü | Dönüştürme (none) · BÜYÜK HARF · küçük harf · Her Kelime Büyük | CSS text-transform. Yalnız görünümü değiştirir, içerik aynı kalır. |
| Metin Çizgisi | Yok · Altı Çizili · Üstü Çizili | CSS text-decoration. Bağlantılara "Yok" uygulanırsa alt çizgiler kalkar. |
Arkaplan (Mobil)
| Alan | Seçenekler | Açıklama |
|---|---|---|
| Zemin Görseli (Mobil) | Modülün dosyalarından bir görsel | Mobilde (≤767 px) Arkaplan alanındaki görselin yerine geçer; yalnızca background-image değişir, renk, tekrar, boyut ve konum korunur. Dar ekrana göre hazırlanmış görsel için idealdir. Bu alan modül ilk kez kaydedildikten sonra düzenleme ekranında açılır. |
| Zemin Görselini Mobilde Kaldır | Hayır (varsayılan) · Evet | Evet = mobilde background-image: none; görsel kalkar, Arkaplan'daki renk zemin olarak kalır. Zemin Görseli (Mobil) de doluysa bu seçenek önceliklidir. |
| Zemin Boyutu (Mobil) | Kapla (cover) · Sığdır (contain) · Doğal boyut (auto) · Genişliğe sığdır (100% auto) · Yüksekliğe sığdır (auto 100%) | Mobilde background-size. Boş = masaüstü değeri. |
| Zemin Konumu (Mobil) | Orta · Orta Üst · Orta Alt · Sol Üst · Sol Orta · Sol Alt · Sağ Üst · Sağ Orta · Sağ Alt | Mobilde background-position: görselin hangi noktaya yaslanacağı ve kırpılırken hangi kısmın görünür kalacağı. |
Cihaz Görünürlüğü
| Alan | Seçenekler | Açıklama |
|---|---|---|
| Mobilde Gizle | Hayır (varsayılan) · Evet | Evet = hedef ≤767 px ekranlarda display:none !important ile gizlenir (örn. sağ kenar çubuğunu mobilde kaldırmak). |
| Masaüstünde Gizle | Hayır (varsayılan) · Evet | Evet = hedef ≥768 px ekranlarda gizlenir; yalnızca mobilde görünmesi istenen bölümler için. |
Uyarı: #canvas gibi çok geniş bir hedef gizlenirse sayfa o cihazda boş görünür.
Mobil ve Masaüstü Kırılım Noktaları
Modüldeki tüm "(Mobil)" alanları 767 px ve altı ekran genişliğinde, "Masaüstünde Gizle" ise 768 px ve üzeri genişlikte uygulanır. PC alanları tüm genişliklerde geçerlidir; mobil karşılığı doldurulduğunda mobil ekranlarda onun yerine mobil değer kullanılır. Bu sayede tek nesnede hem masaüstü hem mobil tasarımı yönetebilirsiniz.
Değer Yazım Biçimleri
| Alan türü | Biçim | Örnek |
|---|---|---|
| Renk | HEX, rgb veya rgba (saydamlık için rgba önerilir) | #1a73e8 · rgba(0,0,0,0.6) |
| Arkaplan | CSS background kısaltması: renk, görsel, gradyan | #f5f5f5 · linear-gradient(135deg,#667eea,#764ba2) · #595C61 url(gorsel.jpg) center / cover no-repeat |
| Kenarlık | [kalınlık] [stil] [renk] | 1px solid rgba(0,0,0,0.1) |
| Kutu Gölgesi | x y bulanıklık [yayılma] renk | 0 4px 12px rgba(0,0,0,0.1) |
| Boşluk | 1-4 değer, birim zorunlu | 20px · 10px 20px · 0 0 20px |
Arkaplana görsel eklerken url(...) içine modüle yüklenmiş dosyanın adı yazılır. Görselli arkaplan kullanmak için modül önce kaydedilmelidir; ilk kayıtta yalnız renk veya gradyan girip görseli düzenleme ekranında ekleyebilirsiniz.
Hazır Tasarım Tarifleri
1. Tüm sitenin yazı tipini değiştirmek
Site geneli ayarlarda Yazı Tipi = Inter, Yazı Boyutu = 16, Yazı Rengi = #333333. Başlıklar için ayrı bir nesne: hedef Tüm Başlıklar (H1-H6), Yazı Tipi = Montserrat, Yazı Kalınlığı = 700.
2. Modül başlıklarını özelleştirmek
Hedef Modül Başlıkları (.modul-baslik), Yazı Boyutu (PC) = 32, Yazı Boyutu (Mobil) = 24, Satır Yüksekliği = 40, Satır Yüksekliği Mobil = 30, Metin Hizalama = Orta, Alt Kenarlık = 2px solid #1a73e8, İç Boşluk (PC) = 0 0 12px.
3. Kartlara "havaya kalkma" hover efekti
Hedef Modül Nesneleri (.modul .itemInner), Köşe Yuvarlaklığı = 12, Kutu Gölgesi = 0 2px 8px rgba(0,0,0,0.08), Kutu Gölgesi (Hover) = 0 12px 24px rgba(0,0,0,0.15), Hoverda Dikey Kayma = -8, Geçiş Süresi = 250.
4. Blog kart görsellerini eşit yükseklikte göstermek
Hedef Blog Modülü Kart Görselleri (.modul-kategori .itemFigure img), Genişlik (%) = 100, En-Boy Oranı = 16/9 Geniş, Görsel Sığdırma = Kırp (cover).
5. Footer'ı koyu temaya almak
Hedef Footer (#bolum-footer), Arkaplan = #1f2933, Yazı Rengi = #e4e7eb, İç Boşluk (PC) = 60px 0, İç Boşluk (Mobil) = 32px 16px. Footer bağlantıları için hedef Bağlantılar yerine footer modül nesnelerini kullanarak etkiyi footer ile sınırlayın.
6. Sağ kenar çubuğunu mobilde gizlemek
Hedef Sağ Kenar Çubuğu (#bolum-orta-sag), Mobilde Gizle = Evet.
7. Sepete Ekle düğmesini öne çıkarmak
Hedef Sepete Ekle Düğmesi (#sepete-ekle), Arkaplan = #ff6a00, Arkaplan (Hover) = #e65c00, Yazı Rengi = #ffffff, Köşe Yuvarlaklığı = 8, İç Boşluk (PC) = 14px 32px, Yazı Kalınlığı = 700, Harf Dönüşümü = BÜYÜK HARF, Geçiş Süresi = 200.
8. Banner arkaplanını mobilde değiştirmek
Hedef Üst Banner (#bolum-banner-ust), Arkaplan = görselli arkaplan, Minimum Yükseklik (PC) = 600, Minimum Yükseklik (Mobil) = 380, Zemin Görseli (Mobil) = dikey hazırlanmış görsel, Zemin Konumu (Mobil) = Orta Üst. Mobilde görseli tamamen kaldırmak için Zemin Görselini Mobilde Kaldır = Evet.
9. Bağlantıların alt çizgisini kaldırmak
Hedef Bağlantılar (a), Metin Çizgisi = Yok, Yazı Rengi = marka renginiz, Yazı Rengi (Hover) = daha koyu ton, Geçiş Süresi = 150.
Tercihleri Kopyalama ve Kayıtlı Tercihler
Modülün nesne bölümünde Tercihleri Panoya Kopyala, Tercihleri Panodan Yapıştır ve Kayıtlı Tercihler düğmeleri bulunur. Hazırladığınız nesne ayarlarını panoya kopyalayıp başka bir Tema Tasarımı modülüne yapıştırabilir ya da daha önce kaydedilmiş tercihleri hızlıca yükleyebilirsiniz.
Önemli Notlar ve İpuçları
- Modülü mutlaka tüm sayfalarda yayınlayın; tek sayfaya bağlı Tema Tasarımı yalnızca o sayfada etkili olur.
- Boş bırakılan her alan temanın mevcut değerini korur; yalnızca değiştirmek istediğiniz alanları doldurun.
- Site geneli Satır Yüksekliği piksel olarak miras kalır; büyük başlıklarda satır binmesini önlemek için başlık nesnelerine ayrıca satır yüksekliği verin.
- Mobil yazı boyutunu küçülttüğünüzde mobil satır yüksekliğini de küçültün.
- Genişlik (%), satır içi elemanlarda çalışmaz; önce Yerleşim Biçimi'ni blok veya satır içi blok yapın.
- Yatay Dağılım yalnızca Yerleşim Biçimi esnek (flex) iken etkilidir.
- Daire fotoğraf için: En-Boy Oranı 1/1 + Görsel Sığdırma Kırp (cover) + Köşe Yuvarlaklığı ≥ genişliğin yarısı.
- Görselli arkaplan ve Zemin Görseli (Mobil) için modülü önce kaydedin, ardından düzenleme ekranında görseli yükleyin.
- Katalogda olmayan seçiciler, pseudo-elementler, özel media query'ler ve animasyonlar için temanın Less (CSS) editörünü kullanın.
- Aynı hedef için birden fazla nesne oluşturmak yerine tüm ayarları tek nesnede toplayın; bakım kolaylaşır.
Sık Sorulan Sorular
Tema Tasarımı modülü sayfada görünür bir alan oluşturur mu?
Hayır. Modül yalnızca mevcut bölümlerin görünümünü değiştiren CSS kuralları üretir; sayfaya yeni bir bölüm eklemez.
Ayarlarım neden yalnızca bir sayfada görünüyor?
Modül tüm sayfalarda yayınlanmamıştır. Modülün yayın ekranından "Tüm Sayfalarda Yayınla" seçeneğini işaretleyin.
Modülün konumunu nasıl seçerim?
Seçmenize gerek yoktur. Tema Tasarımı konumdan bağımsız bir modüldür ve otomatik olarak Banner Alt 3 konumuna yerleşir.
Hedef seçici alanına kendi CSS seçicimi yazabilir miyim?
Hayır. Hedef yalnızca 94 seçenekli hazır katalogdan seçilir. Katalog dışı hedefler için Less (CSS) editörünü kullanın.
Google Fonts yazı tiplerini ayrıca eklemem gerekir mi?
Hayır. Seçtiğiniz font, 100-900 ağırlıklarıyla birlikte siteye otomatik yüklenir.
Mobil ayarlar hangi ekran genişliğinde devreye girer?
767 px ve altı ekranlarda. "Masaüstünde Gizle" ise 768 px ve üzeri ekranlarda uygulanır.
Satır yüksekliğini oran olarak (1.5 gibi) yazabilir miyim?
Hayır, değer pikseldir. Oranı yazı boyutuyla çarparak yazın: 16 px yazı ve 1,5 oran için 24.
Bir bölümü yalnızca mobilde gizleyebilir miyim?
Evet. İlgili hedefi seçip Mobilde Gizle = Evet yapın.
Tema ayarlarını geçici olarak kapatabilir miyim?
Evet. Modülün Yayın Durumu'nu "Yayında Değil" yaparsanız tüm ayarlar devre dışı kalır; tekrar "Yayında" yaptığınızda geri gelir.
Hesap Oluştur 
Oturum Aç 
