Divi Başlığınızda Blog Yazısı Kategorilerini Görsel Olarak Nasıl Sergileyebilirsiniz?

Genel başlığınızı oluştururken, bir blog menü öğesi ekleme olasılığınız yüksektir. Web sitenizde çok sayıda blog yazısı kategoriniz yoksa, bir blog menü öğesi için gitmek yeterli olabilir. Ancak, bir dizi farklı kategoriniz varsa ve her birini vurgulamak istiyorsanız, her blog kategorisini bir açılır menü içinde görsel olarak sergilemek gibi farklı bir yaklaşım denemek isteyebilirsiniz.

Bu eğitimde, Divi's Theme Builder'ı kullanarak bunu tam olarak nasıl yapacağınızı göstereceğiz. Divi'nin yerleşik öğelerini ve seçeneklerini kullanarak açılır menüyü oluşturacağız ve onu, açılır menüyü blog menü öğesinin içine yerleştirmemize izin verecek bazı kodlarla birleştireceğiz. JSON dosyasını da ücretsiz olarak indirebileceksiniz!

Hadi hadi bakalım.

Ön izleme

Eğiticiye dalmadan önce, farklı ekran boyutlarındaki sonuca hızlıca bir göz atalım.

masaüstü

Mobil

Global Header'ı ÜCRETSİZ İndirin

Ellerinizi ücretsiz global başlığa 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.

İNDİRMEK

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!

JSON Dosyası Nasıl Yüklenir

Yukarıda indirebildiğiniz sıkıştırılmış klasörü açın. Ardından, WordPress web siteniz > Divi > Divi Kitaplığı'na gidin ve JSON'u yükleyin.

Düzeniniz Divi Kitaplığı'na kaydedildikten sonra, Divi Tema Oluşturucu'ya gidebilir ve 'Genel Başlık Ekle' veya 'Özel Başlık Ekle' üzerine tıklayarak ve 'Genel/Özel Başlık Oluştur' öğesini seçerek kaydedilen düzeni içe aktarabilirsiniz. Divi Kitaplığındaki 'Kaydedilen Düzenleriniz' sekmesine gidin, önceki adımda yüklediğiniz düzeni seçin ve tüm Divi Tema Oluşturucu Değişikliklerini kaydedin.

Yarasadan hemen sonra işleyen bir menüye sahip olmak için, aşağıdaki bu öğreticinin ilk bölümünü gözden geçirmeniz gerekecek; menü öğelerine bireysel düzeyde CSS sınıfları ekleme. Ayrıca bu öğreticinin 5. bölümünde gösterildiği gibi Kod Modülü içindeki CSS sınıflarından birini etkinleştirmeniz gerekir.

1. Blog Menü Öğesine CSS Sınıfı Ekle

Görünümdeki Menülere Git

Bu öğreticinin ilk bölümünde, WordPress menüsündeki blog sayfası menü öğesine iki özel CSS sınıfı ekleyeceğiz. Bunu yapmak için WordPress kontrol panelinizin içindeki menülere gidin.

CSS Sınıfı Seçeneğini Etkinleştir

Sayfanın üst kısmında, ekran seçeneğinde CSS sınıfları seçeneğini etkinleştirdiğinizden emin olun.

Blog Menü Öğesine CSS Sınıfları Ekle

Ardından, blog menü öğenizi bulun ve ona iki CSS sınıfı ekleyin. CSS sınıfları arasında boşluk bıraktığınızdan emin olun.

• CSS Sınıfları: birinci seviye birinci seviye-1

2. Divi's Theme Builder ile Özel Başlık Oluşturun

Divi Theme Builder'a gidin

Menü öğesi CSS sınıfları yerleştirildiğinde, Divi'ye geçme zamanı. Divi Theme Builder'a gidin ve 'Global/Custom Header Ekle'yi seçin.

Global Başlık Oluşturmaya Başlayın

Ardından, şablon düzenleyiciye yönlendirilmek için 'Global Başlık Oluştur'u seçin.

Bölüm Ayarları

Arka plan rengi

Şablon düzenleyicinin içinde bir bölüm göreceksiniz. Bu bölümü açın ve beyaz bir arka plan rengi uygulayın.

• Arka Plan Rengi: #FFFFFF

aralık

Tasarım sekmesine gidin ve tüm varsayılan üst ve alt dolguyu kaldırın.

• Üst Dolgu: 0px
• Alt Dolgu: 0px

1. Satır Ekle

Sütun Yapısı

Aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyerek devam edin:

boyutlandırma

Henüz herhangi bir modül eklemeden, satır ayarlarını açın ve boyutlandırma ayarlarını buna göre değiştirin:

• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1
• Genişlik: %95
• Maksimum Genişlik: %100

aralık

Sonraki tüm varsayılan üst ve alt dolguyu kaldırın.

