Divi Ürün Sayfanıza Kaydırmalı Ürün Bilgisi Nasıl Eklenir

Ürün sayfalarınızı tasarlama şekliniz, genel olarak mağazanız hakkında çok şey söylüyor. Ürün sayfanızın tasarımı, satın alma deneyiminin önemli bir parçasıdır, bu nedenle ekstra yol kat etmek genellikle buna değer. Biraz daha etkileşimli bir ürün sayfası oluşturmak istiyorsanız bu gönderiyi seveceksiniz. Bu öğreticide, güzel bir şekilde oluşturulmuş bir ürün sayfası düzeninin içine kaydırmalı ürün bilgilerini nasıl ekleyeceğinizi göstereceğiz. Ayrıca bu düzeni bir ürün sayfası şablonuna dönüştüreceğiz ve JSON dosyasını ücretsiz olarak indirebileceksiniz!

Hadi hadi bakalım.

Ön izleme

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

masaüstü

Mobil

Slide-In Ürün Sayfası Şablonunu ÜCRETSİZ olarak indirin

Sürgülü ü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.

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

Ürün Detayları

Yeni bir ürün oluşturarak veya mevcut bir ürünü açarak başlayın. Tasarımda tam olarak aynı sonucu elde etmek için ürününüze aşağıdaki ayrıntıları eklemeniz gerekir:

• İsim
• Açıklama
• Şeffaf arka plana sahip ürün resmi
• Fiyat
• Kategori

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

Divi Builder'ı etkinleştirin ve sağ üst köşedeki sayfa düzenini değiştirin.

• Sayfa Düzeni: Tam Genişlik

Visual Builder'a Geçin

Sayfa düzenini değiştirdikten sonra, 'Ön Uçta Oluştur' seçeneğine tıklayarak Divi'nin Görsel Oluşturucusuna geçebilirsiniz.

2. Kaydırmalı Ürün Bilgisi Ürün Sayfası Düzeni Oluşturun

Sayfadaki Birden Çok Satırı Kaldır

Ürün sayfası düzenleyicisinin içinde ürününüzle ilgili çeşitli öğeleri fark edeceksiniz. Sadece ikinci satırın öğelerine ihtiyacımız var, bu yüzden devam edin ve bölümün içindeki ilk ve son satırı silin.

Bölüm Ayarlarını Değiştir

Arka plan rengi

Kaydırmalı ürün bilgi düzenimizi oluşturmak için farklı öğeleri değiştirmeye başlama zamanı! Bölüm ayarlarını açın ve arka plan rengini değiştirin.

• Arka Plan Rengi: #ffe4a5

boyutlandırma

Boyutlandırma ayarlarına da bir minimum yükseklik ekleyin. Bu adım, bölümün tarayıcınızın tüm yüksekliğini kaplamasını sağlar.

• Min Yükseklik: 100vh

aralık

Ardından, boşluk ayarlarına gidin ve tüm varsayılan üst ve alt dolguyu kaldırın.

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

görünürlük

Bölümün taşmalarını da gizleyin. Bu, animasyonlar yapılırken hiçbir yatay çubuğun görünmemesini sağlamaya yardımcı olacaktır.

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

Satır Ayarlarını Değiştir

boyutlandırma

Ardından, satır ayarlarını açın ve boyutlandırma ayarlarını farklı ekran boyutlarında değiştirin.

• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1
• Genişlik: %100
• Maksimum Genişlik: %100 (Masaüstü), %90 (Tablet ve Telefon)

aralık

Satırın varsayılan üst ve alt dolgusunu da kaldırın.

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

Konum

Ardından, konum ayarlarına gidin ve ayarları uygun şekilde değiştirerek satırın bölümün altında kaldığından emin olun:

• Konum: Mutlak (Masaüstü), Varsayılan (Tablet ve Telefon)
• Yer: Alt Merkez

Sütun 2 Ayarlarını Değiştir

Arka plan rengi

Ardından, ikinci sütunda bazı değişiklikler yapacağız. Beyaz bir arka plan rengi kullanın.

• Arka Plan Rengi: #FFFFFF

aralık

Ardından, boşluk ayarlarına bazı özel dolgu değerleri ekleyin.

• Üst Dolgu: 10vw
• Alt Dolgu: 10vw
• Sol Dolgu: 8vw
• Sağ Dolgu: 8vw

Varsayılan Filtre

Sütunun filtre ayarlarına gidin ve parlaklık, ters çevirme ve sepya filtrelerinin varsayılan değerlerini normal durumda tuttuğundan emin olun.

