Divi Eklentisi Vurgusu: Divi MadMenu

Divi Madmenu, Divi Tema Oluşturucu'ya yeni menü özellikleri ekleyen Divi için üçüncü taraf bir eklentidir. Düğmeler, bir WooCommerce alışveriş sepeti, arama seçeneği ekleyin ve her bir öğenin yerleşimini ayarlayın. Masaüstü, tablet ve telefonlar için bağımsız menüler tasarlayın ve kesme noktalarını ayarlayın. Başlığı sabit olarak ayarlayın ve animasyonlar ekleyin. Her öğe özelleştirilebilir. Bu yazıda Divi Madmenu'ya bir göz atacağız ve neler yapabileceğini göreceğiz.

Divi Tema Oluşturucu ile Divi Madmenu

Divi Madmenu, Divi Tema Oluşturucu ile çalışmak üzere özel olarak tasarlanmıştır. Eklentiyi yükledikten sonra Divi Theme Builder'a gidin, Add Global Header'a tıklayın ve Build Global Header'ı seçerek özel başlığınızı oluşturun.

Divi Builder'a MadMenu adlı yeni bir modülün eklendiğini göreceksiniz. Bu, kullanmanız gereken tek modüldür, ancak daha fazla özellik eklemek istiyorsanız diğerlerini kullanabilirsiniz.

İçerik

Modül bir menü görüntüler ve onu özelleştirmek için birçok seçenek sunar. Elements , masaüstü ve mobil için menü, logo, arama, sepet ve iki düğme gibi özellikleri etkinleştirmenizi sağlar. Farklı şekilde düzenlenebilir ve bağımsız olarak şekillendirilebilirler.

Masaüstü Menüsü , görüntülenecek menüyü seçmenize, mobil menüye ne zaman değişeceğini belirlemek için kesme noktasını belirlemenize ve alt menü animasyonunu ve süresini ayarlamanıza olanak tanır.

Mobil Menü , mobil için farklı bir menü seçmenizi sağlar ve alt menüleri daraltmak, ana bağlantıları tıklanabilir kılmak ve akordeon modunu seçmek için seçenekler ekler. Masaüstü menüsüyle aynı animasyon seçeneklerini içerir.

Mobil Menü Geçişi , geçiş formatı, kapalı ve açık etiketler ve etiket konumu dahil olmak üzere simge ve etiket seçeneklerini içerir.

Logo etkinse, logoyu seçme, bir bağlantı URL'si sağlama ve aynı pencerede açılıp açılmayacağına karar verme seçeneği görürsünüz.

Arama etkinse, bir simge veya görüntü seçebilirsiniz.

Sepet için simgeyi, içeriği veya simgeyi ve içeriği gösterebilir, bir resim seçebilir veya logoyu gösterebilir, görünürlük seçeneklerini, canlı güncellemeyi vb. belirleyebilirsiniz.

Düğme 1 ve Düğme 2 bağımsız olarak ayarlanır, ancak aynı seçeneklere sahiptirler. Metin, simge ekleyin, simge yerleşimini, görünürlüğü, bağlantıyı seçin ve nasıl açılacağını seçin. Yukarıdaki örnekte, her iki düğmeye de metin ekledim ve ilk düğmeye bir simge ekledim.

Tasarım

Tasarım sekmesi, metin, menü öğeleri, masaüstü ve mobil menüler, masaüstü ve mobil alt menüler, logo, arama, sepet, düğmeler ve çok daha fazlası için seçenekler ekler. İşte bunlardan birkaçına bir göz atın.

Düzen Genel , hizalamayı seçmenizi sağlar. Sağ, sol, orta, çevrede boşluk, arada boşluk ve eşit boşluk olarak ayarlayın. Açılır yönü seçin ve hem masaüstü hem de mobil için menü sırasını ayarlayın. Bu örnekte, hizalamayı sağa ve alt menülerin doğrudan açılır menüsünü yukarıya ayarladım.

Düzen Öğeleri , menü, logo, arama, sepet, düğme 1 ve düğme 2'nin hizalamasını, genişliğini vb. kontrol etmenizi sağlar.

