Ana İçeriğe Geç

Divi Shop modülünü mobil cihazlarda dinamik ürün haritalarına dönüştürün

Divi: Kullanılacak en kolay WordPress teması

Divi: Tüm zamanların en iyi WordPress teması!

daha fazla 901.000 indirmeler, Divi, dünyanın en popüler WordPress teması. Tamamen, kullanımı kolay ve 62 ücretsiz şablonlardan daha fazlasını sunuyor. [Önerilen]

İster yeni bir lansman isterse de hazırladığınız bir satış olsun, belirli ürünler için bir açılış sayfası oluşturduğunuzda, 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 çıkarmanıza ve Divi'nin yerleşik seçeneklerini kullanarak bunları şekillendirmenize olanak tanır. 

Şimdi varsayılan olarak mağaza modülü, tümü daha küçük ekran boyutlarında iki sütuna çevrilen birkaç sütun yapısı ile birlikte gelir. Bu, göstermeyi ne kadar çok ürün seçerseniz, açılış sayfanızın bir sonraki bölümüne geçmek için o kadar çok dikey kaydırma yapmanız gerektiği anlamına gelir.

Modern web tasarımında, ziyaretçilerinizin tercihlerine göre dikey kaydırma ve görüntüleme öğelerini sınırlandırmak için sıklıkla kullanılan bir teknik, manyetik kartlar kullanmaktır. Bu eğiticide, Divi mağaza modülünü bir eklenti kullanmadan daha küçük ekran boyutlarında dinamik ürün haritalarına nasıl dönüştüreceğinizi göstereceğiz. 

Ürün bölümümüzün farklı unsurlarını hazırlayarak başlayacağız ve süpürme efektini etkinleştirmek için az miktarda CSS kodu kullanacağız. Açılış sayfanızda ziyaretçilerinizi bunaltmadan geniş bir ürün yelpazesini göstermenin harika bir yoludur. 

Olası Sonuç

Öğreticiye dalmadan önce sonuca bir göz atalım. Ürünün manyetik kartlarını yalnızca tablet ve cep telefonlarında etkinleştiriyoruz. Masaüstünde Mağaza modülünde belirlediğimiz kolon yapısını koruyoruz.

Divi ürün modülü mağaza animasyonu

1. WooCommerce ve ürün sayfalarını yapılandırın

Bu eğitimin Divi kısmına girmeden önce, WooCommerce eklentisinin web sitenize yüklenmesi ve etkinleştirilmesi önemlidir. Henüz yapmadıysanız, Mağaza modülünüzde sergilemek istediğiniz ürün sayısına bağlı olarak birden fazla ürün ekleyin.

Woocommerce ürünleri oluşturun

2. Yeni bir sayfa oluşturun ve kırtasiye sayfası düzenini indirin

Yeni bir sayfa oluştur

Ürünler yerleştirildikten sonra, WordPress arka ucunuza yeni bir sayfa ekleyin. Sayfanıza bir başlık verin, sayfayı yayınlayın ve Divi Görsel Oluşturucu'yu etkinleştirin.

Bir divi sayfası oluşturun
Yeni bir divi sayfası oluştur

Açılış sayfası düzenini indirin

Yeni sayfanıza girdikten sonra, önceden belirlenmiş düzenlerinize gidin ve kırtasiye açılış sayfası düzenini indirin. Bu özel düzeni kullanmamıza rağmen, bu düzen içine bir mağaza modülü eklediğiniz veya bu düzeni bulduğunuz sürece, istediğiniz başka bir düzeni kullanmakta özgürsünüz.

Bir divi düzeni seçin

3. Mağaza bölümünü değiştirin

Mağaza modülü ile bölümü bulun

Kırtasiye ana sayfa düzenini kullanarak oluşturduğumuz yeni sayfamıza inersek karşımıza mağaza modülü olan bir bölüm çıkıyor. Bu bölümü, bu eğitimin sonraki adımlarında kullanacağız.

Mağaza modülünü bulun

