Divi Tema Oluşturucu Kullanarak Blogunuz için Kategori Sayfası Şablonu Nasıl Oluşturulur

Bir kategori sayfası, kullanıcılara ilgilendikleri (veya aradıkları) şeylerle dolu bir sayfa sağlayarak son derece yararlı olabilir. Ancak çoğu zaman kategori sayfası tasarım söz konusu olduğunda sıkıntı çekebilir. Divi'de, Divi Tema Oluşturucu günlerinden önce geliştiriciler, bir kategori sayfası şablonu tema dosyasındaki php kodunu manuel olarak özelleştirmeye ve ardından sayfa şablonunu yalnızca harici CSS ile şekillendirmeye güvenmek zorundaydı. Ama şimdi Divi Theme Builder ile bu süreç kolay ve keyifli hale geldi!

Bu eğitimde, Divi Theme Builder'ı kullanarak blogunuz için tamamen sıfırdan bir kategori sayfası şablonunun nasıl oluşturulacağını göstereceğiz. Gönderi kategorilerine atanan yeni bir şablonu nasıl hızlı bir şekilde kuracağınızı ve Divi Builder'ı kullanarak uygun modülleri ve dinamik içeriği kullanarak şablonu nasıl tasarlayacağınızı göstereceğiz.

Başlayalım!

Gizlice Bakış

İşte bu eğitimde birlikte tasarlayacağımız kategori sayfası şablonuna hızlı bir bakış. Bu resimde, "İş" kategorisine sahip tüm gönderileri görüntülemek için kullanılıyor.

Düzeni ÜCRETSİZ İndirin

Bu eğitimdeki tasarımlara el koymak için önce aşağıdaki düğmeyi kullanarak indirmeniz gerekecek. İndirmeye erişmek için aşağıdaki formu kullanarak Divi Daily e-posta listemize abone olmanız gerekir. Yeni bir abone olarak, her Pazartesi daha da fazla Divi iyiliği ve ücretsiz bir Divi Düzen paketi alacaksınız! Zaten listedeyseniz, aşağıya e-posta adresinizi girin ve indir'i tıklayın. "Yeniden abone olmayacaksınız" veya fazladan e-posta almayacaksınız.

Şablon düzenini web sitenize aktarmak için Divi Tema Oluşturucu'ya gitmeniz ve .json dosyasını tema oluşturucuya aktarmak için taşınabilirlik seçeneğini kullanmanız gerekir.

Hadi öğreticiye geçelim mi?

Başlamak için Gerekenler

Başlamak için aşağıdakileri yapmanız gerekir:

1. Henüz yapmadıysanız, kurulu Divi Temasını (veya Divi Temasını kullanmıyorsanız Divi Builder Eklentisini) kurun ve etkinleştirin.
2. Blog gönderileri için bir kategori sayfası şablonu oluşturacağımızdan, web sitenizde bunlara atanmış kategorilerle önceden oluşturulmuş gönderilere sahip olmanız gerekir.

Bundan sonra, gitmeye hazırsınız.

Kategori Sayfası Şablonları için Mevcut Modüller ve Dinamik İçerik

Divi blogu için bir Kategori Sayfası şablonu oluştururken, doğru bilgileri dinamik olarak görüntüleyen bir şablonu etkili bir şekilde oluşturabilmeniz için hangi araçların emrinizde olduğunu anlamak önemlidir. Blog gönderileri için bir kategori sayfası şablonu için, bir kullanıcı bir kategori sayfasını her ziyaret ettiğinde gönderileri mevcut kategoriye göre görüntülemekle ilgileniriz. Örneğin, bir kullanıcı "İşletme" kategori bağlantısını tıklarsa, "İşletme" kategorisine sahip tüm gönderileri görüntüleyen bir arşiv sayfası görmelidir. Bazı Divi modülleri, dinamik içeriğin bir şablonda kolayca görüntülenmesini sağlayan yerleşik seçeneklere sahiptir.