• Üst Dolgu: 0px
• Alt Dolgu: 0px

Satıra Menü Modülü Ekle

Seçim Menüsü

Ardından, bir Menü Modülü ekleyin ve bu eğitimin ilk bölümünde değiştirdiğiniz menüyü seçin.

Logo Yükle

Ardından bir logo yükleyin.

Menü Metin Ayarları

Tasarım sekmesine gidin ve menü metin ayarlarını aşağıdaki gibi değiştirin:

• Menü Yazı Tipi: Roboto Mono
• Menü Yazı Tipi Stili: Büyük Harf
• Menü Metin Rengi: #000000
• Menü Metin Boyutu: 18px
• Menü Harf Aralığı: -1px

Açılır Menü Ayarları

Açılır menü satırı rengini de değiştirin.

• Açılır Menü Satır Rengi: #FFFFFF

Simge Ayarları

Ardından, simgeler ayarlarında hamburger menü simgesi rengini değiştirin.

• Hamburger Menü Simgesi Rengi: #000000

CSS Sınıfı

Ve bir CSS sınıfı ekleyerek modül ayarlarını tamamlayın.

• CSS Sınıfı: kategori menüsü

3. Blog Açılır Tasarım Tasarımı Oluşturun

2. Satır Ekle

Sütun Yapısı

Menü Modülünü içeren satırınız hazır olduğunda, görsel blog kategorilerini içeren açılır menüyü oluşturma zamanı gelir. Bunu yapmak için, eşit büyüklükte iki sütun içeren yeni bir satır ekleyin. Tüm satır, blog menü öğesi için açılır menümüz olacaktır.

Arka plan rengi

Satır ayarlarını açın ve beyaz bir arka plan rengi kullanın.

• Arka Plan Rengi: #FFFFFF

boyutlandırma

Tasarım sekmesine gidin ve boyutlandırma ayarlarını aşağıdaki gibi değiştirin:

• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1
• Sütun Yüksekliklerini Eşitle: Evet
• Genişlik: 80vw (Masaüstü), %100 (Tablet ve Telefon)
• Maksimum Genişlik: 50vw (Masaüstü), %100 (Tablet ve Telefon)

aralık

Sonraki dolgu değerlerini değiştirin.

• Üst Dolgu: 10px
• Alt Dolgu: 10px
• Sol Dolgu: 10px
• Alt Dolgu: 10px

Kutu Gölge

Biz de ince bir kutu gölgesi kullanıyoruz.

• Kutu Gölge Bulanıklığı Gücü: 30 piksel
• Gölge Rengi: rgba(0,0,0,0.13) (Masaüstü), rgba(0,0,0,0) (Tablet ve Telefon)

CSS Sınıfı

Ardından satırımıza iki CSS sınıfı ekleyeceğiz. Bu CSS sınıfları (daha sonra bazı kodlarla birlikte), tüm satır kapsayıcısını bir açılır menü olarak blog menü öğesinin içine yerleştirmemize yardımcı olacaktır.

• CSS Sınıfı: açılır menü açılır menü-1

Konum

Gelişmiş sekmeye geçin ve satırı da yeniden konumlandırın.

• Konum: Mutlak (Masaüstü), Göreli (Tablet ve Telefon)
• Konum: Sağ Üst
• Dikey Ofset: 100px (Masaüstü), 0px (Tablet ve Telefon)
• Z İndeksi: 11

Her İki Sütun Ana Elemanı

Son olarak, her sütunun ana öğesine bir satır CSS kodu ekleyerek satır ayarlarını tamamlayın. Bu, sütun yapısını daha küçük ekran boyutlarında tutmamıza yardımcı olacaktır.

width: 50% !important;

Sütun 1'e Metin Modülü Ekle

Kategori Adı Ekle

Blog kategorilerimizi görsel olarak gösterme zamanı! Sütun 1'e ilk Metin Modülünü ekleyin ve kategori başlığını içerik kutusuna ekleyin.

Kategori Bağlantısı Ekle

Sonraki kategorinize bir bağlantı ekleyin.

Degrade Arka Plan

Ardından, aşağıdaki degrade arka planını uygulayın:

• Renk 1: rgba(0,0,0,0.08)
• Renk 2: #0a0a0a
• Başlangıç ​​Konumu: %60
• Bitiş Konumu: %60
• Gradyanı Arka Plan Resminin Üstüne Yerleştir: Evet

Arka plan görüntüsü

Seçtiğiniz bir arka plan resmini yükleyin. Bu eğitimdekiyle aynı sonucu istiyorsanız, bu gönderinin başında indirebildiğiniz klasörde bulabileceğiniz resimlerden birini yükleyin.

• Arka Plan Resmi Boyutu: Gerçek Boyut
• Arka Plan Resmi Tekrarı: Tekrar X (yatay)

Metin Ayarları

