Divi ve ACF ile Ürün Sayfası Şablonunuz İçin Dinamik Ürün Avantaj Tablosu Oluşturma

Ürün sayfanızı tasarlama şekliniz, ziyaretçilerinizin davranışları üzerinde anında bir etkiye sahiptir. İyi tasarlanmış ve özelleştirilmiş bir ürün sayfası tasarımı, ziyaretçilerin ürününüzü satın almak isteyip istemediklerine karar vermelerini kolaylaştırabilir. Ürün sayfanızı daha çekici hale getirmenin bir yolunu arıyorsanız, bu gönderiyi seveceksiniz. Divi ve Gelişmiş Özel Alanlar eklentisini kullanarak tasarımınıza dinamik bir ürün avantajı ızgarasını nasıl ekleyeceğinizi göstereceğiz. Avantajlar için bir alan grubu oluşturarak başlayacağız. Ardından ürün sayfamızdaki özel alanları dolduracağız ve dinamik içeriği ürün sayfası şablonumuza ekleyeceğiz. Ürün sayfası şablonunu 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

Ürün Sayfası Şablonunu ÜCRETSİZ İndirin

Ücretsiz ürün 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.

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. ACF Eklentisini Kurun ve Ürün Avantajı Alan Grubunu Ekleyin

Gelişmiş Özel Alanlar Eklentisini Yükleyin

Ürünlerimizin arka ucundaki farklı ürün avantajlarını görüntülemek için ücretsiz Gelişmiş Özel Alanlar eklentisini kullanacağız. WordPress arka ucunuz > Eklentiler > Yeni Ekle > ACF eklentisini arayın > Yükle > Etkinleştir seçeneğine gidin .

Özel Alanlara Git ve Yeni Alan Grubu Ekle

ACF eklentisini kurup etkinleştirdikten sonra, Özel Alanlarınıza gidebilir ve yeni bir alan grubu ekleyebilirsiniz.

Alan Grubu Ayarları

Yeni alan grubunuza bir başlık verin ve yalnızca ürün sayfalarında görünmesine izin verin.

• 'Posta Türü', 'Ürün'e eşittir

İlk Alanı Ekle

İlk ürün avantajınızın başlığı için yeni bir alan ekleyerek devam edin.

• Alan Etiketi: Kazanç Başlığı 1
• Alan Türü: Metin

Kalan Alanlar için Adımı Tekrarla

Kalan ürün avantajları ve açıklamaları için de aynı şeyi yapın. Bu alanların tümü, kendilerine atanmış 'Metin' alan türüne ihtiyaç duyar.

• Avantaj Başlığı 1
• Fayda Açıklama 1
• Fayda Başlığı 2
• Fayda Açıklaması 2
• Fayda Başlığı 3
• Fayda Açıklaması 3
• Avantaj Başlığı 4
• Fayda Açıklaması 4

2. Ürünlere Ürün Avantajları Ekleyin

Açın veya Yeni Ürün Ekle

Alan grubunuz ve alanlarınız oluşturulduktan sonra, bireysel düzeyde ürünlerinize ürün avantajlarını ekleyebilirsiniz. Seçtiğiniz bir ürünü açın veya yeni bir tane oluşturun.

Ürün Avantajları Alanlarını Doldurun

Ve ürün avantajlarını doldurun.

3. Divi Tema Oluşturucu İçinde Ürün Sayfası Şablonu Oluşturun

Divi Tema Oluşturucu'ya Git ve Yeni Şablon Ekle

Divi'yi kullanmaya başlama zamanı! Yeni bir şablon oluşturmak için Divi Tema Oluşturucu'ya gidin ve 'Yeni Şablon Ekle'yi tıklayın.

Tüm Ürünlerde Şablon Kullanın

Bu şablonu tüm ürünlerde kullanıyoruz, ancak bunun yerine belirli bir kategoriye veya etikete sahip ürünleri seçmekten çekinmeyin.

Şablonun Gövde Şablon Düzenleyicisini Girin

Ardından, 'Özel Gövde Ekle'yi tıklayarak ve 'Özel Gövde Oluştur'u seçerek şablonun gövdesini girin.

Bölüm #1'i Değiştir

Arka plan rengi

Şablon düzenleyicinin içine girdikten sonra bir bölüm göreceksiniz. Bu bölümü açın ve arka plan rengini siyah olarak değiştirin.

