Çapraz İçerik - Zigzag (CrossContent) Modülü

Çapraz İçerik modülü, görsel ve metin içeriklerinizi çapraz (zigzag) düzende sergilemenizi sağlar. İlk satırda görsel solda, içerik sağda; sonraki satırda içerik solda, görsel sağda şeklinde devam eden bu düzen, sayfalarınıza dinamik ve profesyonel bir görünüm kazandırır. Mobil cihazlarda ise görsel ve içerik alt alta sıralanarak okunabilirlik korunur.

✨ Öne Çıkan Özellikler

• Her satırda görsel ve zengin metin içeriğini çapraz (zigzag) düzende gösterme
• Masaüstünde görsel/içerik oranını ayarlayabilme (%40/%60, %50/%50, %60/%40)
• Her öğeye başlık, zengin metin içerik ve aksiyon butonu ekleme
• Scroll animasyonu ile öğelerin kaydırma sırasında görünür hale gelmesi
• Buton stilleri için varsayılan ve hover durumlarını ayrı ayrı özelleştirme
• Mobilde otomatik dikey yığın düzenine geçiş
• Maksimum genişlik sınırlaması ile geniş ekranlarda düzeni kontrol altında tutma
• Görsel ve kart için bağımsız köşe yuvarlağı ve gölge ayarları

🚀 Başlarken

Bu modülü kullanabilmek için aktif bir sitenizin olması yeterlidir. Modül, sayfa üzerine eklendikten sonra her bir öğeye görsel yükleyerek ve metin içeriğinizi yazarak hemen kullanmaya başlayabilirsiniz. En az 2-3 öğe eklemeniz, çapraz düzenin etkisini en iyi şekilde yansıtacaktır.

🖥️ Çapraz İçerik Modülü Ekleme

1. Paneldeki site yönetim ekranından Modül Ekle akışını başlatın
2. Modül türü listesinden Çapraz İçerik (CrossContent) seçeneğini seçin
3. Modülün görüneceği sayfa ve konum bölgesini belirleyin
4. Modül düzenleme sayfasına yönlendirileceksiniz

📐 Yerleşim Ayarları

Modül ayarları bölümünde düzenin temel yapısını belirlersiniz:

• Görsel/İçerik Oranı (Masaüstü): Masaüstünde görselin ve içeriğin kapladığı genişlik oranını seçin. Üç seçenek sunulur:
  • %40 / %60 — Görsel dar, içerik geniş (metin ağırlıklı sayfalar için ideal)
  • %50 / %50 — Eşit dağılım (dengeli görünüm)
  • %60 / %40 — Görsel geniş, içerik dar (görsel ağırlıklı sayfalar için ideal)
• İçerik Dikey Hizalama: İçeriğin görsele göre dikey konumunu belirler:
  • Üst — İçerik görselin üst hizasından başlar
  • Orta — İçerik görselin ortasına hizalanır (varsayılan)
  • Alt — İçerik görselin alt hizasına yerleşir
• Maksimum Genişlik (px): Geniş ekranlarda modülün yayılacağı maksimum genişliği sınırlar. Boş bırakılırsa modül bulunduğu konumun tüm genişliğini kullanır

📝 Öğe Ekleme ve Düzenleme

Her öğe bir görsel ve metin içerik bloğundan oluşur. Öğeler eklendikleri sırayla otomatik olarak çapraz düzende sıralanır.

Öğe Alanları

• Görsel: Öğenin görsel bölümünde gösterilecek resim. Görsel yükleme penceresinden seçilir
• Başlık: Öğenin üst kısmında görünen başlık metni (opsiyonel, maksimum 128 karakter)
• İçerik: Zengin metin editörü (TinyMCE) ile biçimlendirilmiş içerik alanı. Paragraflar, listeler, kalın/italik metin gibi biçimlendirmeler yapılabilir
• Buton Metni: Öğenin alt kısmında görünen aksiyon butonu metni (opsiyonel)
• Buton Linki (URL): Butona tıklandığında yönlendirilecek adres
• Yeni Sekmede Aç: Buton linkinin yeni bir tarayıcı sekmesinde açılıp açılmayacağını belirler

Buton yalnızca hem Buton Metni hem de Buton Linki alanları doldurulduğunda görünür.

🎨 Renk ve Tipografi Ayarları

Renkler

• Kart Arkaplan Rengi: Her bir öğenin (görsel + içerik birlikte) arkaplan rengi
• Yazı Rengi: İçerik alanındaki metin rengi
• Başlık Rengi: Başlık metninin rengi

Tipografi

• Başlık Font Boyutu (PC): Masaüstünde başlık metin boyutu
• Başlık Font Boyutu (Mobil): Mobil cihazlarda başlık metin boyutu
• Başlık Font Kalınlığı: Başlık metninin kalınlığı (100 ile 900 arası, varsayılan 600)

🔘 Buton Stilleri

Butonların varsayılan görünümü ve fare üzerine gelindiğindeki (hover) görünümü ayrı ayrı özelleştirilebilir:

Varsayılan Durum

• Buton Yazı Rengi: Buton metninin rengi
• Buton Zemin Rengi: Butonun arkaplan rengi
• Buton Kenarlık: Butonun çerçeve stili (kalınlık, stil, renk)
• Buton Köşe Yuvarlağı: Buton köşelerinin yuvarlama değeri