Modülün tasarım sekmesine gidin ve metin ayarlarını buna göre değiştirin:

• Metin Yazı Tipi: Roboto Mono
• Metin Yazı Tipi Ağırlığı: Kalın
• Metin Rengi: #ffffff
• Metin Boyutu: 1.9vw (Masaüstü), 3vw (Tablet), 3.5vw (Telefon)
• Metin Harf Aralığı: -0.1vw
• Metin Satırı Yüksekliği: 1em

boyutlandırma

Sonraki boyutlandırma ayarlarını değiştirin.

• Genişlik: %99
• Modül Hizalama: Sol

aralık

Boşluk ayarlarını da değiştirin.

• Alt Kenar Boşluğu: 10px
• Sağ Kenar Boşluğu: %1 (Tablet ve Telefon)
• Üst Dolgu: %60 (Masaüstü), %40 (Tablet ve Telefon)
• Alt Dolgu: %4
• Sol Dolgu: %2

Ana Eleman CSS

Ve modülün ana elemanına bir satır CSS kodu ekleyerek modül ayarlarını tamamlayın.

cursor: pointer;

Metin Modülünü Klonla ve Çoğaltmayı Sütun 2'ye Yerleştir

İlk Metin Modülünü tamamladıktan sonra modülü klonlayın ve kopyayı 2. sütuna yerleştirin.

Sütun 2'deki Metin Modülünü Değiştirin

Kategori Adını ve Bağlantısını Değiştir

Yinelenen modüldeki kategori başlığını ve bağlantıyı değiştirin.

Arka Plan Resmini Değiştir

Arka plan resmini de değiştirin. Çizimi indirme klasöründe bulabilirsiniz.

• Arka Plan Resmi Tekrarı: Tekrar Yok

Boyutlandırmayı Değiştir

Sonraki boyutlandırma ayarlarında modül hizalamasını değiştirin.

• Modül Hizalaması: Sağ

Her İki Modülü Bir Kez Klonla

Her iki modülü de (her sütunda bir tane) tamamladığınızda, ikisini de bir kez klonlayabilirsiniz.

Kategori Adlarını ve Bağlantılarını Değiştir

Yinelenen modüllerin içindeki kategori adlarını ve bağlantıları değiştirin.

Arka Plan Resimlerini Değiştir

Arka plan resimleri ile birlikte. Yeni çizimleri bu yazının başında indirebileceğiniz klasörde bulabilirsiniz.

• Arka Plan Resmi Boyutu: Sığdır
• Arka Plan Resmi Tekrarı: Tekrar Yok

• Arka Plan Resmi Boyutu: Sığdır
• Arka Plan Resmi Konumu: Sağ Alt

4. CSS ve JQuery Kodu Ekle

1. Satırdaki Menü Modülünün Altına Kod Modülü Ekle

Açılır menü kategori adlarını içeren satırı tamamladıktan sonra, Bölümünüzün ilk satırına Menü Modülünün hemen altına bir Kod Modülü ekleyin.

CSS Kodu Ekle

Aşağıdaki CSS kod satırlarını Kod Modülüne ekleyin:

<style>
/* Enable class below once you're done editing the menu */  
  
/*  
.dropdown-menu {
visibility: hidden;
}*/
  
.category-menu .et_pb_menu__menu .dropdown-menu {
visibility: hidden;
opacity: 0;

-webkit-transition: 300ms all cubic-bezier(.4,0,.2,1);
-moz-transition: 300ms all cubic-bezier(.4,0,.2,1);   
-o-transition: 300ms all cubic-bezier(.4,0,.2,1); 
-ms-transition: 300ms all cubic-bezier(.4,0,.2,1);   
transition: 300ms all cubic-bezier(.4,0,.2,1);  
}
  
.category-menu .et_pb_menu__menu li.first-level:hover .dropdown-menu {
visibility: visible;
opacity: 1;
}
  
.category-menu  .et_pb_menu__menu li {
margin-top: 0px !important;
}  

.category-menu .et_pb_menu__menu li>a {
margin-top: 0px !important;
padding: 30px 20px !important;    
}

.category-menu .et_pb_menu__menu li.first-level>a:hover {
background-color: #00C995; 
}  
  
.category-menu .et_mobile_menu .dropdown-menu {
background-color: white; 
padding-top: 25px;
padding-bottom: 5px;
}   

.category-menu .et_mobile_menu li > a {
background-color: transparent;
position: relative;
}
  
.category-menu .et_mobile_menu .first-level > a:after {
font-family: 'ETmodules';
content: '\37';
color: black;
font-weight: normal;
position: absolute;
font-size: 16px;
top: 13px;
right: 10px;
}
  
.category-menu .et_mobile_menu .first-level > .icon-switch:after{
content: '\36';
color: #c9c9c9;
}
  
