Divi Food Reçete Düzeni Paketi kullanarak tarif sayfanız için mega menü nasıl yapılır
Her hafta size bir sonraki projeniz için kullanabileceğiniz yeni ve ücretsiz bir Divi düzen paketi veriyoruz. Her düzen paketiyle birlikte, web sitenizi bir sonraki seviyeye getirmenize yardımcı olacak kullanım durumlarını da paylaşıyoruz. Bu hafta, devam eden Divi Tasarım Girişimimizin bir parçası olarak, Divi ücretsiz gıda tarifi düzen paketini kullanarak tarif sayfanıza nasıl bir mega menü ekleyeceğinizi göstereceğiz. Bu menü tarif kategorinizi içerecek ve ziyaretçilerinizi aramayı kolaylaştırmak için Mega menüsünde görüntülenecektir. Sayfa için tarif düzenini kullanmak yerine, göndermek için kullanırız. Bu, tariflerinizin her birine kategorileri ayarlamanıza olanak tanır ve kişiler de yorumlar bölümünde sizinle etkileşim kurma olanağına sahip olacaktır. Kullanım durumuna girmeden önce, bu kullanım durumunda görsel bir perspektiften ne yapacağımıza bakalım.
Gizlice göz atma
Uyguladığımız menüye yaklaşmanın birkaç yolu vardır, size istediğiniz tarifleri ekleme ve başkalarını hariç tutma özgürlüğü verecektir.
Sayfalar yerine tarif düzeni ile bir tarif gönderisi yapıyoruz (insanların kategorilere göre göz atmasına ve yorumlar bölümünde etkileşime girmesine izin veriyoruz)
Üstün tarif gönderimi menünüze manuel olarak eklenmelidir (yani, yeni bir tarifi ne sıklıkla yayınladığınıza bağlı olarak bu menüyü güncellemeye devam etmeniz gerekir)
Tüm tariflerinizi bu menüye eklemeyin çünkü ziyaretçilerinizi sular altında bırakacaklar, tüm tarifleri görmek için her zaman kategori sayfasını açabilirler
Bölüm 1: Tarif sayfasını ana menüden hariç tutma Adım 1: Menü ve Profil Sayfasını Açın Ana menünüze Reçete sayfasını eklediyseniz, ana menünüzü açın ve silin. Daha önce de belirtildiği gibi, tarif düzenini sayfa değil, yayın için kullanacağız. Bölüm 2: Bir Adım 1 Kategori Oluştur: Gönderi yapmadan önce geçerli kategoriye gidin, önce bir yazı kategorisi oluşturalım. Bunu yapmak için WordPress Dashboard> Post> kategorisini açın. Adım 2: Ana kategorinizi ekleyin Eklemeniz gereken ilk kategori ana kategoredir. Bu örnekte, örneğin, kahvaltı ve öğle yemeğini ebeveyn kategorisi olarak kullanıyoruz. Kategorinin başlığını ekleyin ve üst kategori seçeneğinin ‘hiçbir şey’ olarak ayarlandığından emin olun. Adım 3: Alt kategorinizi ekleyin ve üst kategoriye ayarlayın Ana kategorinize bağlı olarak, istediğiniz kadar alt kategori ekleyebilirsiniz. Bir alt kategoriyi her eklediğinizde, onun için doğru kategoriyi ayarladığınızdan emin olun. Bölüm 3: Tarif Düzeni’nden bir gönderi yapın Adım 1: Yeni bir gönderi ekleyin Şimdi kategorimiz var, bir tarif gönderisi yapma zamanı. Başından beri nasıl bir yazı yapacağınızı göstereceğiz ve bundan sonra, diğer tarifler yapmak için kaydedeceğimiz düzeni yeniden kullanabilirsiniz. Adım 2: Bir gönderi ekledikten, yayın başlığınızı verin, üstün resimler yükleyin ve tarif yayınıyla eşleşen üst kategoriyi ve alt kategoriyi seçtikten sonra yayın başlığını, üstün resim ve (alt) kategorisini verin. Adım 3: Tarif düzeninin istediğimiz gibi göründüğünden emin olmak için divi gönderi ayarlarını değiştirin, aşağıdaki divi gönderi ayarlarını kullanacağız: Sayfalar Düzeni: Tam Genişlik (Bu, gönderinizdeki yan çubuğu silecektir) Gönderi başlığı: Hide (Visual Builder’a yazı başlığı ekleyeceğiz)
Adım 4: Şimdi görsel oluşturucuya dönerek, görünümü değiştireceğimiz görsel oluşturucuya geçin.
Adım 5: Düzeni Yükle Tarif Visual Builder’da yapmanız gereken ilk şey tarif düzenini yüklemektir. Sayfanızın altındaki daireyi tıklayın, artı simgesini açın ve yiyecek tarifi düzen paketini bulana kadar daha önce yapılan düzen sekmesini aşağı kaydırın. Oraya girdikten sonra, tarif düzenini seçin ve ‘Bu düzeni kullan’ tıklayın. Adım 6: Bu düzenin kahramanlarının kahraman bölümünü kaldırın Post başlığını içermez. Ancak, sayfamızda otomatik olarak görünmesini istiyoruz. Bu yüzden bu kahramanı sileceğiz ve bunun yerine yeni bir rol oynayacağız. Adım 7: Standart bölümü kullanmak yerine tam geniş bir parça ekleyin, tam geniş bir bölüm kullanın. Adım 8: Arka plan olarak üstün bir görüntü ekleyin Tam geniş bir bölüm ekledikten sonra, üstün görüntünüzü aşağıdaki ayarlarla birlikte arka plan olarak kullanın: Arka Plan Görüntü Boyutu: Kapak Arka Plan Görüntü Pozisyonu: Orta
Arka plan görüntüsünün tekrarlanması: Tekrar yok
Arka plan görüntüsü karışımı: çarpın (bu, aşağıdaki adımlara ekleyeceğimiz arka plan görüntülerini ve arka plan renklerini birleştirmeye yardımcı olacaktır)
Adım 9: Bir arka plan rengi ekleyin Grey seçerek görüntünüzü ne kadar karanlık yapmak istediğinize (ve metninizi okunabilir) karar verebilirsiniz. Kullandığımız şey ‘#595959’. Bölümünüzdeki tasarım sekmesini açın ve uzay alt kategorisine aşağıdaki değerleri ekleyin:
Üst dolgu: 85px Dolgu Alt: 140 piksel Adım 11: Tam Genişlik Post başlıkları modülünü tam geniş bölüme ekleyin Şimdi tam genişlik bölümünü ihtiyaçlarımıza göre değiştirdik, bu bölüme FullWidth Post başlık modülünü ekleyebiliriz. Bu, yayınınızın başlığını oluşturur ve tüm öğeler otomatik olarak görünür.
Adım 12: Metin ayarlarını değiştirin, elbette, bu Fullwidth Post başlık modülünün web sitemizin diğer kısımlarına uymasını istiyoruz. Bu yüzden metnin alt kategorisine aşağıdaki ayarları uygulayarak başlayacağız:
Metin Rengi: Işık Metin Oryantasyonu: Orta Adım 13: Metin Ayarları Başlıkını Değiştir Sonra, Alt Kategori Metin Başlığını Açın ve aşağıdaki ayarları uygulayın:
Yazı Tip Başlığı: Cormorant Garamond
Ağır yazı tipi başlığı: Normal Başlık Metin Boyutu: 53px
Adım 14: Meta metin ayarlarımızı değiştirin Meta metin alt kategorisinde bazı küçük değişiklikler de yapacaktır:
Meta Yazı Tipi: Karşılıklı Garamond
Meta yazı tipi ağırlığı: normal
Adım 15: Düzeni Divi Kütüphanesine kaydedin Tarif düzenini değiştirmeyi bitirdik! Tabii ki, kalan içeriği tarifinize göre değiştirmeniz gerekir, ancak bu düzeni baştan başlamak yerine yeniden kullanabilirsiniz. Bu düzeni yeniden kullanabilmek için, sayfanızın altındaki daire simgesini tıklayın ve uygun düzenin adını vererek mizanpajı kütüphanenize ekleyin. Web sitenize ihtiyacınız olan yayın, özel menünüzü oluşturmaya başlayabilirsiniz. Bu tarif sayfasında görünecektir. Menünüzü girerek başlayın, yeni bir menü oluşturun ve menünüzü adlandırın.
Adım 2: Bir sonraki kategori sekmesini açmak için üst kategoriyi ekleyin ve oluşturduğunuz yeni menüye ana kategorinizi ekleyin.
Adım 3: Alt Kategori Ekle İlk çocuk alt menüsü olarak bundan sonra alt kategoriler de ekleyebilirsiniz. Bunun, her birini üst kategorinin hemen altına sürükleyerek üst kategoriye ilk çocuk alt menüsü olduğundan emin olun. Adım 4: Tarif gönderisini ekleyin İkinci Çocuk alt menüsü öğesi olarak şimdi, seçtiğiniz tarif gönderisini her bir alt menü öğesine ekleyebilirsiniz. Menünüzde hangi yayınların göründüğünü belirlersiniz. Bu, yeni bir tarif veya üstün tarifin görünmesini istiyorsanız, bu menüyü sık sık güncellemeniz gerektiği anlamına gelir. Adım 5: Bir sonraki CSS sınıfını etkinleştirin, CSS Mega Menü sınıfını eklememiz gerekir. Ancak bunu yapmadan önce, önce menü öğesindeki CSS sınıfını etkinleştirmeliyiz. ‘Ekran seçeneklerini’ tıklayın ve CSS sınıfını etkinleştirin. Adım 6: Mega Menü Sınıfını Üst kategorisine ekleyin Tamamlandıktan sonra, ‘Mega-Menu’ sınıfını ana kategorilerinizin her birine ekleyebilirsiniz. Burada yapılması gereken tek şey menüyü kaydetmektir. Bölüm 4: Tarif sayfasına özel bir menü ekleyin Adım 1: Bir Görsel Oluşturucu ile Tarif Sayfasını Açın Bir Gönderi ve Menü Yaptık, Yapılacak tek kişi bu menüyü tarif sayfamıza eklemektir. Bunu yapmak için, tarif sayfasındaki görsel oluşturucuyu etkinleştirerek başlayın. Adım 2: Tam geniş bir bölüm ekleyin, ardından bu sayfanın kahramanının hemen altına geniş bir parça ekleyin. Adım 3: Tam geniş bir parça kullanmamızın nedeninin tam geniş bir kısmına tam geniş bir menü ekleyin, çünkü sayfamıza doğru menüyü eklememize izin vermesidir. Bu menüyü eklemek için kullanacağımız modüle Fullwidth menüsü olarak adlandırılır. Adım 4: Mega menüyü seçin Fullwidth menüsünü tam genişlik bölümünüze ekledikten sonra, bu öğreticinin önceki bölümünde oluşturduğunuz menüyü seçin. Adım 5: Arka plan rengini daha sonra ekleyin, arka plan alt kategorisini açın ve modülünüze arka plan rengini ‘#ffb8ad’ verin. Adım 6: Bir sonraki bağlantıyı ayarlayın, Bu Tam Geniş Menü Modülü Tasarım sekmesine geçin ve aşağıdaki ayarları Link alt kategorisine uygulayın: Aktif bağlantı rengi: #ffffff Açılır menü metin rengi: #ffffff Hücresel menü metin rengi: #ffffff Metin Oryantasyonu: Orta Adım 7: Açılır menüyü ayarlama Tasarım sekmesinde kaydırılır, açılır menü alt kategorisini açın ve aşağıdaki değişiklikleri uygulayın:
Açılır menü arka plan rengi: #ff7864
Açılır menü satırı Renk: #ffffffffffrignt mobil menü: #ff7864
Adım 8: Menü metninin ayarları Menü metninin alt kategorisini girerek ve aşağıdaki değişiklikleri uygulayarak (tüm düzen paketiyle uygun olan) bu menü metni ayarlarını değiştirmemiz gerekir:
Yazı tipi menüsü: Cormorant Garamond Yazı tipi menü ağırlığı: kalınlık
Menü Metin Boyutu: 18px
Menü metin rengi: #ffffff
Adım 9: Tema seçeneğine CSS Custom Ekle Yapmamız gereken son şey, örnekte olduğu gibi aynı sonuçları elde etmek için bazı özel CSS kodu eklemektir. Bunu yapmak için WordPress Dashboard> Divi> Tema Seçenekleri> ‘CSS Custom’ i bulana kadar aşağı kaydırın ve aşağıdaki CSS kod satırını ekleyin: .fullwidth-menu-nav li.mega-menu> ul> Li> A: İlk önce -Child { Sınır dip: 1px katı #ffffff;
yazı tipi boyutu: 20px;
Marj-Top: 15px;
Metin-Transform: büyük harf;
Dolgu Alt: 20px; }
.et_pb_fullwidth_menu_0.et_pb_fullwidth_menu .nav li ul {
Border-Radius: 5 piksel;
Dolgu Top: 10 piksel;
Metin-align: merkez;
}
Blog gönderisindeki son zihin Bu kullanım durumunda, tarifleriniz ve kategorileriniz için nasıl özel bir mega menü oluşturacağınızı ve ücretsiz gıda tarifi düzeni paketinden tarif sayfasına nasıl ekleyeceğinizi gösterdik. Bu kullanım durumu, tasarım ekibimizin her hafta sizinle yeni bir düzen paketini paylaştığı Divi girişimimizin bir parçasıdır. Eğer soruların varsa; Aşağıdaki yorumlar bölümünde bir yorum bıraktığınızdan emin olun!
