Divi Eklentisi Vurgusu: Divi Mobile

Divi Mobile, Divi web siteleri için özel mobil menüler oluşturmayı kolaylaştıran Divi için üçüncü taraf bir eklentidir. Tüm ayarlar tema özelleştiricide bulunur, böylece mobil menü tasarımlarınızın canlı bir önizlemesini görebilirsiniz. Kullanımı kolay bir eklentidir ve ihtiyacınız olabilecek hemen hemen her tür menüyü oluşturabilir. Bu Divi eklentisi vurgusunda, Divi araç kutunuzda ihtiyacınız olup olmadığına karar vermenize yardımcı olmak için Divi Mobile'ın özelliklerini inceleyeceğiz.

Varsayılan Divi Mobil Menüsü

Karşılaştırma için, Divi'nin varsayılan mobil menüsü burada. Menü, bir hamburger menüsü gösterecek şekilde otomatik olarak değişir. Menüye tıklamak, tüm bağlantıların bulunduğu bir açılır menü gösterir. Bu, standart menüden ayrı olarak ayarlanamıyor.

Tema Özelleştirici

Divi Mobile adlı tema özelleştiriciye yeni bir menü eklendi. Yeşil metinli koyu mavi, bu yüzden göze çarpıyor. Tüm ayarlar bu menü içerisinde yapılır. Mali Müşavir düzen paketini kullanıyorum.

Yukarıdaki örnekteki tablet görünümü gibi bir mobil görünümde, menü otomatik olarak Divi Mobile varsayılan ayarlarına ayarlanır. Koyu mavi bir daire içinde beyaz bir hamburger menüsü içerir. Şimdi renkleri değiştirmiş olan Divi Mobile menüsünün üzerine geliyorum.

Hamburger menüsüne tıklamak, yandan kayan ve ekranın tüm tarafını kaplayan menüyü açar. Sekmeleri göstermek için tema özelleştiricide menüyü açtım. Diğer öğeler, seçtiğiniz seçimlere göre görünecektir. Ana ayarlara bakalım.

Menü Stili ve Ayarlar

Menü Stili ve Ayarları, menüleri seçmek için birkaç seçeneğe sahiptir. Düzen seçenekleri, ekranın dışından görünen menüyü (varsayılan görünüm), bir şekilden genişleyen ve altta gezinmeyi içerir. Dış Ekran Menü Stili, menüye açık animasyonlar ve tamamen açık stiller ekler. Üç düzenin her biri farklı seçenekler içerir.

Yukarıdaki örnek, önceki örnekle aynı menüyü göstermektedir, ancak menü stili için Tam Ekran'ı seçtim. Önizleme modu, varsayılan olarak hangi modun gösterileceğini ayarlar. Bunu seviyorum çünkü arka planı aydınlatıyor.

Bir şekilden genişletme, sağ üst köşeden başlayarak tüm ekranı kaplar. Ayrıca yukarıdan aşağıya doğru genişleyebilir. Bu, arka planın üzerine simgeler ekler ve yukarıdaki örnekte olduğu gibi bağlantıları arka planın dışına yerleştirir. Renkleri ve simgeleri, Daire Uzatma Ayarları adlı başka bir menüdeki diğer ayarlarda ayarlayabilirsiniz.

Alt Gezinme, ekranın alt kısmında simgeleri görüntüler. Bu, Alt Gezinme Ayarları adlı başka bir menüde ayarlanır.

Kesme noktasını ayarlayarak, masaüstünde mobil menüyü görüntülemesini sağlayabilirsiniz.

Özel başlık

Özel Başlık, başlık üzerinde tam kontrol sağlar. İlk bölüm Başlık Görünümü'dür. Yeni bir logo ekleyin, boyutunu ayarlayın, arka plan rengini, gölge uzunluğunu, bulanıklık yarıçapını, gölge rengini vb. ayarlayın. Bu örnekte yeni bir logo ekledim ve arka plan rengini değiştirdim.

Sonraki bölüm Kaydırmada Başlık Görünümü'dür. Menüyü sabit olarak ayarlayın, yüksekliği, logo boyutunu, hamburger simgesi konumunu ve arka plan rengini ayarlayın. Bu ayarların her birinde değişiklikler yaptım.

Başlık Öğeleri, başlığa öğeler eklemenize ve konumlarını, boyutlarını ve renklerini ayarlamanıza olanak tanır. Logoyu sağa taşıdım ve normalden biraz daha aşağıya ayarladım (başlığı veya içeriği üst üste gelecek şekilde istediğiniz kadar aşağıya ayarlayabilirsiniz). Ayrıca WooCommerce alışveriş sepetini ekledim, arama simgesini etkinleştirdim, sola yerleştirdim, kırmızıya çevirdim ve boyutlarını büyüttüm.

Burger Menüsünü Seçin

Burger Menüsünü Seç, hamburger menü simgesi üzerinde size birçok seçenek sunar. Sağa veya sola ayarlayın, üç simge (üç satır, iki satır veya üç nokta) arasından seçim yapın ve animasyon stillerini seçin ve animasyon yönünü seçin. Sola yerleştirdim ve iki satır seçtim.

Burger Menu General, menü yüksekliğini ayarlamanıza, hamburger simgesinin kenardan ve üste olan mesafesini ayarlamanıza ve fareyle üzerine gelme opaklığını ayarlamanıza olanak tanır. Bu örnekte bu ayarların her birini değiştirdim.

Burger Menü Simgesi ayarları, hem kapalı hem de açık pozisyonlar için hamburger simgesi üzerindeki çizgilerin veya noktaların boyutunu ve rengini ayarlamanıza olanak tanır. Ayrıca satır yüksekliği, kenarlık yarıçapı ve satır aralığı üzerinde de kontrole sahipsiniz. Bu kapalı pozisyondur. Çizgilerin rengini kırmızıya ayarladım.

