Divi's Theme Builder ile Gelişmiş Zarif Temalar Açılır Menüsü Oluşturma

Divi's Theme Builder çıktığından beri, Divi ile web sitelerimizde üstbilgi ve altbilgi tasarlama şeklimiz her zamankinden daha kolay hale geldi. Her şey özelleştirilebilir ve sezgisel Divi ortamından ayrılmak zorunda kalmadan aklınızdaki tam menüyü elde edebilirsiniz. Artık belli bir noktada web sitemizdeki Elegant Themes açılır menüsü ile karşılaşmış olabilirsiniz. Bu açılır menü, simgeleri, metni ve CTA'ları yaratıcı bir şekilde birleştiren daha gelişmiş bir mega menü türüdür. Bu, ziyaretçilerin sağlanan farklı ürünler arasında görsel olarak gezinmesini sağlar. Ayrıca, daha küçük ekran boyutlarında güzel bir iç içe menüye dönüşür.

Bu öğreticide, Divi's Theme Builder'da bu gelişmiş Zarif Temalar açılır menüsünü nasıl yeniden oluşturacağınızı göstereceğiz. Her iki dünyanın en iyilerini birleştireceğiz; Açılır listelerimizin temelini oluşturmak için yerleşik Divi öğelerini kullanacağız ve onu, açılır menüleri WordPress menüsüne yerleştiren 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

Gelişmiş Zarif Temalar Açılır Menü Başlık Düzenini ÜCRETSİZ İndirin

Ellerinizi ücretsiz başlık düzenine 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.

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. Menü Öğelerine CSS Sınıfları Ekleyin

Görünümdeki Menülere Git

Bu öğreticinin ilk kısmı, WordPress menü öğelerinizi uygun CSS sınıflarıyla kurmaya odaklanır. Bunu yapmak için WordPress panonuza gidin > Menüler > Yeni bir menü oluşturun veya mevcut bir menü açın.

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

Ardından, ekranınızın sağ üst köşesinde 'Ekran Seçenekleri'ni göreceksiniz. Bu seçeneği değiştirin ve gelişmiş menü özelliklerinde 'CSS Sınıfları'nı etkinleştirin. Bu, bireysel düzeyde belirli menü öğelerine CSS sınıfları eklememize izin verecektir.

Açılır Liste Gerektiren Menü Öğelerine Ardışık CSS Sınıfları Ekleme

Bu eğitim boyunca, üç farklı açılır menü oluşturacağız ve her birini belirli bir menü öğesine atayacağız. Bu işlemi başlatmak için, bir açılır menü içermesini istediğimiz üç menü öğesine iki farklı CSS sınıfı atamamız gerekecek.

• Açılır liste atamak istediğiniz ilk menü öğesi: birinci düzey birinci düzey-1
• Açılır liste atamak istediğiniz ikinci menü öğesi: birinci düzey birinci düzey-2
• Açılır liste atamak istediğiniz üçüncü menü öğesi: birinci düzey birinci düzey-3

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

Şablonun içinde bir bölüm göreceksiniz. Bu bölümü açın ve arka plan rengini değiştirin.

• Arka Plan Rengi: #ffffff

aralık

Sonraki tüm varsayılan üst ve alt bölüm dolgusunu kaldırın.

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

Kutu Gölge

Ayrıca ince bir kutu gölgesi de ekleyin.

• Kutu Gölge Dikey Konumu: 0px
• Kutu Gölge Bulanıklığı Gücü: 30 piksel
• Gölge Rengi: rgba(103,151,255,0.17)

Yeni Satır Ekle

Sütun Yapısı

Aşağıdaki sütun yapısını kullanarak bölüme ilk 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ı aşağıdaki gibi değiştirin:

• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1
• Maksimum Genişlik: 1440 piksel

aralık

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

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

Satıra Menü Modülü Ekle

Seçim Menüsü

