Divi'nin Tam Genişlik Menü Modülünü Kullanarak Açılır Menü Düğmesi Nasıl Oluşturulur

Bir web sitesi tasarlarken bir açılır menü düğmesi gerçekten kullanışlı olabilir. Ana menünün yanı sıra, bir sitede alt öğelerden oluşan bir açılır menü gerektirebilecek alanlar vardır. Blog yazısı kategorileri, listeler ve form girdileri gibi şeyler için kullanıldığını görüyoruz. Ancak, ana harekete geçirici mesaj için bile kullanılabilirler.

Bu öğreticide, Divi'nin tam genişlikli menü modülünü kullanarak bir açılır menü düğmesinin nasıl oluşturulacağını göstereceğiz. Bunu yapmak için önce WordPress'te bir menü oluşturacağız. Ardından, Divi oluşturucu ve biraz özel CSS kullanarak bu menüyü özel stiller ile görüntülemek için Divi'nin tam genişlikli menü modülünü kullanacağız. Sonuç, hem pratik hem de zarif bir açılır menü düğmesidir.

Başlayalım.

Gizlice Bakış

İşte bu eğitimde oluşturacağımız açılır menü düğmesine hızlı bir bakış.

Masaüstü (Vurgulu Olduğunda Menü Aşağı Açılır)

Tablet ve Telefon (Menü Tıklandığında Açılır)

Düzeni ÜCRETSİZ İndirin

Bu eğitimdeki tasarımlara el koymak için önce aşağıdaki düğmeyi kullanarak indirmeniz gerekecek. İ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.

Youtube Kanalımıza Abone Olun

Düzeni sayfanıza aktarmak için zip dosyasını çıkarın ve json dosyasını Divi Builder'a sürükleyin. Özel CSS, mizanpajın altındaki ayrı bir bölümde bir kod modülüne eklenmiştir.

Hadi öğreticiye geçelim mi?

Başlamak için Gerekenler

Başlamak için, henüz yapmadıysanız, kurulu Divi Temasını (veya Divi Temasını kullanmıyorsanız Divi Builder Eklentisini) kurun ve etkinleştirin. Açılır menü düğmesini tasarlamak için Divi oluşturucuyu ön uçta kullanacağız.

Bu kadar!

WordPress'te Menü Oluşturma

Divi Builder ile açılır menüyü oluşturmaya başlamadan önce, tam genişlikli menü modülü için kullanmak istediğimiz bir WordPress menüsü oluşturmalıyız. Bunu yapmak için WordPress panosuna gidin ve Görünüm > Menüler'e gidin. Ardından yeni menü oluştur bağlantısına tıklayarak, bir menü adı girerek ve “Menü Oluştur” düğmesine tıklayarak yeni bir menü oluşturun.

Şimdilik, bağlantı metniyle birlikte bir url yer tutucusu olarak “#” ile bazı özel bağlantılar oluşturabilirsiniz.

Menü öğelerini, en üst düzey menü öğesinin altında üç alt menü öğesi bulunan “Daha Fazla Bilgi” bağlantı metnine sahip olacak şekilde yapılandırın.

Bundan sonra menüyü kaydettiğinizden emin olun.

Divi'nin Tam Genişlik Menü Modülü ile Açılır Menü Düğmesi Nasıl Oluşturulur

Menü oluşturulduktan sonra Divi ile açılır menü butonunu tasarlamaya başlayabiliriz. İşleri başlatmak için WordPress'te yeni bir sayfa oluşturun ve sayfayı ön uçta düzenlemek için Divi Builder'ı kullanın (görsel oluşturucu).

Bundan sonra Divi'de tasarlamaya başlamak için boş bir tuvaliniz olacak.

Sahte İçerik Oluşturma

İlk olarak, varsayılan normal bölüme bir sütun satırı ekleyin.

Metin Modülü Ekle

Ardından, aşağıdaki içeriğe sahip satıra bir metin modülü ekleyin:

<h1>Dropdown Menu Button</h1>
<p>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.</p>

Bundan sonra, tasarım ayarlarını aşağıdaki gibi güncelleyin:

Bölüm Dolgusu

Ardından, bölüm ayarını aşağıdakilerle güncelleyin:

• Dolgu: 0px alt

Satır Aralığı ve Kenarlık

Bölüm dolgusu güncellendikten sonra, satır ayarlarını açın ve satıra biraz dolgu ve hafif bir kenarlık verin.

