Ana İçeriğe Geç

WooCommerce ürünleri için dinamik faydalar ızgarası oluşturma

Divi: Kullanılacak en kolay WordPress teması

Divi: Tüm zamanların en iyi WordPress teması!

daha fazla 901.000 indirmeler, Divi, dünyanın en popüler WordPress teması. Tamamen, kullanımı kolay ve 62 ücretsiz şablonlardan daha fazlasını sunuyor. [Önerilen]

Ürün sayfanızı tasarlama şeklinizin ziyaretçilerinizin davranışları üzerinde anında etkisi vardır. İyi hazırlanmış ve kişiselleş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 ilgi çekici hale getirmenin bir yolunu arıyorsanız, muhtemelen bu öğreticiyi beğeneceksiniz. 

Divi ve Advanced Custom Fields eklentisini kullanarak tasarımınıza dinamik bir ürün avantajı ızgarasını nasıl dahil edeceğinizi göstereceğiz. Faydalar için bir grup alan oluşturarak başlayacağız. Daha sonra ürün sayfamızdaki özel alanları dolduracağız ve dinamik içeriği ürün sayfası şablonumuza ekleyeceğiz. 

Olası Sonuç

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

Olası sonuç divi

1. ACF Eklentisi ve Ürün Avantajı Alan Grubu eklentisini yükleyin

Gelişmiş Özel Alanlar eklentisini yükleme

Ürünlerimizin arka ucunda çeşitli ürün avantajlarını görüntülemek için ücretsiz Gelişmiş Özel Alanlar eklentisini kullanacağız. Erişim WordPress arka ucu> Eklentiler> Yeni ekle> ACF eklentisi bul> Yükle> Etkinleştir .

Gelişmiş özel alan eklentisini yükleyin

Özel alanlara gidin ve yeni bir alan grubu ekleyin

ACF eklentisini yükleyip etkinleştirdikten sonra, özel alanlarınıza erişebilir ve yeni bir alan grubu ekleyebilirsiniz.

ACF alanları oluştur

Alan grubu ayarları

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

  • "İleti türü", "Ürün" e eşittir
Kural ekleyin

İlk alan ekle

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

  • Alan Etiketi: Fayda Başlığı 1
  • Alan türü: metin
Ac alanı ekle
Divi alan özelleştirme

Kalan alanlar için adımı tekrarlayın

Ürünün diğer faydaları ve açıklamaları için de aynısını yapın. Tüm bu alanlar, kendilerine atanmış "Metin" alan türünü gerektirir.

  • Hizmetin başlığı 1
  • Faydaların tanımı 1
  • Hizmetin başlığı 2
  • Faydaların tanımı 2
  • Hizmetin başlığı 3
  • Faydaların tanımı 3
  • Hizmetin başlığı 4
  • Faydaların tanımı 4
ACF alanlarını yapılandırın

2. Ürünlere fayda ekleyin

Yeni bir ürün açma veya ekleme

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

Divi ürün oluşturma

Ürün Avantajları alanlarını doldurun

Ve ürünün faydalarını yerine getirin.

Divi avantajları alanlarını doldurun

3. Divi Tema Oluşturucu'da bir ürün sayfası şablonu oluşturun

Divi Tema Oluşturucu'ya gidin ve yeni bir şablon ekleyin

Divi ile başlama zamanı! Yeni bir şablon oluşturmak için Divi Tema Oluşturucu'ya gidin ve "Yeni şablon ekle" üzerine tıklayın.

Divi tema oluşturucu

Tüm ürünlerde şablon kullanma

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

Tüm woocommerce ürünlerini ekle

Model gövdesi şablon düzenleyicisine girin

Ardından, "Özel bir gövde ekle" yi tıklayıp "Özel bir gövde oluştur" u seçerek modelin gövdesini girin.

Divi gövdesi oluşturma

1. bölümü düzenle

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 siyaha değiştirin.

  • Arka plan rengi: # 000000
Divi bölümü arka plan yapılandırması

aralık

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

  • Üst Dolgu: 10 piksel
  • Alt Dolgu: 10 piksel
Divi bölüm aralığı yapılandırması

Yeni bir satır ekle

Sütun yapısı

Aşağıdaki yapıya sahip bölüme yeni bir satır ekleyerek devam edelim:

Hat modülü düzen yapılandırması

aralık

Herhangi bir mod eklemeden satır ayarlarını açalım ve bazı boşluk ayarlamaları yapalım.

  • Kişiselleştirilmiş Oluk Kullanın: Evet
  • Oluk genişliği: 1
  • Genişlik:% 90
  • Maksimum genişlik:% 100