Ardından, satırınızın sütununa bir Menü Modülü ekleyin ve bu öğreticinin ilk bölümünde değiştirdiğiniz WordPress menüsünü seçin.

Logo Yükle

Ardından bir logo yükleyin.

Menü Metin Ayarları

Tasarım sekmesine gidin ve menü metni ayarlarını buna göre değiştirin:

• Menü Yazı Tipi: Lato
• Menü Yazı Tipi Ağırlığı: Kalın
• Menü Yazı Tipi Stili: Büyük Harf
• Menü Metin Rengi: rgba(32,41,47,0.62)
• Menü Metin Boyutu: 13px
• Menü Harf Aralığı: 3px
• Metin Hizalama: Sağ

Açılır Menü Ayarları

Sonraki açılır menü ayarlarında bazı değişiklikler yapın.

• Açılır Menü Arka Plan Rengi: #ffffff
• Açılır Menü Satır Rengi: rgba(0,0,0,0)
• Açılır Menü Metin Rengi: #000000
• Mobil Menü Arka Plan Rengi: #f2f4f5
• Mobil Menü Metin Rengi: #000000

Simge Ayarları

Simge ayarları gibi.

• Alışveriş Sepeti Simge Rengi: #000000
• Arama Simgesi Rengi: #000000
• Hamburger Menü Simge Rengi: #ff4a9e

boyutlandırma

Ve boyutlandırma ayarlarına maksimum logo yüksekliği atayarak modül ayarlarını tamamlayın.

• Logo Maksimum Yüksekliği: 64px

3. Açılır Öğeler Oluşturun

Bölüme Yeni Satır Ekle

Sütun Yapısı (Gerekli Açılır Menülerin Eşleşen Sayısı)

Varsayılan menünüz yerleştirildikten sonra, açılır menüleri oluşturmanın zamanı geldi. Bunu yapmak için, eşit büyüklükte üç sütun içeren yeni bir satır ekleyeceğiz. Sütun sayısı, oluşturacağımız açılır menülerin sayısıyla eşleşir.

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: %86
• Maksimum Genişlik: Yok

aralık

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

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

CSS Sınıfı

Ve satıra bir CSS sınıfı atayın.

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

Tüm Sütun CSS Sınıfları

Genel satır ayarlarını tamamladıktan sonra, her sütunu ayrı ayrı açın ve aşağıdaki CSS sınıfını atayın:

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

Blurb Modülü #1'i Sütun 1'e ekleyin

İçerik Ekle

Modül ekleme zamanı! İlk sütundaki ilk açılır menüyü oluşturarak başlayacağız. Tüm farklı ürünleri görüntülemek için Divi's Blurb Module'ü kullanacağız. Seçtiğiniz bazı içeriği ekleyin.

Simge Seç

Ardından, eşleşen bir simge seçin.

Link ekle

Modüle bir bağlantı da ekleyin.

Simge Ayarları

Tasarım sekmesine gidin ve simge ayarlarını aşağıdaki gibi biçimlendirin:

• Simge Rengi: #8f42ec
• Resim/Simge Yerleşimi: Sol
• Simge Yazı Tipi Boyutunu Kullan: Evet
• Simge Yazı Tipi Boyutu: 30px

Başlık Metni Ayarları

Ardından, başlık metnine stil verin.

• Başlık Yazı Tipi: Lato
• Başlık Yazı Tipi Ağırlığı: Kalın
• Başlık Yazı Tipi Stili: Büyük Harf
• Başlık Metin Rengi: #8f42ec
• Başlık Metin Boyutu: 16px
• Başlık Harf Aralığı: 2px

Gövde Metni Ayarları

Gövde metni ile birlikte.

• Gövde Yazı Tipi: Lato
• Gövde Metni Rengi: #999999

boyutlandırma

İçerik genişliğinin de '%100' olduğundan emin oluyoruz.

• İçerik Genişliği: %100

