Divi ile Çocuk Ürünleri için Eğlenceli Ürün Sayfası Şablonu Nasıl Yapılır?

Çocukların ürün web siteleri benzersiz bir tarza sahiptir. Eğlenceli, renkli olma ve bir gülümsemeye ilham verme eğilimindedirler. Çocuk ürünleri için WooCommerce mağazanızı Divi tema oluşturucu ve özelleştirilebilir woo modülleri ile oluşturmak artık daha kolay. Eşsiz ve eğlenceli bir tasarımla neden biraz daha özel hale getirmiyorsunuz? Bu gönderide, tema oluşturucuda tüm ürünlerinize uygulanacak bir çocuk ürün sayfası şablonunu nasıl oluşturacağınızı göstereceğiz. Saydam bir arka plana sahip ürün görsellerinde en iyi sonucu verir. JSON dosyasını da ücretsiz olarak indirebileceksiniz!

Başlayalım.

Ön izleme

Tasarımı yeniden oluşturmaya başlamadan önce, farklı ekran boyutlarındaki sonuca bir göz atalım.

masaüstü

Mobil

Eğlenceli Çocukların Ürün Şablonunu ÜCRETSİZ olarak indirin

Ücretsiz eğlenceli çocuk ürün ş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.

1. Çocukların Ürün Şablonu İçin Tasarım Hazırlığı

Ürün Fotoğrafından Arka Planı Kaldır

Çocukların ürün tasarımına başlamadan önce yapacağımız ilk şey görüntüleri hazırlamaktır. Ürün resimlerinden arka planı kaldırın. Bunu Adobe Photoshop, Adobe Illustrator veya remove.bg ile başarabilirsiniz. Tasarıma iyi oturması için ürünün çevresinde biraz boşluk bırakın. Nihai görüntü için en iyi boyut 600X400 pikseldir.

Arka Plan Tasarımı Oluşturun

İkinci adım, görüntünün arkasına yerleştirilecek bir arka plan tasarımı oluşturmaktır. Üst üste binen şekillere sahip bu tasarım, Adobe Illustrator'da kolayca oluşturulur. Alternatif olarak, bu arka plan resmini yukarıdaki indirilebilir klasörde bulabilirsiniz. Arka planı oluşturmak istiyorsanız izlemeniz gereken adımlar şunlardır:

• Bir şekil oluşturun (veya kaynaklayın).
• Forma istediğiniz rengi verin.
• Şekli çoğaltın.
• Orijinaline benzer bir tonda renklendirin.
• Güzel bir kompozisyon oluşturmak için ikinci şekli döndürün.
• Her iki şekle de biraz şeffaflık ekleyin.
• Son tasarımdaki arka planla aynı renkte bir arka plan ekleyin.
• 1750X1650 piksel civarında JPG olarak kaydedin.

2. Yeni WooCommerce Ürünü Oluşturun/Ekle

Ürün bilgileri

Ürün görseli ve arka plan tasarımları hazır olduğunda, bir çocuk ürünü yaratmanın zamanı geldi. Tam olarak bizimkine benzer bir tasarım oluşturmak için aşağıdaki bilgileri girin.

• Başlık: Ahşap Harf Blokları
• Uzun Açıklama: Bu doğal ahşap bloklar, çocukların harf ve sayıları eğlenceli ve yaratıcı bir şekilde öğrenmeleri için harikadır. Kenarlar küçük parmaklar için yuvarlatılmıştır ve boya toksik değildir.
• Eski Satış Fiyatı: 12,99
• Yeni Satış Fiyatı: 7,99
• Öne Çıkan Resim: Tahta bloklar resmini kesin. Tercih edilen boyut: 600 x 400 piksel
• Özellikler: Aşağıya Bakın

Nitelikler sekmesinde, ek bilgi modülü için değerleri girin.

• Malzeme: Doğal Çam Ağacı
• Boya: Toksik Olmayan Beyaz Boya
• Boya Renkleri: Beyaz, Mavi, Yeşil, Fuşya

3. Tema Oluşturucu'da Yeni Şablon Oluşturun

Divi Tema Oluşturucu'yu açın ve Yeni Şablon Ekle

