Divi Global Altbilginize Kategori Sonrası Menü Widget'ları Nasıl Eklenir

Divi's Theme Builder içinde özel bir altbilgi oluştururken, altbilgi öğelerini eklemenin birkaç yolu vardır. Metin Modüllerinin içine uygun bağlantılarla sayfa altbilgi öğeleri ekleyebileceğiniz modül tabanlı bir altbilgiye gidebilirsiniz, ancak Divi'nin Kenar Çubuğu Modülünü kullanarak tasarımınıza farklı altbilgi widget'ları eklemeye ve Divi'nin yerleşik modülünü kullanarak bunları stillendirmeye de karar verebilirsiniz. seçenekler. Bugünkü eğitimde, size ikinci seçeneği nasıl uygulayacağınızı göstereceğiz. Daha spesifik olarak, altbilginize kategori sonrası menü widget'larını nasıl ekleyeceğinizi göstereceğiz. Kullandığımız tasarım stili, Yemek Tarifleri Düzen Paketi ile mükemmel bir şekilde eşleşiyor. Web sitemize farklı gönderi kategorileri ekleyerek başlayacağız. Daha sonra altbilgi menülerini WordPress içinde oluşturacağız. Ardından, widget'larımızı oluşturacağız ve son olarak, Divi Tema Oluşturucu'nun içinde özel olarak oluşturulmuş Divi alt bilgimize bir widget ekleyeceğiz. JSON dosyasını da ücretsiz olarak indirebileceksiniz!

Hadi hadi bakalım.

Ön izleme

Eğiticiye dalmadan önce, farklı ekran boyutlarındaki sonuca hızlıca bir göz atalım.

masaüstü

Mobil

Global Altbilgi Şablonunu ÜCRETSİZ olarak indirin

Ücretsiz global altbilgi şablonuna el koymak için önce aşağıdaki düğmeyi kullanarak indirmeniz gerekir. İndirmeye erişmek için aşağıdaki formu kullanarak Divi Daily e-posta listemize abone olmanız gerekir. Yeni bir abone olarak, her Pazartesi daha da fazla Divi iyiliği ve ücretsiz bir Divi Düzen paketi alacaksınız! Zaten listedeyseniz, aşağıya e-posta adresinizi girin ve indir'i tıklayın. "Yeniden abone olmayacaksınız" veya fazladan e-posta almayacaksınız.

Dosyaları İndirin

Ücretsiz İndir

Divi Bültenine katılın ve size nihai Divi Açılış Sayfası Düzen Paketinin bir kopyasını ve ayrıca tonlarca başka şaşırtıcı ve ücretsiz Divi kaynağı, ipucu ve püf noktası e-posta ile gönderelim. Takip edin ve kısa sürede bir Divi ustası olacaksınız. Zaten aboneyseniz, e-posta adresinizi aşağıya yazın ve düzen paketine erişmek için indir'i tıklayın.

İNDİRMEK

Başarıyla abone oldunuz. Aboneliğinizi onaylamak ve haftalık ücretsiz Divi düzen paketlerine erişmek için lütfen e-posta adresinizi kontrol edin!

1. Web Siteniz için Gönderi Kategorileri Ayarlayın

Gönderi Kategorilerinize Git

Bu öğreticinin ilk bölümünde, özel altbilgi menülerine eklemeye başlamadan önce tüm gönderi kategorilerinin ayarlandığından emin olacağız. Bunu yapmak için WordPress arka ucunuzdaki gönderi kategorilerinize gidin.

Seçtiğiniz Kategori Sonrası Yapısını Ayarlayın

Henüz yapmadıysanız, altbilginize eklemek istediğiniz tüm farklı gönderi kategorilerini ayarlayın. Bu eğitim için, özel alt bilgimize üç farklı gönderi kategorisi menü widget'ı ekleyeceğimiz için, üç farklı gönderi kategorisi grubuna ihtiyacımız olacak.

2. Birkaç Kategori WordPress Menü Oluşturun

Menülere Git

Sırada, her gönderi kategorisi grubu için ayrı bir menü oluşturacağız. WordPress web sitenizin görünüm ayarları içindeki menülere gidin.

İlk Altbilgi Menüsü Oluştur

