Divi Shop Modülünün Mobil Sütun Kesme Noktası Nasıl Değiştirilir

Varsayılan olarak, bir mobil cihaza geçtiğinizde mağaza modülü tek sütunlu bir düzene dönüşür. Şimdi, her bir ürünü ayrı ayrı vurgulamak istiyorsanız, bu harika, ancak günümüzde daha büyük akıllı telefon ekran boyutlarıyla, Mağaza Modülünü kullanırken iki ürünün yan yana görünmesine izin vermek isteyebilirsiniz. Bugünün Divi eğitiminde, CSS kullanarak mağaza modülünün mobil kesme noktasını nasıl değiştireceğinizi ve çoğu modern akıllı telefonda iki ürünün yan yana görünmesini nasıl sağlayacağınızı göstereceğiz. Gelecekte bir çevrimiçi mağaza kuruyorsanız, elinizin altında olması gereken harika bir öğretici! Tasarımın JSON dosyasını da ü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.

Mobil

masaüstü

ÜCRETSİZ Mağaza Sayfası Şablonunu İndirin

Ücretsiz alışveriş 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. Divi Tema Oluşturucu'ya gidin ve Yeni Şablon Ekle

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

DIvi'nin Tema Oluşturucusuna giderek başlayın ve yeni bir şablon ekleyin.

Mağaza Sayfasında Şablonu Kullan

Bu yeni şablonu web sitenizin mağaza sayfasında kullanın.

• Kullanım Açık: Alışveriş

Şablon Gövdesi Oluşturmaya Başlayın

Ve mağaza şablonunun gövdesini oluşturmaya başlayın.

2. Şablon Gövdesini Oluşturmaya Başlayın

Bölüm Ayarları

Degrade Arka Plan

Şablon düzenleyicinin içine girdikten sonra bir bölüm göreceksiniz. Bu bölümü açın ve bunun için aşağıdaki gradyan arka planını kullanın:

• Renk 1: #32ff3d
• Renk 2: #29c4a9
• Gradyan Türü: Doğrusal
• Gradyan Yönü: 109deg

Arka plan görüntüsü

Bir arka plan resmi de yükleyin. Bu eğitimde kullandığımız arka plan resmini, bu yazının başında indirebildiğiniz indirme klasöründe bulabilirsiniz.

• Arka Plan Resmi Boyutu: Sığdır

aralık

Bölümün tasarım sekmesine gidin ve boşluk değerlerini buna göre değiştirin:

• Üst Kenar Boşluğu: 50px
• Sol Kenar Boşluğu: 50px
• Sağ Kenar Boşluğu: 50px
• Alt Dolgu: 150 piksel

Sınır

Sınır yarıçapı ekleyerek bölüm ayarlarını tamamlayın.

• Tüm Köşeler: 20px

Yeni Satır Ekle

Sütun Yapısı

Aşağıdaki sütun yapısını kullanarak bölüme yeni bir satır ekleyerek devam edin:

Sütuna Metin Modülü Ekle

H1 İçeriği Ekle

Seçtiğiniz bazı H1 içeriğiyle satırın sütununa bir Metin Modülü ekleyin.

H1 Metin Ayarları

Modülün H1 metin ayarlarını uygun şekilde değiştirin:

• Başlık Yazı Tipi: Prata
• Başlık Metni Hizalama: Orta
• Başlık Metni Rengi: #ffffff
• Başlık Metni Boyutu: 80px (Masaüstü), 60px (Tablet), 40px (Telefon)

2. Bölüm Ekle

Z İndeksi

Bir öncekinin hemen altına başka bir bölüm ekleyin. Bölüm ayarlarını açın ve z dizinini artırın.

• Z İndeksi: 2

Yeni Satır Ekle

Sütun Yapısı

Ardından, aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyin:

Arka plan rengi

Henüz herhangi bir modül eklemeden satır ayarlarını açın ve bir arka plan rengi ekleyin.

• Arka Plan Rengi: #ffffff

boyutlandırma

Modülün tasarım sekmesine gidin ve boyutlandırma ayarlarını aşağıdaki gibi değiştirin:

• Genişlik: %100
• Maksimum Genişlik: 1380 piksel

aralık

Ardından, farklı ekran boyutlarına bazı özel boşluk değerleri ekleyin.

