Ürün sayfanızı tasarlama şekliniz, ürün sayfanızın davranışı üzerinde anında bir etkiye sahiptir. ziyaretçi. İyi tasarlanmış ve kişiselleştirilmiş bir ürün sayfası tasarımı, ziyaretçi Ürününüzü satın almak isteyip istemediklerine daha kolay karar vermek için. Ürün sayfanızı daha ilgi çekici hale getirmenin bir yolunu arıyorsanız, muhtemelen bu öğreticiyi beğeneceksiniz.
Divi'yi ve Gelişmiş Özel Alanlar eklentisini kullanarak tasarımınıza dinamik bir ürün avantajları tablosunu nasıl ekleyeceğinizi göstereceğiz. Avantajlar için bir alan grubu oluşturarak başlayacağız. Daha sonra ürün sayfamızdaki özel alanları dolduracağız ve içindekiler Ürün sayfası şablonumuzda dinamik.
Olası Sonuç
Eğiticiye geçmeden önce, farklı ekran boyutlarındaki sonuca hızlıca göz atalım.
1. ACF Eklentisi ve Ürün Avantajı Alan Grubu eklentisini yükleyin
Gelişmiş Özel Alanlar eklentisini yükleme
Ürünlerimizin arka ucunda farklı ürün avantajlarını görüntülemek için eklentiyi kullanacağız ücretsiz Gelişmiş Özel Alanlar. Erişiminiz WordPress arka ucu> Eklentiler> Yeni ekle> ACF eklentisi bul> Yükle> Etkinleştir .
Ö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.
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
İ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
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
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.
Ürün Avantajları alanlarını doldurun
Ve ürünün faydalarını yerine getirin.
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.
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.
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.
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
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
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:
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
aralık
Tüm üst ve alt iç boşlukları kaldırın.
- Yüksek İç Marj: 0 piksel
- Düşük İç Marj: 0 piksel
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çildiğinden emin olun.
- Ürün: Bu Ürün
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)
Metin ayarları
"Tasarım" sekmesine geçin ve metin yazı tipini değiştirin.
- Metin Yazı Tipi: Karla
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
- Düğme Yazı: Oswald
- Düğme Yazı Tipi Stili: Büyük harf
- 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
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%
aralık
Tasarım sekmesine gidelim ve yüksek bir iç marj ekleyelim.
- Üst Dolgu: 150 piksel
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:
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
aralık
Üst iç marjı da kaldıracağız.
- Üst Dolgu: 0 piksel
Ana eleman
Ve ortalamak için içindekiler DeskTop'taki sütunda, modül satırının ana elemanında iki satır CSS kodu kullanacağız.
Masaüstü:
display: flex; hizalama öğeleri: merkez;
Tablet ve Telefon:
Ekran bloğu;
Woo Image modülünü 1. sütuna ekleyin
Dinamik İçerik
Modül ekleme zamanı, 1. sütunda Woo Images modülü ile başlayacağız. "Bu ürün" ün seçildiğinden emin olun.
- Ürün: Bu Ürün
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ı
Woo başlık modülünü 2. sütuna ekleyin
Dinamik içerik
2. sütunda ihtiyacımız olan ilk modül bir Woo başlık modülüdür. Kutuda “Bu Ürün”ün seçili olduğundan emin olun içindekiler dinamik.
- Ürün: Bu ürün
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
aralık
Sol ve sağ kenar boşlukları ekleyerek Woo başlık modülünü tamamlayın.
- Sol kenar boşluğu:% 5
- Sağ kenar boşluğu:% 5
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
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
boyutlandırma
Ardından farklı ekran boyutlarında genişliği değiştirin.
- Genişlik:% 59 (masaüstü),% 82 (tablet ve telefon)
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
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
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ü / 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
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
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
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
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)
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;
Ö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.
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.
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)
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
Ayrıca ilk Blurb modülüne bir alt kenarlık ekleyin.
- Alt kenar genişliği: 1 piksel
- Alt kenarlık rengi: # 000000
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
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.
- Sağ kenar genişliği: 1 piksel
- Sağ kenarlık rengi: # ffd623
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
Saha ayarları
Sonraki tasarım sekmesine gidin ve saha ayarlarını değiştirin.
- Alanların arka plan rengi: #ffffff
- Alan metni rengi: # 000000
- 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
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
- Düğme yazı tipi: Oswald
- Düğme yazı tipi stili: büyük harf
- Üst dolgu: 20 piksel
- Alt doldurma: 20px
- Sol doldurma: 50px
- Sağ dolgu: 50 piksel
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
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!
anket
Artık tüm adımları attığımıza göre, farklı ekran boyutlarında sonuca son bir göz atalım.
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.