Blog Modülü

Blog Modülü, Kategori Sayfası şablonlarını görüntülemek için kullanılması gereken birincil modüldür. Bunun nedeni, Geçerli Sayfa için Gönderileri görüntülemek için yerleşik bir seçeneğe sahip olmasıdır.

Bu temelde Divi'ye, bir kullanıcı sayfayı her ziyaret ettiğinde normalde oluşturulan gönderileri görüntülemesini söyler. Bu nedenle, "Geçerli Sayfa için Gönderiler" seçeneğini gösterecek şekilde ayarlanan kullanıcı, bir kategori sayfasını görüntüleyebilir ve kategoriye göre gönderilerin doğru şekilde görüntülenmesini sağlayabilir.

Post Slider Modülü ve Post Title Modülü

Geçerli Sayfa için Gönderileri görüntülemek için Gönderi Kaydırıcı Modülünü de kullanabilirsiniz. Bu, blog modülünün yapabileceği gibi, bir kategori sayfasını ziyaret ettiğinizde oluşturulan gönderileri görüntüleyen dinamik bir gönderi kaydırıcısı oluşturmak için yararlıdır.

Posta Başlığı Modülü de kullanılabilir, ancak sayfanın Başlığını dinamik olarak görüntüleme yeteneği ile oldukça sınırlıdır. Gönderi başlığı modülünde bulunan diğer öğelerin çoğu bir arşiv sayfasına uygulanamaz, yalnızca belirli gönderi şablonları için geçerlidir.

Gönderi/Arşiv Başlığı (Dinamik İçerik)

Gönderi/Arşiv Sayfa Başlığını görüntülemenin daha kolay bir yolu, normal bir Divi modülü kullanmak ve ardından tüm Divi modüllerinde bulunan dinamik içerik özelliğini kullanarak Gönderi/Arşiv Sayfa Başlığını çekmektir.

Örneğin, bir metin modülü kullanabilir ve ardından gönderi/arşiv sayfası başlığını gövde içeriğine dinamik içerik olarak ekleyebilirsiniz. Ardından başlığı istediğiniz gibi şekillendirebilirsiniz.

Artık bir kategori sayfası şablonu oluşturmak için gereken araçları anladığınıza göre, hadi birlikte bir tane oluşturalım.

Blogunuz için Kategori Sayfası Şablonu Nasıl Oluşturulur

Bu kategori sayfası şablonu için amaç, Divi'deki blog gönderileri için tüm kategori sayfalarına atanan bir şablon için özel bir gövde alanı oluşturmaktır. Bu şablon için özel bir üstbilgi veya altbilgi alanı oluşturmayacağız. Ancak bu şablonu kendi üstbilgi ve altbilginizle kendi web sitenizde kolayca kullanabilirsiniz.

Gönderi Kategorileri için Özel Şablon Oluşturma ve Atama

Başlamak için WordPress Kontrol Panelinize gidin ve Divi > Tema Oluşturucu'ya gidin. Ardından yeni bir şablon eklemek için boş gri kutu alanını tıklayın.

Ardından şablonu Tüm Kategori Sayfalarına atayın.

Şablona Yeni Özel Vücut Alanı Ekleme

Şablon için özel gövde oluşturmak için Özel Gövde Ekle alanını tıklayın ve ardından “Özel Gövde Oluştur” seçeneğini seçin.

Ardından “Sıfırdan Oluştur” seçeneğini seçin.

Dinamik Arşiv Başlığı Ekle

Şablon Düzeni Düzenleyicisi'nde, normal bölümün içinde yeni bir tek sütunlu satır oluşturun.

Ardından satıra bir metin modülü ekleyin.

Varsayılan gövde içeriğini silin ve "Dinamik İçeriği Kullan" simgesine tıklayın ve "Posta/Arşiv Başlığı" seçeneğini seçin.

