Mega menüler, ilginizi çekebilecek popüler bir tasarım öğesidir. Site Web sunarken bir zarafet patlaması ziyaretçi ek bir gezinme katmanı. Divi'ye mega menüler eklemenin birkaç yolu vardır. Kullandığım en kolay yöntemlerden biriDivi Mega Pro adında üçüncü taraf bir eklenti .

Divi Mega Pro, Divi Builder kullanarak mega menüler oluşturmayı kolaylaştırır. Her menü, bir CSS sınıfı kullanılarak herhangi bir öğeye eklenebilir. Bu, menüdeki herhangi bir bağlantıya bir Divi düzeni ekleyebileceğiniz anlamına gelir, ancak daha da ileri gidebilir ve yalnızca bir CSS sınıfı ekleyerek bunları Divi düzeninin herhangi bir öğesine ekleyebilirsiniz.

Mağaza modülleri, resimler, kaydırıcılar, portföyler, simgeler, tanıtım yazıları, videolar, bloglar vb. İle menüler ve açılır pencereler oluşturmak için idealdir. Ekstra ile de çalışır.

Mega Pro Mega Menü Oluştur

Divi Mega Pro menüsü, gösterge tablosu menüsüne eklenir. Burada lisans anahtarınızı girebilir, oluşturduğunuz menülere bakabilir ve yeni bir menü oluşturabilirsiniz. Yeni bir menü eklemek için tıkladığınızda, menü yazı tipi için bir düzenleyici göreceksiniz. Ekran basit ama burada çok şey oluyor.

Yayımcı - Divi Builder'ı kullanarak mega menü veya bir araç ipucu oluşturabilirsiniz.

Mega Pro Arkaplan - arka plan ve yazı tipi renklerini seçebilirsiniz.

Yerleri görüntüle - tüm sayfaları seçin veya belirli sayfaları adlandırın, ardından istisnaları girin.

Mega Pro Animasyon - bir animasyon seçin. Ofset, ofset, perspektif, solma veya ölçek arasından seçim yapın.

Mega Pro Tetikleyicileri - CSS seçici olarak bir tetikleyici ekleyin. Kaydettikten sonra, bir menü öğesinin, modülün, satırın veya bölümün CSS sınıf alanına yapıştıracağınız CSS sınıfını göreceksiniz. Menüyü görüntülemek için tıklanan veya üzerine gelinen budur. Her şey sadece bir menü öğesi değil tetik olarak kullanılabilir. Bu, açılır pencereler veya araç ipuçları oluşturmak için Divi Mega Pro'yu da kullanabileceğiniz anlamına gelir.

Mega Pro ekran ayarları : görüntüleme yönünü seçin (üst veya alt), üst ve alt kenar boşluklarını piksel cinsinden girin, bir genişlik yüzdesi seçin ve bir oku etkinleştirin. Oku etkinleştirmek, ok türünü (üçgen veya yuvarlak) seçebileceğiniz, rengi seçebileceğiniz, genişliği ve yüksekliği ayarlayabileceğiniz ve oku önizleyebileceğiniz daha fazla özelleştirme ortaya çıkarır.

özelleştirmeleri kapat düğmesi: masaüstünde veya mobil cihazda kapat düğmesini etkinleştirin ve kapat düğmesini özelleştirin. Bunu etkinleştirirseniz, metin rengi, arka plan rengi, yazı tipi boyutu, kenarlık yarıçapı, dolgu ve görüntü için özelleştirmeler önizlenir.

Ek parametreler Mega Pro - tetikleme türünü (üzerine gelin veya tıklanan), çıktı türünü (üzerine gelinen veya tıklanan) seçin ve çıkış gecikmesini girin.

Divi Mega Pro Modelleri

Geliştirici, Divi Mega Pro için çeşitli modeller sağlamıştır. Eklentiyi satın aldığınızda, bu şablonlar hesabınızdaki Eklenti Düzeni Şablonları sekmesinde bulunur. Bunlar, mega menülerinizi tasarlamaya başlamanıza yardımcı olmak için harikadır. Örneklerimde birkaçını kullanacağım.

