Divi mega menünüze resim ekleyin
Çevrimiçi görüntülerle etkileşim kurmayı seviyoruz. Aslında bunu bekliyoruz. Pinterest, Facebook ve Instagram bunu kanıtlamaya devam ediyor. Bunu hatırlayarak, mümkünse web sitenize resim eklemek mantıklıdır. Mega menüye resim eklemek, kullanıcılarınıza ihtiyaç duydukları etkileşimi vermek için bir başka iyi fırsattır. Mega menüye resim eklemek, web sitenizin navigasyonunu artırmak için akıllı bir çözümdür. Mega menü, kullanıcıların menü içeriğinizi kaydırma, yönlendirme ve hatırlamaya gerek kalmadan bir kerede daha fazla bağlantı görmelerini sağlar. Görüntüler ayrıca navigasyon sürecini daha da basitleştirmek için dikkatlerini çekerek menüyü artırır.
Bunu sizin için yapacak yararlı bir eklenti var. Ancak, Divi zaten içinde bulunan mega menü işlevselliği ile geldiğinden, bu özellikten yararlanmalı ve bir eklenti kullanmadan mega menüye resim eklemelisiniz. Zevk almak! Tasarımın divi ile uygulanması, başlamak için mega menüyü oluşturur. Önce bir menü yapmalıyız. Bu örnek için, aşağıda dört alt menü öğesi içeren “Mega Menü” adlı ana ana menü öğesi yaptım. Dört alt menü öğesinin her birinde üç alt menü öğesi vardır. İşte netlik detayları:
Büyük menü
Hakkımızda
Bizim takım
Görevimiz
Şirket Tarihi
Hizmet
Web tasarımı
web Geliştirme
SEO
İşimiz
Blog
Elektronik ticaret
Şirket
Bize Ulaşın
Destek
Talimatlar
İş
WordPress Yönetici Gösterge Tablosunda, görünüm → menüleri açık. Yeni bir menü ve ad oluştur’u tıklayın (“Mega Menü” gibi bir şey yapılmalıdır).
Şimdi menü sayfasındaki “Hakkımızda” menü öğesi yapılandırmasına geri dönün ve Ctrl+V kullanarak görüntü URL’nizi ekleyerek “URL görüntüsünü ekleyin” metnini değiştirin. “Hakkımızda” menü öğesi için yapılandırma seçeneğinden ayrılmadan önce, CSS sınıfı metin kutusunu bulun ve “Mega-Link” sınıfını girin. Bu, daha sonra bazı özel stiller eklememizi sağlayacaktır. “Mega-Link” sınıfı ile birlikte her bir alt menü öğesine sonraki üç görüntüyü eklemek için bu işlemi tekrarlayın. (Bu örnekte kalan üç öğe “Hizmet”, “İşimiz” ve “Bize Ulaşın” dır.) Sitenizi açın ve imleci Mega Menü bağlantısına yönlendirin. Şimdi mega menünüz şöyle görünecektir: imleci her bir görüntüye yönlendirdiğinizde, görüntünün doğrudan altındaki alt menü öğesi ile birlikte bir solma efekti olduğunu unutmayın. Bunun nedeni, resmin bağlantının bir parçası olmasıdır, bu nedenle tıklamak sizi ilgili URL’ye götürecektir.
Bu son adımın son dokunuşu, metin yazı tipini daha büyük ve daha merkezi hale getirmek için menüye özel CSS ekleyin. Ayrıca, daha temiz görünmesi için görüntünün etrafında bir sınır yarıçapı verin. WordPress yöneticisinde, Divi → Tema seçeneğini açın. Özel CSS kutusuna gidin ve aşağıdaki CSS’yi girin: .mega-link> a { Metin-align: merkez; Yazı tipi boyutu: 20px! Önemli;
Metin-Transform: büyük harf;
Yazı tipi-ağırlık: 400! Önemli;
Harf alanları: 3px;
}
.mega-link> bir img {
Marj-Alt: 8px;
-Webkit-Sınırlı-Radius: 5px;
-Moz-Sınırlı-Radius: 5px;
Border-Radius: 5 piksel;
}
Değişikliği kaydet
Nihai sonucunuz bitti! Bir eklenti kullanmadan görüntüleri olan bir mega divi menünüz var. Navigasyonu artırmak için mevcut sitenize veya bir sonraki projeye bu ekten yararlanın. Bu tür menü, çok fazla içeriğe sahip ve ürün görüntüleri gerektiren e-ticaret siteleri için çok iyi çalışır. Faydalı olabilir.