Gönderi/Arşiv Başlığı öğesi yerleştirildiğinde, dişli simgesine tıklayarak ayarları açın.

Ardından, içeriği bir H1 etiketine sarmak için Önce ve Sonra giriş alanlarını güncelleyin ve aşağıdaki gibi dinamik başlıktan sonra ek bir statik içerik parçası ekleyin:

Önce:

<h1>

Sonrasında:

 Articles</h1>

SEO amacıyla başlığı bir H1 etiketine sarmamız gerekiyor. Statik "Makaleler" kelimesi, bir kullanıcı bir "İşletme" kategori sayfasını ziyaret ederse, başlığın "İş Makaleleri" okumasını sağlamak için başlıktan sonra eklenir.

Stil Dinamik Arşiv Başlığı

Dinamik içerik yerleştirildikten sonra, aşağıdakileri kullanarak stil verebiliriz:

• Başlık Yazı Tipi: Ubuntu
• Başlık Yazı Tipi: Ağırlık: Kalın
• Başlık Metni Rengi: #192231
• Başlık Metni Boyutu: 48px (masaüstü), 38px (tablet), 28px (telefon)
• Yön Çizgisi Yüksekliği: 1.2em

Mevcut Kategori için Gönderileri Dinamik Olarak Görüntülemek için Blog Modülünü Kullanma

Dinamik kategori sayfası başlığı yerindeyken, mevcut kategori sayfasının gönderilerini görüntülemek için blog modülünü eklememiz gerekiyor.

Yeni Satır Ekle

Geçerli üst satırın altına yeni bir tek sütunlu satır ekleyin.

Blog Modülü Ekle

Ardından satıra bir blog modülü ekleyin.

İçerik seçeneklerini aşağıdaki gibi güncelleyin:

• Mevcut Sayfa için Gönderiler: EVET
• Mesaj Sayısı: 9
• Devamını Oku Düğmesini Göster: EVET

Unutmayın, kategori sayfasının doğru gönderi arşivini çekmesi için Geçerli Sayfa için Gönderiler'in etkinleştirildiğinden emin olmalıyız.

Tasarım Blog Modülü

İçerik ayarları yerindeyken, tasarımda aşağıdaki gibi bazı değişiklikler yapalım:

• Düzen: Izgara

• Başlık Yazı Tipi: Ubuntu
• Başlık Yazı Tipi Ağırlığı: Kalın
• Başlık Metin Rengi: #192231
• Meta Yazı Tipi: Ubuntu
• Meta Metin Rengi: #985e6d
• Meta Metin Boyutu: 13px

• Devamını Oku Yazı Tipi: Ubuntu
• Yazı Tipi Ağırlığı: Kalın
• Devamını Oku Yazı Tipi Stili: Altı Çizili
• Devamını Oku Metin Rengi: #985e6d
• Sayfalandırma Yazı Tipi: Ubuntu
• Sayfalandırma Metin Rengi: #985e6d
• Sayfalandırma Metin Boyutu: 18px
• Sayfalandırma Satırı Yüksekliği: 2em

• Izgara Düzeni Kenarlık Genişliği: 0px
• Kutu Gölgesi: ekran görüntüsüne bakın
• Kutu Gölge Bulanıklığı Gücü: 70px
• Kutu Gölge Yayılma Gücü: -10px
• Gölge Rengi: rgba(25,34,49,0.3)

Bu noktada, sayfa başlığı ve mevcut kategori sayfasına göre doğru şekilde görüntülenecek blog gönderileri ile eksiksiz bir temel kategori sayfamız var. Ancak, gönderiyi yaratıcı şekillerde görüntülemek için ek modül ekleyerek daha yaratıcı olabiliriz.

Geçerli kategorideki en son 4 gönderiyi çekmek için bir Gönderi Kaydırıcısı oluşturun.

Kategori sayfası gönderilerini dinamik olarak da görüntülemek için bir gönderi kaydırıcı modülü kullanabiliriz. İşte nasıl yapılacağı.