• Parlaklık: %100
• Ters Çevir: %0
• Sepya: %0

Vurgulu Filtre

Ancak üzerine gelindiğinde değerleri buna göre değiştireceğiz:

• Parlaklık: %49
• Ters Çevir: %100
• Sepya: %100

Konum

Ayrıca, aşağıdaki konum ayarlarını uygulayarak sütunun satır kapsayıcısının sağ alt köşesine yerleştirildiğinden emin oluyoruz:

• Konum: Mutlak (Masaüstü), Varsayılan (Tablet ve Telefon)
• Konum: Sağ Alt

Sütun 2'deki Woo Başlık Modülünü Değiştirin

Başlık Metni Ayarları

2. sütundaki farklı modülleri özelleştirmeye başlama zamanı! Woo Başlık Modülünü açın ve H1 metin ayarlarını aşağıdaki gibi değiştirin:

• Başlık Yazı Tipi: Playfair Gösterimi
• Başlık Metin Rengi: #000000
• Başlık Metin Boyutu: 3vw (Masaüstü), 5vw (Tablet), 7vw (Telefon)

Sütun 2'deki Woo Fiyat Modülünü Değiştirin

Fiyat Metni Ayarları

Ardından Woo Fiyat Modülü ayarlarını açın ve fiyat metni ayarlarını değiştirin.

• Fiyat Yazı Tipi: Poppins
• Fiyat Metin Rengi: #e5bc87
• Fiyat Metin Boyutu: 1.4vw (Masaüstü), 3vw (Tablet), 4vw (Telefon)

aralık

Farklı ekran boyutlarına da bazı özel üst ve alt kenar boşlukları ekleyin.

• Üst Marj: 2vw (Masaüstü), 4vw (Tablet ve Telefon)
• Alt Kenar Boşluğu: 3vw (Masaüstü), 5vw (Tablet ve Telefon)

Sütun 2'deki Woo Açıklama Modülünü Değiştirin

Metin Ayarları

Woo Açıklama Modülüne geçin. Modülün metin ayarlarını uygun şekilde değiştirin:

• Metin Yazı Tipi: Poppins
• Metin Yazı Tipi Ağırlığı: Hafif
• Metin Boyutu: 0.8vw (Masaüstü), 1.8vw (Tablet), 2.7vw (Telefon)
• Metin Satırı Yüksekliği: 2.1em

aralık

Biraz duyarlı alt kenar boşluğu da ekleyin.

• Alt Kenar Boşluğu: 3vw (Masaüstü), 5vw (Tablet ve Telefon)

Sütun 2'de Woo Sepete Ekle Modülünü Değiştirin

Alan Ayarları

Sırada Woo Sepete Ekle Modülü var. Modülün alan ayarlarını değiştirin.

• Alanlar Arka Plan Rengi: rgba(255,255,255,0)
• Alan Metin Rengi: #000000
• Alanlar Yazı Tipi: Poppins
• Alanlar Metin Boyutu: 0.9vw (Masaüstü), 2vw (Tablet), 3vw (Telefon)

• Tüm Köşeler: 0px
• Alanlar Alt Kenar Genişliği: 1px
• Alanlar Alt Kenarlık Rengi: #e5bc87

Düğme Ayarları

Düğme ayarlarına gidin ve düğmeyi buna göre biçimlendirin:

• Düğme İçin Özel Stiller Kullan: Evet
• Düğme Metin Boyutu: 0.9vw (Masaüstü), 2vw (Tablet), 3vw (Telefon)
• Düğme Metin Rengi: #ffffff
• Gradyan Rengi 1: #e5bd89
• Gradyan Rengi 2: #e5bc87
• Gradyan Türü: Doğrusal
• Gradyan Yönü: 153 derece
• Düğme Kenar Genişliği: 0px

• Düğme Sınır Yarıçapı: 1 piksel
• Düğme Yazı Tipi: Poppins

• Üst Dolgu: 1vw (Masaüstü), 2vw (Tablet), 3vw (Telefon)
• Alt Dolgu: 1vw (Masaüstü), 2vw (Tablet), 3vw (Telefon)
• Sol Dolgu: 3vw (Masaüstü), 6vw (Tablet), 9vw (Telefon)
• Sağ Doldurma: 3vw (Masaüstü), 6vw (Tablet), 9vw (Telefon)

aralık

Farklı ekran boyutlarına biraz düğme marjı ekleyerek modülün ayarlarını tamamlayın.

• Alt Kenar Boşluğu: 2vw (Destkop), 4vw (Tablet ve Telefon)