Açık simgenin rengini altın olarak ayarladım.

Bunun için menü simgesini sağa yerleştirdim ve üç satır seçtim. Üç çizginin renklerini, çizgi yüksekliğini, kenarlık yarıçapını ve konumunu ayarladım.

Ayrıca metin ekleyebilirsiniz. Yatay ve dikey konum, yazı tipi boyutu, renk ve stil dahil olmak üzere metin üzerinde tam kontrol sağlar. Bu örnek, üç noktalı seçeneği içerir.

Burger Menüsü Arka Planı ve Burger Menüsü Arka Planı Gölgesi, Divi düğmelerine benzer ayarlar sağlar. Bunlar renk, genişlik, yükseklik, kenarlık yarıçapı, gölge yatay ve dikey uzunluk, bulanıklık yarıçapı ve bulanıklık rengini içerir. Bu örnekteki ayarların çoğunu, simgeyi daire yerine kare yaparak değiştirdim.

Düzenleri Enjekte Et

Inject Layouts, başlığınızdaki çeşitli konumlara enjekte etmek için Divi kitaplığınızdan düzenler seçmenizi sağlar. Düzenleri menünün üstüne, menünün altına veya mobil özel başlığın üstüne yerleştirin.

Bu örnek için, menünün üstüne bir iletişim formu ve menünün altına iletişim bilgileri yerleştirmek için kullandığım yerleşim paketinden bölümler ekledim. Menüyü tam ekran yaptım, böylece daha kolay görülebilir.

Menü Görünümü

Menü Görünümü, arka plan rengini, bağlantı yerleşimini, yazı tipi boyutunu, aileyi, rengi, vurgulu rengini, göründüğü ekranın kenarını ve menü alanının genişliğini değiştirmenize olanak tanır. Menüyü sola kaydırdım, arka planı değiştirdim, yazı tipi boyutunu büyüttüm, bağlantıların göründüğü üstten konumu değiştirdim ve bağlantıları ortaladım.

Bunun için menü alanını daralttım, bağlantıları kaldırdım, bağlantıları sağa hizaladım ve yazı tipi vurgulu rengini ayarladım.

Bunda menüyü tekrar sağa taşıdım, daha geniş yaptım, metni sola yasladım, rengini değiştirdim ve menünün altına bir iletişim formu ekledim.

Alt Menü Görünümü

Alt menüleri görüntülemek için birkaç stil vardır. Bu daraltma iç içe stilidir. Ayarları varsayılanda bıraktım. Ayrıca görünümü ayarlayabilir, kenarlığı kaldırabilir ve simgeyi değiştirebilirsiniz.

Bu Üst Üste Slayt İçerisidir. Yazı tipi boyutunu, rengini, yüksekliğini, üzerine gelme rengini, içerik alanını vb. ayarlayabilirsiniz. Bu örnek için bu ayarların çoğunu değiştirdim.

Bu, Side By Side alt menü stilidir. Alt menü öğelerini gösteren bir ok simgesi yerleştirir. Hem aç hem de kapat simgesi için yüksekliği, konumu, rengi vb. ayarlayabilirsiniz. Açık simgesi için ayarları değiştirdim.

İstiflemeyi Durdur

Enjeksiyon düzenleriyle ilgili sorunlardan biri, modüllerin yığılacağıdır. Divi Mobile, istiflenmesini önleyecek düzene ekleyebileceğiniz bir Divi modülü içerir. Yukarıdaki örnek, yığılmış öğeler içeren bir düzendir.

Modülü satıra eklemeniz yeterlidir. Başka bir şeye gerek yok.

Sütunlar artık istiflenmiyor. Düzeninize bağlı olarak, her şeyin istediğiniz gibi olmasını sağlamak için menünüzün genişliğini ayarlamanız gerekebilir. Diğer menü düzenleri ve tasarımları ile de çalışır. Bu, bir mega menü yapmanın harika bir yoludur.

Nereden Satın Alınır

Divi Mobile, geliştiricinin web sitesinde mevcuttur. Aralarından seçim yapabileceğiniz birden fazla lisans vardır:

Yıllık

• 1 Site £12
• 2 – 5 Site £36
• Sınırsız £ 64

Ömür

• 1 Site £40
• Sınırsız £ 196

1 yıllık destek içerir. Web sitenizde lisans etkinleştirildiği sürece güncellemeleri alırsınız.

Biten Düşünceler

Divi Mobile eklentisine bakışımız bu. Mobil menüler tasarlamak için mükemmel bir eklentidir. Bununla yapılabileceklerin sadece yüzeyini çizdim. Kullanımı kolaydır ve aralarından seçim yapabileceğiniz birçok ayar vardır. Değişiklikleri canlı görmek için tema özelleştiriciyi kullanmasını seviyorum.

Değişiklikleri görmek için birkaç kez sayfayı kaydedip yeniden yüklemek zorunda kaldım, ancak bu benim sunucum olabilirdi. Standart Divi kontrollerinde olduğu gibi varsayılan ayarlara kolayca geri dönebilmeniz için varsayılan bir sıfırlama düğmesi görmek istiyorum. Ancak buna gerek olmayabilir.

Divi Mobile ile yapabileceklerimden çok etkilendim. Özel mobil menüler oluşturmak için bir Divi eklentisiyle ilgileniyorsanız, Divi Mobile bir göz atmaya değer.

Senden duymak istiyoruz. Divi Mobile'ı denediniz mi? Yorumlarda bunun hakkında ne düşündüğünüzü bize bildirin.

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