Hat modülü aralık ayarları

aralık

Tüm üst ve alt iç boşlukları kaldırın.

  • Yüksek İç Marj: 0 piksel
  • Düşük İç Marj: 0 piksel
Divi hat modülü aralık ayarları

Woo Cart Notice modülünü sütuna ekleyin

Dinamik İçerik

Bu hat ve bölümde ihtiyacımız olan tek modül Woo Cart Notice modülüdür. Dinamik bölümde “Bu Ürün”ün seçili olduğundan emin olun.

Elementor ile web sitenizi kolayca oluşturun

Elementor, profesyonel bir görünüme sahip herhangi bir web sitesi tasarımını kolayca oluşturmanıza olanak sağlar. Kendin yapabileceğin için pahalı ödemeyi kes. [Ücretsiz]

  • Ürün: Bu Ürün
Ayarlar woo cart notice module divi

Renk arka plan

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

  • Arka Plan Rengi: rgba (0,0,0,0)
Woo cart modülü divi ayarları

Metin ayarları

"Tasarım" sekmesine geçin ve metin yazı tipini değiştirin.

  • Metin Yazı Tipi: Karla
Divi modülü yazı tipi ayarları

Düğme ayarı

Stil ayarlarını tanımlayarak eklenti ayarlarını bitirin:

  • Düğme için Özel Stiller Kullan: Evet
  • Düğme Metin Boyutu: 20 piksel
  • Düğme Metin Rengi: # 000000
  • Düğme Arka Planı: # ffd623
  • Düğme kenarlığı genişliği: 0 piksel
  • Yuvarlak sınır Düğmesi: 0 piksel
Woo cart notice module renk ayarları
  • Düğme Yazı: Oswald
  • Düğme Yazı Tipi Stili: Büyük harf
Woo cart fark modülü renk tasarımı ayarı
  • Yüksek İç Marj: 20 piksel
  • Düşük İç Marj: 20 piksel
  • Sol Dahili Kenar Boşluğu: 50 piksel
  • İç Sağ Kenar Boşluğu: 50 piksel
Yapılandırma tasarım modülü woo cart notu

2. bölüm ekle

Gradyan arka planı

Bir öncekinin altına başka bir normal bölüm ekleyin. Ardından ayarları açın ve aşağıdaki gibi bir degrade 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%
Divi hat modülü arka ayarı

aralık

Tasarım sekmesine gidelim ve yüksek bir iç marj ekleyelim.

  • Üst Dolgu: 150 piksel
Divi hat modülü aralık yapılandırması

Yeni bir satır ekle

Sütun yapısı

Aşağıda gösterildiği gibi aynı yapıya sahip yeni bir satır ekleyerek devam edin:

Divi çizgi stili yapılandırması

boyutlandırma

Henüz herhangi bir mod eklemeden ayarları açıp aralığı aşağıdaki gibi değiştireceğiz:

  • Özel oluklar kullanın: Evet
  • Oluk alanı: 1
  • Genişlik:% 95
  • Maksimum genişlik: 2560 piksel
  • Satır Hizalama: Orta
Oluk konfigürasyonu divi modülü

aralık

Üst iç marjı da kaldıracağız.

  • Üst Dolgu: 0 piksel
Divi modülü aralık yapılandırması

Ana eleman

Sütunun içeriğini Masaüstünde ortalamak için, satır modülünün ana öğesinde iki satır CSS kodu kullanacağız.

Masaüstü:

display: flex; hizalama öğeleri: merkez;

Tablet ve Telefon:

Ekran bloğu;
Divi hat modülü stil ayarları

Woo Image modülünü 1. sütuna ekleyin

Dinamik İçerik

Modül ekleme zamanı geldi, 1. sütundaki Woo Images modülü ile başlayacağız. “Bu ürün”ün seçili olduğundan emin olun.

  • Ürün: Bu Ürün
Woocommerce ürün resmi modülü ayarları

Dikey kaydırma animasyon efekti

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

  • Dikey hareketi etkinleştir: Evet
  • Başlangıç ​​ofseti:
    • Ofis: -4
    • Tablet ve telefon: 0
  • Ortalama ofset: 0
  • Bitiş ofseti: 0
  • Hareket Efekti Tetikleyicisi: Elemanın Ortası
Divi görüntü modülü ayarı

Woo başlık modülünü 2. sütuna ekleyin

Dinamik içerik

2. sütunda, ihtiyacımız olan ilk mod bir Woo başlık modudur. Dinamik içerik alanında "Bu ürün" ün seçildiğinden emin olun.

  • Ürün: Bu ürün
ürün avantajları tablosu

Başlık metni ayarları

