Divi's Theme Builder ile bir WooCommerce Ürün Kategorisi Sayfası oluşturun

Kategori sayfaları, herhangi bir e-ticaret sitesinin önemli bir parçasıdır. Müşteriler, ihtiyaç duyduklarını bulmak için ürün kategorilerine göz atar. Bu nedenle kategori sayfalarınızın da ürün sayfalarınız kadar iyi görünmesi gerekir. Divi's Theme Builder ile kategori sayfası şablonları oluşturmak hiç olmadığı kadar kolay. Bu eğitimde, size adım adım bir kategori sayfası şablonunu nasıl oluşturacağınızı ve Divi'nin yerleşik seçeneklerini kullanarak nasıl şekillendireceğinizi göstereceğiz. Ayrıca, Themify WooCommerce Ürün Filtreleri eklentisinin yardımıyla nasıl filtrelenebilir hale getirileceğini göstereceğiz.

İki tarayıcı sekmesini yan yana açın. Tema oluşturucu için ilk sekmeyi ve bir kategori sayfasının canlı önizlemesi için ikinci sekmeyi kullanın. İlerlemeyi ilerlerken görmek için bu şekilde çalışın. Size kolaylık sağlamak için, şablonu ücretsiz indirme olarak da ekledik.

Hadi hadi bakalım!

Ön izleme

Şablonu yeniden oluşturmaya başlamadan önce, kategori sayfası şablonunun farklı ekran boyutlarında nasıl göründüğüne bir göz atalım.

masaüstü

Mobil

Woo Kategori Sayfası Şablonunu ÜCRETSİZ İndirin

Ücretsiz Woo kategori sayfası ş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.

1. Ürünlerinizi ve Kategorilerinizi Güncelleyin

Şablonu oluşturmadan önce ürünlerinizin doğru kategorilerde düzenlendiğinden emin olun. Doğru şekilde etiketlenip etiketlenmediklerini de kontrol edin. Bunlar, ürün filtresi eklentisini kurarken önemli olacaktır.

2. Kurulum Eklentisi

İndir ve Yükle

WooCommerce Ürün Filtrelerini indirin. Eklenti panonuza gidin ve yüklemek için eklentinin .zip dosyasını yükleyin. Alternatif olarak, dizinde eklentiyi arayın. Eklenti, kontrol paneli menünüze yeni bir sekme ekleyecektir. Eklentiyi de etkinleştirdiğinizden emin olun.

Yeni Filtre Formu Ekle

Kontrol panelinizdeki eklenti sekmesine tıklayın. Eklenti ayarlarının içinde, yeni bir filtre formu eklemek için düğmeye tıklayın.

Filtre Formu Ayarla

Filtrelenebilir kenar çubuğunuzun tam olarak bu yazının önizlemesindeki gibi görünmesini sağlamak için aşağıda belirtilen ayarları kullanın. Bu ayarları her zaman daha sonra değiştirebilirsiniz.

• Düzen: Dikey
• Boş Alanlar: Boşsa alanı gösterme
• Ürün Sıralama: Ürün sıralamayı gizle
• Sayfalandırma Seçeneği: Sonsuz Kaydırma
• Sıfırlama Düğmesi: Sıfırlama düğmesi yok
• Taksonomiler Arasındaki Mantıksal İlişki: VE
• Sonuç Sayfası Şablonu: Sonuçları aynı sayfada göster

Kategori Alanı Oluştur

Ana alanın altındaki menü çubuğunda bir dizi sekme göreceksiniz. 'Kategori' sekmesini altındaki oluşturucuya sürükleyip bırakın. Ardından ayarları aşağıdaki gibi yapın:

• Alan Başlığı: Kategoriler
• Çocukları Dahil Et: Evet
• Şu şekilde göster: Onay kutusu
• Mantık: VEYA
• Sıra: İsim, Azalan
• Düzen: Yatay, 2 sütun

Etiket Alanı Oluştur

Şimdi 'Etiket' sekmesini oluşturucuya sürükleyip bırakın. 'Kategori' sekmesinin altına yerleştirildiğinden emin olun. Ayarları aşağıdaki gibi yapın:

