Divi'deki Blog Şablonlarınıza Yapışkan Kategori Menüsü Nasıl Eklenir

Yayınlanan: 2019-11-09

Kategori menüleri, herhangi bir bloga hoş bir ektir. Blogculara, okuyucuların ilgilendikleri şeylere hızlı ve kolay bir şekilde ulaşabilmeleri için mevcut farklı türde konuları sergileme fırsatı verir. Bu nedenle, web sitenizdeki blogla ilgili tüm şablonlarda iyi tasarlanmış bir kategori menüsüne sahip olmanız önemlidir.

Bu eğitimde, Divi's Theme Builder ile blogunuza nasıl yapışkan kategori menüsü ekleyeceğinizi göstereceğiz. Divi Builder'ı kullanarak yapışkan kategori menüsünü nasıl oluşturacağınızı ve ayrıca kategori menülerini sitenizdeki blogunuzu oluşturan farklı şablonlara nasıl ekleyeceğinizi ele alacağız.

Başlayalım.

Gizlice Bakış

İşte Gönderi Şablonuna eklenen Yapışkan Kategori Menüsü

İşte mobil cihazlarda alt yapışkan kategori menüsü.

İşte Kategori Sayfası Şablonundaki Kategori Menüsü.

Ve işte, gönderi kaydırıcısının altında başlayan ve kaydırma sırasında sayfanın en üstüne yapışan Yapışkan Kategori Menüsü ile oluşturacağımız hızlı ve kolay bir Blog Şablonu.

Şablonları ÜCRETSİZ olarak indirin

Bu eğitimdeki yapışkan kategori menüsü ile şablonlara el koymak için önce aşağıdaki düğmeyi kullanarak indirmeniz gerekir. İ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.

Dosyaları İndirin

Ücretsiz İndir

Divi Bültenine katılın ve size nihai Divi Açılış Sayfası Düzen Paketinin bir kopyasını ve ayrıca tonlarca başka şaşırtıcı ve ücretsiz Divi kaynağı, ipucu ve püf noktası e-posta ile gönderelim. Takip edin ve kısa sürede bir Divi ustası olacaksınız. Zaten aboneyseniz, e-posta adresinizi aşağıya yazın ve düzen paketine erişmek için indir'i tıklayın.

Başarıyla abone oldunuz. Aboneliğinizi onaylamak ve haftalık ücretsiz Divi düzen paketlerine erişmek için lütfen e-posta adresinizi kontrol edin!

Düzeni sayfanıza aktarmak için, zip dosyasını çıkarın ve Theme Builder Taşınabilirlik seçeneğini kullanarak json dosyalarından birini Divi Theme Builder'a ekleyin.

Hadi öğreticiye geçelim mi?

Başlamak için Gerekenler

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

Henüz yapmadıysanız Divi Temasını kurun ve etkinleştirin.
Yeni tasarıma başlamak için Tema Oluşturucu Paketi #6'yı indirin.

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

Youtube Kanalımıza Abone Olun

Blog Şablonlarınıza Yapışkan İkincil Kategori Menüsü Ekleme

Tema Oluşturucu Paketi #6'yı Yükleme

Bu eğitim için Tema Oluşturucu Paketi #6'yı kullanacağız. Paketi blog gönderisinden indirdikten sonra, WordPress panosuna gidin ve Divi > Tema Oluşturucu'ya gidin.

Ardından sağ üstteki taşınabilirlik simgesine tıklayın. Taşınabilirlik açılır penceresinde, içe aktarma sekmesini seçin ve Divi-Theme-Builder-Pack-6-All.json dosyasını seçin. Ardından “Divi Tema Oluşturucu Şablonlarını İçe Aktar” düğmesini tıklayın.

Bu, tüm şablonları Tema Oluşturucu'ya aktaracaktır.

Artık Kategori Menümüzü oluşturmaya başlamaya hazırız.

WordPress'te Yeni Kategori Menüsü Oluşturma

WordPress'teki normal bir menü gibi bir kategori menüsü oluşturulabilir. WordPress Kontrol Panelinden Görünüm > Menüler'e gidin. Yeni bir menü oluştur bağlantısını tıklayın, menüye bir ad verin ve “Menü Oluştur” düğmesini tıklayın.