Bir ilk alt bilgi menüsü ekleyin ve ona tanınabilir bir ad vererek.

• Menü Adı: Altbilgi Menü #1

Gönderi Kategorileri Ekle

Bu yeni menüye ilk gönderi kategorileri grubunuzu ekleyin.

Diğer Yazı Kategorileri İçin İkinci ve Üçüncü Alt Bilgi Menüsü Oluştur

Aynı şeyi diğer iki yazı kategorisi grubu için yapın.

• Menü Adı: Alt Bilgi Menüsü #2

• Menü Adı: Altbilgi Menü #3

3. Altbilgi Widget'ları Oluşturun

Widget'lara Git

Artık gönderi kategorilerimiz ve gönderi kategorisi menülerimiz hazır olduğuna göre, bunları alt bilgi alanı widget'larımıza yerleştirebiliriz. Bunu yapmak için WordPress arka ucunuzdaki widget'lara gidin.

Altbilgi Menüsü #1'i Altbilgi Alanı #1'e Ekle

Orada, Altbilgi Alanı #1'inize bir ilk gezinme menüsü widget'ı ekleyin. Gezinme menüsünün içinde, bu öğreticinin önceki bölümünde oluşturduğunuz ilk alt bilgi menüsünü seçin.

Altbilgi Menüsü #2'yi Altbilgi Alanı #2'ye Ekle

İkinci yazı kategorisi menüsünü ikinci altbilgi alanına yerleştirin.

Altbilgi Menüsü #3'ü Altbilgi Alanı #3'e Ekle

Ve üçüncü alt bilgi alanındaki üçüncü alt bilgi menüsü.

En Son Gönderileri Altbilgi Alanına Ekle #4

Dördüncü altbilgi alanına ekleyeceğimiz, ihtiyacımız olan son pencere öğesi, son gönderiler pencere öğesidir. Bu widget dinamik olarak son 5 gönderinizi bağlantı olarak gösterecektir.

3. Divi Tema Oluşturucu İçinde Global Alt Bilgi Oluşturun

Divi Tema Oluşturucunuza Git ve Alt Bilgi Şablonu Oluşturmaya Başla

Artık gönderi kategorilerimiz, kategori sonrası menülerimiz ve widget'larımız hazır olduğuna göre Divi'ye geçme zamanı! Divi Tema Oluşturucunuza gidin ve genel veya özel bir altbilgi oluşturmaya başlayın.

Bölüm Ayarları

Arka plan rengi

Altbilgi şablonuna girdikten sonra bir bölüm göreceksiniz. Bu bölümü açın ve ona bir arka plan rengi ekleyin. Bu tasarım boyunca kullandığımız stil, Yemek Tarifleri Düzen Paketi ile mükemmel bir şekilde eşleşiyor, ancak yaklaşım, seçtiğiniz herhangi bir tasarım türüyle çalışacak.

• Arka Plan Rengi: #ff7864

Arka plan görüntüsü

Ardından bir arka plan resmi ekleyin. Bu öğreticidekiyle aynısını kullanmak istiyorsanız, onu bu öğreticinin başında indirebileceğiniz klasörde bulabilirsiniz.

• Arka Plan Resmi Boyutu: Sığdır

aralık

Bölümün tasarım sekmesine gidin ve sonraki tüm varsayılan üst ve alt dolguyu kaldırın.

• Üst Dolgu: 0px
• Alt Dolgu: 0px

1. Satır Ekle

Sütun Yapısı

Aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyerek devam edin:

Degrade Arka Plan

Henüz herhangi bir modül eklemeden satır ayarlarını açın ve bir degrade arka planı uygulayın.

• Renk 1: rgba(10,10,10,0.05)
• Renk 2: rgba(10,10,10,0.18)

boyutlandırma

Satırın tasarım sekmesine gidin ve boyutlandırma ayarlarını aşağıdaki gibi değiştirin:

• Özel Oluk Genişliğini Kullan: Evet
• Oluk genişliği: 1
• Sütun Yüksekliklerini Eşitle: Evet
• Maksimum Genişlik: 1680 piksel

aralık

Sonraki tüm varsayılan üst ve alt dolguyu kaldırın.

