Divi's Theme Builder ile Site Genelinde Woo Ürün Sayfası Şablonu Nasıl Oluşturulur

Divi'nin yeni Tema Oluşturucusu, Divi web sitelerimizi oluşturma şeklimizi otomatik hale getiriyor. Örneğin ürün sayfalarını tasarlarken, oluşturma sürecinden yalnızca bir kez geçmemiz gerekiyor ve oradan tüm ürün sayfalarımıza tasarımı atayabiliyoruz. Bugünün kullanım örneği eğitiminde size tam olarak bunu göstereceğiz. Divi'yi kullanarak site çapında bir woo ürün sayfası şablonu oluşturma konusunda size rehberlik edeceğiz. Belirli bir ürünün varsayılan woo ürün sayfasını, Serigrafi Düzen Paketi ile eşleştirmek için şekillendirerek başlayacağız. Düzeni Divi Kitaplığımıza kaydederek devam edeceğiz ve ardından oluşturduğumuz yeni bir şablonda global gövde olarak kullanacağız.

Hadi hadi bakalım!

Ön izleme

Örnek Ürün Sayfası Şablonunu ÜCRETSİZ İndirin

Ellerinizi ücretsiz örnek ürün sayfası şablonuna 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!

1. Mevcut Üründe Divi Builder'ı Etkinleştirin

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

Bir ürün sayfası şablonu oluşturmaya yaklaşmanın iki yolu vardır; Global gövdeyi ürün sayfası şablonunuzun içinde düzenlemeye başlayabilir veya tasarımı önce tek bir ürün sayfasında oluşturabilirsiniz. Ben şahsen tasarımın önce tek bir ürün sayfasında oluşturulmasını tercih ederim. Tüm ürün sayfalarınıza aynı anda uygulamadan önce tasarımı yayınlamanıza ve canlı sonucu görmenize olanak tanır. Bugün ele alacağımız yaklaşım bu, bu yüzden devam edin ve mevcut sayfalarınızdan birini açın ve sayfa düzenini tam genişliğe değiştirin.

Visual Builder'a Geçin

Sayfa ayarlarında sayfa düzenini değiştirdikten sonra, ön uçta oluşturmaya başlayabilirsiniz.

2. Düzeni Web Sitesi/Düzen Paketinin Tarzına Göre Özelleştirin

Arka Plan Renkleri

Visual Builder'ın içinde ihtiyacınız olan tüm woo öğelerini fark edebilirsiniz. Bu modüllerin bazı ayarlarını Screen Printing Layout Pack ile eşleştirmek için değiştireceğiz. Yaptığımız değişiklikler minimum düzeydedir ve yalnızca ürün sayfanıza belirli bir tasarım stili uygulamanıza yardımcı olur. Kişisel bir proje üzerinde çalışıyorsanız, özelleştirmeyle istediğiniz kadar ileri gitmekten çekinmeyin, ancak bu eğitim için bunu basit tutmaya çalışacağız. Bazı arka plan renklerini değiştirerek başlayacağız.

• Woo Cart Bildirim Modülü: Arka Plan Rengi

Woo Cart Notice Module'ü açın ve arka plan rengini değiştirin.

• Arka Plan Rengi: #29314f

• Woo Tabs Modülü: Sekmeler Metin/Arka Plan Renkleri

Woo Tabs Modülünü açarak devam edin ve ardından sekme metnini ve arka plan renklerini değiştirin.

• Etkin Sekme Arka Plan Rengi: #ffffff
• Etkin Olmayan Sekme Arka Plan Rengi: #29314f
• Etkin Sekme Metni Rengi: #000000
• Sekme Metni Rengi: #ffffff

Gövde Metni Ayarları

Ayrıca aşağıdaki modüllerin gövde metninde de bazı değişiklikler yapmak istiyoruz:

• Woo Breadcrumb Modülü: Metin Ayarları
• Woo Sepete Ekle Modülü: Metin Ayarları
• Woo Açıklama Modülü: Metin Ayarları
• Woo Meta Modülü: Metin Ayarları
• Woo Tabs Modülü: Metin Ayarları
• Woo Tabs Modülü: Sekmeler Metin Ayarları

Yukarıda listelenen her bir modülü açın ve metin boyutunu ve metin satırı yüksekliğini aşağıdaki gibi değiştirin:

• Metin Boyutu: 16px (Masaüstü ve Tablet), 14px (Telefon)
• Metin Satırı Yüksekliği: 2em (Masaüstü ve Tablet), 1,7em (Telefon)

Başlık Metni Ayarları

Ayrıca başlıklarımızın stilini de değiştiriyoruz. Değişiklikleri bu modüllerin her birine uygulayacağız:

• Woo Başlık Modülü: Başlık Metni Ayarları
• Woo İlgili Ürünler Modülü: Başlık Metni Ayarları
• Woo İlgili Ürünler Modülü: Ürün Başlığı Metin Ayarları

Değiştirdiğimiz iki şey başlık yazı tipi ve başlık yazı tipi ağırlığıdır.

• Başlık Yazı Tipi: Roboto
• Başlık Yazı Tipi Ağırlığı: Kalın

Bağlantı Renkleri

Devam ederek, tıklanabilir öğelerin vurgulandığından emin olmak istiyoruz. Aşağıdaki iki modülün bağlantı metni rengini değiştireceğiz:

• Woo Breadcrumb Modülü: Bağlantı Metni Rengi
• Woo Meta Modülü: Bağlantı Metni Rengi

Bu, kullandığımız renk kodudur:

• Bağlantı Metni Rengi: #ff7145

Fiyat Metni Ayarları

