Masaüstünde Divi'nin Menü Modülüne Hamburger Simgesi Geçişi Nasıl Eklenir

Başlığınızı Divi'nin içinde oluşturuyorsanız, bunu yapmanın birkaç yolu vardır. Nitekim, burada başlık türleri ve öğreticiler hakkında bir genel bakış elde edebilirsiniz. Şimdi, bugünün eğitiminde, listenize başka bir seçenek ekliyoruz. DIvi'nin Menü Modülüne bir hamburger simgesi geçişini nasıl ekleyeceğinizi göstereceğiz. Bu hamburger simgesi, varsayılan olarak, daha küçük ekran boyutlarında zaten görünür, ancak bu eğitimde, masaüstünde de bir hamburger simgesinin görünmesini sağlayacağız. Hamburger simgesine tıkladığınızda, tüm menü öğeleri simgenin yanında yatay bir sırada görünecektir. Bu, etkileşim eklerken başlığınıza minimal bir görünüm ve his verir. Şablon 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.

ÜCRETSİZ Global Başlık Şablonunu İndirin

Ücretsiz genel başlık şablonuna 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.

İ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!

1. Yeni Genel Başlık Şablonu Oluşturun

Divi Theme Builder'a gidin

WordPress web sitenizin arka ucundaki Divi Theme Builder'a giderek başlayın. Bir kez orada, “Global Başlık Ekle” ye tıklayın.

Yeni Genel Başlık Ekle

Bir açılır menü görünecektir. Sıfırdan oluşturmaya başlamak için “Global Başlık Oluştur” öğesini seçerek devam edin.

2. Global Başlık Tasarımı Oluşturun

Bölüm Ayarları

Arka plan rengi

Şablon düzenleyiciye girdikten sonra, başlık tasarımını oluşturmaya başlamanın zamanı geldi. Orada zaten bir bölüm olduğunu fark edeceksiniz. Bölümün ayarlarını açın ve bir arka plan rengi ekleyin.

• Arka Plan Rengi: #f6f9fb

aralık

Bölümün tasarım sekmesine gidin ve tüm varsayılan üst ve alt dolguyu kaldırın.

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

Yeni 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 modül eklemeden, satır ayarlarını açın, tasarım sekmesine gidin ve boyutlandırma ayarlarında maksimum genişliği değiştirin.

• Maksimum Genişlik: 1280 piksel

aralık

Sonraki boşluk ayarlarında üst ve alt dolguyu değiştirin.

• Üst Dolgu: 5px
• Alt Dolgu: 5px

Sütuna Menü Modülü Ekle

Seçim Menüsü

Ardından, satırın sütununa bir Menü Modülü ekleyin ve istediğiniz bir dinamik menüyü seçin.

Logo Yükle

Bir logo yükleyin.

Arka Plan Rengini Kaldır

Ardından, modülün varsayılan beyaz arka plan rengini kaldırın.

Menü Metin Ayarları

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

• Menü Yazı Tipi: Poppins
• Menü Yazı Tipi Ağırlığı: Yarı Kalın
• Menü Metin Rengi: #003e51
• Menü Metin Boyutu: 16px
• Metin Hizalama: Sağ

Açılır Menü Ayarları

Sonraki açılır menü ayarlarını değiştirin.

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

Simge Ayarları

Simge ayarlarını da değiştirin.

• Alışveriş Sepeti Simge Rengi: #670fff
• Arama Simgesi Rengi: #670fff
• Hamburger Menü Simgesi Rengi: #670fff

boyutlandırma

Ardından, boyutlandırma ayarlarına gidin ve bir logo maksimum genişliği atayın.

• Logo Maksimum Genişliği: 50px

aralık

Modülün varsayılan alt kenar boşluğunu da kaldırın.

• Alt Kenar Boşluğu: 0px

Bölümü Yapıştır

Artık menümüz hazır olduğuna göre, bölümü de yapışkan hale getireceğiz. Bölüm ayarlarını açın, gelişmiş sekmeye gidin ve aşağıdaki yapışkan ayarları uygulayın:

• Yapışkan Konum: En Üstte Yapış
• Çevredeki Yapışkan Öğelerden Ofset: Evet
• Geçiş Varsayılanı ve Yapışkan Stiller: Evet