Şimdi Divi tema oluşturucusuna gitme zamanı. Tasarımı orada yapacağız. A dd yeni bir şablon.

Tüm Ürünler İçin Özel Gövde Oluşturmaya Başlayın

Bu şablonu tüm ürünlerde kullanın ve gövdeyi oluşturmaya başlayın.

Tema Oluşturucu Pro İpucu:

Tema oluşturucu içinde bir ürün tasarımı oluştururken, değişiklikleri kontrol etmek için her zaman başka bir pencerede bir ürün sayfasını açık tutun.

4. Çocukların Ürün Tasarımını Yeniden Oluşturun

Yeni Bölüm Ekle

Arka plan

Gövde şablonu oluşturucunun içinde bir bölüm göreceksiniz. Bu bölümü açın ve arka plan rengini değiştirin.

• Arka Plan Rengi: Açık Pembe #f9f2f2

Yeni Satır Ekle

Sütun Yapısı

Şimdi 2 sütunlu yeni bir satır ekleyin.

boyutlandırma

Ardından, satırın boyutunu ayarlayın.

• Özel Oluk Genişliği: 2
• Genişlik: %90
• Maksimum Genişlik: 90%

Sütun 1 Ayarları

Arka plan

Sütun 1 ayarında, üst üste binen şekillerle oluşturduğunuz arka plan görüntüsü tasarımını ekleyin.

• Arka plan görüntüsü

aralık

Ardından, boşluğu buna göre ayarlayın.

• Üst ve Alt Dolgu: 5vw
• Sol ve Sağ Dolgu
  • Tablet: 2vw
  • Telefon: 0vw

Sütun 2 Ayarları

aralık

2. sütuna geçin ve boşluk değerlerini aşağıdaki gibi ayarlayın.

• Üst Dolgu: 1vw
• Alt Dolgu:
  • Tablet + Telefon: 1vw
• Sol ve Sağ Dolgu:
  • Masaüstü: 2vw
  • Tablet ve Telefon: 7vw

Sütun 1'e Woo Görüntü Modülü Ekle

İçerik

Şimdi modülleri ekleme zamanı. İlk olarak, 1. sütunda bir woo görüntü modülü ekleyin ve içerik altında bu ürünü seçin.

• Ürün: Bu Ürün

Elementler

Ardından, tasarımda gösterilecek öğeleri seçin.

• Öne Çıkan Resim: Evet
• Galeri: Hayır
• Satış Rozeti: Evet

Satış Rozeti Metni

Tasarım sekmesinde indirim rozeti değerlerini aşağıdaki gibi ayarlayın.

• Rozet Rengi: Şeffaf
• Yazı Tipi: Nunito
• Yazı Ağırlığı: Kalın
• Metin Rengi: Pembe #f24881
• Yazı Boyutu:
  • Masaüstü: 5vw
  • Tablet: 12vw
  • Telefon: 10vw

boyutlandırma

Ardından, şeylerin daha iyi oturması için aralığı ayarlayın.

• Üst Dolgu:
  • Masaüstü ve Tablet: 1vw
  • Telefon: 2vw
• Alt Dolgu: 0vw
• Sol ve Sağ Dolgu: 0vw

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

İçerik

İkinci sütuna bir woo başlık modülü ekleyin ve içerik sekmesinde bu ürünü seçin.

• Ürün: Bu Ürün

Arka plan

Modüle beyaz bir arka plan verin.

• Arka Plan Rengi: Beyaz #ffffff

Başlık Metni

Ardından, başlık metnine H1 düzeyinde stil verin.

• Başlık Seviyesi: H1
• Yazı Tipi: Nunito
• Yazı Tipi Ağırlığı: Ultra Kalın
• Metin Hizalama: Merkez
• Metin Rengi: Yeşilimsi Koyu Gri #314942
• Yazı Boyutu:
  • Masaüstü: 2.6vw
  • Tablet ve Telefon: 6.4vw

aralık

Modüldeki aralığı ayarlayarak devam edin.

• Üst ve Alt Dolgu:
  • Masaüstü: 1.5vw
  • Tablet ve Telefon: 2.5vw
• Sol ve Sağ Dolgu: 2vw

Sınır

Son olarak, hem masaüstü hem de duyarlı boyutlar için kenarlığı ayarlayın.