Menü öğelerinin altında, Kategoriler düğmesini açın ve menüye eklemek istediğiniz tüm kategorileri/sayfaları seçin. Kategori öğelerinin kategori geçişinde görünmesi için kategorilerin önceden oluşturulmuş olduğundan emin olun. Kategori menü öğeleri, belirli bir gönderi kategorisi için kategori sayfasına yönlendirilecektir.

Yazı Şablonunun Gövde Alanında Yapışkan Kategori Menüsü Tasarlama.

Kategori menüsü oluşturulduktan sonra sıra kategori menümüzü tasarlamaya gelir. Bunu yapmak için, onu şablonlardan birinin gövde alanına eklememiz gerekecek. Sonunda kategori menüsünü Blog ile ilgili diğer şablonlara ekleyeceğiz, ancak şimdilik tüm gönderiler (veya gönderi şablonu) için şablona ekleyelim.

Açık Gövde Alanı Şablonu Düzen Düzenleyicisi

Tema Oluşturucu arayüzünde, önceden "Tüm Gönderiler"e atanmış şablonu bulun ve Özel Gövde Alanındaki düzenle simgesini tıklayın.

Şablonun üstüne Yeni Bölüm ve Satır ekleyin

Şablon düzeni düzenleyicisinde, tek sütunlu bir satır içeren yeni bir bölüm oluşturun ve bunu düzenin en üstüne sürükleyin.

Bölümü Özelleştir

Bir modül eklemeden önce, bölüm ayarlarını açın ve ona aşağıdaki gibi bir arka plan ve biraz dolgu verin:

Arka Plan Rengi: #f92c8b
Dolgu: 1vw üst, 1vw alt

Satırı Özelleştir

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

Arka Plan Gradyanı Sol Renk: #f92c8b
Arka Plan Gradyanı Sağ Renk: #ffd625
Gradyan Yönü: 90deg
Dolgu: 0 piksel üst, 0 piksel alt
Yuvarlatılmış Köşeler: 20px

Menü Modülü Ekle

Tek sütunlu satırın içine yeni bir menü modülü ekleyin.

Ardından, açılır menüden daha önce oluşturduğunuz kategori menüsünü seçin. Seçtiğinizde, menü öğeleriniz menüde görünecektir.

Şablona uygun Menü Modülü Tasarlayın

Satır arka plan renginin gösterilmesi için varsayılan arka plan rengini silin.

Aşağıdaki tasarım ayarlarını güncelleyin:

stil: merkezli
Menü Yazı Tipi: Ubuntu
Menü Yazı Tipi Ağırlığı: Kalın
Menü Yazı Tipi Stili: TT (büyük harfle)
Menü Metin Rengi: #ffffff
Menü Harf Aralığı: 2px
Menü Satır Yüksekliği: 2em
Açılır Menü Arka Plan Rengi: #ffffff
Açılır Menü Satır Rengi: #f92c8b

Açılır Menü Metin Rengi: #222222
Mobil Menü Metin Rengi: #222222
Hamburger Menü Simge Rengi: #ffffff
Hamburger Menü Simgesi Yazı Tipi: 40px
Genişlik: %90
Modül Hizalaması: Merkez

Bölüm ve Satır Görünürlüğü

Herhangi bir menü açılır listesinin gizlenmesini önlemek için, bölümümüzün ve satırımızın görünürlüğünün görünür olduğundan emin olmamız ve ayarlamamız gerekir. Ayrıca, tüm menü sırasını sayfadaki diğer tüm içeriğin üzerinde tutmak için z dizinine yüksek bir sayı vermemiz gerekecek. Bu, mobil cihazlarda açılır menü ve ayrıca yapışkan menü için görünürlüğü en üst düzeye çıkarmak için gerekli olacaktır.

Bölüm ayarlarını açın ve aşağıdakileri güncelleyin:

Yatay Taşma: Görünür
Dikey Taşma: Görünür
Z-endeksi: 999

