Page Builder blokları

Page Builder, sitenizi oluşturmak için karıştırıp eşleştirebileceğiniz birçok blok sunar.

Düzen blokları

Hero bloğu

İlk izlenim önemlidir. Sayfa başlığı için idealdir.

Seçenekler:

• Arka plan görseli veya renk
• Başlık ve alt başlık
• Eylem çağrısı butonları
• Yükseklik ve hizalama
• Overlay efektleri

Kullanım alanları:

• Ana sayfa
• Landing sayfalar
• Özel duyurular

Columns bloğu

Karmaşık içerikler için çok kolonlu düzenler oluşturun.

Seçenekler:

• 2, 3 veya 4 kolon
• Farklı kolon genişlikleri
• Mobil davranış (üst üste veya yan yana)
• Kolon aralığı

Tabs bloğu

İçeriği sekmelere ayırın.

Seçenekler:

• Sınırsız sekme
• Sekme başlığı
• Sekme içeriği

Kullanım alanları:

• Günlere göre açılış saatleri
• Farklı hizmetler
• FAQ kategorileri

Accordion bloğu

FAQ veya detaylı bilgiler için açılır bölümler.

Seçenekler:

• Birden fazla accordion öğesi
• Başlık ve içerik
• Varsayılan açık/kapalı
• Aynı anda bir veya birden fazla açık

Kullanım alanları:

• SSS sayfası
• Detaylı bilgi
• Uzun metinleri yapılandırma

Metin blokları

Text bloğu

Zengin biçimlendirmeli klasik metin alanı.

Seçenekler:

• Rich-text editör
• Başlıklar (H2–H4)
• Kalın, italik, altı çizili
• Madde ve numaralı listeler
• Linkler
• Metin hizalama

Callout bloğu

Vurgulanan duyurular veya önemli bilgiler.

Seçenekler:

• Türler (info, warning, success)
• İkon
• Arka plan rengi
• Başlık ve metin

Kullanım alanları:

• Önemli duyurular
• Bilgilendirme notları
• Namaz vakti vurguları

Medya blokları

Image bloğu

İsteğe bağlı altyazıyla tek görseller.

Seçenekler:

• Medya kütüphanesinden görsel
• Altyazı
• Alt metin (erişilebilirlik)
• Link
• Boyut ve hizalama

Text & Image bloğu

Yan yana metin ve görsel içeren birleşik blok.

Seçenekler:

• Görselin sol veya sağda olması
• Metin/görsel oranı
• Arka plan rengi
• Buton ekleme

Kullanım alanları:

• Hakkımızda bölümü
• Hizmetleri sunma
• Ekip üyeleri

Etkileşimli bloklar

Button bloğu

Linkler ve eylemler için butonlar.

Seçenekler:

• Buton metni
• Link (dahili veya harici)
• Stil (primary, secondary, outline)
• Boyut
• Hizalama

Newsletter bloğu

Bülten için kayıt formu.

Seçenekler:

• Başlık ve açıklama
• E-posta alanı
• Onay metni
• E-posta servisi entegrasyonu

Social links bloğu

Sosyal kanallarınıza linkler.

Seçenekler:

• Desteklenen platformlar:
  • Facebook
  • Instagram
  • YouTube
  • Twitter/X
  • WhatsApp
  • Telegram
• İkon stili ve boyutu
• Hizalama

Dinamik bloklar

Bu bloklar içeriği otomatik güncelleyerek gösterir.

News list bloğu

Haber gönderilerini otomatik gösterir.

Seçenekler:

• Gönderi sayısı (1–10)
• Kategori filtresi
• Görünüm stili (kart, liste)
• "Hepsini gör" linki

Davranış:

• Her zaman en güncel haberleri gösterir
• Otomatik güncellenir
• Manuel bakım gerekmez

Event calendar bloğu

Yaklaşan etkinliklerin görünümü.

Seçenekler:

• Etkinlik sayısı
• Takvim veya liste görünümü
• Kategori filtresi
• Zaman aralığı

Davranış:

• Yaklaşan etkinlikleri gösterir
• Otomatik güncellenir
• Geçmiş etkinlikler gizlenir

Özel bloklar

Cards bloğu

Yapılandırılmış bilgiler için kartlar.

Seçenekler:

• Kart sayısı
• İkon veya görsel
• Başlık ve metin
• Buton/link
• Hover efektleri

Kullanım alanları:

• Hizmetleri sunma
• Özellikleri listeleme
• Ekibi gösterme

Testimonials bloğu

Alıntılar ve referanslar.

Seçenekler:

• Birden fazla referans
• İsim ve rol
• Profil fotoğrafı
• Alıntı metni
• Karusel veya grid

Blok ayarları

Genel ayarlar

Her blok ortak ayarlara sahiptir:

• Üst/alt boşluk: Bir sonraki blokla dikey boşluk
• Arka plan: Renk veya görsel
• Görünürlük: Belirli cihazlarda gizle
• CSS class: Gelişmiş özelleştirme için

Duyarlı davranış

Tüm bloklar farklı ekranlar için optimize edilmiştir:

• Masaüstü: Tam düzen
• Tablet: Ayarlanmış düzen
• Mobil: Mobil için optimize

En iyi uygulamalar

Yapı

• Hero bloğu ile başlayın
• Blok türlerini değiştirin
• Önemli bilgiler için Callout kullanın

Tutarlılık

• Tutarlı renkler kullanın
• Boşlukları eşit tutun
• Aynı buton stillerini kullanın

Performans

• Görselleri yüklemeden önce optimize edin
• Tek sayfada çok fazla blok kullanmayın
• Görseller için tembel yüklemeyi kullanın

Sonraki adımlar