Divi ile Japon Estetiğinden Esinlenen Ürün Sayfası Şablonu Nasıl Oluşturulur

Yayınlanan: 2019-11-21

Online mağazanız için temiz ve minimal bir ürün sayfası tasarımı mı arıyorsunuz? Bugün Japon estetiğinden ilham alan bir tasarımımız var. Bu, minimal Japon dergileri ve web siteleri için yaygın bir stildir. Metni okumayı, ürünleri görmeyi ve dikkatin dağılmamasını kolaylaştırır. Bu şablonu kendi ürünleriniz için yeniden oluşturmak için aşağıdaki öğreticiyi takip edin. Şablon JSON dosyasını da ücretsiz olarak indirebileceksiniz!

Hadi hadi bakalım.

Ön izleme

Başlamadan önce, tasarımın farklı cihazlarda nasıl göründüğüne 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.

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. WooCommerce Ürününü Ekle/Aç

Ürün bilgileri

Yeni bir WooCommerce Ürünü açın veya oluşturun. Bu Japon estetiğinden ilham alan ürün tasarımını yeniden oluşturmak için aşağıdaki ayrıntıları doldurmanız gerekir:

Başlık: Kaligrafi Seti
Açıklama: Güzel yazı sanatı yaratmak için ihtiyacınız olan tüm araçlarla Japon kaligrafi seti. Siyah Hindistan mürekkebi, at kılı fırçası, taş ağırlığı, karıştırma kabı, Japon makası ve akmayan kağıt.
Fiyat: 31
Kategori: Sanat Malzemeleri
Öne Çıkan Görsel: Ürünün yatay resmi.
Galeri: Aynı boyutlarda 4 yatay resim
Özellikler: Aşağıya bakın

Nitelikler sekmesi, woo ek bilgi modülü için bilgileri tutar. Bu bilgiyi eklemek için, nitelikler sekmesini seçin ve aşağıdaki gibi bir özel nitelik oluşturun:

Neler Dahil:
- 1 Fırça
- 1 kase
- 1 Mürekkep Şişesi
- 1 çift makas
- 1 Nehir Taşı
- 1 Top Kağıt

Divi Builder'ı Etkinleştir ve Sayfa Ayarlarını Değiştir

Tüm ürün verileri hazır olduğunda Divi Builder'ı etkinleştirin ve sayfa düzenini 'tam genişlik' olarak değiştirin.

Visual Builder'a Geç

Şimdi görsel oluşturucuya geçin. 'Ön uçta oluştur' yazan düğmeye tıklayın.

Varsayılan Ürün Bölümünü Sil

Bu ürün sayfasını sıfırdan tasarlamak istediğimiz için varsayılan bölümün tamamını silin. Bu size üzerinde çalışmanız için boş bir tuval verecektir.

2. Japon Tarzı Tasarımını Yeniden Oluşturun

Yeni Bölüm Ekle

Japon estetik ürün sayfasını yeniden oluşturmaya başlayalım! Yeni bir normal bölüm ekleyin.

Arka plan

Bölüm ayarlarını açın ve arka plan rengini değiştirin.

Arka Plan Rengi: Çok Açık Gri #f2f2f2

boyutlandırma

Ardından, boyutlandırmayı ayarlayın.

Genişlik: %100
Maksimum Genişlik: %100

aralık

Ardından, boşluk değerleri aşağıdaki gibidir:

Üst Dolgu:
- Masaüstü: 0vw
- Tablet + Telefon: 2vw
Alt Dolgu:
- Masaüstü + Tablet: 2vw

1. Satır Ekle

Sütun Yapısı

Yeni bir satır ekleyin ve aşağıdaki sütun yapısını seçin:

boyutlandırma

Herhangi bir modül eklemeden önce, satırın boyutlandırma ayarlarını aşağıdaki gibi yapın:

Genişlik:
- Masaüstü: %80
- Tablet + Telefon: %63

aralık

Ayrıca, boşluk değerlerini ayarlayın.

Üst + Alt Marj: 0vw
Üst + Alt Dolgu: 0vw

Woo Breadcrumb Modülü Ekle

İçerik

Şimdi ilk modülü ekleyin; woo ekmek kırıntısı.

Ürün: Bu Ürün

Metin

Tasarım sekmesinde metni aşağıdaki gibi biçimlendirin:

Yazı Tipi: Duru Sans
Yazı Tipi Stili: TT
Renk: Siyah #000000
Boy:
- Masaüstü: 0.7vw
- Tablet: 1.5vw
- Telefon: 1.7vw
Harf Aralığı: 2px

boyutlandırma

Ardından, boyutu ayarlayın.

Genişlik: %100

aralık

Son olarak, aralığı ayarlayın.

Üst boşluk:
- Masaüstü: 3em
- Tablet + Telefon : 0em
Alt Kenar Boşluğu:
- Masaüstü + Tablet: 1em
- Telefon: 0em
Üst + Alt Dolgu: 1em
Sol Dolgu: 2em

2. Satır Ekle

Sütun Yapısı

Aşağıdaki sütun yapısını kullanarak ikinci bir satır ekleyin:

boyutlandırma

Satır ayarlarını açın ve farklı ekran boyutlarının genişliğini değiştirin.

Genişlik:
- Masaüstü: %80
- Tablet + Telefon: %65

aralık

Aralığı da ayarlayın.

Üst Dolgu: 0vw