Divi'nin Mağaza Modülünü Mobil Cihazda Dinamik Ürün Kaydırma Kartlarına Dönüştürme

Belirli ürünler için bir açılış sayfası oluştururken, ister yeni bir lansman ister bir indirim için hazırlanıyor olun, bir noktada Mağaza Modülünü kullanma şansınız yüksektir. Divi'nin Mağaza Modülü, ürünleri WooCommerce eklentisinden dinamik olarak çekmenize ve Divi'nin yerleşik seçeneklerini kullanarak ürünlere stil vermenize olanak tanır. Şimdi, varsayılan olarak, mağaza modülü, tümü daha küçük ekran boyutlarında iki sütuna dönüşen birkaç sütun yapısıyla birlikte gelir. Bu, ne kadar çok ürün göstermeyi seçerseniz, açılış sayfanızın sonraki bölümüne gitmek için o kadar fazla dikey kaydırma gerektiği anlamına gelir.

Modern web tasarımında, dikey kaydırmayı sınırlamak ve öğeleri ziyaretçilerinizin tercihine göre göstermek için sıklıkla kullanılan bir teknik, kaydırmalı kartlar kullanmaktır. Bu eğitimde, Divi Shop Modülünü bir eklenti kullanmadan daha küçük ekran boyutlarında dinamik ürün kaydırma kartlarına nasıl dönüştüreceğinizi göstereceğiz. Ürün bölümümüzdeki farklı öğeleri hazırlayarak başlayacağız ve kaydırma efektini etkinleştirmek için az miktarda CSS kodu kullanacağız. Bu, ziyaretçilerinizi bunaltmadan açılış sayfanızda çok çeşitli ürünleri göstermenin harika bir yoludur. JSON dosyasını da ücretsiz olarak indirebileceksiniz!

Hadi hadi bakalım.

Ön izleme

Öğreticiye dalmadan önce, sonuca hızlıca bir göz atalım. Ürün kaydırma kartlarını yalnızca tablet ve mobil cihazlarda etkinleştiriyoruz. Masaüstünde ise Mağaza Modülü içerisinde belirlediğimiz kolon yapısını tutuyoruz.

Mobil

masaüstü

Ürün Kaydırma Kartları Düzenini ÜCRETSİZ İndirin

Ellerinizi ücretsiz ürün kaydırma kartları düzenine 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 ve Ürün Sayfalarını Ayarlayın

Bu öğreticinin Divi bölümüne girmeden önce, web sitenizde WooCommerce eklentisinin kurulu ve etkinleştirilmiş olması önemlidir. Henüz yapmadıysanız, Mağaza Modülünüzde görüntülemek istediğiniz ürün sayısına bağlı olarak birkaç ürün ekleyin.

2. Yeni Sayfa Oluşturun ve Kırtasiye Açılış Sayfası Düzeni Yükleyin

Yeni Sayfa Oluştur

Ürünleri yerleştirdikten sonra, WordPress arka ucunuza yeni bir sayfa ekleyin. Sayfanıza bir başlık verin, sayfayı yayınlayın ve Divi's Visual Builder'ı etkinleştirin.

Kırtasiye Açılış Sayfası Düzeni Yükle

Yeni sayfanıza girdikten sonra önceden hazırlanmış düzenlerinize gidin ve Kırtasiye Mağazası Açılış Sayfası düzenini yükleyin. Bu özel düzeni kullanmamıza rağmen, bu düzenin içine bir mağaza modülü eklediğiniz veya yerleştirdiğiniz sürece, istediğiniz başka bir düzeni kullanmakta özgürsünüz.

3. Mağaza Bölümünü Değiştirin

Mağaza Modülü ile Bölüm Bul

Kırtasiye Mağazası Açılış Sayfası düzenini kullanarak oluşturduğumuz yeni sayfamızı aşağı kaydırırsak, Mağaza Modülü olan bir bölümle karşılaşacağız. Bu bölümü, bu öğreticinin sonraki adımlarında kullanacağız.

Satır Ayarları

Duyarlı Boyutlandırma