Satır Parametreleri

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ün kaydırmalı kartlarını yalnızca daha küçük ekran boyutlarında etkinleştireceğiz. 

Zahmetsiz bir deneyim yaratmak için, boyutlandırma ayarlarındaki genişliği değiştirerek satırın ekranımızın sol ve sağ taraflarına dokunmasına izin vereceğiz.

  • Özel bir oluk genişliği kullanın: 1
  • Genişlik:% 80 (masaüstü),% 100 (tablet ve telefon)
Duyarlı tasarım değişikliği

görünürlük

Ayrıca, görünürlük ayarlarını gizli olarak ayarlayarak hiçbir şeyin satır kabının ötesine geçmemesini sağlayacağız.

  • Yatay taşma: gizli
  • Dikey taşma: gizli
Divi görünürlük yapılandırması

Mağaza modülü ayarları

Seçtiğiniz ürün sayısını ve ofis 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. 

Elementor ile web sitenizi kolayca oluşturun

Elementor, profesyonel bir görünüme sahip herhangi bir web sitesi tasarımını kolayca oluşturmanıza olanak sağlar. Kendin yapabileceğin için pahalı ödemeyi kes. [Ücretsiz]

Size 8 ürünlü bir mağaza modülünü ürün kartlarına nasıl 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
Divi sütun tasarımını değiştirin

Duyarlı boyutlandırma

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

  • Genişlik:% 100 (masaüstü),% 250 (tablet ve telefon)
  • Maksimum genişlik:% 100 (masa),% 250 (tablet ve telefon)
Duyarlı tasarım yapılandırması

CSS sınıfı

Ayrıca mağaza modülümüze bir CSS sınıfı da ekleyeceğiz. Daha sonra CSS kodunu eklediğimizde sadece bu CSS sınıfını taşıyan Mağaza modülünü dönüştürebiliriz. Başka bir deyişle, başka bir Mağaza modülünün normal durumda 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ı
CSS modülü deposu divi özniteliğini değiştir

Reaktif taşmalar

Farklı ekran boyutlarında görünürlük ayarlarını değiştirerek satır ayarlarını tamamlayacağız. Ayarlarda görebileceğiniz gibi, kaydırma efektinin yalnızca daha küçük ekran boyutlarında olmasını istiyoruz.

  • Yatay taşma: gizli (masa), kaydırma (tablet ve telefon)
  • Dikey taşma: gizli
Taşma yapılandırması

Mağaza modülünün altına bir kod modülü ekleyin

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

Divi mağaza modülünün altına kod modülü ekleyin

Modüle CSS kodu ekleme

Aşağıdaki CSS kodu, 8 ürünün mağaza modülümüzü otomatik olarak reaktif manyetik kartlara 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>

Css divi kodu ekle

Farklı ürün hesaplarını eşleştirin

Ş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 konum 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
Farklı ürün hesabını eşleştirin

Kodumuza geri döndüğümüzde iki değişiklik yapmamız gerekiyor. İlk olarak, grid şablonunun sütunlarını değiştirmemiz gerekecek. 8 yerine 4 (ürün sayımızla aynı sayıda) kullanıyoruz. Ayrıca, bu ürünlerin ürün sayfalarımızda kapladığı yüzde boyutunu da artırıyoruz (daha fazla ürün, daha az yer).

grid-template-column: yineleme (4,% 14)! önemli;

Ardından ürünlerin yerleştirildiği konteynerin genişliğini de değiştireceğiz. 4 ürün için bu,% 150'ye eşittir. Bu değerler sabit değildir, grid modelin kolonları ile konteynerin genişliği arasında oynanarak ve bularak elde edilir. 

En iyi WordPress temalarını ve eklentilerini mi arıyorsunuz?

Envato'daki en iyi eklentileri ve WordPress temalarını indirin ve web sitenizi kolayca oluşturun. 49.720.000 indirme işleminden daha fazla. [ÖZEL]