aralık

Ardından, boşluk ayarlarına gideceğiz ve farklı ekran boyutlarında bazı farklı dolgu değerleri kullanacağız.

• Üst Dolgu: 15px
• Alt Dolgu: 15px
• Sol Dolgu: %6 (Masaüstü), %2 (Tablet), %3 (Telefon)
• Sağ Dolgu: %6 (Masaüstü), %2 (Tablet), %3 (Telefon)

üzerine gelin:

• Üst Dolgu: 15px
• Alt Dolgu: 15px
• Sol Dolgu: %8
• Sağ Dolgu: %4

Animasyonlar

Sonraki animasyon ayarlarında varsayılan simge animasyonunu kaldıracağız.

• Resim/Simge Animasyonu: Animasyon Yok

CSS Sınıfı

Ardından gelişmiş sekmeye geçeceğiz ve modülümüze bir CSS sınıfı atayacağız. Açılır menünüzdeki her modülün, açılır menüye dahil edilmesi için kendisine atanan aynı CSS sınıfına ihtiyacı vardır.

• CSS Sınıfı: açılır menü öğesi

Ana Eleman CSS

Son olarak, ana öğede bir satır CSS kodu kullanarak imleci değiştirerek modül ayarlarını tamamlayacağız.

cursor: pointer;

Klon Blurb Modülü x3

İlk Blurb Module'ü tamamladıktan sonra, onu üç kez klonlayın.

İçeriği ve Simgeleri Değiştir

Her kopya için tüm içeriği ve simgeleri değiştirin.

Bağlantıları Değiştir

Bağlantılarla birlikte.

Son Blurb Modülünü Bir Kez Klonla

Sütundaki son Blurb Modülünü bir kez klonlayarak devam edin.

Arka Plan Rengi Ekle

Yinelenen Blurb Module'ün ayarlarını açın ve arka plan rengini değiştirin.

• Arka Plan Rengi: #f9f9f9

Simge Ayarlarını Değiştir

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

• Simge Rengi: #3b45eb
• Simge Yazı Tipi Boyutu: 22px

Başlık Metni Ayarlarını Değiştir

Başlık metni ayarlarıyla birlikte.

• Başlık Metin Rengi: #3b45eb
• Başlık Metin Boyutu: 14px

İçeriği ve Bağlantıyı Değiştir

Ve elbette, içerik ve bağlantı.

Tablet ve Telefonda Devre Dışı Bırak

Bu açılır menüde sahip olduğumuz ikinci tür Bulanıklık Modülü yalnızca daha büyük ekran boyutlarında görünür olacaktır. Bu, açılır menünün daha küçük ekran boyutlarında çok fazla bunaltıcı olmamasını sağlamamıza yardımcı olacaktır. Modülü daha küçük ekran boyutlarında gizlemek için gelişmiş sekmesine gidin ve modülü tablet ve telefonda devre dışı bırakın.

Klon Blurb Modülü x3

İkinci tür Bulanıklık Modülünüz tamamlandığında, onu üç kez klonlayabilirsiniz.

İçeriği ve Simgeleri Değiştir

Her kopya için içeriği ve simgeleri değiştirdiğinizden emin olun.

Bağlantıları Değiştir

Bağlantılarla birlikte.

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

İçerik Ekle

Açılır menümüzde ihtiyacımız olan son modül bir Metin Modülüdür. Metin Modülü açılır ortama daha kolay uyum sağlayacağı için Düğme Modülü yerine Metin Modülü kullanıyoruz. Seçtiğiniz bir kopyayı ekleyin.

Arka plan rengi

Ardından, arka plan rengini değiştirin.

• Arka Plan Rengi: #3776ff

Metin Ayarları

Tasarım sekmesine gidin ve metin ayarlarını buna göre değiştirin:

