Divi'nin Yemek Tarifleri Düzen Paketini Kullanarak Tarifler Sayfanız için Mega Menü Nasıl Oluşturulur

Her hafta size bir sonraki projeniz için kullanabileceğiniz yeni ve ücretsiz bir Divi yerleşim paketi sunuyoruz. Her düzen paketiyle birlikte, web sitenizi bir sonraki düzeye taşımanıza yardımcı olacak bir kullanım örneği de paylaşıyoruz.

Bu hafta, devam eden Divi tasarım girişimimizin bir parçası olarak, Divi'nin ücretsiz Yemek Tarifleri Düzen Paketini kullanarak yemek tarifleri sayfanıza nasıl mega menüyü ekleyeceğinizi göstereceğiz. Bu menü, tariflerinizin kategorilerini içerecek ve ziyaretçilerinizin aramasını kolaylaştırmak için mega bir menüde görüntülenecektir. Sayfalar için tarif düzenini kullanmak yerine, gönderiler için kullanıyoruz. Bu, tariflerinizin her birine kategoriler atamanıza izin verir ve insanlar ayrıca yorum bölümünde sizinle etkileşim kurma olanağına sahip olur. Kullanım senaryosuna dalmadan önce, bu kullanım senaryosunda ne yaratacağımıza görsel bir bakış açısıyla hızlıca bir göz atalım.

Gizlice Bakış

Ne bilmek istiyorsun

• Menülere yaklaşmanın birden fazla yolu vardır, uyguladığımız yöntem size istediğiniz tarifleri ekleme ve diğerlerini hariç tutma özgürlüğü verecektir.
• Sayfalar yerine tarif düzenine sahip tarif gönderileri oluşturuyoruz (kişilerin kategoriye göre göz atmasına ve yorum bölümünde etkileşime girmesine olanak tanır)
• Öne çıkan tarif gönderilerinin menünüze manuel olarak eklenmesi gerekir (bu, yeni tarifleri ne sıklıkta yayınladığınıza bağlı olarak bu menüyü güncel tutmanız gerektiği anlamına gelir)
• Ziyaretçilerinizi bunaltacağı için tüm tariflerinizi bu menüye eklemeyin, tüm tarifleri görmek için her zaman bir kategori sayfasına gidebilirler.

Bölüm 1: Tarif Sayfasını Birincil Menüden Çıkarma

1. Adım: Menülere Git ve Profil Sayfasını Kaldır

Tarif sayfasını birincil menünüze eklediyseniz, birincil menünüze gidin ve kaldırın. Daha önce de belirtildiği gibi, gönderiler için sayfalar yerine tarif düzenini kullanacağız.

Bölüm 2: Kategoriler Oluşturun

1. Adım: Kategorilere gidin

Şimdi herhangi bir gönderi oluşturmadan önce, önce gönderi kategorilerini oluşturalım. Bunu yapmak için WordPress Kontrol Paneli > Gönderiler > Kategoriler'e gidin .

2. Adım: Ana Kategorilerinizi Ekleyin

Eklemeniz gereken ilk kategoriler, ana kategorilerdir. Bu örnekte, örneğin, ana kategoriler olarak kahvaltı ve öğle yemeğini kullandık. Kategori başlığını ekleyin ve Ana Kategori seçeneğinin 'yok' olarak ayarlandığından emin olun.

3. Adım: Alt Kategorilerinizi Ekleyin ve Ana Kategorilere Atayın

Ana kategorilerinize bağlı olarak, istediğiniz kadar alt kategori ekleyebilirsiniz. Her alt kategori eklediğinizde, ona doğru ana kategoriyi atadığınızdan emin olun.

Bölüm 3: Tarif Düzeninden Gönderiler Oluşturun

1. Adım: Yeni Gönderi Ekle

Artık kategorilerimizi oluşturduğumuza göre, sıra tarif gönderilerini oluşturmaya geldi. Size sıfırdan bir gönderiyi nasıl oluşturacağınızı göstereceğiz ve daha sonra, başka tarif gönderileri oluşturmak için kaydedeceğimiz düzeni yeniden kullanabilirsiniz.

2. Adım: Gönderiye Başlık, Öne Çıkan Görsel ve (Alt) kategori verin

Bir gönderi ekledikten sonra, gönderinize bir başlık verin, öne çıkan bir resim yükleyin ve tarif gönderisiyle eşleşen ana kategoriyi ve alt kategoriyi seçin.

3. Adım: Divi Gönderi Ayarlarını Değiştirin

Tarif düzeninin istediğimiz gibi göründüğünden emin olmak için aşağıdaki Divi Gönderi Ayarlarını kullanacağız:

