Divi'nin WooCommerce Modülleri ile Temiz ve Kalın Ürün Sayfası Nasıl Oluşturulur (Ücretsiz İndirin!)

Kalın ürün sayfalarının ziyaretçilerinizin dikkatini çekmenin özel bir yolu vardır. Divi'nin yeni WooCommerce Modülleri güncellemesiyle, eski ürün sayfanızı hem sizin hem de ziyaretçilerinizin seveceği temiz ve cesur bir sayfaya hızla dönüştürebilirsiniz. Bugünün eğitiminde, sıfırdan cesur bir ürün sayfası oluşturacağız ve siz de JSON dosyasını ücretsiz olarak indirebileceksiniz! Bu eğitim, Divi'nin yeni WooCommerce Modüllerinin ne kadar çok yönlü olduğunu ve çok kısa sürede son derece profesyonel bir e-ticaret web sitesini nasıl oluşturabileceğinizi göstermeye gidiyor.

Hadi hadi bakalım!

Ön izleme

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

Temiz ve Kalın Ürün Sayfası Düzenini ÜCRETSİZ İndirin

Ellerinizi ücretsiz kahraman temiz ve kalın ürün sayfası düzenine 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!

Youtube Kanalımıza Abone Olun

1. WooCommerce Ürününü Ekle/Aç

Ürün Detayları

Mevcut bir ürünü açın veya yeni bir tane oluşturun. Bu gönderinin önizlemesinde gösterilenle aynı sonucu elde etmek istiyorsanız, aşağıdaki ürün ayrıntılarını eklediğinizden emin olun:

• Başlık
• Kısa Açıklama
• Uzun Açıklama
• Kategori
• Özellikli resim
• Fiyat

Divi Builder'ı Etkinleştir ve Ürün Sayfası Ayarlarını Değiştir

Ürün ayrıntılarını tamamladıktan sonra Divi'yi etkinleştirin ve sayfa düzenini 'Tam Genişlik' olarak değiştirin.

Visual Builder'a Geçin

Visual Builder'a geçerek devam edin.

Sayfadaki Orijinal Ürün Bölümünü Kaldır

Burada, orijinal ürün sayfası bilgilerinin tek bir bölümde bir araya getirildiğini göreceksiniz. Temiz ve cesur tasarımımızı sıfırdan yeniden oluşturacağız, bu yüzden bu bölümü silmekten çekinmeyin.

2. Divi'nin Görsel Oluşturucusunu Kullanarak Temiz ve Kalın Ürün Sayfası Oluşturun

Normal Bölüm #1 Ekle

aralık

Cesur ürün sayfamızı oluşturmaya başlama zamanı! Yeni bir normal bölüm ekleyin ve bölümün boşluk ayarlarını değiştirin.

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

taşmalar

Hiçbir şeyin bölüm kapsayıcısını aşmadığından ve sayfada yatay kaydırma olmadığından emin olmak için görünürlük ayarlarında bölümün taşmalarını gizleyin.

• Yatay Taşma: Gizli
• Dikey Taşma: Gizli

Satır ekle

Sütun Yapısı

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

Arka plan rengi

Henüz herhangi bir modül eklemeden satır ayarlarını açın ve satırın arka plan rengini değiştirin.

• Arka Plan Rengi: #f4f4f4

boyutlandırma

Satırın maksimum genişliğini de değiştirin.

• Maksimum Genişlik: 1000 piksel

aralık

Ardından, boşluk ayarlarına gidin ve bazı özel üst ve alt dolgu ekleyin.

• Üst Dolgu: 150 piksel
• Alt Dolgu: 150 piksel

Sınır

Satırın sol üst ve sağ köşelerine de '50 piksel' kenarlık yarıçapı ekliyoruz.

taşmalar

Taşmaları görünür hale getirerek satırın ayarlarını tamamlayın.

• Yatay Taşma: Görünür
• Dikey Taşma: Görünür

Sütuna Woo Breadcrumb Modülü Ekle

Dinamik İçerik

Modül eklemeye başlama zamanı! İhtiyacımız olan ilk modül Woo Breadcrumb Modülü.

• Ürün: Bu Ürün

Metin Ayarları

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

• Metin Yazı Tipi: Crimson Metin
• Metin Yazı Tipi Ağırlığı: Kalın
• Metin Yazı Tipi Stili: Büyük Harf
• Metin Boyutu: 20px
• Metin Harf Aralığı: 4px

Bağlantı Metni Ayarları

Bağlantı metni ayarlarında da bazı değişiklikler yapar.

• Bağlantı Yazı Tipi Ağırlığı: Hafif
• Bağlantı Metni Rengi: #e02b20

aralık