Ardından tasarım sekmesine gidin ve başlık metninin stilini aşağıdaki gibi belirleyin:

  • Başlık yazı tipi: Oswald
  • Başlık yazı tipi stili: büyük harf
  • Başlık metni rengi: # ffd623
  • Başlık metni boyutu: 80 piksel
Divi başlık modülü tasarım ayarı

aralık

Sol ve sağ kenar boşlukları ekleyerek Woo başlık modülünü tamamlayın.

En iyi WordPress temalarını ve eklentilerini mi arıyorsunuz?

Envato'daki en iyi eklentileri ve WordPress temalarını indirin ve web sitenizi kolayca oluşturun. 49.720.000 indirme işleminden daha fazla. [ÖZEL]

  • Sol kenar boşluğu:% 5
  • Sağ kenar boşluğu:% 5
Divi başlık modülü ayarı

Woo açıklama modülünü 2. sütuna ekleyin

Dinamik içerik

Woo açıklama modülü olan bir sonraki modüle geçelim. 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
Ürün açıklaması modül ayarları

Metin ayarları

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

  • Metin Yazı Tipi: Karla
  • Metin rengi: #dbdbdb
  • Metin boyutu: 17 piksel (masaüstü ve tablet), 15 piksel (telefon)
  • Metin satır yüksekliği: 1,9 em
Renk ayar modülü açıklaması divi

boyutlandırma

Ardından farklı ekran boyutlarında genişliği değiştirin.

  • Genişlik:% 59 (masaüstü),% 82 (tablet ve telefon)
Divi özet modülü genişlik ayarı

aralık

Aralık ayarlarına ö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: 100px
  • Sol kenar boşluğu:% 5
  • Sağ kenar boşluğu:% 5
Divi ürün açıklama modülü

Blurb modülünü 2 sütununa ekleyin

Dinamik içerik

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

  • Başlık: Fayda Başlığı 1
  • Gövde: Fayda Tanımı 1
Divi özet modülü metin ayarı

Fotoğraf yükleniyor

Bir resim yükleyin veya bir sonraki 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ü modülü özeti divi yapılandırması

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:

  • Görüntü / Simge Yerleşimi: Üst
  • Görüntü / Simge Hizalama: Sol
Divi ayar modülü

Başlık Metni Ayarları

Daha sonra 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
Divi özet modülü yazı tipini yapılandırın

Gövde Metni Ayarları

Gövde metni ayarlarıyla birlikte.

  • Gövde Yazı Tipi: Karla
  • Metin boyutu: 17 piksel (masaüstü ve tablet), 15 piksel (telefon)
  • Gövde çizgisi yüksekliği: 1,9 em
Metin modülü özet div i'yi yapılandırın

boyutlandırma

Ardından boyutlandırma ayarlarına gidin ve genişlikleri değiştirin. Ana genişliği% 50'den az kullanmak önemlidir, bu, sonraki adımlarda iki Blurb modülünü yan yana göstermemize olanak tanır.

  • Resim Genişliği:% 25
  • Genişlik:% 49
Divi özet modülü boyutlandırmasını yapılandırın

aralık

Farklı ekran boyutlarında özel dolgu değerleri kullanarak Blurb modülünün etrafına boşluklar da 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)
Divi özet modülü aralığını yapılandırın

Ana eleman

Şimdi Özet modülünün metni yan yana iki adımda görüntülediğinden emin olacağız. İlk olarak, modül genişliğinin% 50'den az olduğundan emin olacağız (önceki adımda yaptığımız gibi). Sonra, satırdaki özelliği kullanacağız. Bu CSS özelliğini, gelişmiş bölümdeki ana öğeye ekleyeceğiz.

display: inline-block;
CSS kod divi modülü ekle

Özet modülünü 3 kez klonlayın

İlk Blurb modunu tamamladıktan sonra, onu üç kez klonlayabilirsiniz. Blurb modüllerinin bir ızgarada göründüğünü otomatik olarak fark edeceksiniz.

Ürün adı divi bölümü

Blurb modülü görüntülerini düzenleme

Her yinelenen Blurb bölmesindeki görüntüyü düzenleyin. Bunları, bu makalenin başında indirmiş olabileceğiniz indirme klasöründe bulabilirsiniz.

Divi özet modül resmi

Blurb modülünün dinamik içeriğini değiştirme

Ayrıca her yinelenen Blurb modülünün dinamik içeriğini değiştirin.

  • Başlık: Hizmetin başlığı (2,3 veya 4)
  • Gövde: avantajların açıklaması (2,3 veya 4)
Divi özet modülü kuralları