Yapışkan Arka Plan Rengi

Daha sonra bölümün arka plan rengini yapışkan durumda değiştirin.

• Arka Plan Rengi: #ffffff

Yapışkan Kutu Gölgesi

Bölüme de bir kutu gölgesi uygulayın.

• Varsayılan Gölge Rengi: rgba(0,0,0,0)
• Yapışkan Gölge Rengi: rgba(0,0,0,0.04)

3. Menü Modülüne Hamburger Simgesi Geçişi Ekle

Menü Modülüne CSS Kimliği Ekle

Eğitimin bir sonraki bölümünde, masaüstü hamburger simgesi geçiş simgesi oluşturmaya odaklanacağız. Öncelikle Menü Modülünün ayarlarını açın, gelişmiş sekmesine gidin ve bir CSS kimliği atayın.

• CSS kimliği: bölme menüsü

Menü Modülünün Altına Kod Modülü Ekle

Ardından Menü Modülünün altına bir Kod Modülü ekleyin.

Komut Dosyası ve Stil Etiketleri Ekle

Biraz CSS ve JQuery kodu kullanacağız. Buna hazırlanmak için bazı stil ve komut dosyası etiketleri ekleyeceğiz.

CSS Kodu Ekle

Aşağıdaki CSS kod satırlarını stil etiketleri arasına yapıştıracağız:

.toggle-icon:after {
content: "\61";
font-size: 32px;
font-family: ETmodules !important;
color: #003e51;
position: absolute;
top: 26px;
right: 0;
cursor: pointer;
}

#divi-menu .et_pb_menu__menu>nav {
margin-right: 38px;
visibility: hidden;
opacity: 0;
  
-webkit-transition: .1s ease-in-out;
-moz-transition: .1s ease-in-out;
-o-transition: .1s ease-in-out;
transition: .1s ease-in-out;
  
transform: translateY(50%);  
}
  
.reveal-menu-items {
opacity: 1 !important;
visibility: visible !important;
transform: translateY(0%) !important;
}
  
.icon-switch:after {
content: '\4d';
font-size: 32px;
font-family: ETmodules !important;
color: #003e51;
position: absolute;
top: 26px;
right: 0;
cursor: pointer;    
}

JQuery Ekle

JQuery Açılış Kodu Satırları Ekle

Sırada, JQuery koduna sahip olacağız. Komut dosyası etiketleri arasına aşağıdaki JQuery kodu satırlarını ekleyin:

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

});
});

Değişkenler Oluşturun

Daha sonra bazı değişkenler oluşturun.

var toggleIcon = $('<div class="toggle-icon"></div>');
var desktopMenu = $('#divi-menu .et_pb_menu__menu>nav');

Menü Modülünün İçine Geçiş Simgesini Yerleştirin

Ardından, aşağıdaki kod satırını kullanarak geçiş simgesi değişkenini Menü Modülünün içine yerleştirin:

toggleIcon.insertAfter(desktopMenu);

Tıklama İşlevi Ekle

Bir tıklama işlevi de ekliyoruz.

toggleIcon.click(function(){
	desktopMenu.toggleClass('reveal-menu-items');
  $(this).toggleClass('icon-switch');
});

4. Divi Tema Oluşturucu Değişikliklerini Kaydet

Artık her şey yerli yerinde olduğuna göre, geriye kalan tek şey tüm Divi Theme Builder değişikliklerini kaydetmek ve sonucu görüntülemek!

Ön izleme

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

Son düşünceler

Bu gönderide, Divi Tema Oluşturucu içinde Divi başlığınızla nasıl yaratıcı olunacağını gösterdik. Daha spesifik olarak, masaüstünde de hamburger menü simgesi geçişini nasıl ekleyeceğinizi gösterdik. Varsayılan olarak, bir hamburger simgesi tablet ve mobil deneyimin bir parçasıdır, ancak bunu masaüstüne de genişletiyoruz. Geçiş simgesine tıklandığında, menü öğeleri yatay bir düzende görünecek ve bu da buna minimal bir görünüm ve his kazandıracaktır. Şablon JSON dosyasını da ücretsiz olarak indirebildiniz! Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne bir yorum bıraktığınızdan emin olun.

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.