Ardından, boşluk ayarlarına gidin ve farklı ekran boyutlarına bazı özel kenar boşlukları değerleri ekleyin.

• Alt Kenar Boşluğu: 80px
• Sol Kenar Boşluğu: 50px (Masaüstü ve Tablet), 20px (Telefon)
• Sağ Kenar Boşluğu: 50px (Masaüstü ve Tablet), 20px (Telefon)

Sütuna Woo Başlık Modülü Ekle

Dinamik İçerik

Bu sütunda ihtiyacımız olan sonraki ve son modül Woo Başlık Modülüdür.

• Ürün: Bu Ürün

Başlık Metni Ayarları

Modülün başlık metni ayarlarını aşağıdaki gibi değiştirin:

• Başlık Yazı Tipi: Montserrat
• Başlık Yazı Tipi Ağırlığı: Ağır
• Başlık Metni Hizalama: Orta
• Başlık Metin Rengi: #000000
• Başlık Metin Boyutu: 250px (Masaüstü), 150px (Tablet), 80px (Telefon)
• Başlık Satırı Yüksekliği: 0.9em

aralık

Negatif sol ve sağ kenar boşluğu ekleyerek modülün genişliğini artırın.

• Sol Kenar Boşluğu: -150px (Masaüstü), -100px (Tablet), -50px (Telefon)
• Sağ Kenar Boşluğu: -150px (Masaüstü), -100px (Tablet), -50px (Telefon)

Normal Bölüm #2 Ekle

aralık

Bir öncekinin hemen altına başka bir bölüm ekleyin. Bölümün dolgu değerlerini aşağıdaki gibi değiştirin:

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

Satır ekle

Sütun Yapısı

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

Arka plan rengi

Henüz herhangi bir modül eklemeden satır ayarlarını açın ve satırın arka plan rengini değiştirin.

• Arka Plan Rengi: #f4f4f4

boyutlandırma

Sonraki satırın maksimum genişliğini artırın.

• Maksimum Genişlik: 1000 piksel

aralık

Bazı özel alt dolguları da ekleyin.

• Alt Dolgu: 150 piksel

Sınır

Ardından, kenarlık ayarlarına gidin ve sol ve sağ alt köşelere '50px' kenarlık yarıçapı uygulayın.

taşmalar

Taşmaların görünür olduğundan emin olarak satır ayarlarını tamamlayın.

• Yatay Taşma: Görünür
• Dikey Taşma: Görünür

Sütun 1 Ayarları

Dinamik Arka Plan Resmi

Genel satır ayarlarını tamamladıktan sonra, 1. sütun ayarlarını açın ve dinamik içeriği kullanarak ürünün öne çıkan resmini arka plana ekleyin.

• Arka Plan Resmi: Öne Çıkan Resim

aralık

Sonraki sütuna biraz alt dolgu ekleyin. Bu, arka plan görüntüsünün görünmesini sağlar.

• Alt Dolgu: 370 piksel (Masaüstü), 690 piksel (Tablet), 380 piksel (Telefon)

Sütun 1'e Metin Modülü Ekle

İçerik Ekle

Modül eklemeye başlama zamanı! 1. sütunda ihtiyacımız olan tek modül bir Metin Modülüdür. Seçtiğiniz bazı içeriği ekleyin.

Arka plan rengi

Ardından modülün arka plan rengini değiştirin.

• Arka Plan Rengi: #E02B20

Metin Ayarları

Tasarım sekmesine gidin ve metin ayarlarını değiştirin.

• Metin Yazı Tipi: Montserrat
• Metin Yazı Tipi Ağırlığı: Ultra Kalın
• Metin Hizalama: Merkez
• Metin Rengi: #FFFFFF
• Metin Boyutu: 30px
• Metin Satırı Yüksekliği: 1em

boyutlandırma

Sonraki boyutlandırma ayarlarında modülün boyutunu küçültün.

• Genişlik: 280 piksel

aralık

Ve bazı özel dolgu değerleri ekleyerek modülü bir kareye dönüştürün. Ayrıca, negatif kenar boşluğu kullanarak bir üst ve sol örtüşme oluşturuyoruz.

• Üst Kenar Boşluğu: -120px
• Sol Kenar Boşluğu: -120px
• Üst Dolgu: 110 piksel
• Alt Dolgu: 110px
• Sol Dolgu: 50px
• Sağ Dolgu: 50px

Sınır

Kareyi bir daireye dönüştürmek için modülün köşelerinin her birine '500px' kenarlık yarıçapı ekleyeceğiz.

Dönüştür Döndür

Modülü de döndüreceğiz.

• Sol: 330deg

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

H2 İçeriği Ekle