• Alan Başlığı: Tür
• Şu şekilde göster: Onay kutusu
• Sıra: İsim, Azalan
• Düzen: Yatay, 2 sütun
• Renk Simgeleri
  • Arkaplan: Şeffaf
  • Metin Rengi: Koyu Kahverengi #44000d

Kısa Kod Oluşturmak için Kaydet'e tıklayın

Çalışmanızı kaydedin ve oluşturucuyu kapatın. Eklentinin ana menüsünde kısa kodu göreceksiniz. Kopyalayın, daha sonra ihtiyacınız olacak.

3. Tema Oluşturucu'da Ürün Kategorisi Sayfası Şablonunu Yeniden Oluşturun

Tema Oluşturucuyu Aç / Yeni Şablon Ekle

Şablonu yeniden oluşturmaya başlamanın zamanı geldi! Tema oluşturucunuzu açın ve yeni bir şablon ekleyin.

Şablon Ayarlarını Belirle

Şablon ayarlarında 'Belirli Ürün Kategori Sayfaları'nı seçin. Bu şablonu atamak istediğiniz kategorilere tıklayın. El Yapımı Deri Ürünleri seçeceğiz.

Özel Gövde Ekle

Ardından, 'Özel Gövde Ekle'yi tıklayın.

Özel Gövde Oluştur'u seçin

Bu şablonu sıfırdan yeniden oluşturacağız, bu yüzden devam edin ve 'Özel Gövde Oluştur'u seçin.

Sıfırdan İnşa Et

Görsel oluşturucunun içine girdikten sonra, bir kez daha sıfırdan oluşturma seçeneğini seçin.

Bölüm 1 Ayarlar

Arka plan

Şablon düzenleyicinin içine girdikten sonra bir bölüm göreceksiniz. Bu bölümü açın ve bir arka plan rengi ekleyin.

• Arka Plan Rengi: Şeffaf mavimsi gri – rgba(68,66,109,0.02)

Satır ekle

Sütun Yapısı

Şimdi aşağıdaki sütun yapısına sahip yeni bir satır ekleyin:

boyutlandırma

Sonraki satırın boyutlandırma ayarlarını yapın.

• Oluk Genişliği: 1
• Genişlik
  • Masaüstü: %90
  • Tablet ve Telefon: %85
• Maksimum Genişlik: 1920 piksel

aralık

Ardından, farklı ekran boyutlarına bazı farklı boşluk değerleri uygulayın.

• Sol ve Sağ Kenar Boşluğu
  • masaüstü: otomatik
  • Tablet: 55 piksel
  • Telefon: 30 piksel
• Üst Dolgu: 100 piksel

1. Sütuna Yazı Başlığı Modülü Ekle

Elementler

Sütun 1'deki Gönderi Başlığı Modülü ile başlayarak modül ekleme zamanı. Yalnızca başlığı etkinleştirin.

• Başlığı Göster: Evet

Arka plan

Ardından bir arka plan rengi ekleyin.

• Renk: #e8e8e8

Başlık Metni

Tasarım sekmesine gidin ve başlık metnine stil verin.

• Başlık Seviyesi: H1
• Yazı Tipi: Josefin Sans
• Ağırlık: Kalın
• stil: TT
• Renk: #44000d
• Boy
  • Masaüstü: 32 piksel
  • Tablet: 28 piksel
  • Telefon: 30 piksel
• Satır Yüksekliği: 1,2 em

aralık

Aralığı da ayarlayın.

• Üst Dolgu
  • Masaüstü ve Tablet: 100 piksel
• Alt Dolgu: 80px
• Sol Dolgu
  • Masaüstü ve Tablet: 30 piksel
• Sağ Dolgu
  • Masaüstü ve Tablet: 30 piksel
  • Telefon: 10 piksel

Sınır

Modüle bazı yuvarlak köşeler verin.

• Yuvarlatılmış Köşeler: Dördü de 15 piksel

Kutu Gölge

Ve ince bir kutu gölgesi ekleyin.

• Kutu Gölgesi: 2. Seçenek
• Yatay Konum: 12px
• Dikey Konum: 12px
• Bulanıklık Gücü: 20px
• Yayılma Gücü: -5px
• Gölge Rengi: #dddddd

1. Sütuna Metin Modülü Ekle