Mağaza Modülünü içeren satırın satır ayarlarını açarak başlayın. Daha önce de belirtildiği gibi, aynı tasarımı masaüstünde tutuyoruz, ürün kaydırma kartlarını yalnızca daha küçük ekran boyutlarında etkinleştireceğiz. Zahmetsiz bir deneyim yaratmak için, boyutlandırma ayarlarında genişliği değiştirerek satırın ekranımızın sol ve sağ tarafına dokunmasına izin vereceğiz.

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

görünürlük

Ayrıca görünürlük ayarlarını gizli olarak ayarlayarak hiçbir şeyin satır kapsayıcısını aşmamasını sağlayacağız.

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

Mağaza Modülü Ayarları

Ürün Sayısını ve Tercih Edilen Masaüstü Sütun Yapısını Seçin

Ardından, Mağaza Modülü ayarlarını açacağız. CSS Kodumuzda yaptığımız değişiklikler (daha sonra ekleyeceğiz), gösterdiğimiz ürün sayısına bağlıdır. Size 8 ürün içeren bir Mağaza Modülünü nasıl ürün kaydırma kartlarına dönüştüreceğinizi göstererek başlayacağız. Masaüstü için istediğiniz herhangi bir sütun düzenini seçebilirsiniz.

• Ürün Sayısı: 8
• Sütun Düzeni: 4 Sütun

Duyarlı Boyutlandırma

Mağaza modülümüzün boyutunu artırmak için tasarım sekmesindeki boyutlandırma ayarlarını değiştireceğiz. Bunu yalnızca tablet ve telefon için nasıl yaptığımıza dikkat edin.

• Genişlik: %100 (Masaüstü), %250 (Tablet ve Telefon)
• Maksimum Genişlik: %100 (Masaüstü), %250 (Tablet ve Telefon)

CSS Sınıfı

Ayrıca mağaza modülümüze bir CSS sınıfı ekleyeceğiz. Daha sonra CSS kodunu eklediğimizde sadece bu CSS sınıfını taşıyan Shop Module'ü dönüştürebileceğiz. Başka bir deyişle, normal bir durumda başka bir Mağaza Modülünün görünmesini istiyorsanız, bu CSS sınıfını dışarıda bırakmak bunu yapmanıza izin verecektir.

• CSS Sınıfı: ürün kaydırma kartları

Duyarlı Taşmalar

Farklı ekran boyutlarındaki görünürlük ayarlarını değiştirerek satır ayarlarını tamamlayacağız. Ayarlarda da fark edebileceğiniz gibi, kaydırma efektinin yalnızca daha küçük ekran boyutlarında gerçekleşmesini istiyoruz.

• Yatay Taşma: Gizli (Masaüstü), Kaydırma (Tablet ve Telefon)
• Dikey Taşma: Gizli

Mağaza Modülünün Altına Kod Modülü Ekle

Mağaza Modülünü değiştirdikten sonra, hemen altına bir Kod Modülü ekleyebilirsiniz.

Modüle CSS Kodu Ekle

Aşağıdaki CSS kodu, 8 ürünlü Mağaza Modülümüzü otomatik olarak duyarlı ürün kaydırma kartlarına dönüştürecektir:

<style>

@media all and (max-width: 980px) {
   
.product-swipe-cards ul.products {
display: grid !important;
grid-template-columns: repeat(8, 8.8%) !important;
grid-column-gap: 0.7%;
}

.product-swipe-cards .woocommerce ul.products::before {
content: none;
display: block;
}
  
.product-swipe-cards.et_pb_shop ul.products li.product {
width: 100% !important;
}

.product-swipe-cards .woocommerce {
width: 255% !important;
margin-left: 5%;
}
  
.product-swipe-cards::-webkit-scrollbar {
display: none;
}
  
.product-swipe-cards {
-ms-overflow-style: none;
}

}

</style>

Farklı Ürün Sayılarını Eşleştirme

Şimdi, mağaza modülünüze daha az (veya daha fazla) ürün eklemek istiyorsanız, kod iki yerde biraz değişir. Bu iki yer, istenen sonuca uyacak şekilde manuel olarak değiştirilmelidir. Örneğin Mağaza Modülümüzdeki ürün sayısını '4' olarak değiştirelim.

• Ürün Sayısı: 4