Divi Mega Pro Menüsü

Bir mega menü oluşturduğunuzda, listede görünecektir. Burada menüleri düzenleyebilir, hızlıca düzenleyebilir veya silebilirsiniz. Ayrıca arama yapabilir, tarihe göre filtreleyebilir, duruma göre görüntüleyebilirsiniz, vb. Ayrıca benzersiz Mega Pro sınıfını da sağlar, böylece sınıfı almak için her birini açmak yerine buradan kopyalayabilirsiniz.

Sınıfı kopyalarken, fazladan boşluk bırakmadan yapıştırdığınızdan emin olun. Aksi takdirde, sayfadaki tüm mega menüler artık çalışmayacaktır.

Eklemek kolay olmayacağına eminim, ancak bir kopyalama ve düzenleme özelliği kullanışlı olacaktır. Divi düzenlerini yeniden kullanmak için kitaplığınıza kaydedebilirsiniz, ancak buna çevre ayarları dahil değildir.

Tetikleyici eklemek

Mega Pro Tetikleyiciler alanında tek bir Mega Pro sınıfı göreceksiniz. Bunu kopyalayıp tetikleyici olarak kullanmak istediğiniz öğenin CSS Sınıfı alanına yapıştırın.

CSS Sınıfı alanını bir menü öğesine eklemek için CSS sınıflarını etkinleştirmelisiniz. Menü ekranından seçin Ekran seçenekleri ve CSS Sınıflarını etkinleştirin.

CSS sınıfını menü alanına yapıştırın. Şimdi bu menü öğesi, üzerine gelindiğinde mega menüyü gösterecek ve sizi tıkladığınız sayfaya götürecektir.

Divi Mega Pro'nun da menü bağlantı seçeneklerinde bir seçenek olduğunu fark edeceksiniz. Menüye aslında hiçbir yere gitmeyen bir menü öğesi eklemek için harikadırlar. CSS sınıfını diğer menü öğeleri gibi ekleyin.

Mega menüde iletişim bölümü

Menü üzerine gelindiğinde açılır. İstersem iletişim sayfasını açmak için her zaman İletişim bağlantısını tıklayabilirim. Sadece mega menünün gösterilmesini isteseydim, sadece İletişim ana menü bağlantısını kullanabilir ve yeniden adlandırabilirdim (yukarıdaki örnekte olduğu gibi).

Bunda, Divi Builder'ı kullanmak yerine arka planı ve ekran ayarlarını kullanarak renkleri biraz değiştirdim. Menünün altına bir çubuk ekler.

Menü sütunlarıyla basit harekete geçirici mesaj

Bu, birden çok sütun ekleyen modellerden biridir. Arka plan ve yazı tipi renklerinde ayarlamalar yapıyorum. Ayrıca bir ok ekledim ve genişliği% 75 yaptım.

Arka plan rengi ve yazı tipi seçenekleri, öne çıkması için biraz daha fazla ekler. Menüyü ekranın sağına yerleştiren varsayılan hizalamayı bıraktım. Konumlandırmayı ayarlarda yapabilirsiniz.

sekmeler

Sekme şablonu, üzerine gelme efekti oluşturmak için jQuery içeren bir kod modülü içerir.

Sekmelere içerik ekledim ve siteye uyarladım. Soldaki bağlantıların her biri, menünün çoğunda farklı bir sekme gösterir.

Bilgi Kabarcık konfigürasyonları

Bunun için CSS sınıfını bazı tanıtım yazılarına ekledim, böylece fareyle üzerine gelindiğinde küçük bir pop-up açar. Pop-up, altında gölgeli bir görüntüdür.

Yukarıdaki resimde, farem CANLI WEB SİTESİ kelimelerinin üzerine geliyor. Konumlandırmayı henüz ayarlamadım, ancak istediğiniz yerde görünmesini sağlamak çok kolay.