• Sayfa Düzeni: Tam genişlik (bu, gönderinizdeki kenar çubuğunu kaldırır)
• Gönderi Başlığı: Gizle (yazı başlığını Visual Builder'a ekleyeceğiz)

4. Adım: Visual Builder'a Geçin

Şimdi, görünümü değiştireceğimiz Visual Builder'a geçin.

Adım 5: Tarif Düzenini Yükleyin

Visual Builder içinde yapmanız gereken ilk şey, reçete düzenini yüklemektir. Sayfanızın altındaki daireye tıklayın, artı simgesine gidin ve Yemek Tarifleri Düzen Paketi ile karşılaşana kadar önceden hazırlanmış düzenler sekmesini aşağı kaydırın. Bir kez orada, tarif düzenini seçin ve 'Bu Düzeni Kullan' üzerine tıklayın.

Adım 6: Kahraman Bölümünü Kaldırın

Bu düzenin kahraman bölümü bir gönderi başlığı içermez. Ancak, sayfamızda otomatik olarak görünmesini istiyoruz. Bu yüzden bu kahraman bölümünü silip onun yerine yeni bir tane oluşturacağız.

7. Adım: Tam Genişlik Bölümü Ekleyin

Standart bir bölüm kullanmak yerine tam genişlikte bir bölüm kullanın.

8. Adım: Öne Çıkan Resmi Bölüm Arka Plan Resmi Olarak Ekleyin

Tam genişlik bölümünü ekledikten sonra, aşağıdaki ayarlarla birlikte öne çıkan görselinizi arka plan olarak kullanın:

• Arka Plan Resmi Boyutu: Kapak
• Arka Plan Resmi Konumu: Merkez
• Arka Plan Resmi Tekrarı: Tekrar Yok
• Arka Plan Görüntüsü Karışımı: Çarpın (bu, arka plan görüntüsünü ve bir sonraki adımda ekleyeceğimiz arka plan rengini karıştırmaya yardımcı olacaktır)

9. Adım: Arka Plan Rengi Yerleşimi Ekleyin

Gri bir renk seçerek resminizi (ve metninizi okunabilir) ne kadar koyu yapmak istediğinize karar verebilirsiniz. Kullandığımız '#595959'.

Adım 10: Tam Genişlik Bölümüne Özel Dolgu Ekleme

Ayrıca bu tam genişlikte bölüme ekstra dolgu oluşturmak istiyoruz. Bölümünüzün Tasarım sekmesine gidin ve Aralık alt kategorisine aşağıdaki değerleri ekleyin:

• Üst Dolgu: 85px
• Alt Dolgu: 140px

Adım 11: Tam Genişlik Bölümüne Tam Genişlik Yazı Başlığı Modülü ekleyin

Tam genişlik bölümünü ihtiyaçlarımıza göre değiştirdiğimize göre, bu bölüme Tam Genişlik Yazı Başlığı Modülünü ekleyebiliriz. Bu, gönderi başlığınızın ve tüm öğelerinin otomatik olarak görünmesini sağlar.

12. Adım: Metin Ayarlarını Değiştirin

Elbette, bu Tam Genişlikli Gönderi Başlığı Modülünün web sitemizin geri kalanıyla eşleşmesini istiyoruz. Bu nedenle, Metin alt kategorisine aşağıdaki ayarları uygulayarak başlayacağız:

• Metin Rengi: Açık
• Metin Yönü: Merkez

Adım 13: Başlık Metni Ayarlarını Değiştirin

Ardından Başlık Metni alt kategorisini açın ve aşağıdaki ayarları uygulayın:

• Başlık Yazı Tipi: Karabatak Garamond
• Başlık Yazı Tipi Ağırlığı: Normal
• Başlık Metin Boyutu: 53px

Adım 14: Meta Metin Ayarlarını Değiştirin

Meta Metin alt kategorisinde de bazı küçük değişiklikler yapacağız:

• Meta Yazı Tipi: Karabatak Garamond
• Meta Yazı Tipi Ağırlığı: Normal
• Meta Metin Boyutu: 18px

Adım 15: Düzeni Divi Kitaplığına Kaydet

Tarif düzenini değiştirmeyi bitirdik! Tabii ki, içeriğin geri kalanını tarifinize göre değiştirmeniz gerekecek, ancak bu düzeni sıfırdan başlamak yerine yeniden kullanabilirsiniz. Bu düzeni yeniden kullanabilmek için sayfanızın alt kısmındaki daire simgesine tıklayın ve düzeni buna uygun bir düzen adı vererek kitaplığınıza ekleyin.

Bölüm 3: Özel Menü Oluşturun

Adım 1: Menülere Git ve Yeni Menü Oluştur

İhtiyacınız olan tüm gönderileri web sitenize ekledikten sonra, tarifler sayfasında görünecek özel menünüzü oluşturmaya başlayabilirsiniz. Menülerinize giderek, yeni bir menü oluşturarak ve menünüze bir isim vererek başlayın.

2. Adım: Ana Kategoriler Ekle

Sonraki Kategoriler sekmesini açın ve oluşturduğunuz bu yeni menüye ana kategorilerinizi ekleyin.

Adım 3: Alt Kategorileri İlk Alt Alt Menü Öğeleri Olarak Ekleyin

Bundan sonra, alt kategorilerinizi de ekleyebilirsiniz. Her birini üst kategorinin hemen altına sürükleyerek bunların üst kategorilere giden ilk alt menü öğeleri olduğundan emin olun.

Adım 4: Tarif Yazılarını İkinci Alt Alt Menü Öğeleri Olarak Ekleyin

Artık, alt menü öğelerinin her birine tercih ettiğiniz tarif gönderilerini ekleyebilirsiniz. Menünüzde hangi gönderinin görüneceğini kendiniz belirlersiniz. Bu, yeni veya öne çıkan tariflerin görünmesini istiyorsanız bu menüyü sık sık güncellemeniz gerektiği anlamına gelir.

Adım 5: CSS Sınıflarını Etkinleştirin

Ardından, mega menü CSS sınıfını eklememiz gerekecek. Ancak bunu yapmadan önce, menü öğelerinde CSS sınıflarını etkinleştirmemiz gerekecek. 'Ekran Seçeneği'ne tıklayın ve CSS sınıflarını etkinleştirin.

Adım 6: Üst Kategorilere Mega Menü Sınıfı Ekle

Bunu yaptıktan sonra, ana kategorilerinizin her birine 'mega-menü' sınıfını ekleyebilirsiniz.

7. Adım: Menüyü Kaydet

Menüyü oluşturmayı bitirdik! Burada yapılacak tek şey menüyü kaydetmek.

4. Bölüm: Tarifler Sayfasına Özel Menü Ekleme

1. Adım: Visual Builder ile Tarifler Sayfasını Açın

Yazıları ve menüyü oluşturduk, geriye sadece bu menüyü tarifler sayfamıza eklemek kaldı. Bunu yapmak için, tarifler sayfasında Görsel Oluşturucu'yu etkinleştirerek başlayın.

2. Adım: Tam Genişlik Bölümü Ekleyin

Ardından, bu sayfanın kahraman bölümünün hemen altına bir Tam Genişlik Bölümü ekleyin.

Adım 3: Tam Genişlik Menüsünü Tam Genişlik Bölümüne Ekleyin

Tam genişlikte bir bölüm kullanmamızın nedeni, doğrudan sayfamıza bir seçim menüsü eklememize izin vermesidir. Bu menüyü eklemek için kullanacağımız modüle Tam Genişlik Menüsü adı verilir.

Adım 4: Mega Menüyü Seçin

Tam Genişlik 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 Rengi Ekleyin

Ardından Arka Plan alt kategorisini açın ve modülünüze '#ffb8ad' arka plan rengini verin.

6. Adım: Bağlantı Ayarları

Ardından, bu Tam Genişlik Menü Modülünün Tasarım sekmesine gidin ve Bağlantı alt kategorisine aşağıdaki ayarları uygulayın:

• Aktif Bağlantı Rengi: #FFFFFF
• Açılır Menü Metin Rengi: #FFFFFF
• Mobil Menü Metin Rengi: #FFFFFF
• Metin Yönü: Merkez

7. Adım: Açılır Menü Ayarları

Tasarım sekmesini aşağı kaydırın, Açılır Menü alt kategorisini açın ve ona aşağıdaki değişiklikleri uygulayın:

• Açılır Menü Arka Plan Rengi: #ff7864
• Açılır Menü Satır Rengi: #ffffff
• Mobil Menü Arka Plan Rengi: #ff7864

8. Adım: Menü Metni Ayarları

Ayrıca Menü Metni alt kategorisine gidip aşağıdaki değişiklikleri uygulayarak (tüm düzen paketiyle eşleşen) bu menünün metin ayarlarını değiştirmemiz gerekecek:

• Menü Yazı Tipi: Karabatak Garamond
• Menü Yazı Tipi Ağırlığı: Kalın
• Menü Metin Boyutu: 18px
• Menü Metin Rengi: #FFFFFF

9. Adım: Tema Seçeneklerine Özel CSS Ekleyin

Yapmamız gereken son şey, örnektekiyle tamamen aynı sonucu elde etmek için bazı özel CSS kodları eklemek. Bunu yapmak için WordPress Panonuz > Divi > Tema Seçenekleri > 'Özel CSS' ile karşılaşana kadar aşağı kaydırın ve aşağıdaki CSS kodu satırlarını ekleyin :

.fullwidth-menu-nav li.mega-menu>ul>li>a:first-child {
 border-bottom: 1px solid #FFFFFF;
 font-size: 20px;
 margin-top: 15px;
 text-transform: uppercase;
 padding-bottom: 20px;
}
.et_pb_fullwidth_menu_0.et_pb_fullwidth_menu .nav li ul {
 border-radius: 5px;
 padding-top: 10px;
 text-align: center;
}

Son düşünceler

Bu kullanım örneği blog gönderisinde, tarifleriniz ve kategorileriniz için özel bir mega menünün nasıl oluşturulacağını ve bunu ücretsiz Yemek Tarifleri Düzen Paketinin tarifler sayfasına nasıl ekleyeceğinizi gösterdik. Bu kullanım örneği, tasarım ekibimizin her hafta sizinle yeni bir düzen paketi paylaştığı devam eden Divi girişimimizin bir parçasıdır. Eğer sorunuz varsa; Aşağıdaki yorum bölümünde bir yorum bıraktığınızdan emin olun!