Woo Fiyat Modülünden başlayarak fiyat metnini de biçimlendirmek istiyoruz.

• Woo Fiyat Modülü: Fiyat Metni Ayarları

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

• Fiyat Yazı Tipi: Roboto
• Fiyat Yazı Tipi Ağırlığı: Kalın
• Fiyat Metin Rengi: #ff7145

Daha sonra Woo İlgili Ürün Modülünü açın.

• Woo İlgili Ürün Modülü: Fiyat Metni Ayarları

Ve fiyat metin ayarlarında bazı değişiklikler yapın:

• Fiyat Yazı Tipi: Roboto
• Fiyat Yazı Tipi Ağırlığı: Kalın
• Fiyat Metin Rengi: #ff7145
• Fiyat Metin Boyutu: 16px

Düğme Ayarları

Ürün sayfamızda da iki düğme var, her birinin stillendirilmesi gerekiyor.

• Woo Cart Bildirim Modülü: Düğme Ayarları
• Woo Sepete Ekle Modülü: Düğme Ayarları

Modüllerin düğme ayarlarını aşağıdaki gibi değiştirin:

• Düğme İçin Özel Stiller Kullan: Evet
• Düğme Metin Boyutu: 14px
• Düğme Metin Rengi: #ffffff
• Düğme Arka Plan Rengi: #ff7145
• Düğme Kenar Genişliği: 2px
• Düğme Kenar Rengi: #ff7145

• Düğme Sınır Yarıçapı: 100 piksel
• Düğme Harf Aralığı: 1px
• Düğme Yazı Tipi: Roboto
• Düğme Yazı Ağırlığı: Kalın
• Düğme Yazı Tipi Stili: Büyük Harf

• Üst Dolgu: 20px
• Alt Dolgu: 20px
• Sol Dolgu: 30px
• Sağ Dolgu: 30px

ek detaylar

Sayfamızda ikinci satırın 2. sütun arka planından başlayarak ürün sayfası tasarımına uygulamak istediğimiz bazı ek değişiklikler var.

• Sütun 2: Arka Plan Rengi

Aşağıdaki renk kodunu kullanın:

• Arka Plan Rengi: #efefef

Sütun 2 aralığını da değiştiriyoruz.

• Sütun 2: Aralık

Aşağıdaki boşluk değerlerini kullanın:

• Üst Dolgu: 50px
• Alt Dolgu: 50px
• Sol Dolgu: 50px
• Sağ Dolgu: 50px

Son olarak, Woo Add To Cart Modülümüzün alan ayarlarını biçimlendirmek isteyeceğiz.

• Woo Sepete Ekle Modülü: Alan Ayarları

Aşağıdaki değişiklikleri uygulayın:

• Alanlar Arka Plan Rengi: #efefef
• Alan Metin Rengi: #7f7f7f
• Alan Yazı Tipi: Roboto
• Alanlar Yazı Tipi Ağırlığı: Kalın

3. Ürünler için Yeni Şablon Oluşturun ve Gövde Alanında Ürün Sayfası Düzenini İçe Aktarın

Ürün Sayfası Düzenini Divi Kitaplığına Kaydet

Ürün sayfası tasarımını tamamladıktan sonra, tüm düzeni Divi Kitaplığınıza kaydedebilirsiniz.

Divi Theme Builder'a gidin

Düzeni bir ürün sayfası şablonuna dönüştürme zamanı! Bunu yapmak için Divi ayarlarınızda Tema Oluşturucu'ya gidin.

Yeni Şablon Ekle

'Yeni Şablon Ekle'ye tıklayarak devam edin.

Şablonun tüm ürünlerinize aynı anda uygulanmasını sağlamak için şablon ayarlarınızın 'Kullanım Süresi' sekmesinde 'Tüm Ürünler'i seçin.

Kitaplıktan Özel Gövde Ekle

Ardından, 'Küresel Gövde Ekle'yi tıklayın. Özel gövdeyi sıfırdan oluşturmak yerine Divi Kitaplığımıza yeni kaydettiğimiz düzeni seçeceğiz.

Kaydedilmiş düzeninizi seçmek için 'Kaydedilen Düzenleriniz' sekmesine gidin.

4. Tema Oluşturucu Seçeneklerini Kaydet ve Mevcut Ürünlerde Şablonu Görüntüle

Şablonunuzun gövdesi oluşturulduktan sonra geriye yapmanız gereken tek şey kalıyor; değişiklikleri kaydedin. Yeni şablonunuz kaydedilir kaydedilmez, ürünlerinizin her birinin önizlemesini görebilir ve aynı gövde şablonunun ona uygulandığını fark edebilirsiniz!

Ön izleme

Son düşünceler

Bu gönderide, site çapında bir ürün sayfası şablonunun nasıl oluşturulacağını gösterdik. Divi'nin woo modüllerini kullanarak mevcut bir ürün sayfasını değiştirerek başladık. Serigrafi Düzen Paketi ile eşleştirmek için ürün sayfasında bazı minimal değişiklikler yaptık. Ürün sayfası düzenini Divi Kütüphanemize kaydederek devam ettik. Daha sonra yeni bir şablon oluşturduk ve tüm web sitemize uygulanmasını sağlamak için düzeni ürün sayfası şablonumuzun gövdesine yükledik. Bu öğreticinin Divi'nin yeni Tema Oluşturucusu ile güzel e-ticaret web siteleri oluşturmanıza yardımcı olacağını umuyoruz! Herhangi bir sorunuz varsa, aşağıdaki yorum bölümüne bir yorum bıraktığınızdan emin olun.

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.