Ana içeriğe geç

Content Section Template Rehberi

Bu sayfa, sistemde hazır gelen Content Section template'lerini müşterinin anlayacağı şekilde açıklar.

Her template için iki farklı bakış verilir:

  • Teknik Bilgi: Sistem içinde nasıl bir veri yapısı beklediğini anlatır
  • Açıklama: Müşterinin bunu sitede hangi amaçla kullanacağını anlatır

Nasıl Okunmalı?​

  • Section fields: O bloğun tek seferlik alanlarıdır
  • Item fields: Tekrarlayan kayıt alanlarıdır
  • Item list code: Tekrarlayan kayıt grubunun teknik adıdır

Örnek:

  • bir blokta sadece tek başlık ve tek açıklama varsa sadece section fields vardır
  • bir blokta birden fazla kart, soru, yorum veya link varsa item fields de vardır

1. hero-basic​

Teknik Bilgi

  • Tekil section yapısıdır
  • item içermez
  • Temel alanlar: eyebrow, title, subtitle, CTA alanları, backgroundImage, foregroundImage

Açıklama

Sayfanın en üstünde görünen ana tanıtım alanıdır. Büyük başlık, kısa açıklama, butonlar ve görsel içerir.

En uygun kullanım

  • Anasayfa açılışı
  • Landing page üst alanı
  • Kampanya veya ürün tanıtımı

2. hero-split​

Teknik Bilgi

  • Tekil section yapısıdır
  • item içermez
  • Metin ve görsel iki kolon mantığında kurgulanır
  • Ana alanlar: title, subtitle, CTA alanları, image

Açıklama

Sol tarafta metin, sağ tarafta görsel olan tanıtım alanıdır. Kurumsal sitelerde çok kullanılan klasik giriş bloğudur.

En uygun kullanım

  • Kurumsal anasayfa
  • Hakkımızda giriş alanı
  • Hizmet veya çözüm tanıtımı

3. hero-centered​

Teknik Bilgi

  • Tekil section yapısıdır
  • item içermez
  • Ortalanmış başlık, açıklama ve CTA mantığı vardır

Açıklama

Daha sade ve odaklı bir açılış alanıdır. Özellikle tek mesaj vermek istenen kampanya veya landing sayfalarında uygundur.

En uygun kullanım

  • Tek sayfa kampanya
  • Basit landing page
  • Odaklı ürün duyurusu

4. feature-cards​

Teknik Bilgi

  • Hem section fields hem item fields içerir
  • itemListCode: cards
  • Section alanları: eyebrow, title, subtitle
  • Item alanları: icon, image, title, text, linkLabel, linkUrl

Açıklama

Bir başlık altında birden fazla avantaj veya özellik kartı göstermek için kullanılır.

En uygun kullanım

  • Neden bizi seçmelisiniz
  • Hizmet avantajları
  • Çözüm kartları

5. icon-features​

Teknik Bilgi

  • Tekrarlayan item yapısı içerir
  • itemListCode: features
  • Item tarafında ikon, başlık ve metin bulunur

Açıklama

Kısa kısa avantaj maddeleri göstermek için idealdir. Her maddede küçük bir ikon ve kısa açıklama olur.

En uygun kullanım

  • Ürün faydaları
  • Hizmet özellikleri
  • Platform öne çıkanları

6. stats-grid​

Teknik Bilgi

  • Tekrarlayan item yapısı içerir
  • itemListCode: stats
  • Item alanları: value, label, text

Açıklama

Sayılarla güven veren alanlardır. Örneğin müşteri sayısı, yıllık deneyim, tamamlanan proje gibi metrikleri gösterir.

En uygun kullanım

  • Başarı göstergeleri
  • Şirket ölçeği
  • Güven veren istatistikler

7. logo-cloud​

Teknik Bilgi

  • Tekrarlayan item yapısı içerir
  • itemListCode: logos
  • Her item için logo görseli, ad ve opsiyonel link vardır

Açıklama

Referans müşterileri, partnerleri veya iş birliklerini logo olarak göstermek için kullanılır.

En uygun kullanım

  • Referans logoları
  • Partner logoları
  • Basında biz

8. faq-list​

Teknik Bilgi

  • Tekrarlayan item yapısı içerir
  • itemListCode: questions
  • Section alanları: title, subtitle
  • Item alanları: question, answer

Açıklama

Sıkça sorulan sorular alanıdır. Her soru ve ona ait cevap ayrı bir kayıt olarak girilir.

En uygun kullanım

  • Landing page FAQ
  • Hizmetle ilgili sorular
  • Satış öncesi bilgilendirme

9. testimonial-list​