• Üst Dolgu: 0px
• Alt Dolgu: 0px

Sütun 1 Ayarları

aralık

Ardından, sütun 1 ayarlarını açın ve tasarım sekmesinde bazı özel dolgu değerleri ekleyin.

• Üst Dolgu: %5
• Alt Dolgu: 5%
• Sol Dolgu: %5
• Sağ Dolgu: %5

Sınır

Masaüstünde de sağ kenarlık kullanıyoruz.

• Sağ Kenar Genişliği:
  • Masaüstü: 2 piksel
  • Tablet ve Telefon: 0px
• Sağ Kenar Rengi: #ff7864

Sütun 2 Ayarları

aralık

Ardından, sütun 2 ayarlarını açın ve ona aşağıdaki dolgu değerlerini uygulayın:

• Üst Dolgu: %5
• Alt Dolgu: %5
• Sol Dolgu: %5
• Sağ Dolgu: %5

Sütun 1'e Görüntü Modülü Ekle

Logo Yükle

Sütun 1'deki Resim Modülü ile başlayarak modül ekleme zamanı. Seçtiğiniz bir logoyu yükleyin ve istediğiniz şekilde şekillendirin.

Sütun 2'ye Metin Modülü Ekle

H2 İçeriği Ekle

İkinci sütunda, bazı açıklayıcı H2 içeriğine sahip bir Metin Modülü ekliyoruz.

H2 Metin Ayarları

Tasarım sekmesine gidin ve H2 metin ayarlarını buna göre değiştirin:

• Başlık 2 Yazı Tipi: Karabatak Garamond
• Başlık 2 Yazı Tipi Ağırlığı: Orta
• Başlık 2 Metin Rengi: #ffffff
• Başlık 2 Metin Boyutu:
  • Masaüstü ve Tablet: 40 piksel
  • Telefon: 35 piksel
• Başlık 2 Çizgi Yüksekliği: 1.3em

2. Satır Ekle

Sütun Yapısı

Bir sonraki satıra. Bu satıra tüm widget'larımızı yerleştireceğiz. Aşağıdaki sütun yapısını seçin:

Arka plan rengi

Henüz herhangi bir modül eklemeden satır ayarlarını açın ve bir arka plan rengi uygulayın.

• Arka Plan Rengi: rgba(10,10,10,0.05)

boyutlandırma

Tasarım sekmesine gidin ve boyutlandırma ayarlarını aşağıdaki gibi değiştirin:

• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1
• Sütun Yüksekliklerini Eşitle: Evet
• Maksimum Genişlik: 1680 piksel

aralık

Tüm varsayılan üst ve alt dolguyu da kaldırın.

• Üst Dolgu: 0px
• Alt Dolgu: 0px

Tüm Sütun Aralığı

Ardından, sütunları tek tek açın ve her birine aşağıdaki dolgu değerlerini uygulayın:

• Üst Dolgu: %5
• Alt Dolgu: 5%
• Sol Dolgu: %5
• Sağ Dolgu: %5

Sütun 1 Kenarlık

Sırada, 1. sütuna bir kenarlık ekleyeceğiz.

• Sağ Kenar Genişliği:
  • Masaüstü ve Tablet: 2 piksel
  • Telefon: 0px
• Sağ Kenar Rengi: #ff7864

Sütun 2 Kenarlık

İkinci sütun için bazı farklı duyarlı değerlerle aynı sınırı kullanıyoruz.

• Sağ Kenar Genişliği:
  • Masaüstü: 2 piksel
  • Telefon ve Tablet: 0px
• Sağ Kenar Rengi: #ff7864

Sütun 3 Kenarlık

Ve son olarak, üçüncü sütuna da bir sağ kenarlık ekleyeceğiz.

• Sağ Kenar Genişliği:
  • Masaüstü ve Tablet: 2 piksel
  • Telefon: 0px
• Sağ Kenar Rengi: #ff7864

Kenar Çubuğu Modülünü Sütun 1'e Ekle

Kategori sonrası menü widget'larımızı ekleme zamanı! Bunu yapmak için Divi'nin yerleşik Kenar Çubuğu Modülünü kullanacağız. Satırın ilk sütununa bir tane ekleyin.

Alt Bilgi Alanı #1'i seçin

