Bir açılır menü düğmesi tasarlarken çok yararlı olabilir. Site Web. Ana menüye ek olarak, bir sitenin belirli alanları alt öğelerden oluşan bir açılır menü gerektirebilir. Bunların blog yazısı kategorileri, listeler ve blog girişleri gibi şeyler için kullanıldığını görüyoruz. formulaire. Ancak harekete geçirici mesaj için bile kullanılabilirler.

Bu eğiticide, Divi'nin tam genişlikli menü modülünü kullanarak bir açılır menü düğmesini nasıl oluşturacağınızı göstereceğiz. Bunu yapmak için önce WordPress'te bir menü oluşturacağız. Daha sonra Divi oluşturucuyu ve biraz da özel CSS kullanarak bu menüyü özel stillerle görüntülemek için Divi'nin tam genişlikli menü modülünü kullanacağız. Sonuç, pratik ve şık bir açılır menü düğmesidir.

Başlayalım.

anket

İşte bu eğitime entegre edeceğimiz açılır menü düğmesine genel bir bakış.

Genel bakış açılır menüsü

Başlamak için neye ihtiyacınız var?

Başlamak için, henüz yapmadıysanız, kurun ve etkinleştirin. Divi teması yüklü (veya kullanmıyorsanız Divi Builder eklentisi) Divi teması). Açılır menü düğmesini tasarlamak için başlangıçta Divi oluşturucuyu kullanacağız.

Bu kadar !

WordPress'te bir menü oluşturun

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

WordPress'te bir menü oluşturun

Şimdilik, bağlantı metni ile birlikte URL yer tutucusu olarak "#" içeren özel bağlantılar oluşturabilirsiniz.

Menü öğelerini, üst düzey menü öğesi üç alt menü öğesi ile "Daha Fazla Bilgi Edinin" bağlantısına sahip olacak şekilde yapılandırın.

Wordpress menü organizasyonu

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

Divi tam genişlikli menü modülü ile bir açılır menü düğmesi nasıl oluşturulur

Menü oluşturulduktan sonra, açılır menü düğmesini Divi ile tasarlamaya başlayabiliriz. Projeyi başlatmak için, WordPress'te yeni bir sayfa oluşturun ve ön uçtaki sayfayı 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 içerik oluşturma

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

Metin modülü ekle

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

Divi Menüsü İçeriğiniz buraya gelir. Bu metni satır içi olarak veya İçerik ayarları modülünde düzenleyin veya kaldırın. Ayrıca bu içeriğin her yönünü Tasarım ayarları modülünde biçimlendirebilir ve hatta Gelişmiş ayarlar modülünde bu metne özel CSS uygulayabilirsiniz.

Ardından tasarım parametrelerini aşağıdaki gibi güncelleyin:

Dolgu bölümü

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

  • Dolgu: 0px aşağı

Düşük marjlı divi bölümü

Satır aralığı ve kenarlık

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

  • Döşeme: Üstte 10vw, altta 10vw, solda 5vw, sağda 5vw
  • Kenarlığın genişliği: 1px

Divi modülü bölüm yapılandırması

Açılır menü düğmesinin oluşturulması

Açılır menü butonunu oluşturmak için tam genişlikte bir menü modülü kullanacağız. Bu, önceden oluşturulmuş menüyü eklememize izin verecektir.

Tam genişlik menüsünü ekleme

Tam genişlikte menü modülünü oluşturmak için geçerli standart bölümün altına yeni bir tam genişlikte bölüm ekleyin.

Tam genişlikte bir divi oluşturucu bölümü oluşturun

Sonra çizgiye tam genişlikte bir menü modülü ekleyin.

Tam ekran divi menüsü

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

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

Tam ekran menü arka plan rengi yapılandırmasıTam genişlikte menü modülünü içeren menüyü ekledikten sonra ayarları kaydedin. Tasarımı bitirmek için biraz sonra bu modüle geri döneceğiz. Ama şimdilik, tam genişlik bölümüne bir arka plan ekleyeceğiz.

Tam genişlikli bölümün tasarımını güncelleyin

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

  • Sol arka plan gradyanı: # 0047d6
  • Sağ arka plan gradyanı Renk: # 45b2ff

