Açıklamak için resimler içeren bir Divi Mega Menüsüne sahip olmak ister misiniz? içindekiler menüden mi? Mega Menüye nasıl resim ekleyeceğimizle ilgili eğitimimizi takip etmek ister misiniz?
Çevrimiçi görüntülerle etkileşime girmeyi seviyoruz. Bunu akılda tutarak, cihazınıza bir resim eklemek mantıklıdır. Site Web her ne zaman mümkünse.
Ek olarak, 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.
Görüntüler ayrıca gezinme sürecini daha da basitleştirmek için dikkatlerini çekerek menüyü zenginleştirir.
anket
Bu eğitime geçmeden önce, elde etmek istediğimiz sonuca bir göz atalım.
Mega menünün oluşturulması
Başlamak için önce menüyü oluşturmamız gerekiyor.
Bu örnek için, adında bir ana üst menü öğesi oluşturacağız. “Mega Menü” aşağıdaki dört alt menü öğesi ile. Dört alt menü öğesinin her birinin üç alt alt menü öğesi vardır.
WordPress kontrol paneline gidin ve ardından üzerine tıklayın. Görünümler> Menüler
Tıkla 'Yeni bir menü oluştur', bir isim verin ve tıklayın 'Menü oluştur'.
Sekmeye tıklayarak CSS Sınıfları menü özelliğini etkinleştirdiğinizden emin olun. Opsiyonlar Menüler ekranının sağ üst köşesindeki ekran ve kontrol CSS sınıfları.
Artık menü öğelerinizi oluşturduğunuz yeni menüye ekleyebilirsiniz.
Önce diğer tüm menü öğelerinin ebeveyni olacak menü öğesini oluşturalım. Bu, mega menünüzü vurgulu olarak gösterecek olan bağlantıdır.
Bu menü öğesini oluşturmak için aşağıdaki parametrelerle özel bir bağlantı oluşturun:
- URL: http://#
- Navigasyon başlığı: Mega Menü
- CSS sınıfları: mega menü
Şimdi ana ana Mega Menü bağlantısının alt öğeleri olacak şekilde dört menü öğesini (her biri kendi üç alt öğesi olan) düzenleyin/sürükleyin.
Bağlantılar menüye eklendikten sonra aşağı kaydırarak 'Menü ayarları' menü ekranının alt kısmında ve seçin 'Ana menü' ekran konumu için. Son olarak, tıklayın 'Menüyü kaydet'
Mega menümüz şu ana kadar şöyle görünüyor:
Mega menüye resim ekleme
Artık menü hazır olduğuna göre, resimleri eklemenin zamanı geldi.
Ayrıca Oku: DIVI'da blog gönderilerini nasıl yüzerim?
görüntüleri alın
Dört görüntü alarak başlayın. Bu görüntüler dört alt menü öğesiyle ilgili olmalıdır (Hakkında, Hizmet Sunumu, Çalışmalarımız ve Bize Ulaşın).
Her görüntüyü 500 piksel genişliğinde ve 300 piksel yüksekliğinde olacak şekilde küçültmek ve kırpmak için bir fotoğraf düzenleyici kullanın.
Bu görüntüleri WordPress kitaplığına ekleyin. Tıklamak Medya > Ekle.
Resimlerinizi eklemek için sayfaya sürükleyin veya 'Dosyaları seçin'
Mega Menüye resim ekleyin
WordPress kontrol panelindeki menüler sayfasına dönün.
Bu örnekte, ilk sütunun en üstündeki bağlantı " Hakkında ".
Öğenin sağındaki oku tıklayın " Hakkında ". Gezinme Etiketi kutusunda, html etiketini kullanarak istediğiniz görüntüyü ekleyin img metinden hemen önce " Hakkında ". Resim etiketi şöyle görünmelidir:
<img src=”Insert Image URL” alt=”Alternate Text” width=”100%” />
Resmin URL'sini bulmak için şu adrese gidin: Medya > Medya kitaplığı, eklemek istediğiniz resme tıklayın.
Açılan ekranda Ek ayrıntıları, sağ bölümde URL'yi bulun ve ardından 'URL'yi panoya kopyala'
Şimdi menü öğesi yapılandırmasına geri dönün " Hakkında " menü sayfasında ve metni değiştirin "Resim URL'si Ekle" kullanarak resim URL'nizi yapıştırarak ctrl + v.
Menü öğesi için yapılandırma seçeneklerinden çıkmadan önce " Hakkında ", CSS Sınıfları metin kutusunu bulun ve "mega-link" sınıfını girin.
Bu, daha sonra özel bir stil eklememize izin verecektir.
"Mega-link" sınıfına sahip alt menü öğelerinin her birine aşağıdaki üç resmi eklemek için bu işlemi tekrarlayın. (Bu örnekte, kalan üç öğe “Hizmet sunumu”, “İşimiz” et " Bize Ulaşın ".)
Sonuç
Erişim web sitesi ve mega menü bağlantısının üzerine gelin. Şimdi mega menünüz şöyle görünmelidir:
Fareyle resimlerin her birinin üzerine geldiğinizde, resimlerin doğrudan alttaki alt menü öğesiyle birlikte kaybolduğunu unutmayın. Bunun nedeni, resmin bu bağlantının bir parçası olmasıdır, bu nedenle üzerine tıklamak sizi ilgili URL'ye götürecektir.
Son dokunuşlar
Bu son adım için, metin yazı tipini daha büyük ve ortalanmış hale getirmek için menüye bazı ö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 kontrol panelinde şuraya gidin: Divi> Tema seçenekleri .
Özel CSS kutusuna ilerleyin, aşağıya CSS'yi girin ve tıklayın 'Değişiklikleri Kaydet' :
.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;
}
Nihai sonuç
bitirdin!
Bu eğitimdeki tüm adımları izlediyseniz, almanız gereken sonuç burada.
DIVI'yı Şimdi İndirin !!!
Sonuç
Bir eklenti kullanmanıza gerek kalmadan görüntüler içeren bir Divi mega menünüz var. Bu tür menü, özellikle web siteleri için iyi çalışır. e-ticaret kim çok şey var içindekiler ve ürün görselleri gerektirir. Bu eğitimin bir sonraki Divi projeleriniz için faydalı olacağını umuyoruz.
Web sitesi oluşturma projelerinizi tamamlamak için daha fazla öğeye ihtiyacınız varsa, şu adresteki kılavuzumuza da göz atın: WordPress blog oluşturma ya da Divi: Tüm zamanların en iyi WordPress teması.
Herhangi bir endişeniz veya öneriniz varsa, bizi yorumlar bölümü bunu tartışmak için.
Ama bu arada, bu yazıyı farklı sosyal ağlarda paylaş.
...