Kodumuza geri döndüğümüzde, yapmamız gereken iki değişiklik var. İlk olarak, ızgara şablonu sütunlarını değiştirmemiz gerekecek. 8 yerine 4 kullanıyoruz (ürün sayımızla aynı sayı). Ayrıca, bu ürünlerin ürün kaydırmalı kartlarımızda kapladığı yüzde boyutunu da artırıyoruz (ne kadar çok ürün, o kadar az alan).

grid-template-columns: repeat(4, 14%) !important;

Ardından, ürünlerin yerleştirildiği kabın genişliğini de değiştireceğiz. 4 ürün için bu, %150'ye eşittir. Bu değerler sabit değildir, ızgara şablonu sütunları ile kap genişliği arasında oynayarak ve bir uyum bularak elde edilir. Doğru dengeyi bulmak için Visual Builder içindeki mobil görünüme geçin ve bu değişikliklerin sonucunu görüntülerken değerleri dikkatli bir şekilde değiştirin.

width: 150% !important;

Kaydırma Yapıştırma Ekle

Ürün kaydırmalı kart tasarımınızda kullanıcı deneyimini bir adım öteye taşımak istiyorsanız, kaydırma yakalama özelliğini de ekleyebilirsiniz. Kaydırarak yakalama, ziyaretçilerinizin yeni bir ürünün başına geçerek kaydırma yapmasına yardımcı olur. Bu, kaydırmalarının kesin olması gerekmediği anlamına gelir, kaydırma yakalaması bir noktada devralacak ve yatay kaydırma mekanizması içindeki konumlarını ayarladığını gösterecektir. Ürün kaydırma kartlarınızda kaydırma yakalamayı etkinleştirmek için, CSS kodunda her ürüne ayrı ayrı bir satır CSS kodu ekleyin (aşağıdaki yazdırma ekranına bakın).

scroll-snap-align: start

Ayrıca, aşağıdaki CSS kodu satırını ekleyerek mağaza modülümüzde kaydırma yakalamayı etkinleştireceğiz:

scroll-snap-type: x mandatory

Diğer Kategorileri Görüntülemek için Mağaza Modülünü Yeniden Kullanın

Tüm Satırı Bir Kez Klonla

İlk ürün kaydırma kartı setini tamamladığınızda, tüm satırı bir kez klonlayabilirsiniz.

Yinelenen Satırdaki Kod Modülünü Sil

Mağaza Modülünüz öncekiyle aynı CSS sınıfını içerdiği sürece, bir Kod Modülü yeterli olacaktır. Devam edin ve yinelenen satırınızdaki Kod Modülünü silin.

Satırı İstediğiniz Kadar Klonlayın

Ve açılış sayfanızda kaç tane ürün kaydırma kartı seti görüntülemek istediğinize bağlı olarak, yinelenen satırı şimdi gerektiği kadar klonlayın!

4. Sayfa Değişikliklerini Kaydet ve Sonucu Mobil Cihazda Görüntüle

Ürün kaydırma kartlarını eklemeyi bitirdiğinizde, Visual Builder'dan çıkmadan önce sayfanızı kaydettiğinizden ve işiniz bittiğinden emin olun!

Ön izleme

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

Mobil

masaüstü

Son düşünceler

Bu yazıda, yerleşik Divi Mağaza Modülünü daha küçük ekran boyutlarında ürün kaydırma kartlarına nasıl dönüştüreceğinizi gösterdik. Masaüstünde, Mağaza Modülüne atanan orijinal sütun yapısını koruduk. Ürün kaydırma kartlarını kullanmak, dikey kaydırma ile ziyaretçilerinizi bunaltmadan yatay kaydırma mekanizmasına sonsuz ürünler eklemenize olanak tanır.

Modern web tasarımında sıklıkla kullanılan bir trend çünkü kullanıcı davranışına odaklanıyor ve daha küçük ekran boyutlarında çok çeşitli öğelere erişmeyi kolaylaştırıyor. Bu ürün kaydırma kartlarını istediğiniz herhangi bir sayfada kullanabilirsiniz, ancak özellikle oluşturduğunuz ürün açılış sayfaları için uygundur. Düzenin 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.