Öğelerin her biri, hem normal hem de sabit menü için ayarları içeren bir Metin tasarımı seçeneğine sahiptir. Etkin bağlantı rengini, normal bağlantı rengini, yazı tipini, yazı tipi ağırlığını, boyutunu, aralığını vb. ayarlayın. Yukarıdaki örnek Metin: Masaüstü Menüsü'dür. Renkleri, yazı tipi boyutlarını ve boşlukları değiştirdim.

Metin

Bu Metin: Masaüstü Alt Menüsü . Renkleri, yazı tipi boyutlarını değiştirdim ve metni büyük harf yaptım.

Bu Metin: Mobil Menü Geçişi . Açık ve kapalı metin için metin özelleştirmeleri sağlar. Yazı tipi rengini değiştirdim ve boyut ile harf aralığını artırdım.

Bu Metin: Mobil Menü . Yazı tipi renklerini değiştirdim ve metni büyük harf yaptım.

Metin: Mobil Alt Menüsü, açılır menünün yazı tiplerini kontrol eder. Renkleri değiştirdim, her kelime için ilk harfi daha büyük olan büyük harfli metin seçtim, yazı tipi boyutunu büyüttüm ve metni ortaladım.

Metin: Düğme 1 ve Metin: Düğme 2 , aynı seçeneklere sahiptir ve düğmelerini bağımsız olarak kontrol eder. Her iki düğme için yazı tipi boyutunu artırdım ve Düğme 1'i büyüttüm. Renklerini de değiştirdim. Düğme 2 için farklı bir yazı tipi seçtim.

Metin: Sepet , sepet içeriği metninin yazı tipini kontrol eder. Yazı tipi rengini değiştirdim, boyutunu büyüttüm, yazı tipini italik yaptım, yazı tipinin altını dalgalı bir stille çizdim ve alt çizgi rengini değiştirdim.

Menü

Masaüstü Menü Öğeleri arka planlar, kenar boşluğu, dolgu, köşeler, kenarlıklar, kutu gölgesi vb. üzerinde kontrol sağlar. Arka plan rengini değiştirdim, menü öğeleri arasına boşluk eklemek için kenar boşluğu ve dolgu ekledim, köşeler, kenarlıklar ve kutu gölgesi.

Masaüstü Alt Menü Öğeleri , size menü öğeleriyle aynı kontrolü verir. Arka plan rengini değiştirdim, her öğenin üstüne bir kenarlık ekledim ve bir kutu gölgesi ekledim.

Öğelerin her birinin ayrı ayrı şekillendirilebilmesini seviyorum. Ana menüye, menü öğelerine ve aramaya kutu gölgeleri ekledim ve köşelerini yuvarladım. Ayrıca yazı tiplerinin ve arka planların renklerini de değiştirdim.

İşte test sitem için oluşturduğum bir tane. Logoyu kutu gölgesi, ana menü, arama, sepet ve her iki düğmeyle ekledim. Düğmeler beyaz arka planlar ve siyah kenarlıklar ile tasarlanmıştır. Ayrıca düzendeki renkleri kullanarak bir alt kenarlık ekledim.

Demoları inceleyerek menülerle neler yapılabileceği hakkında daha iyi bir fikir edinebiliriz.

Divi Madmenu Demoları

Eklenti, Divi Kitaplığına yükleyebileceğiniz 10 Madmenu demosu ile birlikte gelir. Demoların birçoğunun klasörlerinde resimler var. Bunları medya kitaplığına yüklemeniz gerekecek.

Tema Oluşturucu ile bir demo kullanmak için genel bir başlık oluşturmak için tıklayın. Bir bölüm eklemek için tıklayın ve Kitaplıktan Ekle'yi seçin. Artık kullanmak için demolardan herhangi birini seçebilirsiniz.

Tasarımlar oluşturmak veya sadece logo ve menülerinizi eklemek için demoları bir başlangıç ​​noktası olarak kullanın. Arka plan renklerini, logo seçeneklerini, arama seçeneklerini ve CTA düğmelerini iyi kullanırlar. Test sitemle birlikte birkaç demoya bakalım. Masaüstü, tablet ve telefon başlıkları için farklı tasarımlar içerirler.

Demo 1

Demo 1 site başlığını, menüyü ve düğme 1'i kullanır. Menü, orta hizalamayı kullanır. Alt menü, bağlantıları ayırmak için bir kutu gölgesi ve kenarlıklar içeren stil içerir. İkinci bağlantının üzerinde geziniyorum.