Blurb modüllerine ayrı ayrı kenarlık ekleme

Bulanıklaştırma modülü 1 kenarlık ayarları

Şimdi, ızgaramızı tasarlamayı bitirmek için, Blurb modüllerine bireysel düzeyde sınırlar ekleyeceğiz. İlk Blurb modunu açın ve düz bir kenarlık kullanın.

  • Sağ kenar genişliği: 1 piksel
  • Sağ kenarlık rengi: # ffd623
Yuvarlak kenar yapılandırması divi özet modülü

Ayrıca ilk Blurb modülüne bir alt kenarlık ekleyin.

  • Alt kenar genişliği: 1 piksel
  • Alt kenarlık rengi: # 000000
Divi alt kenar boşluğunu yapılandırın
Bulanıklaştırma modülü 2 kenarlık ayarları

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

  • Alt kenar genişliği: 1 piksel
  • Alt kenarlık rengi: # 000000
Yapılandırma sınır modülü özeti divi
Bulanıklaştırma modülü 3 kenarlık ayarları

Üçüncü Blurb modülüne düz bir kenarlık ekleyerek ızgara tasarımını tamamlayın.

Çevrimiçi Mağazanızı kolayca oluşturun

WordPress'te fiziksel ve dijital ürünlerinizi satmak için ücretsiz WooCommerce, en iyi e-ticaret eklentilerini indirin. [Önerilen]

  • Sağ kenar genişliği: 1 piksel
  • Sağ kenarlık rengi: # ffd623
ürün avantajları tablosu

Sütun ekle Sepete ekle Modül 2 sütununda

Dinamik içerik

Tasarımımızda ihtiyacımız olan son modül bir Woo Add to Cart modülüdür. Dinamik içerik alanında "Bu ürün" ün seçildiğinden emin olun.

  • Ürün: Bu ürün
Kart divi modülü ayarlarına ekle

Saha ayarları

Sonraki tasarım sekmesine gidin ve saha ayarlarını değiştirin.

  • Alanların arka plan rengi: #ffffff
  • Alan metni rengi: # 000000
Stil rengi modülünü yapılandırın sepete divi ekle
  • Yuvarlak alanlar: 0 piksel (tüm köşeler)
  • Alanların alt kenarlık genişliği: 1 piksel
  • Alanların alt kenarlığının rengi: # 000000
Divi bölüm aralığını yapılandırma

Düğme ayarları

Ardından, düğmeyi buna göre şekillendirin:

  • Düğme için özel stiller kullan: Evet
  • Düğme metni boyutu: 20 piksel
  • Düğme metni rengi: # 000000
  • Düğme arka plan rengi: # ffd623
  • Düğme kenarlığı genişliği: 0 piksel
  • Düğme kenarlığı yarıçapı: 0 piksel
Divi düğme tasarımını yapılandırın
  • Düğme yazı tipi: Oswald
  • Düğme yazı tipi stili: büyük harf
Divi düğmesini yapılandır
  • Üst dolgu: 20 piksel
  • Alt doldurma: 20px
  • Sol doldurma: 50px
  • Sağ dolgu: 50 piksel
Divi modülü boyutlandırmasını yapılandırın

aralık

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

  • Üst kenar boşluğu: 100px
  • Sol kenar boşluğu:% 5
Divi aralığını yapılandırın

3. Tema üreticisinin değişikliklerini kaydedin ve sonucu önizleyin

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

Divi tasarımını kaydedin
Divi değişikliklerini kaydedin

anket

Artık tüm adımları attığımıza göre, farklı ekran boyutlarında sonuca son bir göz atalım.

Demo sonucu

Son düşünceler

Bu makalede, bir sonraki Divi ürün sayfası şablonunuzla nasıl yaratıcı olacağınızı gösterdik. Özellikle, ürün sayfanıza ek avantajlar eklemek için dinamik bir ürün avantajı tablosunu nasıl ekleyeceğinizi gösterdik. Bu öğreticiyi, Advanced Custom Fields eklentisi ile birlikte Divi kullanarak oluşturduk. JSON dosyasını ücretsiz olarak da indirebilirsiniz! Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorumlar bölümüne yorum yapmaktan çekinmeyin.

Bu makale yorumları 0 içeriyor

YORUM BIRAKIN

E-posta hesabınız yayımlanmayacak. Doldurulması zorunlu alanlar * ile işaretlenmiştir *

Bu site, istenmeyenleri azaltmak için Akismet'i kullanıyor. Yorum verilerinizin nasıl kullanıldığı hakkında daha fazla bilgi edinin..

Başa dönüş
0 hisseleri
hisse
cıvıltı
Enregistrer