• Metin Yazı Tipi: Lato
• Metin Yazı Tipi Ağırlığı: Kalın
• Metin Yazı Tipi Stili: Büyük Harf
• Metin Rengi: #ffffff
• Metin Harf Aralığı: 3px
• Metin Hizalama: Merkez

aralık

Bazı özel boşluk değerleri de ekleyin.

• Üst Kenar Boşluğu: 20px
• Alt Kenar Boşluğu: 20px
• Sol Kenar Boşluğu: %4
• Sağ Marj: %4
• Üst Dolgu: 15px
• Alt Dolgu: 15px

Sınır

Ardından, kenarlık ayarlarına yuvarlatılmış köşeler ekleyin.

• Tüm Köşeler: 100 piksel

Kutu Gölge

İnce bir kutu gölgesini etkinleştirin.

• Kutu Gölge Dikey Konumu: 14px
• Gölge Rengi: rgba(0,0,0,0) (Varsayılan), rgba(0,0,0,0.09) (Vurgulu)

Dönüştür Çeviri

Fareyle üzerine gelindiğinde, düğmenin hafifçe yukarı çıkmasını istiyoruz. Bu efekti eklemek için, fareyle üzerine gelindiğinde bazı özel dönüştürme çevirme ayarlarını kullanacağız.

• Sağ: -3px (Vurgulu)

CSS Sınıfı

Açılır listemizdeki diğer tüm modüller gibi, bu modül de aşağıdaki CSS sınıfına ihtiyaç duyar:

• CSS Sınıfı: açılır menü öğesi

Ana Eleman CSS

Ve ana öğede bir satır CSS kodu kullanarak imleci değiştirerek modül ayarlarını tamamlayacağız.

cursor: pointer;

Sütun 2 ve 3'ü Sil

İlk açılır menü sütununu tamamladıktan sonra, satır ayarlarını açabilir ve satırdaki iki boş sütunu kaldırabilirsiniz.

İlk Sütunu İki Kez Klonla

İlk sütunu iki kez klonlayın.

Öğeleri Özelleştir

Ve diğer iki açılır menüdeki tüm öğeleri istediğiniz gibi özelleştirin.

4. CSS ve JQuery Kodu Ekle

Satır #1 Sütuna Yeni Kod Modülü Ekle

Artık tüm açılır menü öğelerini yerleştirdiğimize göre, bunları bir açılır menüye dönüştürmenin ve açılır menüyü eşleşen bir menü öğesinin içine yerleştirmenin zamanı geldi. Menü Modülünün hemen altındaki ilk satırınıza bir Kod Modülü ekleyin.

CSS Kodu Ekle

Ve aşağıdaki CSS kodunu ekleyin:

<style>
  
/* Enable class below once you're done editing the menu */
  
/*
.dropdown-menu-row {
display: none;
}*/
  
</style>
<style>
  
.et_pb_menu__menu [class*="dropdown-menu-container"] {
position: absolute;
top: 75px;
left: -195px;
background-color: white;
width: 464px;
-webkit-box-shadow: 1px 2px 44px 0px rgba(84,81,179,0.36);
-moz-box-shadow: 1px 2px 44px 0px rgba(84,81,179,0.36);
box-shadow: 1px 2px 44px 0px rgba(84,81,179,0.36);
border-radius: 20px;
padding-top: 20px;
padding-bottom: 5px;
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);     
}
  
.et_pb_menu__menu ul>li:hover [class*="dropdown-menu-container"] {
visibility: visible;
opacity: 1;
}
  
.et_pb_menu__menu [class*="dropdown-menu-container"]:before  {
position: absolute;
left: 195px;
top: -20px;
width: 0;
height: 0;
content: '';
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid white;
}    
.et_mobile_menu [class*="dropdown-menu-container"] {
background-color: white; 
padding-top: 25px;
padding-bottom: 5px;
}   
.et_mobile_menu li > a {
background-color: transparent;
position: relative;
}
  
