Haberler Bölümü Tasarım Rehberi

Tasarım Mantığı

Haberler veya Blog bölümleri, kullanıcının dikkatini çekmek için görsel ağırlıklı olmalıdır. 3'lü dizilim web sitelerinde "sayılabilir ve okunabilir" en ideal grup sayısıdır. Alt kısımdaki buton ise kullanıcının içerikler arasında daha fazla vakit geçirmesi için bir yönlendirme (CTA) görevi görür.

Canlı Önizleme

TEKNOLOJİ

25 Mart 2024

Web Yazılımında 2024 Trendleri

Yapay zeka entegrasyonu ve sunucusuz mimarilerin yükselişi...

DUYURU

18 Mart 2024

Yeni Ofisimize Taşındık!

Sizlere daha iyi hizmet sunmak adına genişleyen ekibimizle yeni yerimizdeyiz.

EĞİTİM

10 Mart 2024

Güvenli Kod Geliştirme Rehberi

Web projelerinizde siber güvenlik açıklarını nasıl minimize edersiniz?

Tümünü Göster

1. Kartın İskeleti (HTML)

<div class="col-lg-4">
    <div class="news-card">
        <div class="news-img" style="background-image: url('haber.jpg');">
            <span class="news-badge">Kategori</span>
        </div>
        <div class="news-content">
            <span class="news-date">10 Mart 2024</span>
            <h4 class="news-title">Haber Başlığı</h4>
            <p class="news-desc">Kısa özet metni...</p>
        </div>
    </div>
</div>
            

2. Butonun Konumlandırılması

Butonu tam ortaya hizalamak için Bootstrap'in text-center sınıfını veya CSS ile text-align: center özelliğini kullanıyoruz. Görsel nefes payı için üstten margin-top (mt-4 veya mt-5) verilmesi önemlidir.

<div class="text-center mt-5">
    <a href="blog.php" class="view-all-btn">Tümünü Göster</a>
</div>
            

Tasarım İpucu: Kart Efektleri

Kartların üzerine gelindiğinde (hover) hafifçe yukarı kayması ve gölgesinin artması sitesini çok daha canlı gösterir.

.news-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}
            

Haberler Bölümü Tasarımı