• Arka Plan Rengi: #000000

aralık

Bölümün tasarım sekmesine gidin ve bazı özel üst ve alt dolgu ekleyin.

• Üst Dolgu: 10px
• Alt Dolgu: 10px

Yeni Satır Ekle

Sütun Yapısı

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

boyutlandırma

Henüz modül eklemeden satır ayarlarını açın ve boyutlandırma ayarlarında bazı değişiklikler yapın.

• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1
• Genişlik: %90
• Maksimum Genişlik: %100

aralık

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

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

Sütuna Woo Sepet Bildirim Modülü Ekle

Dinamik İçerik

Bu satır ve bölümde ihtiyacımız olan tek modül bir Woo Cart Notice Module. Dinamik içerik alanında 'Bu Ürün'ün seçili olduğundan emin olun.

• Ürün: Bu Ürün

Arka plan rengi

Ardından modülün ayarlarını açın ve tamamen şeffaf bir arka plan rengi kullanın.

• Arka Plan Rengi: rgba(0,0,0,0)

Metin Ayarları

Tasarım sekmesine gidin ve sonraki metin ayarlarından metin yazı tipini değiştirin.

• Metin Yazı Tipi: Karla

Düğme Ayarları

Düğmeyi uygun şekilde şekillendirerek modül ayarlarını tamamlayın:

• Düğme İçin Özel Stiller Kullan: Evet
• Düğme Metin Boyutu: 20px
• Düğme Metin Rengi: #000000
• Düğme Arka Plan Rengi: #ffd623
• Düğme Kenar Genişliği: 0px
• Düğme Sınır Yarıçapı: 0px

• Düğme Yazı Tipi: Oswald
• Düğme Yazı Tipi Stili: Büyük Harf

• Üst Dolgu: 20px
• Alt Dolgu: 20px
• Sol Dolgu: 50px
• Sağ Dolgu: 50px

2. Bölüm Ekle

Degrade Arka Plan

Bir öncekinin hemen altına başka bir normal bölüm ekleyin, bölüm ayarlarını açın ve duyarlı bir gradyan arka planı kullanın.

• Renk 1: #000000
• Renk 2: #ffffff
• Başlangıç ​​konumu:
  • Masaüstü: %30
  • Tablet: %57
  • Telefon: %54
• Bitiş Konumu:
  • Masaüstü: %30
  • Tablet: %57
  • Telefon: %54

aralık

Bölümün tasarım sekmesine gidin ve biraz üst dolgu ekleyin.

• Üst Dolgu: 150 piksel

Yeni Satır Ekle

Sütun Yapısı

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

boyutlandırma

Henüz herhangi bir modül eklemeden satır ayarlarını açın ve boyutlandırma ayarlarını aşağıdaki gibi değiştirin:

• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1
• Genişlik: %95
• Maksimum Genişlik: 2560 piksel
• Satır Hizalama: Merkez

aralık

Satırın varsayılan üst dolgusunu da kaldırıyoruz.

• Üst Dolgu: 0px

Ana Eleman

Sütun içeriğini masaüstünde ortalamak için satırın ana öğesinde iki satır CSS kodu kullanacağız.

Masaüstü:

display: flex;
align-items: center;

Tablet ve Telefon:

display: block;

Sütun 1'e Woo Images Modülü Ekleme

Dinamik İçerik

Sütun 1'deki Woo Images Modülü ile başlayarak modül ekleme zamanı. Dinamik içerik alanında 'Bu Ürün'ün seçili olduğundan emin olun.

• Ürün: Bu Ürün

Dikey Hareket Kaydırma Etkisi

Gelişmiş sekmesindeki yatay hareket kaydırma efektini kullanarak görüntüye bazı ince hareketler ekliyoruz.

• Dikey Hareketi Etkinleştir: Evet
• Başlangıç ​​Ofseti:
  • Masaüstü: -4
  • Tablet & Telefon: 0
• Orta Ofset: 0
• Bitiş Ofseti: 0
• Hareket Efekti Tetikleyicisi: Elemanın Ortası

Sütun 2'ye Woo Başlık Modülü ekleyin

Dinamik İçerik

2. sütunda, ihtiyacımız olan ilk modül bir Woo Başlık Modülü. Dinamik içerik alanında 'Bu Ürün'ün seçili olduğundan emin olun.

• Ürün: Bu Ürün

Başlık Metni Ayarları