.category-menu .et_mobile_menu .dropdown-menu {
display: none;
visibility: visible;
}
  
.category-menu .et_mobile_menu .dropdown-menu.reveal-items {
display: block;
}
  
</style>

JQuery Kodu Ekle

Kategorileri içeren satırı blog menü öğenizin içine yerleştirmenize yardımcı olacak bazı JQuery coe'ları ile birlikte. Aşağıdaki yazdırma ekranında görebileceğiniz gibi, JQuery kodunu script etiketleri arasına yerleştirdiğinizden emin olun.

jQuery(function($){
$(document).ready(function(){
  

$('.dropdown-menu').each(function(i){
  
i = i + 1;
  
var $dropdown = $('.dropdown-menu-' + i);
var $mainMenuItem = $('.first-level-' + i + '>a');
$dropdown.insertAfter($mainMenuItem);
  
});  
  
var $firstLevel = $('.et_mobile_menu .first-level > a');
var $allDropdowns = $('.et_mobile_menu .dropdown-menu');

$firstLevel.off('click').click(function() {

$(this).attr('href', '#');  
var $thisDropdown = $(this).siblings(); 

$thisDropdown.slideToggle();
$(this).toggleClass('icon-switch');

var dropdownSiblings = $allDropdowns.not($thisDropdown);   
dropdownSiblings.slideUp();

var $thisFirstLevel = $(this);
var $firstLevelSiblings = $firstLevel.not($thisFirstLevel);
$firstLevelSiblings.removeClass('icon-switch');  

});      
  
});
});

5. Blog Açılır Öğelerini Özelleştirmeyi Bitirdikten Sonra CSS Sınıfını Etkinleştirin

Tüm açılır menü öğelerini özelleştirmeyi bitirir bitirmez yapmanız gereken tek bir şey kalır: açılır menü öğelerini içeren tüm satırı gizlemek. Bu, kodumuzdaki bir yükleme işleviyle birlikte, sayfa yüklenirken açılır menünün görünmesini engelleyecektir. Bu CSS sınıfını etkinleştirdiğinizde, Visual Builder içinde ikinci satırı artık görmeyeceksiniz, ancak buna tel kafes modunda erişebilecek ve/veya açılır menünüzde değişiklik yaparken CSS sınıfını geçici olarak devre dışı bırakabileceksiniz. Sınıfı etkinleştirmek için CSS sınıfının başındaki ve sonundaki '/* */' köşeli parantezlerini kaldırın.

6. Daha Fazla Gönderi Kategorisi Açılır Listeleri Ekleme

Blog Kategori Satırını Klonla

Daha fazla kategori açılır listesi eklemek istiyorsanız, oluşturduğunuz tüm açılır satırı kopyalayabilirsiniz.

Katmanlar Panelinde Yinelenen Satıra Erişim

Masaüstünde mutlak konumlandırma kullandığımız için satırlar üst üste yerleştirilecektir. Satırlara tek tek erişmek için Divi Builder'ınızın içindeki katmanlar panelini açın ve yinelenen satırın ayarlarını açın.

Yinelenen Satır CSS Sınıfını Değiştir

Yinelenen satırınızdaki ikinci CSS Sınıfını değiştirin. Kullandığınız numaranın ardışık olduğundan emin olun.

• CSS Sınıfı: açılır menü açılır menü-2

Görünümdeki Menü Öğelerine CSS Sınıfları Ekleme

Ardından, panonuzdaki WordPress menünüze geri dönün ve aşağıdaki CSS sınıflarını başka bir menü öğesine ekleyin ve işiniz bitti:

• CSS Sınıfları: birinci seviye birinci seviye-2

Ön izleme

Artık tüm adımların üzerinden geçtik, şimdi farklı ekran boyutlarındaki sonuca son bir göz atalım.

masaüstü

Mobil

Son düşünceler

Bu gönderide, Divi başlığınız ve blog menü öğesiyle nasıl yaratıcı olunacağını gösterdik. Daha spesifik olarak, blog kategorilerini tüm ekran boyutlarında harika görünen açılır menü öğeleri olarak görsel olarak nasıl ekleyeceğinizi gösterdik. Bu yaklaşım, ilk bakışta minimal bir görünüm ve hissi korurken her farklı blog kategorisini vurgulamanıza yardımcı olacaktır. JSON dosyasını da ücretsiz olarak indirebildiniz! Herhangi bir sorunuz varsa, aşağıdaki yorum bölümüne yorum bırakmaktan çekinmeyin.

Divi hakkında daha fazla bilgi edinmek ve daha fazla ücretsiz Divi almak istiyorsanız, e-posta bültenimize ve YouTube kanalımıza abone olduğunuzdan emin olun, böylece her zaman bu ücretsiz içeriği bilen ve bu ücretsiz içerikten yararlanan ilk kişilerden biri olursunuz.