Ana İçeriğe Geç

WordPress eklentisi incelemesi: Divi Mega Pro

Divi: Kullanılacak en kolay WordPress teması

Divi: Tüm zamanların en iyi WordPress teması!

daha fazla 901.000 indirmeler, Divi, dünyanın en popüler WordPress teması. Tamamen, kullanımı kolay ve 62 ücretsiz şablonlardan daha fazlasını sunuyor. [Önerilen]

Mega menüler, ziyaretçilerinize fazladan bir gezinme katmanı sağlarken web sitenize şık bir destek veren popüler bir tasarım öğesidir. Divi'ye mega menüler eklemenin birkaç yolu vardır. Kullandığım en basit 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 ile mega menü divi oluşturmak mega.png

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.

Mega Pro.png menüsünün tasarımı

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

mega menu.png'nin arka planını değiştirin

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

menu.png'nin yerini seç

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

menu.png'nin animasyonunu seç

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

css.png tetikleyicisini seçin

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.

yapılandırma menüsü stili divi.png

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.

divi.png düğmelerinin özelleştirilmesi

Elementor ile web sitenizi kolayca oluşturun

Elementor, profesyonel bir görünüme sahip herhangi bir web sitesi tasarımını kolayca oluşturmanıza olanak sağlar. Kendin yapabileceğin için pahalı ödemeyi kes. [Ücretsiz]

ö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 yapılandırma divi mega pro.png

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

farklı şablonlar mevcut divi mega pro.png

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ü

divi mega pro.png 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

seçici seçin divi.png

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.

sınıfları css.jpg

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.

bir sınıf css menüsü divi.png ekle

En iyi WordPress temalarını ve eklentilerini mi arıyorsunuz?

Envato'daki en iyi eklentileri ve WordPress temalarını indirin ve web sitenizi kolayca oluşturun. 49.720.000 indirme işleminden daha fazla. [ÖZEL]

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 menü tasarımı pro.png

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ü

iletişim bölümü mega menu pro.png

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

tasarım iletişim bölümü divi mega pro.png

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 rengini değiştir divi mega pro.png

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

sekmeler mega menüsü ile menü tasarımı divi.png

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

tab divi mega pro.png ile demo menüsü

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ı

demo infobulles divi.png

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.

tasarım bilgisi boğa divi mega pro.png

Çevrimiçi Mağazanızı kolayca oluşturun

WordPress'te fiziksel ve dijital ürünlerinizi satmak için ücretsiz WooCommerce, en iyi e-ticaret eklentilerini indirin. [Önerilen]

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.

sonuç bilgi balonu divi.png

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

lisans ve demonstration.png

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.

Diğer Divi öğreticiler

Bu makale yorumları 2 içeriyor

  1. Merhaba:
    Bir açılır pencerenin nasıl yapıldığını nereden görebilirim?
    Elimde hiçbir yol yok. Yalnızca mega menü oluşturabildim, ancak bağladığım açılır pencereler açılmıyor.
    Divi Life ile birkaç e-postayla karşılaştım ama bana hiçbir şey açıklamadılar.
    Merci beaucoup.

YORUM BIRAKIN

E-posta hesabınız yayımlanmayacak. Doldurulması zorunlu alanlar * ile işaretlenmiştir *

Bu site, istenmeyenleri azaltmak için Akismet'i kullanıyor. Yorum verilerinizin nasıl kullanıldığı hakkında daha fazla bilgi edinin..

Başa dönüş
4 hisseleri
hisse4
cıvıltı
Enregistrer