Yeni Satır Ekle

İlk önce, üst satırın altına 1/3 2/3 sütun düzenine sahip yeni bir satır ekleyin.

Post Slider Modülü Ekle

Sol sütuna, bir gönderi kaydırıcı modülü ekleyin.

Ardından, kaydırıcı içerik seçeneklerini aşağıdaki gibi güncelleyin:

• Mevcut Sayfa için Gönderiler: EVET
• Mesaj Sayısı: 4
• Gönderi Metasını Göster: HAYIR

Tasarım Sonrası Kaydırıcı Modülü

Artık kaydırıcı içeriği yerinde olduğuna göre, tasarım ayarlarını aşağıdaki gibi güncelleyin:

• Metin Hizalama: Sol
• Başlık Yazı Tipi: Ubuntu
• Başlık Satırı Yüksekliği: 1.3em
• Düğme için Özel Stilleri Kullan: EVET
• Düğme Metin Boyutu: 16px
• Düğme Arka Plan Rengi: #985e6d
• Düğme Kenar Genişliği: 0px
• Düğme Yazı Tipi: Ubuntu

• Kutu Gölgesi: ekran görüntüsüne bakın
• Kutu Gölge bulanıklığı Güç: 70 piksel
• Kutu Gölge Yayılma Gücü: -10px
• Gölge Rengi: rgba(25,34,49,0.3)

Tam genişlik düzenine sahip bir Blog Modülü oluşturun

Sağ sütunda, ızgara düzeni yerine tam genişlik düzenine sahip başka bir blog modülü ekleyebiliriz. Bu, kategori gönderilerimiz için başka bir benzersiz görüntüleme alanı sağlamamıza izin verecektir.

Blog Modülü Ekle

Zaman kazanmak için alt satırdaki mevcut blog modülünü kopyalayalım ve yazı kaydırıcısının yanındaki sağ sütuna yapıştıralım.

Yinelenen Blog Modülü Ayarlarını Güncelleyin

Yinelenen Blog Modülü Ayarlarını açın ve aşağıdakileri güncelleyin:

• Mevcut Sayfa için Gönderiler: EVET
• Mesaj Sayısı: 3
• Alıntı Uzunluğu: 120
• Öne Çıkan Resmi Göster: HAYIR (en azından şimdilik)
• Sayfalandırmayı Göster: HAYIR

• Düzen: Tam genişlik:
• Kutu Gölgesi: yok

Sonuç Şimdiye Kadar

Şimdiye kadar sonuç, üç blog gönderisinin minimal görüntüsüdür.

Ancak bir adım daha ileri gitmek istersek, her bir alıntının soluna bazı küçük özellikli görseller ekleyebiliriz.

Alıntı sonrası içeriğin solunda kayan daha küçük özellikli görüntüler oluşturmak için özel CSS kullanın.

Blog yazısı alıntılarının soluna bazı küçük özellikli resimler eklemek için bazı özel CSS eklememiz gerekiyor.

Blog Modülüne Özel CSS Sınıfı Ver

Yeni başlayanlar için Blog modülüne özel bir CSS sınıfı eklememiz gerekiyor. Blog ayarlarını açın ve gelişmiş sekmesinin altına aşağıdakileri girin:

• CSS Sınıfı: left-blog-image

Kod Modülü ile CSS Kodu Ekleme

Bu şablona sadece küçük bir CSS parçacığı eklediğimiz için bir kod modülü kullanabiliriz. Blog modülünün altına bir kod modülü ekleyin.

CSS Kodu Ekle

Ardından kod içeriği alanına aşağıdaki CSS'yi girin:

<style>
@media (min-width: 981px) {
.left-blog-image .et_pb_post .entry-featured-image-url {
float: left;
width: 100%;
max-width: 150px;
margin: 0 20px 30px 0;
}
.left-blog-image .et_pb_post {
margin-bottom: 20px !important;
}
}
</style>