Ardından, tasarım sekmesine gidin ve başlık metnini aşağıdaki gibi biçimlendirin:

• Başlık Yazı Tipi: Oswald
• Başlık Yazı Tipi Stili: Büyük Harf
• Başlık Metin Rengi: #ffd623
• Başlık Metin Boyutu: 80px

aralık

Biraz sol ve sağ kenar boşluğu ekleyerek Woo Başlık Modülünü tamamlayın.

• Sol Kenar Boşluğu: %5
• Sağ Marj: %5

Sütun 2'ye Woo Açıklama Modülü Ekle

Dinamik İçerik

Bir Woo Açıklama Modülü olan bir sonraki modüle geçin. Bunun için aşağıdaki dinamik içeriği kullanıyoruz:

• Ürün: Bu Ürün
• Açıklama Türü: Kısa Açıklama

Metin Ayarları

Modülün tasarım sekmesine gidin ve metin ayarlarını buna göre değiştirin:

• Metin Yazı Tipi: Karla
• Metin Rengi: #dbdbdb
• Metin Boyutu: 17px (Masaüstü ve Tablet), 15px (Telefon)
• Metin Satır Yüksekliği: 1.9em

boyutlandırma

Ardından, farklı ekran boyutlarının genişliğini değiştirin.

• Genişlik: %59 (Masaüstü), %82 (Tablet ve Telefon)

aralık

Boşluk ayarlarına bazı özel kenar boşluğu değerleri ekleyerek Woo Açıklama Modülünü tamamlayın.

• Üst Kenar Boşluğu: 50px
• Alt Kenar Boşluğu: 100 piksel
• Sol Kenar Boşluğu: %5
• Sağ Marj: %5

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

Dinamik İçerik

Bu eğitimin ilk bölümünde eklediğimiz ürün avantajlarını görüntülemek için Blurb Modules kullanacağız. İlk Blurb Modülünü ekleyin ve başlık ve gövde için ilk ürün avantajının dinamik içeriğini kullanın.

• Başlık: Fayda Başlık 1
• Gövde: Fayda Açıklama 1

Fotoğraf yükleniyor

Daha sonra bir resim yükleyin veya istediğiniz bir simgeyi kullanın. Bu eğitim boyunca kullandıklarımızı, bu eğitimin başında indirebileceğiniz indirme klasöründe bulabilirsiniz.

Görüntü/Simge Ayarları

Modülün tasarım sekmesine gidin ve görüntü/simge ayarlarını aşağıdaki gibi değiştirin:

• Resim/Simge Yerleşimi: Üst
• Görüntü/Simge Hizalama: Sol

Başlık Metni Ayarları

Sırada başlık metni ayarlarını değiştiriyoruz.

• Başlık Yazı Tipi: Oswald
• Başlık Yazı Tipi Stili: Büyük Harf
• Başlık Metin Boyutu: 25px

Gövde Metni Ayarları

Gövde metni ayarlarıyla birlikte.

• Gövde Yazı Tipi: Karla
• Gövde Metni Boyutu: 17px (Masaüstü ve Tablet), 15px (Telefon)
• Gövde Çizgisi Yüksekliği: 1.9em

boyutlandırma

Ardından, boyutlandırma ayarlarına gidin ve genişlikleri değiştirin. %50'den daha az bir ana genişlik kullanmak önemlidir, bu, sonraki adımlarda yan yana iki Blurb Modülü göstermemize izin verecektir.

• Görüntü Genişliği: %25
• Genişlik: %49

aralık

Ayrıca, farklı ekran boyutlarında özel dolgu değerleri kullanarak Bulanıklık Modülünün etrafına biraz boşluk ekleyeceğiz.

• Üst Dolgu: %8
• Alt Dolgu: %8
• Sol Dolgu: %8 (Masaüstü ve Tablet), %2 (Telefon)
• Sağ Dolgu: %8 (Masaüstü ve Tablet) %2 (Telefon)

Ana Eleman

Şimdi, iki Blurb Modülünün yan yana görünmesini sağlamak için iki önemli adım var. İlki, modülün genişliğinin %50'den az olduğundan emin olmaktır (önceki adımlardan birinde yaptığımız gibi). İkincisi, bir satır içi görüntüleme özelliği kullanıyor. Bu CSS özelliğini, gelişmiş sekmesindeki Blurb Module'ün ana öğesine ekleyeceğiz.

