Menü modülüne bir hamburger simgesi eklemek ister misiniz? Divi ?
Başlığınızı oluşturursanız Divi, bunu yapmanın birkaç yolu vardır.
Menü modülüne nasıl hamburger simgesi ekleyeceğinizi göstereceğiz. Divi. Bu hamburger simgesi zaten küçük ekranlarda varsayılan olarak görünüyor. Ancak bu derste, masaüstünde de hamburger simgesinin görünmesini sağlayacağız.
Bu, etkileşim eklerken başlığınıza minimal bir görünüm verir.
Gidelim.
anket
Bu öğreticiye dalmadan önce, sonuca hızlıca bir göz atalım.
DIVI'yı Şimdi İndirin !!!
Divi Builder ile Yeni Genel Başlık Şablonu Oluşturun
Divi Theme Builder'a gidin
WordPress kontrol panelinden 'Divi > Tema Oluşturucu' sonra tıklayın 'Küresel Başlık Ekle'
Yeni bir genel başlık ekle
Bir açılır menü görünecektir. Sıfırdan inşa etmeye başlamak için öğesini seçerek devam edin. "Küresel Başlık Oluştur".
Global başlık tasarımını tasarlama
Bölüm ayarları
Arka plan rengi
Şablon düzenleyiciye girdikten sonra, başlığı tasarlamaya başlama zamanı. Zaten bir bölüm olduğunu fark edeceksiniz. Bölüm ayarlarını açın ve bir arka plan rengi ekleyin.
- Arka Plan Rengi: #f6f9fb
aralık
Sekmeye geç Dizayn bölümünü seçin ve aşağıdaki parametreleri değiştirin.
- Dolgu (Üst ve Alt): 0 piksel
Yeni bir satır ekle
Sütunun yapısı
Aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyerek devam edin:
boyutlandırma
Hat ayarlarını açın, sekmeye gidin Dizayn ve boyutlandırma ayarlarında maksimum genişliği değiştirin.
- Maksimum Genişlik: 1 piksel
aralık
Ardından, boşluk ayarlarında üst ve alt dolguyu değiştirin.
- Dolgu (Üst ve Alt): 5 piksel
Sütuna bir Menü modülü ekleyin
Eklenecek menüyü seçin
Ardından, satır sütununa bir Menü modülü ekleyin ve istediğiniz bir dinamik menüyü seçin.
Logoyu indir
İndir logo.
Arka plan rengini kaldır
Ardından, varsayılan beyaz arka plan rengini modülden kaldırın.
Menü metin ayarları
Sekmeye geç Dizayn modülün ve menünün metin parametrelerini buna göre değiştirin:
- Yazı Tipi Menüsü: Poppins
- Menü Yazı Tipi Ağırlığı: Yarı Kalın
- Metin Rengi: #003e51
- Menü Metin Boyutu: 16px
- Metin Hizalama: Sağ
Açılır menü ayarları
Ardından, açılır menüden ayarları 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 maksimum bir genişlik atayın. logo.
- Logo Maksimum Genişlik: 280 piksel
aralık
Ayrıca varsayılan alt kenar boşluğunu modülden kaldırın.
- Kenar Boşluğu (Alt): 0px
Bölümü Yapışkan Yap
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, sekmeye gidin gelişmiş ve aşağıdaki ayarları uygulayın:
- Yapışkan Konum: Yukarıya Yapış
- Çevreleyen Yapışkan Elemanlardan Ofset: VAR
- Geçiş Varsayılanı ve Yapışkan Stiller: EVET
Yapışkan durumda arka plan rengi
Ardından, bölümün arka plan rengini yapışkan duruma değiştirin.
- Arka Plan Rengi: #ffffff
Yapışkan durum kutusu gölgesi
Ayrıca bölüme bir kutu gölgesi uygulayın.
- Gölge Rengi (Masaüstü): rgba(0,0,0,0)
- Gölge Rengi (Yapışkan): rgba(0,0,0,0.04)
Menü modülüne bir hamburger simgesi eklendi
Menü modülüne CSS kimliği ekle
Önce Menü modülü ayarlarını açın, sekmesine gidin gelişmiş ve bir CSS kimliği atayın.
- CSS kimliği: bölme menüsü
Menü modülünün altına bir Kod modülü ekleyin
Ardından, Menü modülünün altına bir Kod modülü ekleyin.
Komut dosyası ve stil etiketleri ekleyin
CSS ve JQuery kodunu kullanacağız. Buna hazırlanmak için 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 kodunu açma satırlarını ekleyin
Daha sonra 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üne geçiş simgesini yerleştirin
Ardından, aşağıdaki kod satırını kullanarak geçiş simgesi değişkenini Menü modülüne yerleştirin:
toggleIcon.insertAfter(desktopMenu);
Bir tıklama işlevi ekleyin
Ayrıca bir tıklama işlevi ekliyoruz.
toggleIcon.click(function(){
desktopMenu.toggleClass('reveal-menu-items');
$(this).toggleClass('icon-switch');
});
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!
anket
Tüm adımların üzerinden geçtik, şimdi sonuca son bir göz atalım.
DIVI'yı Şimdi İndirin !!!
Sonuç
Bu makalede, Divi Theme Builder'da global başlığınızla nasıl yaratıcı olabileceğinizi gösterdik.
Özellikle, masaüstüne bir hamburger menü simgesinin nasıl ekleneceğini de gösterdik. Varsayılan olarak, tablette ve mobil cihazlarda bir hamburger simgesi görüntülenir.
Bu eğitimin bir sonraki Divi projeleriniz için size ilham vereceğini umuyoruz. Herhangi bir endişeniz veya öneriniz varsa, bizi yorumlar bölümü bunu tartışmak için.
Ayrıca danışabilirsiniz kaynaklarımız, web sitesi oluşturma projelerinizi tamamlamak için daha fazla öğeye ihtiyacınız varsa. Veya ayrıca hakkındaki kılavuzumuza bakın WordPress blog oluşturma ya da Divi: Tüm zamanların en iyi WordPress teması.
Ama bu arada, bu yazıyı farklı sosyal ağlarda paylaş.
...