• Dolgu: 10vw üst, 10vw alt, 5vw sol, 5vw sağ
• Kenar Genişliği: 1px

Açılır Menü Düğmesini Oluşturma

Açılır menü butonunu oluşturmak için tam genişlikte bir menü modülü kullanacağız. Bu, daha önce oluşturduğumuz menüyü eklememize izin verecek.

Tam Genişlik Menüsü Ekleme

Tam genişlikli menü modülünü oluşturmak için mevcut normal bölümün altına yeni bir tam genişlikli bölüm ekleyin.

Ardından satıra tam genişlikte bir menü modülü ekleyin.

Tam genişlikli menü ayarları açılır penceresinde (içerik altında), görüntülenmesini istediğiniz menüyü seçmek için açılır menüyü kullanın. Bu, daha önce oluşturduğumuz “açılır düğme menüsü” adlı menüyle aynı olmalıdır.

Ardından menü için varsayılan beyaz arka plan rengini çıkarın.

Tam genişlikli menü modülü ile menüyü ekledikten sonra, ayarları kaydedin. Tasarımı bitirmek için birazdan bu modüle geri döneceğiz. Ancak şimdilik, tam genişlik bölümüne bir arka plan ekleyeceğiz.

Tam Genişlik Bölümü tasarımını güncelleyin

Tam genişlik bölümü ayarlarını açın ve aşağıdakileri güncelleyin:

• Arka Plan Gradyanı Sol Renk: #0047d6
• Arka Plan Gradyanı Sağ Renk: #45b2ff

• Maksimum Genişlik: 240 piksel
• Bölüm Hizalama: merkez

Bölümün maksimum genişliğini 240 piksel olarak ayarlıyorum çünkü bu, Divi'deki varsayılan açılır menü genişliğinin genişliğiyle eşleşecek. Ayrıca masaüstü ve mobil cihazlarda bir düğme için güzel bir boyuttur.

• Yuvarlatılmış Köşeler: 5px

Gelişmiş sekmesinin altına aşağıdaki CSS Sınıfı, taşma ve Z Dizini'ni ekleyin.

• CSS Sınıfı: açılır düğme
• Yatay Taşma: görünür
• Dikey Taşma: görünür
• Z İndeksi: 14

Harici CSS'mizi ancak daha sonra bu bölüme hedefleyebilmemiz için CSS Sınıfı gereklidir. Açılır menüyü görebilmemiz için taşmanın görünür olarak ayarlanması gerekir. Z Endeksi, açılır menünün sayfadaki diğer tüm içeriğin üstünde kalmasına yardımcı olacaktır.

Tam Genişlik Menüsünü Tasarlayın

Artık tam genişlikli menü modülünü tasarlamaya hazırız. Tam genişlikli menü modülü ayarlarını açın ve aşağıdakileri güncelleyin:

• Menü Bağlantılarını Tam Genişlikte Yapın: EVET
• Açılır Menü Metin Rengi: #ffffff
• Mobil Menü Metin Rengi: #ffffff
• Metin Hizalama: Merkez
• Açılır Menü Arka Plan Rengi: #45b2ff
• Açılır Menü Satır Rengi: #ffffff
• Mobil Menü Arka Plan Rengi: #45b2ff

• Menü Yazı Tipi: Sans Yarı Yoğunlaştırılmış
• Menü Yazı Tipi Ağırlığı: Yarı Kalın
• Menü Metin Rengi: #ffffff
• Menü Metin Boyutu: 16px
• Menü Harf Aralığı: 2px
• Açılır Menü Animasyonu: Genişlet

Açılır Düğmeyi Konumlandırma

Düğmenin alt kenarlıkla örtüşmesini sağlamak için, düğmenin yüksekliğinin tam olarak yarısı kadar bir negatif üst kenar boşluğu eklememiz gerekir.

• Kenar boşluğu: -40,5 piksel üst

Neredeyse

İşte şimdiye kadarki sonuç…

Gördüğünüz gibi, vurgulu alan henüz tüm düğme alanını işgal etmiyor ve açılır menü hala sağda. Bunu düzeltmek için bazı özel CSS ekleyebiliriz.

Özel CSS Ekleme

Özel CSS'yi eklemeden önce, tam genişlik bölümüne (modül değil) CSS kimliğinin "açılır düğmesi" eklendiğinden emin olun.

CSS kimliği olmadan aşağıdaki CSS çalışmaz.