Hover Durumu (Fare Üzerine Geldiğinde)

• Buton Yazı Rengi (Hover): Fare üzerindeyken buton metin rengi
• Buton Zemin Rengi (Hover): Fare üzerindeyken arkaplan rengi
• Buton Kenarlık (Hover): Fare üzerindeyken çerçeve stili
• Buton Köşe Yuvarlağı (Hover): Fare üzerindeyken köşe yuvarlama değeri

Tüm hover özellikleri yumuşak bir geçiş animasyonu ile uygulanır.

📏 Boşluk Ayarları

• Öğeler Arası Boşluk (PC): Masaüstünde çapraz öğeler arasındaki dikey boşluk (varsayılan 60px)
• Öğeler Arası Boşluk (Mobil): Mobilde öğeler arasındaki dikey boşluk (varsayılan 30px)
• İçerik İç Boşluk (PC): Masaüstünde içerik alanının iç boşluğu (varsayılan 30px)
• İçerik İç Boşluk (Mobil): Mobilde içerik alanının iç boşluğu (varsayılan 20px)

🔲 Kenarlık ve Gölge Ayarları

• Görsel Köşe Yuvarlağı: Görselin köşe yuvarlama değeri
• Kart Köşe Yuvarlağı: Tüm öğenin (kart) köşe yuvarlama değeri
• Görsel Gölgesi: Görsele uygulanan gölge efekti
• Kart Gölgesi: Tüm öğeye uygulanan gölge efekti

Köşe yuvarlağı ve kart arkaplan rengi birlikte kullanıldığında, öğeler kart görünümü kazanır.

✨ Animasyon

• Scroll Animasyonu: Etkinleştirildiğinde (varsayılan olarak açık), öğeler sayfada aşağı kaydırıldıkça yumuşak bir şekilde görünür hale gelir. Her öğe ekrana girdiğinde hafif bir yukarı kayma ve opaklık geçişi ile belirir

📱 Mobil Davranış

Mobil cihazlarda (767px ve altı ekran genişliği) modülün davranışı otomatik olarak değişir:

• Çapraz düzen devre dışı kalır; tüm öğelerde görsel üstte, içerik altta sıralanır
• Görsel/içerik oranı geçersiz olur; her ikisi de tam genişlik kullanır
• Öğeler arası boşluk ve içerik iç boşluğu mobil değerlere geçer
• Başlık font boyutu mobil değerine düşer

📐 Modül Boşlukları

• Modül Üst/Alt Boşluk (PC / Mobil): Modülün üst ve alt kenarlarından sayfaya olan mesafe
• Modül Yatay Boşluk (PC / Mobil): Modülün sol ve sağ kenarlarından sayfaya olan mesafe

💡 Kullanım Önerileri

Hizmet Tanıtım Sayfası

Her öğede bir hizmetin görselini ve açıklamasını gösterin. Butona "Detaylı Bilgi" veya "Teklif Al" gibi bir aksiyon metni yazarak ziyaretçileri yönlendirin.

Ürün Özellikleri

Bir ürünün farklı özelliklerini her öğede ayrı ayrı tanıtın. Görsel/içerik oranını %60/%40 yaparak görselleri ön plana çıkarın.

Hakkımızda Sayfası

Şirket hikayesini kronolojik veya tematik olarak çapraz düzende anlatın. İçerik dikey hizalamayı Orta yaparak dengeli bir görünüm elde edin.

Portfolyo / Referanslar

Projelerinizi veya müşteri referanslarınızı görsel ve açıklama ile çapraz düzende sergileyin.

❓ Sık Sorulan Sorular

Kaç öğe ekleyebilirim? Öğe sayısında teknik bir sınır yoktur. Ancak sayfanın kullanılabilirliği açısından 3 ile 8 arası öğe idealdir.

Görselsiz öğe ekleyebilir miyim? Evet. Görsel alanı boş bırakılırsa öğe yalnızca içerik bölümünü gösterir. Ancak çapraz düzenin etkisini göstermesi için görselli öğeler önerilir.

Buton eklemek zorunlu mu? Hayır. Buton Metni ve Buton Linki alanları boş bırakılırsa buton görünmez. Yalnızca metin içerikli öğeler oluşturabilirsiniz.

Görseller hangi boyutta yüklenmeli? Modül, yüklenen görselleri otomatik olarak 960px genişliğe ölçeklendirir. En az 960px genişliğinde görseller yüklemeniz tavsiye edilir. Görseller object-fit: cover ile gösterildiğinden, farklı en/boy oranlarındaki görseller uyumlu şekilde sığdırılır.

Scroll animasyonunu kapatabiliyor muyum? Evet. Modül ayarlarından Scroll Animasyonu seçeneğini Hayır olarak ayarlayarak animasyonu devre dışı bırakabilirsiniz. Bu durumda tüm öğeler sayfa yüklendiğinde anında görünür olur.

Hover durumunda buton stilini ayarlamazsam ne olur? Hover alanları boş bırakılırsa buton üzerine gelindiğinde görünümde bir değişiklik olmaz; buton varsayılan halini korur.

Güncelleme Tarihi: 25.03.2026 13:13