Sütun 2'deki Woo Meta Modülünü Değiştirin

Metin Ayarları

Woo Meta Modülünü açarak devam edin ve metin ayarlarını değiştirin.

• Meta Yazı Tipi: Poppins
• Meta Yazı Tipi Ağırlığı: Hafif
• Meta Metin Boyutu: 0.8vw (Masaüstü), 1.8vw (Tablet), 3vw (Telefon)

Bağlantı Metni Ayarları

Bağlantı metni rengini de değiştirin.

• Bağlantı Metni Rengi: #e5bc87

2. Sütun'a Kod Modülü Ekle

Woo Image Module'ün yakınlaştırma arka plan rengini değiştirmek için, 2. sütundaki yeni Kod Modülüne yerleştireceğimiz küçük bir CSS koduna ihtiyacımız olacak.

Woo Görüntü Yakınlaştırma Arka Plan Rengini Değiştirmek için CSS Kodu Ekleyin

Aşağıdaki CSS kod satırlarını Kod Modülüne ekleyin:

<style>
.zoomImg {
background-color: #FFE4A5 !important;
}
</style>

3. Konteynerlere Senkronize Animasyon Ayarları Ekleyin

Woo Görüntü Modülü

Artık ürün sayfamızdaki farklı öğeleri şekillendirdiğimize göre, kaydırarak ürün bilgisi efektini gerçekleştirme zamanı! Bunu başarmak için Divi'nin yerleşik animasyon ayarlarını kullanacağız. Sütun 1'deki Woo Image Module'ü açın ve aşağıdaki animasyonu uygulayın:

• Animasyon Stili: Slayt
• Animasyon Yönü: Yukarı
• Animasyon Başlatma Opaklığı: %50
• Animasyon Hız Eğrisi: Kolaylık

Sütun 1

Sonraki sütun 1 ayarlarını açın ve aşağıdaki animasyon ayarlarını kullanın:

• Animasyon Stili: Slayt
• Animasyon Yönü: Sol (Masaüstü), Yukarı (Tablet ve Telefon)
• Animasyon Gecikmesi: 950ms (Masaüstü), 0vw (Tablet ve Telefon)
• Animasyon Yoğunluğu: %25
• Animasyon Opaklığı Başlatma: %100
• Animasyon Hızı Eğrisi: Kolay Giriş-Çıkış

2. sütun

Son olarak, aşağıdaki animasyon ayarlarını sütun 2'ye uygulayın:

• Animasyon Stili: Slayt
• Animasyon Yönü: Sol (Masaüstü), Yukarı (Tablet ve Telefon)
• Animasyon Süresi: 1200ms
• Animasyon Gecikmesi: 800ms (Masaüstü), 0ms (Tablet ve Telefon)
• Animasyon Opaklığı Başlatma: %100
• Animasyon Hızı Eğrisi: Kolay Giriş-Çıkış

4. Ürün Sayfası Düzenini Şablona Dönüştürün

Düzeni Divi Kitaplığına Kaydet

Tüm ürün sayfası tasarımını tamamladığınızda, onu Divi Kitaplığınıza kaydedebilirsiniz. Yeni bir ürün sayfası şablonu oluşturmak için bu kayıtlı ürün sayfası düzenini kullanacağız.

Divi Tema Oluşturucu'ya Git ve Yeni Şablon Ekle

Divi Tema Oluşturucu'ya gidin ve yeni bir şablon ekleyin.

Tüm Ürünlerde Şablon Kullanın

Tüm ürünlerde yeni şablonu kullanın.

• Kullanım Yeri: Tüm Ürünler

Ürün Sayfası Şablonunun Gövdesine Düzen Yükle

Ardından, 'Özel Gövde Ekle'yi ve 'Kütüphaneden Ekle'yi tıklayın.

'Kaydedilen Düzenleriniz'e gidin ve Divi Kitaplığınıza yüklediğiniz ürün sayfası düzenini seçin.

5. Tema Oluşturucu Değişikliklerini Kaydet ve Sonucu Görüntüle

Düzeni yeni ürün sayfası şablonunuza yükledikten sonra yapmanız gereken tek şey, tüm Tema Oluşturucu değişikliklerini kaydetmek ve sonucu web sitenizde görüntülemek!

Ön izleme

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

masaüstü

Mobil

Son düşünceler

Bu gönderide, size kayan bir ürün bilgisi düzenini nasıl tasarlayacağınızı göstererek ürün sayfalarınızı nasıl renklendireceğinizi gösterdik. Bu, ürün sayfalarınıza ek etkileşim eklemenin harika bir yoludur. 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.