Özel CSS'yi eklemek için sayfa ayarlarını açın ve aşağıdaki kodu Özel CSS giriş alanına yapıştırın.

.dropdown-button .et_pb_fullwidth_menu .fullwidth-menu-nav > ul {
  padding-top: 0px !important;
}

.dropdown-button .fullwidth-menu li > a {
  padding-bottom: 0px;
  line-height: 81px;
}

.dropdown-button .fullwidth-menu li li a {
  padding: 6px 0px;
  line-height: 1.6em;
}

.dropdown-button .et_mobile_menu li a:hover, .nav ul li a:hover, .dropdown-button .fullwidth-menu a:hover {
  opacity: 1;
}

.dropdown-button .et_pb_fullwidth_menu_fullwidth .et_pb_row {
  padding: 0 0 !important;
}

.dropdown-button .fullwidth-menu li {
  display: block;
}

.dropdown-button .fullwidth-menu .menu-item-has-children > a:first-child:after {  
  right: 20px;
}

İşte nihai sonuç

Mobilde Menüyü Özelleştirme

Şu anda menü, mobil menüyü açıp kapatan tıklanabilir hamburger simgesiyle mobil sürüme başvuracaktır. İşte böyle görünüyor.

Menüyü masaüstü sürümüyle eşleşecek şekilde düzeltmek için bazı özel CSS eklememiz gerekiyor. Sayfa ayarlarını açın ve şu anda eklediğimiz css'nin hemen altına aşağıdaki özel CSS'yi ekleyin.

@media (max-width: 981px){
  .dropdown-button .et_pb_fullwidth_menu .et_pb_row {
    width: 100%;
    }
  .dropdown-button .mobile_menu_bar {
    height: 81px;
  }
  .dropdown-button .mobile_menu_bar:before {
    font-family: inherit !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    color: #ffffff!important;
    letter-spacing: 2px !important;
    content: "Learn More";
    line-height: 81px;
    top: 0px;
}
  .dropdown-button .mobile_menu_bar:after{
    position: absolute;
    line-height: 81px;
    font-family: ETmodules;
    font-size: 20px;
    font-weight: 800;
    content: "3";
    padding-left: 20px;
    color: #ffffff;
}   
  .dropdown-button .et_first_mobile_item > a {
    display: none;
  }

}

Yukarıdaki CSS, tıklanabilir alanın bölümün/düğmenin tam genişliğine ve yüksekliğine yayılmasını sağlar. Ayrıca hamburger simgesini bir metin ve masaüstü sürümüyle eşleşen bir ok simgesiyle değiştirir. Bu, :before ve :after sözde elemanları kullanılarak yapılır. Bu şekilde, mobil menünün varsayılan işlevselliğini yerinde tutabiliriz.

Şu anda, mobil açılır düğmenin metin içeriğinde "Daha Fazla Bilgi Edinin" yazıyor. Ancak bunu, mobil menü çubuğu için :before sözde öğesinin altındaki aşağıdaki CSS satırını güncelleyerek değiştirebiliriz:

content: "Learn More";

Örneğin, “Menü” okumasını istiyorsanız, CSS satırını aşağıdaki gibi değiştirirsiniz:

content: "Menu";

Son sonuç

İşte nihai sonuç.

Masaüstü (Vurgulu Olduğunda Menü Aşağı Açılır)

Tablet ve Telefon (Menü Tıklandığında Açılır)

Ek Alt Öğeler

Hatta alt menü öğelerini de ekleyebilirsiniz! Sadece menü düzenleyici sayfasındaki menüyü güncelleyin ve hazırsınız.

Son düşünceler

Divi'nin tam genişlikli menü modülünü kullanarak bir açılır menü düğmesi oluşturmak birkaç önemli adımı içerir. İlk olarak, WordPress'te modüle çekmek istediğimiz menüyü oluşturuyoruz. Ardından Divi oluşturucuyu kullanarak tam genişlikli menü modülünü beğenimize göre şekillendiririz. Ardından, tasarımı hem masaüstünde hem de mobilde cilalamak için bazı özel CSS ekliyoruz. Sonuç, masaüstü için fareyle üzerine gelindiğinde ve mobil için tıklandığında açılan güzel (ve kullanışlı) bir açılır menüdür. Umarım, bunu tasarım araç kutunuza faydalı bir ek olarak bulacaksınız.

Yorumlarda sizden haber bekliyorum.

Şerefe!