Mobil, yazı tiplerinin boyutunu artırır ve ana menü ve alt menü için aynı stili kullanır. Ayrıca, aç ve kapat düğmesi için simgeli bir metin kullanır ve sitenin başlığını logoyla değiştirir.

Demo 2

Demo 2 bir logo, bir kenarda daire içine alınmış bir simgeyle arama, ortalanmış menü, alışveriş sepeti ve düğmeler ekler. Her iki düğme de sosyal medya logolarını görüntüler. Alt menü öğeleri, arka plandan bağımsız olarak stildedir.

Mobil menü tüm simgeleri ortalar, menü metnini açık bir simgeyle değiştirir ve menü için açık maviyi ekler.

Demo 3

Demo 3, düğmelerin ilginç kullanımını sağlar. Düğme 1, oturum açmak veya kaydolmak için metin içerir ve üzerine gelindiğinde arka planı kaldıran bir vurgulu efekti vardır. Düğme 2, çizgi çizilmiş bir kalbin görüntüsünü kullanır.

Mobil için, aç/kapat düğmesi, simgeyi ve simgenin altındaki metni içerir. Düğmeler için simgeler, boşluk kullanılarak başlık boyunca eşit aralıklarla yerleştirilir. Sitenin başlığı, sağa taşınan logo ile değiştirilir.

Demo 5

Demo 5, düzen için boşluk kullanır ve düğmeleri CTA'lar olarak görüntüler. Her iki düğme de öne çıkmak için farklı renkli arka planlar kullanır.

Mobil menü, düğmeleri en sağda ve solda yerleştirir ve simgeler ekler. Logo ve metin ve simgeli aç/kapat düğmesi merkeze yerleştirilir.

Demo 7

Demo 7, düğmeleri, menü ortada olacak şekilde başlığın her iki yanına yerleştirir. Logo site adının üzerine yerleştirilmiştir. Menü, metin içeren aç ve kapat simgesini içerir. Açılır menüdeki öğeler, arka planın bölümlerinin görülebilmesi için birbirinden ayrılır.

Mobil sürüm, düğmeleri yerinde tutar ve metni simgelerle değiştirir. Sitenin başlığı da kaldırılmıştır.

Demo 8

Demo 8, solda bir açılır menü ve başlık ile koyu sarı ve sağda düğmeler bulunan menüyü içerir. Düğmelerin her biri grafik içerir.

Mobil menü, düğmeleri solda ve logo ve menü simgesini sağda yerleştirir.

Demo 10

Demo 10, arka plan için bir degrade kullanır ve simgelerin her birinin arkasına daha koyu bir arka plan yerleştirir. Düğmeler metin ve simgeler içerir. Açılır menüdeki bağlantıların her biri birbirinden ayrılmıştır ve aktif bağlantı daha koyudur. Logo sol tarafa yerleştirilmiştir.

Mobil menü, arama simgesi dışındaki tüm simgeleri kaldırır. Menü, aç/kapat simgeleriyle değiştirilir ve logo ortaya yerleştirilir. Açılır menü aynı görünüyor.

Divi Madmenu'yu satın alın

Divi Madmenu, sınırsız kullanım ve bir yıllık güncelleme ve destek için Divi Marketplace'te yıllık 39 ABD Doları karşılığında satın alınabilir.

Biten Düşünceler

Divi Tema Oluşturucu için Divi Madmenu, ihtiyaç duyabileceğiniz hemen hemen her tür başlığı tasarlamayı kolaylaştıran birçok özellik ve özelleştirmeye sahiptir. Tasarım sekmesindeki çok sayıda ayarlama ilk başta kafa karıştırıcı olabilir, ancak bunların kullanımı basittir ve neyin neyi kontrol ettiğini anlamak uzun sürmez. Arama ve sepet düğmelerine resim ve simgeler eklemenin yanı sıra iki düğmeyi kullanmak birçok tasarım olanağı sunar. Tek bir modül ile ilginç menüler oluşturmakla ilgileniyorsanız, Divi Madmenu bir göz atmaya değer.

Senden duymak istiyoruz. Divi Madmenu'yu denediniz mi? Aşağıdaki yorumlarda bunun hakkında ne düşündüğünüzü bize bildirin.

Venimo / Shutterstock.com üzerinden Öne Çıkan Görsel