.et_mobile_menu .first-level > a:after {
font-family: 'ETmodules';
content: '\4c';
color: #FF4A9E;
font-weight: normal;
position: absolute;
font-size: 16px;
top: 13px;
right: 10px;
}
  
.et_mobile_menu .first-level > .icon-switch:after{
content: '\21';
color: #c9c9c9;
}
  
.et_mobile_menu [class*="dropdown-menu-container"] {
display: none;
}
  
.et_mobile_menu [class*="dropdown-menu-container"].reveal-items {
display: block;
}
  
.et_mobile_menu {
width: 130%;
margin-left: -15% !important;
min-height: 100vh;
}
</style>

JQuery Kodu Ekle

Bazı JQuery kodlarını da kullanıyoruz. Aşağıdaki yazdırma ekranında görebileceğiniz gibi bu kodu script etiketleri arasına yerleştirdiğinizden emin olun.

jQuery(function($){
$(document).ready(function(){
  
$('.dropdown-menu-column').each(function(i){
  
i = i + 1;
  
var $dropdownMenuItems = $(this).find('.dropdown-menu-item');
var $mainMenuItem = $('.first-level-' + i + '>a');
$dropdownMenuItems.wrapAll('<div class="dropdown-menu-container-' + i + '" />');
var $dropdownContainer = $('.dropdown-menu-container-' + i);
$dropdownContainer.insertAfter($mainMenuItem);
  
});
var $firstLevel = $('.et_mobile_menu .first-level > a');
var $allDropdowns = $('.et_mobile_menu [class*="dropdown-menu-container"]');
$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');  
});    
    
$(".dropdown-menu-row").css('visibility','hidden');
     
$(window).load(function() {
$(".dropdown-menu-row").fadeIn(1000);
});
  
});
});

5. Menüyü Ö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, kodumuzun içindeki bir yükleme işleviyle birlikte, sayfa yüklenirken açılır menülerin görünmesini engelleyecektir. Bu CSS sınıfını etkinleştirdiğinizde, Visual Builder'ın içindeki ikinci satırı artık görmeyeceksiniz, ancak buna tel kafes modunda erişebilecek ve/veya açılır menülerinizde 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.

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

6. 3'ten Fazla Açılır Menü Oluşturma

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

Menünüze 3'ten fazla açılır menü eklemenin bir yolunu arıyorsanız, menünüze geri dönmeniz ve dördüncü menü öğesine ardışık CSS sınıfları eklemeniz gerekir.

• Bir açılır liste atamak istediğiniz dördüncü menü öğesi: birinci seviye birinci seviye-4

Satır Sonundaki Klon Sütunu

Ardından, başlığınıza geri dönün ve son sütunu klonlayın.

Sütun ve Modül CSS Sınıflarının Yerinde Olduğundan Emin Olun

Yeni açılır menü için sütun ve modül CSS sınıflarının yerinde olduğundan emin olun ve işiniz bitti! Her zaman yeni bir açılır menüye yeni bir sütun ayırmak ve satırın sütun sırasını takip etmek önemlidir. Bu, sütun 1'in açılır liste 1 olacağı, sütun 2'nin açılır liste 2 olacağı vb. anlamına gelir.

• Sütun CSS Sınıfı: açılır menü-sütun
• Modül CSS Sınıfı: açılır menü öğesi

Ö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 eğitimde, Divi's Theme Builder'ı kullanarak Elegant Themes açılır menüsünü nasıl yeniden oluşturacağınızı gösterdik. Her iki dünyanın en iyilerini birleştirdik ve Divi'nin yerleşik öğelerini, açılır menümüzdeki tüm öğeleri stillendirmek için kullandık, ardından tüm açılır menüleri WordPress menüsündeki eşleşen menü öğelerine yerleştirmek için bazı kodlar kullandık. JSON dosyasını da ücretsiz olarak indirebildiniz! Herhangi bir sorunuz veya öneriniz 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.