Bunun için, metin içeren bir görüntüyü göstermek için bir açılır pencere oluşturdum. Görüntüleme yönünü Düşük olarak ayarladım ve eklemek istediğim görüntünün yanında görünmesi için -300'lük bir kenar boşluğu ekledim.

Açılır pencere artık üzerine geldiğimde görüntünün solunda ve üstünde görünüyor. Şeffaf bir arka plan rengi, kenarlık rengi, dolgu ve yuvarlak hat ekledim.

Lisans ve dokümantasyon

Dört lisans arasında seçiminiz var:

• Tek site - yıllık 15 ABD doları
• Üç site - yılda 29 ABD doları
• Sınırsız site - yılda 59 ABD doları
• Sınırsız Ömür - bir defaya mahsus 129 ABD doları

Belgeler Bir video gösterimi ile sağlanır ve sitede bir makale özellikleri açıklar ve adım adım, eklentinin nasıl kullanılacağını açıklar.

[vc_row center_row=”yes”][vc_column width=”1/2″][vcex_button target=”blank” layout=”genişletilmiş” align=”center” font_family=”Raleway” font_weight=”700″ style=”flat” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]DIVI TEMASINI İNDİRİN [/vcex_button][/vc_column][vc_column width=” 1 /2"][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials” target=”blank” layout=”genişletilmiş” align=”center” font_family = ”Raleway” font_weight=”700″ style=”flat” custom_background=”#c4226e” custom_hover_background=”#8d184f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]YÜKLE ŞABLONLARI DIVI[/vcex_button][/vc_column][/vc_row]

Diğer Divi öğreticiler

• restoran kullanımı Divi tema için 5 siteleri
• Bir Divi WooCommerce ürününe metin ekleme
• Divi sayfaları arasındaki menü rengini değiştirme
• Bir blog'un ızgaralarını Divi ile kişiselleştirme
• Nasıl WordPress üzerinde rol Divi editörü kullanımı
• Tam ekran Divi sürgüsü nasıl oluşturulur
• Divi sayfaları arasındaki menünün rengi nasıl değiştirilir
• Divi hakkında muhtemelen bilmediğiniz özellikler
• WordPress üzerinde Divi Builder nasıl kullanılır
• Divi video kaydırma modülü nasıl kullanılır
• Divi Builder Flip modülü nasıl kullanılır
• Divi Builder'da referans modülü nasıl eklenir?
• Divi metin modülü nasıl kullanılır?
• Divi'de kaydırıcı nasıl oluşturulur
• Divi kullanıcı rolü nasıl düzenlenir
• Divi Sosyal Medya modülü nasıl kullanılır?
• WordPress Divi konulu mağaza modülü nasıl kullanılır?
• Divi kenar çubuğu modülü nasıl kullanılır
• Divi Fiyat Tablosu Modülünün Kullanımı
• Divi yayınlarının başlık modülünü nasıl kullanırım
• Divi video modülü nasıl eklenir
• Makale navigasyon modülü nasıl kullanılır
• Divi arama modülü nasıl kullanılır?
• Divi cüzdan modülü nasıl kullanılır?
• Divi Builder'da kişi modülünün kullanımı
• Divi filtreli cüzdan modülü nasıl kullanılır
• Tam genişlikte sürgü modülü nasıl kullanılır
• Divi Builder Görüntü Modülü nasıl kullanılır?
• Divi Builder'ın tam genişlikli gezinme modülünü nasıl kullanırım?
• Resim galerisi modülü nasıl kullanılır?
• Divi Builder Tam Genişlik Kart Modülü nasıl kullanılır?
• Divi Tam Genişlik Portföy Modülü nasıl kullanılır?
• Divi tam genişlikli başlık modülü nasıl kullanılır?
• Divi Sayaç Modülünün Kullanımı
• Divi Builder'daki makaleler sürgüsünü kullanma
• Divi Email Optin modülü nasıl kullanılır?