display: inline-block;

Blurb Modülünü Üç Kez Klonla

İlk Bulanıklık Modülünü tamamladığınızda, onu üç kez klonlayabilirsiniz. Bulanıklık Modüllerinin bir ızgarada göründüğünü otomatik olarak fark edeceksiniz.

Bulanıklık Modülü Görüntülerini Değiştirin

Her yinelenen Blurb Modülündeki görüntüyü değiştirin. Bunları, bu gönderinin başında indirebildiğiniz indirme klasöründe bulabilirsiniz.

Blurb Modülü Dinamik İçeriğini Değiştirin

Her yinelenen Blurb Modülü için dinamik içeriği de değiştirin.

• Başlık: Fayda Başlığı (2,3 veya 4)
• Gövde: Fayda Açıklaması (2,3 veya 4)

Blurb Modüllerine Ayrı Ayrı Kenarlıklar Ekleyin

Blurb Modülü 1 Kenarlık Ayarları

Şimdi, ızgara tasarımımızı tamamlamak için, Blurb Modüllerine bireysel düzeyde bazı sınırlar ekleyeceğiz. İlk Blurb Modülünü açın ve bir sağ kenarlık kullanın.

• Sağ Kenar Genişliği: 1px
• Sağ Kenar Rengi: #ffd623

İlk Blurb Modülüne de bir alt kenarlık ekleyin.

• Alt Kenar Genişliği: 1px
• Alt Kenar Rengi: #000000

Blurb Modülü 2 Kenar Ayarları

Ardından, ikinci Blurb Modülünü açın ve bir alt kenarlık kullanın.

• Alt Kenar Genişliği: 1px
• Alt Kenar Rengi: #000000

Blurb Modülü 3 Kenarlık Ayarları

Üçüncü Blurb Modülüne bir sağ kenarlık ekleyerek ızgara tasarımını tamamlayın.

• Sağ Kenar Genişliği: 1px
• Sağ Kenar Rengi: #ffd623

Woo'yu Sepete Ekle Modülünü Sütun 2'ye ekleyin

Dinamik İçerik

Tasarımımızda ihtiyacımız olan son modül Woo Sepete Ekle Modülüdür. Dinamik içerik alanında 'Bu Ürün'ün seçili olduğundan emin olun.

• Ürün: Bu Ürün

Alan Ayarları

Sonraki tasarım sekmesine geçin ve alan ayarlarını değiştirin.

• Alanlar Arka Plan Rengi: #ffffff
• Alan Metni Rengi: #000000

• Alanlar Yuvarlatılmış Köşeler: 0px (Tüm Köşeler)
• Alanlar Alt Kenar Genişliği: 1px
• Alanlar Alt Kenarlık Rengi: #000000

Düğme Ayarları

Ardından, düğmeyi buna göre biçimlendirin:

• Düğme İçin Özel Stiller Kullan: Evet
• Düğme Metin Boyutu: 20px
• Düğme Metin Rengi: #000000
• Düğme Arka Plan Rengi: #ffd623
• Düğme Kenar Genişliği: 0px
• Düğme Sınır Yarıçapı: 0px

• Düğme Yazı Tipi: Oswald
• Düğme Yazı Tipi Stili: Büyük Harf

• Üst Dolgu: 20px
• Alt Dolgu: 20px
• Sol Dolgu: 50px
• Sağ Dolgu: 50px

aralık

Ve özel kenar boşluğu değerleri ekleyerek modül ayarlarını tamamlayın.

• Üst Kenar Boşluğu: 100 piksel
• Sol Kenar Boşluğu: %5

3. Tema Oluşturucu Değişikliklerini Kaydet ve Sonucu Önizleme

Ürün sayfası şablon tasarımını tamamladığınızda, tüm Tema Oluşturucu değişikliklerinizi kaydedebilir ve sonuçları ürünlerinizde görüntüleyebilirsiniz!

Ö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 gönderide, bir sonraki Divi ürün sayfası şablonunuzla nasıl yaratıcı olabileceğinizi gösterdik. Daha spesifik olarak, ürün sayfanıza ekstra teşvik eklemek için dinamik bir ürün fayda tablosunu nasıl ekleyeceğinizi gösterdik. Bu öğreticiyi, Divi'yi Gelişmiş Özel Alanlar eklentisiyle birlikte kullanarak oluşturduk. 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.