Modern Web Tasarımında "Card" (Kart) Yapısı Nedir?
Son yıllarda popüler web tasarım trendlerine baktığınızda, içeriklerin genellikle dikdörtgen veya kare kutular içinde, bağımsız birer ünite (modül) gibi sunulduğunu net bir şekilde görürsünüz. Pinterest'in ikonik arayüzü, Twitter, Facebook gibi sosyal ağlardaki gönderi formatları ve e-ticaret sitelerindeki (Amazon, Trendyol) ürün listelemeleri "Card" (Kart) arayüz tasarımının (UI Design) en başarılı örnekleridir. Kart tasarımı, karmaşık bilgileri kolay sindirilebilir parçalara böldüğü için kullanıcı deneyimini (UX) büyük ölçüde artırır.
Bir standart HTML kartı genellikle şu üç temel öğeyi barındırır:
- Görsel (Image/Header): Kartın üst kısmında yer alan, konuyu özetleyen ve dikkati çeken bir medya öğesi.
- Başlık ve İçerik (Title & Body): Konuyu özetleyen büyük bir başlık (h2, h3) ve kısa açıklama metinleri.
- Aksiyon (CTA - Call To Action): Kullanıcıyı bir sonraki adıma taşıyan "Devamını Oku", "Hemen Al" veya "İncele" gibi bir buton veya bağlantı.
Neden Hazır CMS Sistemlerinde (WordPress) Özel HTML'e İhtiyaç Duyarız?
WordPress, Blogger, Wix veya benzeri popüler İçerik Yönetim Sistemleri (CMS), genellikle sayfaları düzenlemek için kendi blok editörlerini (örneğin WordPress'in Gutenberg editörü) kullanırlar. Ancak bazen temanızın standart olarak sunduğu bloklar veya düzenler, sizin hayalinizdeki tasarımı veya ihtiyaçlarınızı tam olarak karşılamaz.
Örneğin:
- Uzun makalelerinizin veya yazılarınızın arasına dikkat çekici, özel tasarlanmış bir kampanya duyuru kartı eklemek isteyebilirsiniz.
- 'Hakkımızda' sayfanıza, takım üyelerinizi (fotoğraf, isim, unvan, sosyal medya linki) tanıtan standart ve temiz kodlu profil kartları yerleştirmek isteyebilirsiniz.
Bu tür spesifik görsel durumlarda en hafif, hızlı ve sorunsuz yöntem sisteme devasa eklentiler (plugins) kurmak yerine yerleşik "Özel HTML" (Custom HTML) bloklarını kullanmaktır.
Temiz ve Anlamsal Bir Kart Oluşturmak
Eski usul, standart, yüzlerce <div> etiketinin birbirine girdiği (div soup) bir yığın yerine, HTML5'in anlamsal (semantic) etiketlerini kullanarak bir kart oluşturmak SEO açısından çok daha doğrudur. İçinde başlığı, metni ve yönlendirmesiyle özerk (kendi başına anlam ifade eden) bir içerik barındıran kartlar için <article> etiketi biçilmiş kaftandır.
HTML Kodu Oluşturma aracımız, sizin için bu semantik ve temiz yapıyı arka planda otomatik olarak kurar.
Adım Adım Entegrasyon Rehberi
- Aracımızın arayüzüne gidin ve sol taraftaki 'Öğe Türü' menüsünden 'Card' seçeneğini işaretleyin.
- Kartın ana başlığını (Text), temanızın CSS yapısıyla eşleşecek özel bir sınıf (Class) adını ve eklenecek olan alt butonun/linkin yönleneceği adresi (URL) ilgili alanlara girin.
- Aracın alt panelinde sizin için anında ürettiği, kod girintileri (indentation) düzgünce ayarlanmış ve güvenlik için escape işleminden geçmiş şu tarz bir temiz kodu kopyalayın:
<article class="kampanya-karti">
<h2>Yaz İndirimleri Başladı</h2>
<p>Açıklama metni buraya gelecek.</p>
<a href="https://indirim.com">Devamını oku</a>
</article>
- WordPress Kullanıcıları İçin: Yazı editörünüzde (Gutenberg)
+ikonuna tıklayıp "Özel HTML" (Custom HTML) isimli bloğu aratıp seçin. Panoya kopyaladığınız kodu açılan siyah ekranlı bu bloğun içine yapıştırın. Önizleme butonuna basarak kontrol edebilirsiniz. - Blogger Kullanıcıları İçin: Yazı editörünün sol üst köşesinde yer alan "Oluşturma görünümü"nden (kalem ikonu), kodların yazıldığı **"HTML görünümü"**ne geçin ve oluşturduğunuz kodu sayfanın istediğiniz bir satırına yapıştırın.
Bu temel işlemin ardından temanızın "Özelleştir" > "Ek CSS" (veya style.css) bölümünden .kampanya-karti sınıfına bir miktar çerçeve gölgesi (box-shadow), arka plan rengi (background-color) ve köşe yumuşatması (border-radius) vererek profesyonel görünen modern kartlara sahip olabilirsiniz.
Performans ve Eklenti (Plugin) Çöplüğünden Kurtulmak
WordPress gibi sistemlerin en büyük handikabı, kullanıcıların kod yazmaktan çekinerek her küçük görsel ihtiyaç için yeni bir eklenti (plugin) yükleme eğilimidir. Sayfanıza sadece birkaç güzel kart tasarımı eklemek için indireceğiniz 'Elementor', 'WPBakery' veya türevi ağır sayfa yapıcılar (page builders), sitenizin arka planına binlerce satır gereksiz CSS ve devasa JavaScript dosyaları yükler. Siteniz gözle görülür şekilde yavaşlar ve Google Core Web Vitals (Önemli Web Verileri) metrikleriniz düşer. Bu da sıralama kayıplarına yol açar. HTML Kodu Oluşturucu aracımızla elde edeceğiniz saf (vanilla) HTML kodları ise milisaniyeler içinde yüklenir ve performans skorlarınızı (Pagespeed) her zaman zirvede tutar.
Kartların İçeriğini Daha da Zenginleştirmek
HTML üretici aracımızın size sunduğu temel kart iskeleti (article, h2, p, a), en temel, en sağlam ve kurallara uygun yapıdır. Bu iskeleti bir temel blok olarak alıp, kodu kendi WordPress metin editörünüze veya HTML dosyanıza yapıştırdıktan sonra daha da zenginleştirebilirsiniz.
Örneğin, oluşturulan `
` (başlık) etiketinin hemen üstüne bir `
` etiketi ekleyerek görsel destekli şık medya kartları yaratabilirsiniz. Veya `
` etiketinin altına `
- ` ve `
- ` listeleri yerleştirerek yazılımla veya bir ürünle ilgili teknik özellikleri (fiyat, boyut, renk) belirtebilirsiniz. Aracımızın sunduğu 'Girinti Boyutu' (Indentation) özelliğini kullanarak iç içe geçen HTML kodlarınızın ne kadar karmaşıklaşırsa karmaşıklaşsın her zaman hizalı ve okunaklı kalmasını sağlayabilirsiniz.
Özelleştirilmiş Alanlarda (Widget/Sidebar) Kart Kullanımı
Hazırladığınız bu özel HTML kartlarını sadece blog yazılarının veya statik sayfaların içinde değil, sitenizin farklı ve stratejik bölgelerinde de (örneğin yan çubuk (sidebar) veya alt bilgi (footer) alanlarında) değerlendirebilirsiniz. Çoğu CMS sistemi (özellikle WordPress), "Bileşenler" (Widgets) bölümünde "Özel HTML" ekleme özelliği sunar.
Dikkat çekmesini istediğiniz özel bir e-kitap indirme sayfasına veya bülten (newsletter) kayıt formuna yönlendiren bir kartı (CTA) temanızın genel yapısına en uygun class ismiyle üreterek, sitenizin her sayfasında görünecek olan sidebar'a ekleyebilirsiniz. Temiz kod yapısı sayesinde temanızın genel CSS'i ile doğrudan bütünleşecek olan bu HTML kartları, sitenizin her köşesinde dönüşüm oranlarınızı (Conversion Rate) maksimize etmenize ve profesyonel bir görünüm sunmanıza olanak tanır.