Divi arka plan bölümü

  • Maksimum genişlik: 240px
  • Bölüm Hizalama: orta

Divi'deki varsayılan açılır menü genişliğinin genişliğiyle eşleştiği için maksimum bölüm genişliğini 240px olarak ayarladım. Ayrıca masaüstü ve mobil cihazlarda bir düğme için iyi bir boyuttur.

Divi bölüm ayarları

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

Divi sınır ayarları yapılandırması

Gelişmiş sekmesinde, aşağıdaki CSS Sınıfı, Taşma ve Z Dizini'ni ekleyin.

  • CSS sınıfı: açılan buton
  • Yatay taşma: görülebilir
  • Dikey taşma: görülebilir
  • Z dizini: 14

Harici CSS'mizi daha sonra bu bölüme hedefleyebilmemiz için CSS sınıfına ihtiyaç vardır. Açılır menüyü görebilmemiz için taşmanın görünür olarak ayarlanması gerekir. Ve Z dizini, açılır listeyi sayfadaki diğer tüm içeriğin üzerinde tutmanıza yardımcı olacaktır.

Ayarlar bölümü parametre diviFulwidth menüsünü tasarla

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

  • Tam genişlikte menü bağlantıları oluşturun: YES
  • Açılan metin rengi: #ffffff
  • Mobil menü metninin rengi: #ffffff
  • Metnin hizalanması: orta
  • Açılır menünün arka plan rengi: # 45b2ff
  • Açılan menü satırının rengi: #ffffff
  • Menü arka plan rengi: #45b2ff

Tam ekran menü modülü tarzı parametre ayarları

  • Yazı Tipi Menüsü: Yarı Yoğunlaştırılmamış Kodlama
  • Yazı Tipi Menüsü Ağırlık: Yarı Kalın
  • Menü metni rengi: #ffffff
  • Menü metni boyutu: 16px
  • Menü aralığı: 2px
  • Açılır menünün animasyonu: Genişlet

Yazı tipi tam ekran menü modülü divi

Açılan düğmeyi yerleştirin

Düğmenin alt kenarlıkla üst üste gelmesi için düğmenin tam yarısı kadar olan bir negatif üst kenar boşluğu eklememiz gerekir.

  • Marj: -40.5px yüksek

Tam genişlikli menü bölümü ayarları divi

Gördüğünüz gibi, fareyle üzerine gelme alanı henüz tüm düğme alanını kaplamıyor ve açılır menü hala sağda. Bu sorunu çözmek için özel CSS ekleyebiliriz.

Özel CSS ekleme

Özel CSS eklemeden önce, tam genişlik bölümüne (modüle değil) CSS kimliğini "aşağıya doğru" eklediğinizden emin olun.

Bölüm sınıfı ayar modülü diviCSS Kimliği olmadan aşağıdaki CSS çalışmayacaktır.

Özel CSS eklemek için sayfa ayarlarını açın ve aşağıdaki kodu özel CSS giriş kutusuna yapıştırın.

.dropdown-button .et_pb_fullwidth_menu .fullwidth-menu-nav> ul {padding-top: 0px! önemli; } .dropdown-button .fullwidth-menu li> a {padding-bottom: 0px; satır yüksekliği: 81px; } .dropdown-button .fullwidth-menu li a {padding: 6px 0px; satır yüksekliği: 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! önemli; } .dropdown-button .fullwidth-menu li {display: block; } .dropdown-button .fullwidth-menu .menu-item-has-children> a: ilk çocuk: {sağdan: 20px'den sonra; }

Css divi sayfasını özelleştir

İşte son sonuç

Divi açılır menü animasyonu

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. Öncelikle, modüle entegre etmek istediğimiz menüyü WordPress'te oluşturuyoruz. Ardından Divi oluşturucuyu tam genişlikli menü modülünü beğenimize göre şekillendirir ve kullanırız. Ardından, tasarımı hem masaüstünde hem de mobil cihazda güzelleştirmek için özel CSS ekliyoruz. Sonuç, masaüstü fareyle üzerine gelme ve mobil tıklama için kullanıma sunulan güzel (ve kullanışlı) bir açılır menüdür. Umarım bunu tasarım araç setinize yararlı bir ek bulursunuz.