• Üst Kenar Boşluğu: 200 piksel
• Üst Dolgu: 50px (Masaüstü), 20px (Tablet ve Telefon)
• Alt Dolgu: 50px (Masaüstü), 20px (Tablet ve Telefon)
• Sol Dolgu: 100px (Masaüstü), 20px (Tablet ve Telefon)
• Sağ Doldurma: 100px (Masaüstü), 20px (Tablet ve Telefon)

Sınır

Ayrıca tüm satıra bir sınır yarıçapı ekliyoruz.

• Tüm Köşeler: 25px

Kutu Gölge

İnce bir kutu gölgesi ekleyerek satır ayarlarını tamamlayın.

• Kutu Gölge Bulanıklığı Gücü: 50px
• Gölge Rengi: rgba(0,0,0,0.1)

Sütuna Mağaza Modülü Ekle

İçerik

Şimdi, Mağaza Modülümüzü ekleme zamanı. 4 sütunlu bir düzen kullanıyoruz.

• Sütun Düzeni: 4 Sütun

Kaplama

Modülün tasarım sekmesine gidin ve kaplama renklerini değiştirin.

• Yer Paylaşımı Simge Rengi: #29c6a6
• Bindirme Arka Plan Rengi: rgba(255,255,255,0.75)

resim

Görüntü ayarlarını da değiştirin.

• Tüm Köşeler: 10px

• Kutu Gölge Bulanıklığı Gücü: 50px
• Gölge Rengi: rgba(0,0,0,0.11)

Başlık Metni Ayarları

Başlık metni ayarlarını uygun şekilde değiştirerek devam edin:

• Başlık Yazı Tipi: Prata
• Başlık Metin Boyutu: 30px (Masaüstü), 25px (Tablet), 20px (Telefon)

Fiyat Metni Ayarları

Ardından, fiyat metni ayarlarında bazı değişiklikler yapın.

• Fiyat Yazı Tipi: Montserrat
• Fiyat Yazı Tipi Ağırlığı: Orta
• Fiyat Metin Boyutu: 18px (Masaüstü), 16px (Tablet), 14px (Telefon)

aralık

Biraz üst dolgu ekleyerek modül ayarlarını tamamlayın.

• Üst Dolgu: 50px

Sütuna Kod Modülü Ekle

Genel Mağaza Modülü tasarımını tamamladıktan sonra, CSS kullanarak Mağaza Modülü mobil sütun kesme noktasını değiştirmenin zamanı geldi. CSS kodunu tasarımımızdaki bir Kod Modülüne ekleyeceğiz. Devam edin ve Mağaza Modülünün hemen altına yeni bir Kod Modülü ekleyin.

CSS Kodu Ekle

Tek sütunlu mobil kesme noktasını 300 piksel genişliğe indiriyoruz. Bu, çoğu modern akıllı telefonun bir yerine iki ürünü yan yana göstereceği anlamına gelir. Bunun gerçekleşmesi için, Kod Modülüne aşağıdaki CSS kod satırlarını ekleyeceğiz:

<style>
@media (max-width: 479px) {
.woocommerce-page ul.products li.product:nth-child(n) {
width: 49% !important;
}
}
@media (max-width: 300px) {
.woocommerce-page ul.products li.product:nth-child(n) {
width: 100% !important;
}
}
</style>

3. Tüm Tema Oluşturucu Değişikliklerini Kaydet ve Sonucu Önizleme

Mağaza sayfası tasarımını tamamladıktan ve mobil kesme noktasını değiştirmek için CSS kodunu ekledikten sonra, tüm Tema Oluşturucu değişikliklerini kaydedebilir ve sonucu mağaza sayfanızda görüntüleyebilirsiniz!

Ön izleme

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

Mobil

masaüstü

Son düşünceler

Bu gönderide, günümüzde çoğu modern akıllı telefonda iki ürünü yan yana göstermenizi sağlayan mağaza modülünün mobil sütun kesme noktasını nasıl değiştireceğinizi gösterdik. Bu, gerekli olan mobil kaydırmayı azaltmanın ve ziyaretçilerinize aynı anda daha fazla ürün göstermenin mükemmel bir yoludur. JSON dosyasını da ücretsiz olarak indirebildiniz! Herhangi bir sorunuz 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.