Divi Mega Menünüze Görüntü Ekleme

Çevrimiçi görüntülerle etkileşime girmeyi seviyoruz. Aslında bunu bekliyoruz. Pinterest, Facebook ve Instagram bunu kanıtlamaya devam ediyor. Bunu akılda tutarak, mümkün olduğunda web sitenize bir resim eklemek mantıklıdır. Ve bir mega menüye resim eklemek, kullanıcılarınıza ihtiyaç duydukları etkileşimi sağlamak için başka bir harika fırsattır.

Mega menüye resim eklemek, web sitenizin gezinmesini iyileştirmek için akıllı bir çözümdür. Mega menüler, kullanıcıların menünüzün içeriğini kaydırma, gezinme ve hatırlama zahmetine girmeden aynı anda daha fazla bağlantı görmelerini sağlar. Görüntüler ayrıca gezinme sürecini daha da basitleştirmek için dikkatlerini çekerek menüyü zenginleştirir.

Bunu sizin için yapacak faydalı eklentiler var. Bununla birlikte, Divi zaten yerleşik bir mega menü işleviyle birlikte geldiğinden, bu özellikten yararlanmak ve mega menüye bir eklenti kullanmadan resim eklemek en iyisidir.

Eğlence!

Tasarımı Divi ile Uygulamak

Mega Menü Oluşturma

Başlamak için önce menüyü oluşturmalıyız. Bu örnek için, altında dört alt menü öğesi bulunan “Mega Menü” adlı bir ana ana menü öğesi oluşturuyorum. Dört alt menü öğesinin her birinin üç alt alt menü öğesi vardır. İşte netlik için döküm:

• Mega Menü
  • Hakkımızda
    • Bizim takım
    • Görevimiz
    • Şirket Geçmişi
  • Hizmetler
    • Web Tasarım
    • Web Geliştirme
    • SEO
  • İşimiz
    • Bloglar
    • e-ticaret
    • Kurumsal
  • Bizimle iletişime geçin
    • Destek
    • Talimatlar
    • Meslekler

WordPress yönetici panosunda Görünüm → Menüler seçeneğine gidin. Yeni bir menü oluştur'a tıklayın ve ona bir ad verin ("Mega Menü" gibi bir şey yapmalıdır).

Şimdi menüye bağlantıları eklemeye başlayın. Bu örnek için özel bağlantılar kullanıyorum ancak isterseniz mevcut sayfaları, gönderileri veya kategorileri kullanabilirsiniz.

Özel bir bağlantı eklemek için, Özel Bağlantıları açıp açıp url'nizi ve Bağlantı Metninizi ekleyin. Tüm bağlantılar için bu işlemi tekrarlayın.