Satır ayarlarını açın ve aşağıdakileri güncelleyin:

Yatay Taşma: Görünür
Dikey Taşma: Görünür

(Menüyü İçeren) Bölümü Yapışkan Yapma

Bu elbette isteğe bağlıdır, ancak yapışkan bir kategori menüsü oluşturmak için bölüm ayarlarını açın ve Ana Öğeye aşağıdaki özel CSS'yi ekleyin:

position: -webkit-sticky !important;
position: sticky !important;
top: 0px;

Alt Kategori Menüsü Oluşturmak için Bölüm Çoğalt

Mobilde daha iyi bir kullanıcı deneyimi için sayfanın en altına yapışacak başka bir kategori menüsü oluşturabiliriz. Menüyü oluşturmak için, yeni oluşturulan menüyü içeren bölümü kopyalamanız yeterlidir.

Mobil için Alt Yapışkan Menüyü Optimize Edin

Alt konumlandırma ile Yapışkan CSS'yi güncelleyin.

Bu menüye yalnızca mobil cihazlarda "yapışmak" için ihtiyacımız olacağından, bölüm ayarlarını açın ve Masaüstü için Özel CSS'yi silin. Ardından, tablet sekmesinin altına aşağıdaki özel CSS'yi ekleyin.

position: -webkit-sticky !important;
position: sticky !important;
bottom: 0px;

Alt Kategori Menüsü için Açılır Menü Yönünü Değiştir

Menü, mobil cihazlarda ekranın alt kısmında yer alacağından, açılır menünün yönünü değiştirin:

Açılır Menü Yönü: Yukarı

“Kategoriler” Menü Etiketi Ekle

Mobil menü simgesinin yanına bir etiket eklemek için Menü Ayarlarının gelişmiş sekmesi altında, Öğeden Önce'ye aşağıdaki özel CSS'yi ekleyin:

position: absolute !important;
color: #ffffff!important;
font-size: 16px;
content: "Categories";
line-height: 2em;
left: 50%;
margin-left: -110px;

Menü, mobil cihazlarda şu ana kadar böyle görünüyor.

Mobil cihazlarda Üst Menüyü Gizle

Mobil cihazlarda başlığın aşırı kalabalıklaşmasını önlemek için telefon ve tablette üst menüyü devre dışı bırakın. Bu, yalnızca masaüstündeki en üstteki yapışkan menüyü gösterecektir.

Her İki Menüyü/Satırı Divi Kitaplığına Kaydedin.

Düzen için iki kategori menüsü oluşturmayı bitirdik. Bunları diğer şablonlara eklemeyi kolaylaştırmak için Divi kitaplığımıza kaydedebiliriz. Üst menüyü kaydetmek için Bölüm Menüsünden “Kitaplığa Ekle” simgesini seçin. Ardından Düzene bir ad verin ve “Kütüphaneye Kaydet” düğmesini tıklayın.

Alt menüyü de kitaplığa kaydetmek için aynı işlemi tekrarlayın. Sadece emin ol ve ona hatırlayacağın bir isim ver.

Blog Gönderisi Şablonunun Nihai Sonucu

Yeni yapışkan kategori menümüz yerindeyken canlı bir gönderinin nasıl göründüğünü kontrol edelim.

Masaüstü Görünümü (Üst Menü)

Mobil Görünüm (Alt Menü)

Kategori Sayfası Şablonuna Yapışkan İkincil Kategori Menüsünü Ekleme

Divi Kitaplığı'na menü bölümlerimizi eklediğimiz için, bunları herhangi bir şablon düzenine ekleyebiliriz. Kategori menülerini ekleyeceğimiz bir sonraki şablon Kategori Sayfası şablonu.

Kategori Sayfası Şablonunun Gövde Alanını Düzenleyin

"Tüm Kategori Sayfaları"na atanan Şablonu bulun ve Özel Gövde Alanındaki düzenle simgesini tıklayın.

Kitaplıktan üst Kategori Menüsü ekle

Yeni bir bölüm eklemek için şablon düzeni düzenleyicisinden mavi artı simgesine tıklayın. Ardından Kitaplıktan Ekle sekmesini seçin ve listeden üst kategori menüsünü seçin.