İlk alt bilgi alanını seçin. Bu, oluşturduğumuz ilk gönderi kategorisi menümüzle bağlantılıdır.

• Widget Alanı: Altbilgi Alanı #1

Düzen

Modülün tasarım sekmesine gidin ve kenarlık ayırıcıyı devre dışı bırakın.

• Kenarlık Ayırıcısını Göster: Hayır

Gövde Metni Ayarları

Gövde metni ayarlarını da değiştirin.

• Gövde Yazı Tipi: Montserrat
• Gövde Yazı Tipi Ağırlığı: Orta
• Gövde Metni Rengi: #ffffff
• Gövde Metni Boyutu: 13px

aralık

Ve boşluk ayarlarına biraz üst ve alt dolgu ekleyerek modül ayarlarını tamamlayın.

• Üst Dolgu: %5
• Alt Dolgu: 5%

Kenar Çubuğu Modülünü İki Kez Klonla ve Kopyaları Sütun 2 ve 3'e Yerleştir

İlk Kenar Çubuğu Modülünü tamamladıktan sonra, onu iki kez klonlayabilir ve kopyaları 2. ve 3. sütuna yerleştirebilirsiniz.

Alt Bilgi Alanlarını Değiştir

Oluşturduğunuz farklı gönderi kategorisi menülerini görüntülemek için her kopya için widget alanını değiştirin.

• Widget Alanı: Altbilgi Alanı #2

• Widget Alanı: Altbilgi Alanı #3

4. Sütun'a Kenar Çubuğu Modülü Ekle

Şimdi, son sütunda yeni bir Kenar Çubuğu Modülü ekliyoruz.

Alt Bilgi Alanı #4'ü seçin

Bu modülde, son gönderilerimizi içeren oluşturduğumuz dördüncü altbilgi alanını seçiyoruz.

• Widget Alanı: Altbilgi Alanı #4

Başlık Metni Ayarları

Modülün tasarım sekmesine gidin ve başlık metni ayarlarını aşağıdaki gibi değiştirin:

• Başlık Yazı Tipi: Karabatak Garamond
• Başlık Metin Rengi: #ffffff
• Başlık Metin Boyutu: 30px

Gövde Metni Ayarları

Gövde metni ayarlarında da bazı değişiklikler yapın.

• Gövde Yazı Tipi: Montserrat
• Gövde Yazı Tipi Ağırlığı: Orta
• Gövde Metni Rengi: #dddddd
• Gövde Metni Boyutu: 13px

aralık

Modülün boşluk ayarlarına bazı özel üst ve alt dolgular ekleyerek modül ayarlarını ve bu öğreticiyi tamamlayın. Bu kadar! Sonucu web sitenizde görüntülemeden önce tüm Divi Theme Builder değişikliklerini kaydettiğinizden emin olun.

• Üst Dolgu: %5
• Alt Dolgu: 5%

Ön izleme

Artık tüm adımların üzerinden geçtik, şimdi farklı ekran boyutlarındaki sonuca son bir göz atalım.

masaüstü

Mobil

Son düşünceler

Bu eğitimde, Divi Tema Oluşturucu'yu WordPress altbilgi widget'ları ve Divi Kenar Çubuğu Modülü ile nasıl birleştireceğinizi gösterdik. Daha spesifik olarak, ziyaretçilerinizin gezinme yolculuğunu kolaylaştırmak için genel altbilginize kategori sonrası menü widget'larını nasıl ekleyeceğinizi gösterdik. Bu yaklaşım, altbilgi menülerini ve widget'ları WordPress arka ucunuz içinde tutarken Divi'nin yerleşik seçeneklerini kullanarak altbilgi öğelerini biçimlendirmenize yardımcı olacaktır. JSON dosyasını da ücretsiz olarak indirebildiniz! Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne yorum bırakmaktan çekinmeyin.

Divi hakkında daha fazla bilgi edinmek ve daha fazla ücretsiz Divi almak istiyorsanız, e-posta bültenimize ve YouTube kanalımıza abone olduğunuzdan emin olun, böylece her zaman bu ücretsiz içeriği bilen ve bu ücretsiz içerikten yararlanan ilk kişilerden biri olursunuz.