Teknik Bilgi

  • Tekrarlayan item yapısı içerir
  • itemListCode: testimonials
  • Item alanları: quote, name, role, company, avatar, rating

Açıklama

Müşteri yorumları veya referans sözleri göstermek için kullanılır.

En uygun kullanım

  • Müşteri memnuniyeti
  • Referans yorumları
  • Güven oluşturma alanı

10. cta-banner​

Teknik Bilgi

  • Tekil section yapısıdır
  • item içermez
  • Başlık, açıklama, CTA butonları ve opsiyonel arka plan görseli içerir

Açıklama

Kullanıcıyı belirli bir aksiyona yönlendiren dikkat çekici çağrı alanıdır.

En uygun kullanım

  • Teklif al
  • Demo iste
  • İletişime geç

11. rich-text-block​

Teknik Bilgi

  • Tekil section yapısıdır
  • Ana alanı content olup rich text / HTML destekler

Açıklama

Daha serbest metin anlatımı gereken alanlarda kullanılır. Editör içinde daha uzun ve biçimlendirilmiş içerik girilebilir.

En uygun kullanım

  • Hakkımızda metni
  • Bilgilendirme alanı
  • Uzun açıklama bölümü

12. media-text​

Teknik Bilgi

  • Tekil section yapısıdır
  • Görsel ve metin birlikte çalışır
  • Alanlar: title, subtitle, content, image, CTA alanları

Açıklama

Bir görsel eşliğinde açıklama sunan klasik içerik bloğudur.

En uygun kullanım

  • Hakkımızda
  • Hizmet açıklaması
  • Çözüm tanıtımı

13. timeline​

Teknik Bilgi

  • Tekrarlayan item yapısı içerir
  • itemListCode: events
  • Item alanları: label, title, text

Açıklama

Olayları veya aşamaları tarih sırasıyla göstermek için kullanılır.

En uygun kullanım

  • Şirket tarihçesi
  • Proje yol haritası
  • Gelişim aşamaları

14. process-steps​

Teknik Bilgi

  • Tekrarlayan item yapısı içerir
  • itemListCode: steps
  • Item alanları: stepNumber, title, text, icon

Açıklama

Bir sürecin adım adım anlatıldığı alanıdır.

En uygun kullanım

  • Nasıl çalışır
  • Başvuru süreci
  • Hizmet akışı

15. team-grid​

Teknik Bilgi

  • Tekrarlayan item yapısı içerir
  • itemListCode: members
  • Item alanları: name, role, bio, photo, linkedinUrl, email

Açıklama

Ekip üyelerini kart yapısında göstermek için kullanılır.

En uygun kullanım

  • Ekip sayfası
  • Yönetim kadrosu
  • Uzman listesi

16. contact-info​

Teknik Bilgi

  • Tekil section yapısıdır
  • İletişim bilgileri section alanlarında tutulur
  • Alanlar: address, phone, email, mapUrl, workingHours

Açıklama

Tek bir iletişim bloğu içinde adres, telefon, e-posta ve harita bilgisini göstermek için uygundur.

En uygun kullanım

  • İletişim sayfası
  • Footer bilgi alanı
  • Ofis özeti

17. branch-list​

Teknik Bilgi

  • Tekrarlayan item yapısı içerir
  • itemListCode: branches
  • Her şube için ayrı kayıt oluşturulur

Açıklama

Birden fazla şube, ofis veya lokasyonu listelemek için kullanılır.

En uygun kullanım

  • Şubelerimiz
  • Bayi / servis noktaları
  • Lokasyon listesi

18. download-list​

Teknik Bilgi

  • Tekrarlayan item yapısı içerir
  • itemListCode: downloads
  • Her item için başlık, açıklama, dosya veya link girilebilir

Açıklama

Katalog, broşür, PDF veya indirilebilir içerik listesi sunmak için kullanılır.

En uygun kullanım

  • Katalog indirme
  • Teknik dokümanlar
  • Broşür listesi

19. pricing-cards​

Teknik Bilgi

  • Tekrarlayan item yapısı içerir
  • itemListCode: plans
  • Plan adı, fiyat, açıklama, CTA ve öne çıkarma alanları vardır

Açıklama

Paket veya plan karşılaştırmasını kartlar halinde göstermek için kullanılır.

En uygun kullanım

  • Hizmet paketleri
  • Kurumsal planlar
  • Landing teklif alanı

20. comparison-table​

Teknik Bilgi

  • Tekrarlayan item yapısı içerir
  • itemListCode: rows
  • Satır bazlı karşılaştırma mantığı vardır
  • Her satırda bir feature ve sabit kolon değerleri bulunur

Açıklama

Birden fazla seçenek veya planı tablo mantığında karşılaştırmak için kullanılır.

