Tema Yönetimi | HTML Blok Ekleme ve Düzenleme Rehberi

HTML Blok Nedir?

HTML Blok, T-Soft e-ticaret altyapısının Blok Yönetimi modülü içinde yer alan, web sayfalarına özgür ve esnek HTML içeriği eklemeye olanak tanıyan özel bir blok türüdür. Standart blokların sağladığı hazır yapıların dışına çıkarak, geliştiricilere ve ileri düzey kullanıcılara sayfa tasarımı üzerinde tam kontrol imkânı sunar.

HTML Blok sayesinde siteye özel bir duyuru bandı, YouTube video gömme kodu, özel bir iletişim formu, üçüncü parti widget veya tamamen özelleştirilmiş bir içerik bölümü eklenebilir. Kısacası standart blok kütüphanesinin kapsamadığı her türlü ihtiyaç bu blokla karşılanabilir.

1. Genel Ayarlar

Blok Başlığı

Bloğun yönetim panelinde tanımlanmasını sağlayan isim alanıdır. Bu başlık ziyaretçilere görünmez, yalnızca yöneticinin blokları ayırt etmesine yardımcı olur. Örneğin "Anasayfa Duyuru Bandı", "Footer Reklam Alanı" gibi açıklayıcı isimler vermek, blokların yönetimini kolaylaştırır.

Tema

Bloğun hangi tema altında çalışacağını belirler. Varsayılan olarak Default teması seçilidir. Sitede birden fazla tema kullanılıyorsa her tema için ayrı bir blok yapılandırması oluşturulabilir; bu sayede temaların görsel uyumu korunur.

Şablon

Bloğun render edileceği Twig şablon dosyasını belirtir. Varsayılan değer default.twig'dir. "Düzenle" butonuna tıklanarak şablon dosyası doğrudan düzenlenebilir. İleri düzey kullanıcılar bu dosyayı düzenleyerek bloğun çıktısını tamamen kontrol altına alabilir.

2. Yetkilendirme

Bu bölüm, bloğun kimlere gösterileceğini üç ayrı kullanıcı tipi üzerinden belirler.

Her seçenek bağımsız bir açma/kapama anahtarıyla kontrol edilir. Örneğin yalnızca üyelere özel bir kampanya duyurusu için "Üye Görsün" açık bırakılırken diğerleri kapatılabilir. Bu, son derece güçlü bir hedefleme mekanizması sağlar.

3. Görünüm

Bloğun hangi cihaz türlerinde görüntüleneceğini belirleyen bölümdür. Dört ayrı cihaz için bağımsız anahtarları mevcuttur.

Bu özellik sayesinde masaüstünde genişçe görünen bir banner, mobilde tamamen gizlenebilir ya da mobil için ayrı bir HTML Blok oluşturulup optimize edilmiş içerik sunulabilir.

4. Dil Ayarları

Bloğun hangi dillerde görüntüleneceğini belirler. Seçim yapıldığında blok sadece seçili dillerde gösterilir. Herhangi bir işaretleme yapılmazsa, blok sitedeki tüm dillerde görüntülenir.

Blok içeriklerini dile göre özelleştirmek isterseniz, ayarlar bölümündeki dil seçimi alanlarını kullanabilirsiniz. Böylece site dili değiştiğinde, blok içerikleri de seçilen dile göre dinamik olarak güncellenir.

5. Ayarlar — Açıklama Metni (HTML Editörü)

HTML Bloğun en kritik bölümü burasıdır. İçerik editörü iki farklı modda kullanılabilir:

Görsel Editör: Araç çubuğundaki butonlar aracılığıyla içerik biçimlendirilebilir. Araç çubuğunda şu işlevler yer alır:

• Resim ekle/düzenle
• Kalın yazı
• Altı çizili yazı
• Metni ortala
• Metin rengi
• Bağlantı ekle/düzenle
• Kaynak kodu görünümü
• Tam ekran modu

Kaynak Kodu Görünümü: "Kaynak kodu" butonuna tıklanarak ham HTML editörüne geçilir. Buraya doğrudan HTML, CSS ve (gömülü) JavaScript kodu yazılabilir.

Pratik Kullanım Senaryoları

Senaryo 1: Duyuru Bandı

Sitenin üst kısmına kayan veya statik bir duyuru bandı eklemek için HTML Blok idealdir.

<div style="background-color: #ff6600; color: #fff; text-align: center; padding: 10px; font-size: 14px;">
  ? Tüm siparişlerde %20 indirim! Kampanya 31 Mayıs'a kadar geçerlidir.
</div>

Senaryo 2: YouTube Video Gömme

Ürün tanıtım videosu veya nasıl kullanılır içeriği için YouTube embed kodu eklenebilir.

<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
  <iframe
    src="https://www.youtube.com/embed/VIDEO_ID"
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
    frameborder="0"
    allowfullscreen>
  </iframe>
</div>

Senaryo 3: WhatsApp Butonu

<a href="https://wa.me/905XXXXXXXXX?text=Merhaba%2C%20bilgi%20almak%20istiyorum."
   target="_blank"
   style="position: fixed; bottom: 20px; right: 20px; background: #25d366;
          color: white; padding: 14px 18px; border-radius: 50px;
          text-decoration: none; font-size: 16px; box-shadow: 0 4px 10px rgba(0,0,0,0.3);">
  ? WhatsApp ile Ulaş
</a>

Senaryo 4: Google Maps Entegrasyonu

<iframe
  src="https://www.google.com/maps/embed?pb=!1m18!..."
  width="100%"
  height="400"
  style="border: 0; border-radius: 8px;"
  allowfullscreen=""
  loading="lazy">
</iframe>

Senaryo 5: Güven Logoları / Ödeme Yöntemleri

<div style="display: flex; justify-content: center; gap: 16px; padding: 20px 0; flex-wrap: wrap;">
  <img src="/images/ssl-badge.png" alt="SSL Güvenli" style="height: 40px;">
  <img src="/images/visa.png" alt="Visa" style="height: 40px;">
  <img src="/images/mastercard.png" alt="Mastercard" style="height: 40px;">
  <img src="/images/iyzico.png" alt="iyzico" style="height: 40px;">
</div>

Twig Şablonu ile Gelişmiş Kullanım

default.twig şablonu düzenlenerek blok içeriğine dinamik veriler entegre edilebilir. Örneğin giriş yapmış kullanıcının adını selamlamak için:

{% if customer %}
  <div class="welcome-banner">
    Hoş geldiniz, <strong>{{ customer.name }}</strong>!
    Özel tekliflerinizi keşfedin.
  </div>
{% else %}
  <div class="welcome-banner">
    Mağazamıza hoş geldiniz!
    <a href="/login">Giriş yapın</a> ve ayrıcalıklı fırsatları yakalayın.
  </div>
{% endif %}

En İyi Uygulamalar ve İpuçları

Özet

HTML Blok, T-Soft platformunun sunduğu en esnek içerik yönetim araçlarından biridir. Genel ayarlar, yetkilendirme, görünüm ve dil ayarları birlikte kullanıldığında; doğru kişiye, doğru cihazda, doğru dilde ve tam kontrollü biçimde özel HTML içeriği sunmak mümkün hale gelir. Hem görsel editör hem de kaynak kodu modu sayesinde teknik bilgi düzeyine göre farklı kullanıcılar tarafından rahatlıkla kullanılabilir; Twig şablon desteğiyle ise dinamik ve güçlü içerik yapıları oluşturulabilir.