İkinci sütuna geç! Orada, ihtiyacımız olan ilk modül normal bir Metin Modülü. Seçtiğiniz bazı H2 içeriğini girin.

H2 Metin Ayarları

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

• Başlık 2 Yazı Tipi: Montserrat
• Başlık 2 Metin Boyutu: 35px

aralık

Daha sonra bazı özel kenar boşluğu değerleri ekleyin.

• Üst Kenar Boşluğu: -70px (Masaüstü), 100px (Tablet ve Telefon)
• Sol Kenar Boşluğu: 100px (Masaüstü), 20px (Tablet ve Telefon)
• Sağ Kenar Boşluğu: 20px (Tablet ve Telefon)

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

Dinamik İçerik

2. sütunda ihtiyacımız olan ikinci modül Woo Açıklama Modülüdür.

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

Metin Ayarları

Modülün metin ayarlarını uygun şekilde değiştirin:

• Metin Yazı Tipi: Crimson Metin
• Metin Boyutu: 19px
• Metin Satır Yüksekliği: 1.8em
• Metin Hizalama: Yasla

aralık

Daha sonra modülün boşluk değerlerini değiştirin.

• Alt Kenar Boşluğu: 50px
• Sol Kenar Boşluğu: 100px (Masaüstü), 20px (Tablet ve Telefon)
• Sağ Kenar Boşluğu: -100px (Masaüstü), 20px (Tablet ve Telefon)

Sütun 2'ye Woo Fiyat Modülü ekleyin

Dinamik İçerik

Woo Fiyat Modülü olan bir sonraki modüle geçin.

• Ürün: Bu Ürün

Fiyat Metni Ayarları

Fiyat metni ayarlarını aşağıdaki gibi değiştirin:

• Fiyat Yazı Tipi: Montserrat
• Fiyat Yazı Tipi Ağırlığı: Ağır
• Fiyat Metin Rengi: #000000
• Fiyat Metin Boyutu: 50px

aralık

Sonraki boşluk ayarlarını değiştirin.

• Alt Kenar Boşluğu: 50px
• Sol Kenar Boşluğu: 100px (Masaüstü), 20px (Tablet ve Telefon)
• Sağ Kenar Boşluğu: 20px (Tablet ve Telefon)

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

Dinamik İçerik

Bu tasarımı tamamlamak için ihtiyacımız olan bir sonraki ve son modül, Woo Sepete Ekle Modülüdür.

• Ürün: Bu Ürün

Metin Ayarları

Metin ayarlarında metin yazı tipini değiştirin.

• Metin Yazı Tipi: Montserrat

Alan Ayarları

Sonraki alan ayarlarını değiştirin.

• Alan Arka Plan Rengi: #ffffff
• Alan Metin Rengi: #000000
• Üst Dolgu: 66px
• Alt Dolgu: 66px
• Alan Yazı Tipi: Montserrat
• Alanlar Yazı Tipi Ağırlığı: Ağır

• Tüm Köşeler: 5px
• Alt Alanlar Kenarlık Genişliği: 3px
• Alan Kenarlığı Rengi: #e02b20

Düğme Ayarları

Düğmeyi şekillendirerek devam edin.

• Düğme için Özel Stilleri Kullan: Evet
• Düğme Metin Rengi: #ffffff
• Düğme Arka Plan Rengi: #E02B20
• Düğme Kenar Genişliği: 0px

• Düğme Sınır Yarıçapı: 5px
• Düğme Yazı Tipi: Montserrat
• Düğme Yazı Tipi Ağırlığı: Ultra Kalın
• Düğme Yazı Tipi Stili: Büyük Harf

• Üst Dolgu: 50px
• Alt Dolgu: 50px
• Sol Dolgu: 100px (Masaüstü), 50px (Tablet), 20px (Telefon)
• Sağ Doldurma: 100px (Masaüstü), 50px (Tablet), 20px (Telefon)
• Kutu Gölge Bulanıklığı Gücü: 80px
• Gölge Rengi: rgba(0,0,0,0.3)

aralık

Daha küçük ekran boyutlarına bazı sol ve sağ kenar boşlukları ekleyerek modülün tasarımını tamamlayın ve işiniz bitti!

• Sol Kenar Boşluğu: 20px (Tablet ve Telefon)
• Sağ Kenar Boşluğu: 20px (Tablet ve Telefon)

Ön izleme

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

Son düşünceler

Bu yazıda, Divi'nin yeni WooCommerce Modüllerini kullanarak temiz bir görünüm ve his ile çarpıcı, cesur bir ürün sayfasını nasıl oluşturacağınızı gösterdik. Kalın ürün sayfaları, ürününüzü öne çıkarmanın benzersiz bir yolunu sunar. 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.