Öne Çıkan Görseli dahil etmek için Blog Modülü Ayarlarını Güncelleyin

Artık öne çıkan görseli CSS snippet'i sayesinde soldaki yeni konumunda görüntülenecek şekilde geri ekleyebiliriz.

Şablona Ek Stil

Her şeyi tamamlamadan önce, tasarıma birkaç küçük rötuş yapalım.

Arşiv Başlığı Altına Bölücü Ekleme ve Stil Verme

Doğrudan şablonun üst kısmındaki arşiv sayfası başlığının altına bir ayırıcı modül ekleyin.

Ardından, ayırıcı ayarlarını aşağıdaki gibi güncelleyin:

• Çizgi Rengi: #985e6d
• Bölücü Ağırlığı: 3px
• Maksimum Genişlik: 200 piksel

Düzene Bölüm Bölücü Ekle

Bölüm ayarlarını açın ve aşağıdaki gibi bir bölüm ayırıcı ekleyin:

• Üst Bölücü Stili: ekran görüntüsüne bakın
• Üst Bölücü Rengi: rgba(73,78,107,0.07)
• Bölücü Yüksekliği: 90vw
• Bölücü Çevir: yatay ve dikey

Yinelenen gönderi ekranlarını önlemek için her Modülde Post Ofset Numarasını kullanın

Şu anda tüm modüllerimiz mevcut kategori sayfası için aynı gönderi içeriğini çekiyor. Bu modülün kopyaları görüntülemesini önlemek için, gönderi beslemesini görüntüleyen belirli sayıda gönderiyi “atlamak” için Post Ofset Numarası seçeneğini kullanabiliriz.

Tam Genişlik Blog Modülü Post Ofseti

Gönderi kaydırıcımız mevcut kategori sayfası için ilk (en son) gönderiyi zaten görüntülediğinden, bu gönderiyi bitişik blog modülünde dengeleyebiliriz. Gönderi kaydırıcısının sağındaki blog modülü ayarlarını açın ve gönderi ofset numarasını aşağıdaki gibi güncelleyin:

• Post Ofset Sayısı: 1

Şimdi modül, mevcut kategori sayfası için en son ikinci gönderiyle başlayacaktır.

Izgara Blog Modülü Posta Ofseti

İlk blog modülü post ofset yerleştirildikten sonra, şablonun altındaki ana blog modülündeki gönderileri ofsetlememiz gerekiyor. Bu blog modülünü açın ve posta ofset numarasını aşağıdaki gibi güncelleyin:

• Post Ofset Numarası: 4

Yukarıda zaten görüntülenmekte olan 4 gönderiyi hesaba katmak için ofset numarasını 4 olarak ayarlamamız gerekiyor. Modül şimdi diğer modüllerin kaldığı yerden devam edecek ve en son beşinci gönderiyle başlayacaktır.

Nihai sonuçlar

Nihai sonucu görüntülemek için WordPress panosuna gidin ve Gönderiler > Kategoriler'e gidin. Ardından mevcut kategorilerden birini görüntülemek için tıklayın.

İşte nihai sonuç.

Ve işte tablet ve telefon ekranında.

Son düşünceler

Umarım bu yazı, web siteniz için bir kategori sayfası tasarımı oluşturma zorluğuyla karşı karşıya kaldığınızda biraz daha kolay nefes almanıza yardımcı olur. Divi Tema Oluşturucu, özellikle blog modülü artık mevcut sayfanın gönderilerini görüntüleme seçeneğine sahipken, bunu yapmayı son derece kolaylaştırıyor. Ve post ofset seçeneği, birden fazla blog modülünü (veya hatta post kaydırıcı modüllerini) ekranda yinelenen gönderileri görmeden birleştirmenize olanak tanır.

Divi Tema Oluşturucu, kategori sayfaları oluşturmanıza nasıl yardımcı oldu?

Yorumlarda sizden haber bekliyorum.

Şerefe!