TEMA VE TASARIM
Tema Editörü
Gelişmiş tema editörü ile mağazanızı özelleştirin
12 dakika
Dokümantasyon
Gelişmiş Tema Editörü ile Özelleştirin
Fastore'un güçlü tema editörü ile kod bilgisine ihtiyaç duymadan profesyonel tasarımlar oluşturun. Görsel arayüz ile sayfalarınızı istediğiniz gibi düzenleyin.
Tema editöründe yaptığınız değişiklikler anında önizlemede görünür. Büyük değişiklikler yapmadan önce temanızın yedeğini almayı unutmayın.
1
Editör Arayüzünü Tanıyın
Tema editörü üç ana bölümden oluşur:
Sol Panel
- Bileşen kütüphanesi
- Sayfa yapısı
- Tema ayarları
- Geçmiş işlemler
Merkez Canvas
- Canlı önizleme
- Görsel düzenleme alanı
- Element seçimi
- Responsive görünüm
Sağ Panel
- Element özellikleri
- Stil ayarları
- İçerik düzenleme
- Animasyon ayarları
2
Ana Sayfa Düzenleme
Ana sayfanız en önemli sayfa olduğu için özel dikkat gösterin:
Hero Section
- Çarpıcı başlık ve alt başlık
- Yüksek kaliteli hero görseli
- Ana CTA butonu
- Value proposition
Hero Section Yapısı
Ana Sayfa Hero Bileşenleri:
├── Background Image/Video
├── Overlay (Şeffaflık)
├── Başlık (H1 - 48px)
├── Alt Başlık (18px)
├── CTA Buton (Primary)
└── Opsiyonel: Alt İkonlarÜrün Showcase
- Öne çıkan ürünler bölümü
- Kategori grid'i
- En çok satanlar
- Yeni ürünler
3
Bileşenler ve Widgetlar
Hazır bileşenleri kullanarak sayfalarınızı zenginleştirin:
İçerik Bileşenleri
- Metin blokları
- Resim galerisi
- Video embed
- Testimoni slider
- İstatistik kartları
- FAQ accordion
E-ticaret Bileşenleri
- Ürün grid/list
- Kategori showcase
- Özellikler tablosu
- Karşılaştırma aracı
- İndirim sayacı
- Stok durumu
4
Responsive Düzenleme
Farklı ekran boyutları için optimizasyon yapın:
- Desktop, tablet, mobil görünümlerini kontrol edin
- Her cihaz için ayrı ayarlar yapın
- Touch-friendly elementler ekleyin
- Mobil menü yapılandırması
Responsive Kontrolü
Cihaz Görünümleri:
├── Desktop (1200px+)
│ ├── 4 kolonlu grid
│ ├── Hover efektleri
│ └── Geniş header
├── Tablet (768-1199px)
│ ├── 2-3 kolonlu grid
│ ├── Touch optimizasyonu
│ └── Compact header
└── Mobil (< 768px)
├── 1 kolonlu stack
├── Hamburger menü
└── Bottom navigation5
Animasyonlar ve Efektler
Sayfanızı canlandıran animasyonlar ekleyin:
Giriş Animasyonları
- Fade in/out efektleri
- Slide animasyonları
- Zoom efektleri
- Parallax scrolling
Hover Efektleri
- Ürün kartı hover'ları
- Buton animasyonları
- Image overlay efektleri
- Icon animasyonları