• Yuvarlatılmış köşeler:
  • Masaüstü: Dört köşenin tamamı 1vw
  • Tablet ve Telefon: Dört köşede 3vw

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

İçerik

Ürün başlığının altına bir woo açıklama modülü ekleyin. İçerik sekmesinde açıklama türünü ve bu ürünü seçin.

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

Arka plan

Ardından modüle bir arka plan rengi verin.

• Arka Plan Rengi: Beyaz #ffffff

Metin

Tasarım sekmesine gidin ve metni biçimlendirin.

• Yazı Tipi: Nunito
• Renk: Yeşilimsi Koyu Gri #314942
• Boy:
  • Masaüstü: 1vw
  • Tablet: 2.5vw
  • Telefon: 3vw

aralık

Ardından, modül için aralığı ayarlayın.

• Üst boşluk:
  • Masaüstü ve Tablet: -0.5vw
  • Telefon: -3vw
• Üst ve Alt Dolgu:
  • Masaüstü: 1.5vw
  • Tablet ve Telefon: 4vw
• Sol ve Sağ Dolgu:
  • Masaüstü: 2vw
  • Tablet ve Telefon: 6vw

Sınır

Son olarak yuvarlatılmış köşeleri ekleyin.

• Yuvarlatılmış köşeler:
  • Masaüstü: Dört köşenin tamamı 1vw
  • Tablet ve Telefon: Dört köşede 3vw

Sütun 2'ye Woo Ek Bilgi Modülü ekleyin

İçerik

Açıklama modülünün altına woo ek bilgi modülünü ekleyin. İçerik sekmesinde bu ürünü seçin.

• Ürün: Bu Ürün

Arka plan

Ardından, beyaz bir arka plan ekleyin.

• Arka Plan Rengi: Beyaz #ffffff

Metin

Tasarım sekmesinde, farklı metin türlerini şekillendirmeye başlayın. İlk olarak, niteliklerin değerlerine uygulanan metin.

• Yazı Tipi: Nunito
• Tarz: İtalik
• Renk: Yeşilimsi Koyu Gri #314942
• Boy:
  • Masaüstü: 0.8vw
  • Tablet: 1.5vw
  • Telefon: 2vw

Başlık Metni

İkinci olarak, başlık metnine stil verin.

• Yazı Tipi: Nunito
• Ağırlık: Ultra Kalın
• Renk: Pembe #f24881
• Boy:
  • Masaüstü: 1.7vw
  • Tablet: 3vw
  • Telefon: 3.5vw
• Çizgi Yüksekliği: 1em

Özellik Metni

Üçüncüsü, nitelik metnine stil verin.

• Yazı Tipi: Nunito
• Ağırlık: Kalın
• Renk: Yeşilimsi Koyu Gri #314942
• Boy:
  • Masaüstü: 0.9vw
  • Tablet: 2vw
  • Telefon: 3vw

aralık

Ardından, aralığı aşağıdaki gibi ayarlayın.

• Üst boşluk:
  • Masaüstü ve Tablet: -0.5vw
  • Telefon: -3vw
• Üst Dolgu:
  • Masaüstü: 1.5vw
  • Tablet: 3vw
  • Telefon: 5vw
• Sol Dolgu: 1vw
• Sağ Dolgu:
  • Masaüstü: 2vw
  • Tablet ve Telefon: 5vw

Sınır

Son olarak yuvarlatılmış köşeleri ekleyin.

• Yuvarlatılmış köşeler:
  • Masaüstü: Dört köşenin tamamı 1vw
  • Tablet ve Telefon: Dört köşede 3vw

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

İçerik

Bir woo fiyat modülü ekleyin ve içerik sekmesinde bu ürünü seçin.

• Ürün: Bu Ürün

Arka plan

Ayrıca, öne çıkması için modüle pembe bir arka plan ekleyin.

• Arka Plan Rengi: Pembe #f24881

Satış Eski Fiyat Metni

Tasarım sekmesine gidin ve indirimli eski fiyatı şekillendirin.

* Bir ürüne yeni ve eski indirimli fiyat eklediğinizde, woo fiyat modülü her ikisini de tema oluşturucuda göstermez. Nihai tasarımın nasıl göründüğünü görmek için gerçek ürün sayfasını kontrol edin.

