Divi Ürün Sayfası Şablonunuza Yapışkan Ürün Resimleri Nasıl Eklenir

Çevrimiçi ürün satın almak söz konusu olduğunda, satışı kapatmak için harika ürün görselleri çok önemlidir. Bu nedenle çoğu ürün sayfasının üst kısmında bu ürün resimleri bulunur, bu nedenle alıcıların ilk gördüğü şey budur. Ancak, kullanıcı ürün hakkında daha fazla bilgi (açıklamalar, incelemeler, vb.) görüntülemek için sayfayı aşağı kaydırdıkça, ana ürün resmi artık görünmez. Bu ürün resimlerini görünürde tutmanın bir yolu, potansiyel bir alıcı ürün bilgilerinize göz atarken görüntüde kalan yapışkan bir ürün resmi eklemektir.

Bu eğitimde, Divi ürün sayfası şablonunuza nasıl yapışkan ürün resimleri ekleyeceğinizi göstereceğiz. Bunu yapmak için Divi'nin WooCommerce ürün görseli modülünü, orijinal ürün görseli gözden kaybolduğu gibi sayfanın en üstünde gösterecek ve yapıştıracak şekilde optimize edebiliriz.

Başlayalım!

Gizlice Bakış

İşte bu eğitimde oluşturacağımız tasarıma hızlı bir bakış.

Düzeni ÜCRETSİZ İndirin

Bu eğitimdeki tasarımlara el koymak için önce aşağıdaki düğmeyi kullanarak indirmeniz gerekecek. İ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!

https://youtu.be/vwfPFqyVaNM

Youtube Kanalımıza Abone Olun

Şablon Nasıl Yüklenir

Divi Theme Builder'a gidin

Şablonu yüklemek için WordPress web sitenizin arka ucundaki Divi Tema Oluşturucu'ya gidin.

Web Sitesi Şablonu Yükle

Ardından, sağ üst köşede iki oklu bir simge göreceksiniz. simgesine tıklayın.

İçe aktarma sekmesine gidin, bu gönderide indirebildiğiniz JSON dosyasını yükleyin ve 'Divi Tema Oluşturucu Şablonlarını İçe Aktar'a tıklayın.

Divi Tema Oluşturucu Değişikliklerini Kaydet

Dosyayı yükledikten sonra, Tüm Gönderiler'e atanmış yeni bir vücut alanına sahip yeni bir şablon göreceksiniz. Şablonun etkinleştirilmesini istediğiniz anda Divi Tema Oluşturucu değişikliklerini kaydedin.

Bu şeyi sıfırdan inşa etmeyi öğrenebilmemiz için öğreticiye geçelim, olur mu?

Divi Ürün Sayfası Şablonunuza Yapışkan Ürün Resimleri Nasıl Eklenir

Tema Oluşturucu Paketi 5 Ürün Sayfası Şablonunu Yükleme

Başlamak için, hazır ürün sayfası şablonlarımızdan birini ekleyerek tasarıma hızlı bir başlangıç ​​yapacağız. Tema Oluşturucu şablonunu içe aktarmak için aşağıdakileri yapmanız gerekir:

1. Divi Tema Oluşturucu'ya gidin
2. Sayfanın sağ üst köşesindeki taşınabilirlik simgesini tıklayın.
3. Taşınabilirlik açılır penceresinde İçe Aktar sekmesini seçin.
4. Divi Divi Theme Builder 5 Ürün Şablonu Dosyasını indirin ve içe aktarın. Paketi buradan indirdikten sonra, dosyayı açın ve içe aktarmanız gereken “divi-theme-builder-pack-5-product-page-template.json” dosyasını bulacaksınız.
5. İçe Aktar Düğmesine tıklayın
6. Şablon içe aktarıldıktan sonra, şablon düzenini düzenlemek için şablonun özel gövde alanındaki düzenle simgesine tıklayın.

Yeni Satır Ekle

Kullanıcı, ürün resmini içeren üst bölümü geçtikten sonra ürün resminin gösterilmesini istiyoruz (burada göstermeye gerek yok). Bu nedenle, mizanpajın üst bölümünün altındaki yeni bir bölüme ekleyeceğiz.