Not: Bu örnekte, url metin kutusuna hiçbir şeye bağlanmayacak sahte bir bağlantı görevi görmesi için bir hashtag (#) ekliyorum.

Şimdi mega menü bağlantısı olarak hizmet etmek için bir bağlantı daha oluşturun. Bunu açıklığa kavuşturmak için “Mega Menü” adını verdim. Bu, mega menünüzü vurgulu olarak gösterecek olan bağlantıdır.

Menünüzü mega menüye dönüştürmek oldukça basittir. Tek yapmanız gereken, az önce oluşturduğunuz ana Mega Menü öğesine bir css sınıfı eklemek.

Bunu yapmak için, ek yapılandırma seçeneklerini ortaya çıkarmak için Mega Menü öğesinin sağındaki oka tıklayın. CSS Sınıfları etiketli metin kutusunu bulun ve “mega-menü” girin.

CSS Sınıfları metin kutusunu görmüyorsanız, Menüler ekranının sağ üst kısmındaki Ekran Seçenekleri sekmesine tıklayın.

"Gelişmiş menü özelliklerini göster" altında CSS Sınıflarının işaretli olduğundan emin olun.

Menüye bağlantılar eklendikten sonra, menü ekranının altındaki Menü Ayarları'na gidin ve görüntüleme konumu için Birincil Menü'yü seçin. Menünüz şimdi böyle görünmelidir.

Şimdi ana ana Mega Menü bağlantısının alt öğeleri olmak için dört menü öğesini (her biri kendi üç alt öğesi olan) düzenleyin/sürükleyin.

Şimdi menünüz şöyle görünmelidir:

Menüyü Kaydet'e tıklayın

Şimdi canlı sitede mega menünün şu ana kadar nasıl göründüğüne bakalım.

Mega Menüye Resim Ekleme

Artık menü hazır olduğuna göre resimleri eklemenin zamanı geldi.

Dört görüntü alarak başlayın. Bu görseller dört alt menü öğesiyle (Hakkımızda, Hizmetler, İşimiz ve Bize Ulaşın) ilgili olmalıdır. Benimkini unsplash.com'dan aldım.

Her görüntüyü 500 piksel genişliğe ve 300 piksel yüksekliğe sahip olacak şekilde küçültmek ve kırpmak için bir fotoğraf düzenleyici kullanın.

Bunları WordPress Medya kitaplığına ekleyin/sürükleyin.

Şimdi WordPress Admin'deki menüler sayfasına geri dönün.

Bu örnekte ilk sütunumdaki en üstteki bağlantı “Hakkımızda”. “Hakkımızda” öğesinin sağındaki oka tıklayın. Gezinme Etiketi kutusuna, “Hakkımızda” metninin hemen önüne html img etiketini kullanarak istediğiniz resmi ekleyin. Resim etiketi aşağıdaki gibi görünmelidir:

<img src=”Insert Image URL” alt=”Alternate Text” width=”100%” />

Resmin URL'sini bulmak için Medya → Kitaplık'a gidin. Eklemek istediğiniz resme tıklayın. Ek Ayrıntıları açılır ekranında, sağdaki bölümde url'yi bulun, vurgulayın ve ardından panonuza kopyalamak için ctrl+c tuşlarını kullanın.

Şimdi menü sayfasındaki "Hakkımızda" menü öğesi yapılandırmasına geri dönün ve "Resim URL'si Ekle" metnini ctrl+v kullanarak resminizin URL'sini yapıştırarak değiştirin.

“Hakkımızda” menü öğesi için yapılandırma seçeneklerinden ayrılmadan önce, CSS Sınıfları metin kutusunu bulun ve “mega-link” sınıfını girin.

Bu, daha sonra bazı özel stiller eklememize izin verecektir.

“Mega-link” sınıfıyla birlikte alt menü öğelerinin her birine sonraki üç görüntüyü eklemek için bu işlemi tekrarlayın. (Bu örnekte kalan üç öğe “Hizmetler”, “İşimiz” ve “Bize Ulaşın”dır.)

Sitenize gidin ve mega menü bağlantısının üzerine gelin. Şimdi mega menünüz şöyle görünmelidir:

Her bir görüntünün üzerine geldiğinizde, görüntülerin hemen altındaki alt menü öğesiyle birlikte solma etkisine sahip olduğuna dikkat edin. Bunun nedeni, resmin bu bağlantının bir parçası olmasıdır, bu nedenle, tıklamak sizi ilgili URL'ye götürür.

Son dokunuşlar

Bu son adım için, metin yazı tipini daha büyük ve ortalanmış hale getirmek için menüye özel css ekleyin. Ayrıca, daha temiz görünmesi için görüntünün çevresine bir kenarlık yarıçapı verin.

WordPress Admin'de Divi → Tema Seçenekleri'ne gidin . Özel css kutusuna ilerleyin ve aşağıdaki css'i girin:

 .mega-link > a {
    text-align: center;
    font-size: 20px !important;
    text-transform: uppercase;
    font-weight: 400 !important;
    letter-spacing: 3px;
}

.mega-link > a img {
    margin-bottom: 8px; 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 

}

Değişiklikleri Kaydet

Son sonuç

İşiniz bitti!

Eklenti kullanmanıza gerek kalmadan görüntüler içeren bir Divi mega menünüz var. Gezinmeyi iyileştirmek için mevcut siteniz veya bir sonraki projeniz için bu eklemeden yararlanın. Bu tür bir menü, özellikle çok fazla içeriğe sahip olan ve ürün görselleri gerektiren e-ticaret sitelerinde işe yarar. Umarım faydalı bulursunuz.

Her Gün Daha Fazla Divi Muhteşemliği

Umarım bu eğitimi beğenmişsinizdir. Her gün yepyeni bir Divi blog yazısı yayınlıyoruz. Bir eğitim talebiniz varsa, aşağıdaki yorumlar bölümünde bize bıraktığınızdan emin olun.

Büyük bir duyuruyu, faydalı ipucunu veya Divi freebie'sini asla kaçırmamak için e-posta bültenimize ve YouTube kanalımıza abone olmayı unutmayın!