Doğru dengeyi bulmak için, Visual Builder'daki mobil görünüme geçin ve bu değişikliklerin sonucunu görüntülerken değerleri dikkatlice ayarlayın.

width: 150%!important;

Ek divi css kodu ekleyin

Parşömene bir çıtçıt ekleyin

Kaydırma kartınızın tasarımında kullanıcı deneyimini bir adım daha ileri götürmek istiyorsanız, bir kaydırma çıtası da ekleyebilirsiniz. Kaydırma yakalama, ziyaretçilerinizin yeni bir ürünün başlangıcına bakarak kaydırma yapmasını sağlar.

 Bu, taramalarının kesin olması gerekmediği anlamına gelir, kaydırma çarpması bir noktada devreye girecek ve yan kaydırma mekanizması içindeki konumunu ayarlayarak gösterecektir. 

Ürününüzün kaydırma kartlarında kayan yakalamayı etkinleştirmek için, CSS kodunda her ürüne ayrı ayrı bir CSS kodu satırı ekleyin (aşağıdaki yazdırma ekranına bakın).

scroll-snap-align: başlat

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 zorunlu

CSS kodunu özelleştirin

Diğer kategorileri görüntülemek için atölye modülünü yeniden kullanın

Bir satırın tamamını bir kez klonlayın

İlk manyetik kart setini tamamladıktan sonra, tüm çizgiyi bir kez klonlayabilirsiniz.

Divi atölye modülünü yeniden kullanın

Yinelenen satırdaki kod modülünü kaldır

Mağaza modülünüz öncekiyle aynı CSS sınıfını içerdiği sürece, bir kod modülü işe yarar. Devam edin ve yinelenen satırınızdaki kod modülünü çıkarın.

Divi kod modülünü çoğaltın

Yinelenen satırı istediğiniz kadar kopyalayın

Ve açılış sayfanızda görüntülemek istediğiniz tokatlama kartı setlerinin sayısına bağlı olarak yinelenen satırı gerektiği kadar kopyalayın!

Modülü gerektiği kadar klonlayın
Yinelenen divi modülü

4. Sayfa değişikliklerini kaydedin ve sonuçları bir mobil cihazda görüntüleyin

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

Mobil cihazda demo önizlemesi

anket

Artık tüm adımları attığımıza göre, farklı ekran boyutlarında sonuca son bir göz atalım.

Çevrimiçi Mağazanızı kolayca oluşturun

WordPress'te fiziksel ve dijital ürünlerinizi satmak için ücretsiz WooCommerce, en iyi e-ticaret eklentilerini indirin. [Önerilen]

Divi ürün modülü mağaza animasyonu

Son düşünceler

Bu yazıda, entegre Divi Shop modülünü daha küçük ekran boyutlarında ürün manyetik 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 haritalarını kullanmak, dikey kaydırma ziyaretçilerinizi bunaltmadan yatay kaydırma mekanizmasına sonsuz ürünler eklemenize olanak tanır.

Bu, modern web sitesi tasarımında sıklıkla kullanılan bir eğilimdir çünkü kullanıcı davranışına odaklanır ve daha küçük ekranlarda çok çeşitli öğelere erişmeyi kolaylaştırır.

 Bu ürün sayfalarını herhangi bir sayfada kullanabilirsiniz, ancak özellikle oluşturduğunuz tüm ürün açılış sayfaları için kullanışlıdır. Ayrıca düzen JSON dosyasını ücretsiz olarak indirebildiniz! 

Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorumlar bölümüne yorum yapmaktan çekinmeyin.

Bu makale yorumları 0 içeriyor

YORUM BIRAKIN

E-posta hesabınız yayımlanmayacak. Doldurulması zorunlu alanlar * ile işaretlenmiştir *

Bu site, istenmeyenleri azaltmak için Akismet'i kullanıyor. Yorum verilerinizin nasıl kullanıldığı hakkında daha fazla bilgi edinin..

Başa dönüş
0 hisseleri
hisse
cıvıltı
Enregistrer