Ardından bölümü şablon düzeninin en üstüne taşıyın.

Kitaplıktan alt Kategori menüsü ekle

Ardından, düzenin en altına yeni bir bölüm eklemek için tıklayın. Ardından kütüphaneden alt kategori menüsünü ekleyin.

Menü için Aktif Bağlantı Rengini Güncelle

Bu şablon için, menü öğeleri bu şablonu kullanan kategori sayfalarına bağlantılar içereceğinden, etkin bağlantı rengini güncellemek iyi bir fikirdir. Üst menü ayarlarını açın ve aşağıdakileri güncelleyin:

Aktif Bağlantı Rengi: #4160fd

Artık bir kategori sayfasını ziyaret ettiğinizde aktif bağlantı mavi olarak görünecektir.

Kategori Sayfası Şablonunun Nihai Sonucu

Yapışkan Kategori Menüsünü Blog Sayfası Şablonuna Ekleme

Ayrıca web sitemizin blog sayfasına yapışkan kategori menümüzü de ekleyebiliriz. Bir blog sayfası temel olarak blogunuzun ana sayfasıdır ve genellikle tüm blog gönderilerinizin bir beslemesini gösterir. Divi Theme Builder ile blog sayfası için bir şablon oluşturabilir ve kategori menüsünü kolayca ekleyebiliriz.

Blog Şablonu Oluşturma

İlk olarak, Kategori Sayfası şablonunu çoğaltın.

Ardından yinelenen şablonu Blog'a atayın.

Blog Şablonunun özel gövdesini düzenleyin.

Blog Şablonu Düzenini Özelleştirin

Blog şablonunu tasarlamak için Şablon düzeni düzenleyicisini kullanın. Şimdilik, sayfanın üst kısmında güzel bir tam genişlikte gönderi kaydırıcısı verelim. Bunu yapmak için yeni bir tam genişlikte bölüm oluşturun.

Tam Genişlikli Gönderi Kaydırıcısı Ekle

Ardından bölüme tam genişlikte bir Post Slider modülü ekleyin.

İçeriği “Geçerli Sayfa için Gönderiler” çekecek şekilde ayarlayın. Ardından, blog sayfası için doğru dinamik içeriği çektiğinden emin olacaktır.

Tam genişlikte gönderi kaydırıcı ayarlarını aşağıdaki gibi güncelleyin:

Başlık Yazı Tipi: Ubuntu
Başlık Yazı Tipi Ağırlığı: Orta
Gövde Yazı Tipi: Ubuntu

Menüyü Gönderi Kaydırıcısının Altına Taşı

Bu düzen için yazı kaydırıcısını sayfanın en üstüne sürükleyelim ki üst yapışkan kategori menüsü kaydırıcının altında yer alacaktır.

Gönderiler (veya Blog) Sayfasını Oluşturun ve Atayın

WordPress'te belirlenmiş bir blog sayfanız olduğundan emin olun. Bunu yapmak için Ayarlar > Okuma'ya gidin. Ardından ana sayfa görünümleri için statik bir sayfa seçin. Ardından, Gönderiler sayfası için kullanmak istediğiniz sayfayı seçin.

Blog Sayfası Şablonunun Nihai Sonucu

Sayfanın en üstüne ulaştığında kategori menüsünün nasıl yapışkan hale geldiğine dikkat edin.

Son düşünceler

Yapışkan bir kategori menüsü, blogunuzu gerçekten bir sonraki seviyeye taşıyabilir. Bir tane oluşturmak gerçekten basit bir şekilde Divi Builder'ı kullanmaktır. Ve Tema Oluşturucu, menüyü sitenizde istediğiniz herhangi bir yere eklemenizi kolaylaştırır. Ayrıca, kullanıcılarınıza en iyi deneyimi sunmak için mobil cihazlar için ayrı bir yapışkan menü bile oluşturabilirsiniz. Umarım bu, kendi blogunuzda veya bir sonraki projenizde kullanışlı olacaktır.

Yorumlarda sizden haber bekliyorum.

Şerefe!