İçerik

Önceki modülün hemen altına bir Metin Modülü ekleyin. İçerik kutusuna, eklentiden kopyaladığınız kısa kodu ekleyin.

• Gövde: Eklenti Kısa Kodu

Arka plan

Ardından bir arka plan rengi ekleyin.

• Renk: #e8e8e8

Metin

Metne stil verin.

• Yazı Tipi: Josefin Sans
• Renk: #44000d
• Boy
  • Masaüstü: 20 piksel
  • tablet: 18 piksel
  • Telefon: 16 piksel
• Aralık: 1 piksel

aralık

Boşluk ayarlarını da ayarlayın.

• Üst Kenar Boşluğu: 50px
• Üst ve Alt Dolgu: 40px
• Sol ve Sağ Dolgu: 30px

Sınır

Ardından, bazı yuvarlak köşeler ekleyin.

• Yuvarlatılmış Köşeler: Dördü de 15 piksel

Kutu Gölge

Ve ince bir kutu gölgesi ekleyerek modül ayarlarını tamamlayın.

• Kutu Gölgesi: 2. Seçenek
• Yatay Konum: 12px
• Dikey Konum: 12px
• Bulanıklık Gücü: 20px
• Yayılma Gücü: -5px
• Gölge Rengi: #dddddd

2. Sütuna Mağaza Modülü Ekle

İçerik

Bir sonraki sütuna! Bir mağaza modülü ekleyin ve ana ayarları aşağıdaki gibi yapın:

• Ürün Görüntüleme Türü: Varsayılan
• Geçerli Sayfayı Kullan: Evet
• Sütun Düzeni: 3 Sütun

resim

Tasarım sekmesine gidin ve görüntüyü buna göre şekillendirin:

• Görüntü Yuvarlatılmış Köşeler: Dördü de 15 piksel
• Görüntü Kutusu Gölgesi: 2. Seçenek
  • Yatay Konum: 6px
  • Dikey Konum: 6px
  • Bulanıklık Gücü: 18 piksel
  • Gölge Rengi: #dddddd

Başlık Metni

Sonraki başlık metnine stil verin.

• Yazı Tipi: Josefin Sans
• Ağırlık: Yarı Kalın
• Hizalama: Sağ
• Renk: #44000d
• Boy
  • Masaüstü: 26 piksel
  • Tablet: 24 piksel
  • Telefon: 17 piksel
• Aralık: 2 piksel

Fiyat Metni

Fiyat metnine de stil eklemeyi unutmayın.

• Yazı Tipi: Josefin Sans
• Hizalama: Sağ
• Renk: #44000d
• Boyut: 15 piksel
• Harf Aralığı: 2px
• satır Yüksekliği: 46px

aralık

Aralık ayarlarını da yapın.

• Üst Dolgu
  • Tablet ve Telefon: 50px
• Sol Dolgu
  • Masaüstü: 50 piksel
  • Tablet ve Telefon: 0px

Özel CSS

Son olarak, mağaza modülündeki farklı öğeler arasında biraz boşluk oluşturmak için gelişmiş sekmeye özel iki satır CSS kodu ekleyin. Bu kadar!

• Resim: dolgu-alt: 20px
• Fiyat: alt dolgu: 40 piksel

padding-bottom: 20px;

padding-bottom: 40px;

Ön izleme

WooCommerce ürün kategorisi sayfası şablonunu yeniden oluşturmayı bitirdik. Farklı ekran boyutlarında bitmiş tasarıma tekrar bir göz atalım.

masaüstü

Mobil

Son düşünceler

Bu ürün kategorisi sayfası şablonu, WooCommerce mağazanızdaki tüm kategorilere ve etiketlere uygulanabilir. Ürün filtresi eklentisinin yardımıyla kendi mağazanıza ve ürünlerinize uygun filtre ayarlarını ekleyebilirsiniz. Mağazanızı istediğiniz gibi kişiselleştirmek için Divi woo modüllerinden herhangi birini kullanabilirsiniz. Bu şablonun tasarımlarınıza kişiselleştirilmiş bir görünüm eklemenize yardımcı olacağını umuyoruz. Herhangi bir sorunuz veya öneriniz varsa yorumlarda bize bildirin!