En uygun kullanım

  • Paket karşılaştırma
  • Hizmet seviyesi karşılaştırma
  • Çözüm farkları

21. product-highlights​

Teknik Bilgi

  • Tekrarlayan item yapısı içerir
  • itemListCode: products
  • Görsel, isim, açıklama ve link alanları vardır

Açıklama

Ürün veya çözüm kartlarını kısa özetlerle göstermek için kullanılır.

En uygun kullanım

  • Ürün vitrini
  • Çözümlerimiz
  • Öne çıkan hizmetler

22. product-specs​

Teknik Bilgi

  • Tekrarlayan item yapısı içerir
  • itemListCode: specs
  • Her item bir label ve value çiftidir

Açıklama

Teknik özellik veya nitelik listesini düzenli şekilde göstermek için kullanılır.

En uygun kullanım

  • Teknik özellikler
  • Hizmet kapsamı
  • Ürün detayları

Teknik Bilgi

  • Tekrarlayan item yapısı içerir
  • itemListCode: images
  • Her item görsel ve opsiyonel açıklama alanları taşır

Açıklama

Birden fazla görseli galeri düzeninde göstermek için kullanılır.

En uygun kullanım

  • Proje galerisi
  • Tesis fotoğrafları
  • Referans görselleri

24. before-after​

Teknik Bilgi

  • Tekil section yapısıdır
  • beforeImage ve afterImage gibi iki ana medya alanı vardır

Açıklama

Önce ve sonra durumunu yan yana göstermek için kullanılır.

En uygun kullanım

  • Dönüşüm örnekleri
  • Öncesi / sonrası anlatımı
  • Uygulama sonucu gösterimi

25. video-block​

Teknik Bilgi

  • Tekil section yapısıdır
  • videoUrl ana alandır
  • Opsiyonel kapak görseli ve CTA alanları vardır

Açıklama

Video odaklı tanıtım alanıdır.

En uygun kullanım

  • Tanıtım videosu
  • Demo videosu
  • Kurumsal video alanı

Teknik Bilgi

  • Tekil section yapısıdır
  • Footer için logo, başlık ve alt açıklama tutar

Açıklama

Footer içinde markayı kısa bir metinle tanıtmak için kullanılır.

En uygun kullanım

  • Footer marka alanı
  • Şirket kısa tanıtımı

Teknik Bilgi

  • Tekrarlayan item yapısı içerir
  • itemListCode: links
  • Her item bir link kaydıdır

Açıklama

Footer içinde hızlı erişim linkleri göstermek için kullanılır.

En uygun kullanım

  • Kurumsal linkler
  • Yardım linkleri
  • Footer menü grubu

Teknik Bilgi

  • Tekrarlayan item yapısı içerir
  • itemListCode: links
  • Platform adı, ikon adı ve URL içerir

Açıklama

Sosyal medya hesaplarını göstermek için kullanılır.

En uygun kullanım

  • Footer sosyal medya alanı
  • İletişim sayfası sosyal hesapları

Teknik Bilgi

  • Tekrarlayan item yapısı içerir
  • itemListCode: links
  • Link metni, link adresi ve yeni sekmede açma alanı vardır

Açıklama

Yasal metin ve politika linklerini göstermek için kullanılır.

En uygun kullanım

  • Gizlilik politikası
  • KVKK metni
  • Çerez politikası

Hangi Template Ne Zaman Seçilmeli?​

  • Sayfanın en üstünde güçlü bir giriş alanı istiyorsanız: hero-basic, hero-split, hero-centered
  • Kartlı avantaj anlatımı istiyorsanız: feature-cards, icon-features
  • Güven veren sayısal veriler gösterecekseniz: stats-grid
  • Referans ve müşteri güveni için: logo-cloud, testimonial-list
  • Soru cevap alanı istiyorsanız: faq-list
  • Tek aksiyonlu dönüşüm alanı istiyorsanız: cta-banner
  • Uzun açıklama gerekiyorsa: rich-text-block, media-text
  • Süreç veya tarihçe anlatacaksanız: timeline, process-steps
  • Ekip veya şube gösterecekseniz: team-grid, branch-list
  • Dosya, katalog veya medya ağırlıklı alan gerekiyorsa: download-list, gallery-grid, video-block
  • Footer alanları için: footer-brand, footer-links, social-links, legal-links

Son Not​

Template seçerken şu soruyu sorun:

“Bu alanda tek bir içerik mi göstereceğim, yoksa tekrarlayan kartlar / linkler / kayıtlar mı olacak?”

  • Tekil içerik ise çoğu zaman tekil section template'i seçilir
  • Tekrarlayan kayıt varsa item destekleyen template seçilmelidir