• Yazı Tipi: Nunito
• Renk: Beyaz #ffffff
• Boy:
  • Masaüstü: 1.5vw
  • Tablet: 2.5vw
  • Telefon: 3vvw

Satış Yeni Fiyat Metni

Yeni fiyatı şekillendirerek devam edin.

• Yazı Tipi: Nunito
• Ağırlık: Kalın
• Renk: Beyaz #ffffff
• Boy:
  • Masaüstü: 2vw
  • Tablet: 2vw
  • Telefon: 4vw
• Harf Aralığı: 1px

aralık

Ardından, modülün aralığını ayarlayın.

• Üst boşluk:
  • Masaüstü ve Tablet: -0.5vw
  • Telefon: -3vw
• Üst ve Alt Dolgu:
  • Masaüstü: 1.5vw
  • Tablet ve Telefon:
• Sol ve Sağ Dolgu:
  • Masaüstü: 2vw
  • Tablet ve Telefon: 5vw

Sınır

Son olarak yuvarlatılmış köşeleri ekleyin.

• Yuvarlatılmış köşeler:
  • Masaüstü: Dört köşenin tamamı 1vw
  • Tablet ve Telefon: Dört köşede 3vw

Son tasarım

Tasarımın asıl üründe nasıl göründüğü ve tema oluşturucuda nasıl göründüğü budur.

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

İçerik

Fiyat modülünün altına bir sepete ekle modülü yerleştirin. İçerik sekmesinde bu ürünü seçin.

* Sepete ekle modülünü eklediğinizde, üstte renk seçeneği için bir açılır menü olduğunu fark edeceksiniz. Bunu ürün sayfanızda belirtmediyseniz, nihai tasarımınızda görünmeyecektir. Tema oluşturucunun içinde oluştururken canlı ürünü kontrol ederek emin olabilirsiniz.

• Ürün: Bu Ürün

Elementler

Devam ederek, modülde gösterilecek öğeleri seçin.

• Miktar Alanı: Kapalı
• Stok: Kapalı

Arka plan

Ardından, beyaz bir arka plan rengi ekleyin.

• Arka Plan Rengi: Beyaz #ffffff

Buton

Şimdi stil düğmesi zamanı. Değerleri aşağıdaki gibi ekleyin.

• Yazı Boyutu:
  • Masaüstü: 2vw
  • Tablet: 3vw
  • Telefon: 5vw
• Metin Rengi: Pembe #f24881
• Arka Plan Rengi: Beyaz #ffffff
• Harf Aralığı: 1px
• Yazı Tipi: Nunito
• Ağırlık: Ağır
• Üst ve Alt Marj: -0.3vw

aralık

Ardından, modülün aralığını ayarlayın.

• Üst boşluk:
  • Masaüstü ve Tablet: -0.5vw
  • Tablet: -3vw
• Üst ve Alt Dolgu: 0vw
• Sol ve Sağ Kenar Boşluğu: 0vw

Sınır

Son olarak, yuvarlak bir kenarlık ekleyin.

• Yuvarlatılmış köşeler:
  • Masaüstü: Dört köşenin tamamı 1vw
  • Tablet ve Telefon: Dört köşede 3vw

Ön izleme

Farklı ekran boyutlarındaki bitmiş tasarıma son bir göz atalım. Çocuklara yönelik ürün tasarım şablonu artık mağazanızdaki tüm ürünler için geçerli olacak. Hepsinin güzelce oturduğundan emin olmak için görüntü boyutlarını kontrol ettiğinizden emin olun.

masaüstü

Mobil

Bu, Çocukların Ürün Sayfasında Bir Pakettir!

Bu gönderide, bir çocuk ürün sayfası için bir tasarımın nasıl yeniden oluşturulacağını gösterdik. Yumuşak kenarları, eğlenceli bir arka plan tasarımı ve mutlu renkleri olan bu tasarım, tüm ürünlerinizin davetkar ve satın almaya hazır görünmesini sağlayacaktır. Bu tasarımı beğeneceğinizi ve kendi Divi kreasyonlarınıza ilham vermek için kullanacağınızı umuyoruz. Düşüncelerinizi bize yorumlarda bırakın!