Devam edin ve üst bölümün altına yeni bir normal bölüm ekleyin.

Yeni bölümün ayarlarını açın ve dolguyu güncelleyin:

• Dolgu: 0 piksel üst, 0 piksel alt

Gelişmiş sekmesine gidin ve z dizinini güncelleyin:

• Z İndeksi: 13

Bu nedenle, resim (bu bölümün alt öğesi), kaydırma sırasında sayfadaki diğer bölümlerin/öğelerin üzerinde kalacaktır.

Satırı Ekle

Ardından, bölüme tek sütunlu bir satır ekleyin.

Satır ayarlarını açın ve satır hizalamasını ve dolgusunu ayarlayın:

• Satır Hizalama: Sağ
• Dolgu: 0 piksel üst, 0 piksel alt

Ürün Resmi Ekle

Artık kaydırmada sayfanın en üstüne yapışacak ürün resmini eklemeye hazırız. Ürün görselini eklemek için üst kısımda bulunan mevcut ürün görseli modülünü kopyalayıp yeni satırımıza yapıştırınız.

Woo Görüntü Ayarları

Yeni woo images modülünün ayarlarını açın ve içeriği aşağıdaki gibi ayarlayın:

• Galeri Resimlerini Göster: KAPALI
• Satış Rozetini Göster: KAPALI

(NOT: isterseniz galeri resimlerini saklayabilirsiniz. Sadece çok fazla yer kaplamamaya dikkat edin çünkü bu resim modülü sayfadaki diğer öğelerin üzerinde gezinecektir.)

Tasarım sekmesi altında, Tam Genişliğe Zorla seçeneğini “EVET” olarak güncelleyin.

Ardından aşağıdakileri güncelleyin:

• Maksimum Genişlik: 300 piksel (masaüstü), 200 piksel (telefon)
• Modül Hizalaması: Sağ

Dolguyu ayarlayın:

• Dolgu: 10 piksel üst, 10 piksel sağ

Gelişmiş sekmesi altında aşağıdakileri güncelleyin:

• Z İndeksi: 1
• Yapışkan Konum: En Üstte Yapış

Bu, kullanıcı bu resmi kaydırdığında resmin sayfanın en üstüne yapışmasına neden olur.

Yapışkan konum yerleştirildiğinde, tasarım sekmesine geri dönün ve opaklık filtresini güncellemek için yapışkan seçeneğini kullanın, böylece görüntüyü yapışkan hale gelene kadar gizler. Ayarın üzerine gelip küçük resim simgesine tıklayarak yapışkan stil seçeneğini dağıtabilirsiniz.

• Opaklık: %0 (masaüstü), %100 (yapışkan)

Bölüm, Satır ve Sütun Aralığını Kaldırın

Şu anda, yerleşimimizin akışı içinde yeni ürün resminin kullandığı bazı istenmeyen boşluklar var. Bu boşluğu kaldırmak için tek yapmamız gereken, sütuna "0" veya gerçekten düşük bir özel yükseklik değeri vermektir. Ürün resmi, herhangi bir gerçek yüksekliği olmayan bir sütuna sahip olsa bile yine de görünecek/taşacaktır.

Sütun ayarlarını açın ve aşağıdaki Özel CSS'yi Ana Öğeye ekleyin:

height: 15px;

Bu kadar! Hepimiz bittik.

Son sonuç

Sitenizdeki canlı yayına bakarak nihai sonucu kontrol edin.

Son düşünceler

Divi'de ürün sayfası şablonunuza yapışkan bir ürün resmi eklemek, ziyaretçiler ürününüzü keşfederken ürünlerinizi görünür tutmanın hızlı ve kolay bir yoludur. Ayrıca, aynı tekniği kullanarak Sepete Ekle düğmesini de yanına yapıştırmayı seçebilirsiniz. Her neyse, umarım, bu bir sonraki projenizde size yardımcı olacaktır.

Yorumlarda sizden haber bekliyorum.

Şerefe!