Genel Bakış
Ekolaykod CMS, web sitesi içeriklerinizi kolayca yönetmenize olanak sağlayan güçlü bir içerik yönetim sistemidir. Bu sistem 4 ana modülden oluşur ve her biri farklı işlevler sunar.
Şablon Yönetimi
Header ve footer yapılarınızı merkezi olarak yönetin
Sayfa Yönetimi
Statik ve dinamik sayfalarınızı oluşturun ve düzenleyin
Bileşen Sistemi
Dinamik içerik bileşenlerini sayfalarınıza entegre edin
Kütüphane Ayarları
CSS, JavaScript ve font dosyalarınızı merkezi olarak yönetin
İlk Adımlar
CMS sistemi ile çalışmaya başlamak için aşağıdaki adımları takip edin:
Sisteme Giriş Yapın
Admin paneline erişim sağlamak için kullanıcı adı ve şifrenizi girin.
İlk Şablonunuzu Oluşturun
Şablon modülünden sitenizin genel yapısını (header/footer) tanımlayın.
Kütüphane Dosyalarını Yükleyin
CSS ve JavaScript dosyalarınızı sisteme yükleyerek tasarımınızı tamamlayın.
İlk Sayfanızı Oluşturun
Sayfa modülünden yeni bir sayfa oluşturun ve içeriğinizi ekleyin.
Şablon Yönetimi
Şablon modülü, web sitenizin genel yapısını (header ve footer) merkezi olarak yönetmenizi sağlar.
1.1 Şablon Ekleme
Yeni bir şablon oluşturmak için:
Şablon Modülüne Gidin
Sol menüden "Şablon" → "Şablon Ekle" seçeneğini tıklayın.
HTML Kodlarını Yazın
Header ve footer HTML kodlarınızı ilgili alanlara yerleştirin.
Placeholder Ekleyin
İçerik alanı için [ekk-page-content] placeholder'ını unutmayın.
<!-- Header Kısmı -->
<header>
<nav class="navbar">
<!-- Menü içeriği -->
</nav>
</header>
<!-- İçerik Alanı -->
[ekk-page-content]
<!-- Footer Kısmı -->
<footer>
<!-- Footer içeriği -->
</footer>
[ekk-page-content] placeholder'ını mutlaka ekleyin, yoksa sayfa içeriği görünmez.
1.2 Şablon Listeleme
Mevcut şablonlarınızı görüntülemek ve düzenlemek için "Şablon Listele" sayfasını kullanın. Bu sayfada şablonlarınızı düzenleyebilir, silebilir veya yenisini ekleyebilirsiniz.
Sayfa Yönetimi
Sayfa modülü ile web sitenizin statik ve dinamik sayfalarını oluşturup yönetebilirsiniz.
2.1 Sayfa Ekleme
Yeni bir sayfa oluşturmak için aşağıdaki alanları doldurmanız gerekir:
Şablon Seçimi
Önceden oluşturduğunuz şablonlar arasından seçim yapın
Sayfa Adı
SEO uyumlu sayfa başlığını belirleyin
Sayfa URL
Clean URL yapısı için slug tanımlayın
Kapak Görseli
Sayfa için öne çıkan görsel seçin
HTML İçerik Editörü
Sayfa içeriğinizi HTML formatında yazabilirsiniz. Editör 3 farklı görünüm sunar:
- Genel: Form alanları ve ayarlar
- Kod: HTML editörü
- CSS/JS: Sayfa özel stilleri
SEO Ayarları
Her sayfa için SEO optimizasyonu yapabilirsiniz:
Meta Başlık
Arama motorlarında görünecek başlığı girin (50-60 karakter)
Anahtar Kelimeler
Sayfa ile ilgili anahtar kelimeleri virgülle ayırarak yazın
Meta Açıklama
Sayfa hakkında kısa açıklama (150-160 karakter)
Bileşen Sistemi
Bileşen sistemi, sayfalarınıza dinamik içerik eklemenizi sağlayan en güçlü modüldür.
Kullanılabilir Bileşen Tipleri
Blog Sistemi
Blog listesi ve detay sayfaları
Ürün Listesi
E-ticaret ürün gösterimi
Ürün Detay
Tekil ürün bilgileri
Rastgele Ürün
Random ürün seçimi
Ürün Galerisi
Ürün görsel koleksiyonu
Kategori Listesi
Ürün kategori gösterimi
Bileşen Kullanımı
Bileşen Tipini Seçin
Dropdown menüden ihtiyacınıza uygun bileşeni seçin
Ayarları Yapın
Dil, boyut ve diğer konfigürasyon seçeneklerini belirleyin
ID'yi Kopyalayın
Sistem tarafından üretilen benzersiz ID'yi kopyalayın
Sayfaya Yerleştirin
ID'yi sayfa HTML kodunuzda ilgili yere yapıştırın
<div class="product-section">
<h2>Ürünlerimiz</h2>
[BILEŞEN-ID-123]
</div>
<div class="blog-area">
<h3>Son Yazılar</h3>
[BILEŞEN-ID-456]
</div>
Kütüphane Ayarları
Kütüphane modülü ile CSS, JavaScript ve Font dosyalarınızı merkezi olarak yönetebilirsiniz.
4.1 CSS Dosyaları
Web sitenizin stil dosyalarını yönetin:
CSS Dosyası Ekle
"Yeni CSS Alanı Ekle" butonuna tıklayın ve dosya URL'sini girin
Sıralama
CSS dosyalarının yüklenme sırasını düzenleyin (Bootstrap önce, özel CSS'ler sonra)
Dosya Düzenleme
Mevcut dosyaları düzenlemek veya silmek için kalem/çöp kutusu ikonlarını kullanın
1. https://yonetimapi.ekolaykod.com/.../bootstrap.min1.css
2. https://yonetimapi.ekolaykod.com/.../swiper-bundle.min1.css
3. https://yonetimapi.ekolaykod.com/.../main4.css
4.2 JavaScript Dosyaları
Aynı şekilde JavaScript dosyalarınızı da yönetebilirsiniz:
- Bootstrap Bundle (Framework fonksiyonları için)
- jQuery (Etkileşimli özellikler için)
- Swiper.js (Slider komponenti için)
- Ana JS dosyanız (Özel kodlarınız için)
4.3 Font Dosyaları
Web fontlarınızı sisteme yükleyerek typography yönetiminizi merkezi hale getirin.
Sıkça Sorulan Sorular
Genel Sorular
Şablon placeholder'ı neden önemli?
[ekk-page-content] placeholder'ı olmadan sayfa içeriği görünmez. Bu alan sayfa modülünden gelen HTML içeriğinin yerleştirileceği bölümdür.
Bir sayfada kaç bileşen kullanabilirim?
Teorik olarak sınırsız. Ancak performans için sayfa başına 10-15 bileşeni aşmamanızı öneriyoruz.
CSS dosyası eklediğimde neden çalışmıyor?
Dosya URL'sinin doğru olduğundan ve erişilebilir olduğundan emin olun. Ayrıca CSS sıralamasını kontrol edin.
Bileşen ID'si nasıl oluşturulur?
Sistem otomatik olarak benzersiz ID üretir. Bu ID'yi kopyalayıp sayfa HTML'ine yapıştırmanız yeterlidir.
SEO ayarları zorunlu mu?
Hayır, opsiyoneldir. Ancak arama motoru optimizasyonu için doldurulması önerilir.
Sorun Giderme
Yaygın Sorunlar ve Çözümleri
Sayfa İçeriği Görünmüyor
Sebep: Şablonda [ekk-page-content] placeholder'ı yok
Çözüm: Şablon düzenleme sayfasından placeholder'ı ekleyin
Bileşen Yüklenmiyor
Sebep: Yanlış ID kullanımı veya API sorunu
Çözüm: ID'yi tekrar kopyalayın ve doğru yapıştırdığınızdan emin olun
CSS Dosyası Yüklenmiyor
Sebep: Dosya yolu yanlış veya dosya erişilebilir değil
Çözüm: URL'yi tarayıcıda test edin ve doğru yazdığınızdan emin olun
Sayfa 404 Hatası Veriyor
Sebep: URL slug'ı yanlış veya sayfa yayınlanmamış
Çözüm: Sayfa URL'sini kontrol edin ve yayın durumunu kontrol edin
JavaScript Hataları
Sebep: JS dosya sırası yanlış veya çakışma var
Çözüm: Framework JS'leri önce, özel JS'leri sonra sıralayın
Performans İpuçları
- Gereksiz CSS/JS dosyalarını kaldırın
- Görsel dosyalarını optimize edin
- Çok fazla bileşen kullanmaktan kaçının
- SEO ayarlarını eksiksiz doldurun
- Clean URL yapısı kullanın