Divi Açılış Sayfanız için Dinamik ve Canlı Bir Ürün Izgarası Nasıl Oluşturulur

Ürün sayfaları, belirli bir ürünü ve ayrıntılarını vurgulamak söz konusu olduğunda harikadır, ancak bir açılış sayfası oluştururken, daha fazla ürünü tek bir yere sığdırmak ve insanların doğrudan sepetlerine ürün eklemesine izin vermek isteyebilirsiniz. Divi'nin yeni WooCommerce modülleri ile artık üzerinde çalıştığınız herhangi bir sayfaya herhangi bir ürünü ekleyebilir ve Divi'nin yerleşik seçeneklerini kullanarak istediğiniz gibi şekillendirebilirsiniz. Başlamanıza yardımcı olmak için, sepete ekle düğmeleriyle canlı bir dinamik ürün ızgarasının nasıl oluşturulacağını göstereceğiz. Tasarım tüm ekran boyutlarında harika görünüyor ve 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.

Dinamik Ürün Izgarası Bölümünü ÜCRETSİZ İndirin

Ellerinizi ücretsiz dinamik ürün ızgarası bölümüne 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.

Yeniden Yaratmaya Başlayalım!

Yeni Bölüm Ekle

Üzerinde çalıştığınız sayfaya yeni bir bölüm ekleyerek başlayın.

Yeni Satır Ekle

Sütun Yapısı

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

boyutlandırma

Henüz herhangi bir modül eklemeden, satır ayarlarını açın ve satırın sayfanın tüm genişliğini kaplamasına izin verin.

• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1
• Sütun Yüksekliklerini Eşitle: Evet
• Genişlik: %100
• Maksimum Genişlik: %100

Her Sütuna CSS Sınıfı Ekle

Ardından, sütunların her birini ayrı ayrı açın ve onlara aynı CSS sınıfını atayın. Tüm ürünlerin tablette otomatik olarak birbirinin altında görünmesini sağlamak için bu öğreticinin sonunda bu CSS sınıfını kullanacağız.

• CSS Sınıfı: tablet tam genişlik

Sütun 1'e Woo Görüntü Modülü Ekle

Dinamik İçerik

Modül ekleme zamanı! Sütun 1 ile başlayacağız. Bir Woo Image Module ekleyin ve istediğiniz bir ürünü seçin. Önizlemedekiyle aynı sonucu elde etmek için ürün resminizin şeffaf bir arka plana sahip olduğundan emin olun.

• Ürün: Listede bulun

Arka plan rengi

Modülün arka plan rengini değiştirerek devam edin.

• Arka Plan Rengi: #ffafce

aralık

Ardından, boşluk ayarlarına gidin ve değerleri aşağıdaki gibi değiştirin:

• Üst Marj: 8vw (Masaüstü), 0vw (Tablet ve Telefon)
• Üst Dolgu: 6vw (Masaüstü), 10vw (Tablet), 16vw (Telefon)
• Sol Dolgu: 9vw (Masaüstü), 12vw (Tablet), 20vw (Telefon)
• Sağ Doldurma: 9vw (Masaüstü), 12vw (Tablet), 20vw (Telefon)

Sütun 1'e Woo Başlık Modülü ekleyin

Dinamik İçerik

Sütun 1'de ihtiyacımız olan bir sonraki modül bir Woo Başlık Modülüdür. İstediğiniz bir ürünü seçin.

• Ürün: Listede bulun

Arka plan rengi

Bir arka plan rengi ekleyerek devam edin.

• Arka Plan Rengi: #ffafce

Başlık Metni Ayarları

Tasarım sekmesine gidin ve başlık metni ayarlarını buna göre değiştirin:

• Başlık Başlık Düzeyi: H3
• Başlık Yazı Tipi: Montserrat
• Başlık Metin Rengi: #ffffff
• Başlık Metin Boyutu: 2vw (Masaüstü), 3vw (Tablet), 5vw (Telefon)
• Başlık Satırı Yüksekliği: 1,6vw (Masaüstü), 3.4vw (Tablet), 5vw (Telefon)

aralık

Dolgu değerleriyle de oynayın.

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

Sütun 1'e Woo Açıklama Modülü Ekle

Dinamik İçerik

İhtiyacımız olan bir sonraki modül bir Woo Açıklama Modülü. İstediğiniz bir ürünü seçin.

• Ürün: Listede bulun
• Açıklama türü: Kısa açıklama

Arka plan rengi

Ardından bir arka plan rengi ekleyin.

• Arka Plan Rengi: #ffafce

Metin Ayarları

Tasarım sekmesine gidin ve metin ayarlarını aşağıdaki gibi değiştirin:

• Metin Yazı Tipi: Playfair Ekranı
• Metin Rengi: #f7f7f7
• Metin Boyutu: 0.9vw (Masaüstü), 2vw (Tablet), 3vw (Telefon)
• Başlık Satırı Yüksekliği: 1.8em

aralık

Sonra biraz sol ve sağ dolgu ekleyin.

• Sol Dolgu: 9vw
• Sağ Dolgu: 9vw

Sütun 1'e Woo Fiyat Modülü ekleyin

Dinamik İçerik

Bir Woo Fiyat Modülü olan sütun 1'deki bir sonraki modüle geçin. İstediğiniz bir ürünü seçin.

• Ürün: Listede bulun

Arka plan rengi

Ardından bir arka plan rengi ekleyin.

• Arka Plan Rengi: #ffafce

Fiyat Metni Ayarları

Tasarım sekmesine gidin ve metin ayarlarını aşağıdaki gibi değiştirin:

• Fiyat Yazı Tipi: Montserrat
• Fiyat Yazı Tipi Ağırlığı: Kalın
• Fiyat Metin Rengi: #ffffff
• Fiyat Metin Boyutu: 3vw (Masaüstü), 5vw (Tablet), 6vw (Telefon)
• Fiyat Çizgisi Yüksekliği: 2vw

aralık

Boşluk ayarlarını da değiştirin.

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

Woo'yu Sepete Ekle Modülünü Sütun 1'e Ekle

Dinamik İçerik

Sütun 1'de ihtiyacımız olan son modül bir Woo Sepete Ekle Modülüdür. İstediğiniz bir ürünü seçin.

• Ürün: Listede bulun

Arka plan rengi

Ardından bir arka plan rengi ekleyin.

• Arka Plan Rengi: #ffafce

Alanlar Metin Ayarları

Alanların metin ayarlarını aşağıdaki gibi değiştirin:

• Alanlar Metin Hizalaması: Merkez
• Alanlar Metin Boyutu: 1vw (Masaüstü), 3vw (Tablet), 4vw (Telefon)
• Yuvarlatılmış Köşeler: 10vw (Tüm Köşeler)

Düğme Ayarları

Düğme ayarlarını şekillendirerek devam edin.

• Düğme İçin Özel Stiller Kullan: Evet
• Düğme Metin Boyutu: 1.1vw (Masaüstü), 2vw (Tablet), 3vw (Telefon)
• Düğme Metin Rengi: #000000
• Düğme Arka Plan Rengi: #ffffff
• Düğme Kenar Genişliği: 0px

• Düğme Sınır Yarıçapı: 50vw
• Düğme Yazı Tipi: Montserrat

• Üst Dolgu: 1vw (Masaüstü), 3vw (Tablet), 5vw (Telefon)
• Alt Dolgu: 1vw (Masaüstü), 3vw (Tablet), 5vw (Telefon)
• Sol Dolgu: 4vw (Masaüstü), 15vw (Tablet), 18vw (Telefon)
• Sağ Doldurma: 4vw (Masaüstü), 15vw (Tablet), 18vw (Telefon)

aralık

Ve farklı ekran boyutlarına bazı özel dolgu değerleri ekleyerek modülün ayarlarını tamamlayın.

• Alt Dolgu: 6vw (Masaüstü), 10vw (Tablet), 15vw (Telefon)
• Sol Dolgu: 9vw
• Sağ Dolgu: 9vw

Sütun 2'ye Woo Görüntü Modülü Ekle

Dinamik İçerik

Artık 1. sütundaki tüm modülleri tamamladığımıza göre, 2. sütuna geçebiliriz. 2. sütundaki modüllerin masaüstü değerleri, 1. sütundaki modüllerden tamamen farklıdır. Bu yüzden modülleri klonlamıyor, ekliyoruz. yerine sıfırdan. Ancak, tüm tablet ve mobil ayarların 1. sütundaki modüllerle eşleşeceğini unutmayın. 2. sütuna bir Woo Image Module ekleyin ve istediğiniz bir ürünü seçin.

• Ürün: Listede bulun

Arka plan rengi

Ardından bir arka plan rengi ekleyin.

• Arka Plan Rengi: #ffd593

aralık

Boşluk değerlerini de değiştirin.

• Üst Dolgu: 2vw (Masaüstü), 6vw (Tablet), 10vw (Telefon)
• Sol Dolgu: 5vw (Masaüstü), 12vw (Tablet), 20vw (Telefon)
• Sağ Doldurma: 5vw (Masaüstü), 12vw (Tablet), 20vw (Telefon)

Sütun 2'ye Woo Başlık Modülü ekleyin

Dinamik İçerik

İhtiyacımız olan bir sonraki modül bir Woo Başlık Modülü. İstediğiniz bir ürünü seçin.

• Ürün: Listede bulun

Arka plan rengi

Sonraki arka plan rengini değiştirin.

• Arka Plan Rengi: #ffd593

Başlık Metni Ayarları

Başlık metni ayarlarını da değiştirin.

• Başlık Başlık Düzeyi: H3
• Başlık Yazı Tipi: Montserrat
• Başlık Metin Rengi: #ffffff
• Başlık Metin Boyutu: 1.2vw (Masaüstü), 3vw (Tablet), 5vw (Telefon)
• Başlık Satırı Yüksekliği: 1,6vw (Masaüstü), 3.4vw (Tablet), 5vw (Telefon)

aralık

Ve boşluk ayarlarına bazı özel dolgu değerleri uygulayın.

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

Sütun 2'ye Woo Açıklama Modülü Ekle

Dinamik İçerik

Bir Woo Açıklama Modülü olan bir sonraki modüle geçin. İstediğiniz bir ürünü seçin.

• Ürün: Listede bulun
• Açıklama Türü: Kısa açıklama

Arka plan rengi

Sonraki arka plan rengini değiştirin.

• Arka Plan Rengi: #ffd593

Metin Ayarları

Tasarım sekmesine gidin ve metin ayarlarını aşağıdaki gibi değiştirin:

• Metin yazı tipi: Playfair Ekranı
• Metin Rengi: #f7f7f7
• Metin Boyutu: 0.9vw (Masaüstü), 2vw (Tablet), 3vw (Telefon)
• Başlık Satırı Yüksekliği: 1.8em

aralık

Farklı ekran boyutlarına da biraz sol ve sağ dolgu ekleyin.

• Sol Dolgu: 2vw (Masaüstü), 9vw (Tablet ve Telefon)
• Sağ Dolgu: 2vw (Masaüstü), 9vw (Tablet ve Telefon)

Sütun 2'ye Woo Fiyat Modülü ekleyin

Dinamik İçerik

İhtiyacımız olan bir sonraki modül bir Woo Fiyat Modülü. İstediğiniz bir ürünü seçin.

• Ürün: Listede bulun

Arka plan rengi

Ardından bir arka plan rengi ekleyin.

• Arka Plan Rengi: #ffd593

Fiyat Metni Ayarları

Tasarım sekmesine gidin ve fiyat metni ayarlarını buna göre değiştirin:

• Fiyat Yazı Tipi: Montserrat
• Fiyat Yazı Tipi Ağırlığı: Kalın
• Fiyat Metin Rengi: #ffffff
• Fiyat Metin Boyutu: 1.5vw (Masaüstü), 5vw (Tablet), 6vw (Telefon)
• Fiyat Çizgisi Yüksekliği: 2vw

aralık

Bazı özel dolgu değerleri de ekleyin.

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

Woo'yu Sepete Ekle Modülünü Sütun 2'ye Ekle

Dinamik İçerik

Bir Woo Sepete Ekle Modülü ekleyerek 2. sütundaki ürün ekranını tamamlayın. İstediğiniz bir ürünü seçin.

• Ürün: Listede bulun

Arka plan rengi

Daha sonra modülün arka plan rengini değiştirin.

• Arka Plan Rengi: #ffd593

Alanlar Metin Ayarları

Alanların metin ayarlarını da değiştirin.

• Alanlar Metin Hizalaması: Merkez
• Alanlar Metin Boyutu: 1vw (Masaüstü), 3vw (Tablet), 4vw (Telefon)
• Yuvarlatılmış Köşeler: 10vw (Tüm Köşeler)

Düğme Ayarları

Ardından, düğmeye stil verin.

• Düğme İçin Özel Stiller Kullan: Evet
• Düğme Metin Boyutu: 1.1vw (Masaüstü), 2vw (Tablet), 3vw (Telefon)
• Düğme Metin Rengi: #000000
• Düğme Arka Plan Rengi: #ffffff
• Düğme Kenar Genişliği: 0px

• Düğme Sınır Yarıçapı: 50vw
• Düğme Yazı Tipi: Montserrat

• Üst Dolgu: 1vw (Masaüstü), 3vw (Tablet), 5vw (Telefon)
• Alt Dolgu: 1vw (Masaüstü), 3vw (Tablet), 5vw (Telefon)
• Sol Dolgu: 4vw (Masaüstü), 15vw (Tablet), 18vw (Telefon)
• Sağ Doldurma: 4vw (Masaüstü), 15vw (Tablet), 18vw (Telefon)

aralık

Farklı ekran boyutlarına bazı özel dolgu değerleri ekleyerek modülün ayarlarını tamamlayın.

• Alt Dolgu: 3vw (Masaüstü), 10vw (Tablet), 15vw (Telefon)
• Sol Dolgu: 2vw (Masaüstü), 9vw (Tablet ve Telefon)
• Sağ Dolgu: 2vw (Masaüstü), 9vw (Tablet ve Telefon)

2. Sütundaki Woo Modüllerini Klonlayın ve Doğru Sırayla Yerleştirin

2. sütundaki tüm modülleri tamamladıktan sonra, her birini klonlayabilir ve kopyaları aynı sırayla yerleştirebilirsiniz.

Tüm Yinelenenlerin Dinamik İçeriğini Değiştirin

Her yinelenen modül için ürünü değiştirin.

• Ürün: Listede bulun

Tüm Yinelemelerin Arka Plan Rengini Değiştir

Arka plan rengiyle birlikte.

• Arka Plan Rengi: #aae7ed

Woo Modüllerini Sütun 2'ye Klonla ve Kopyaları Sütun 3'e Yerleştir

Tüm ürün modüllerini bir kez daha klonlayın ve kopyaları 3. sütuna yerleştirin.

Tüm Yinelenenlerin Dinamik İçeriğini Değiştirin

Sütun 3'teki her modülün dinamik içeriğini değiştirin.

• Ürün: Listede bulun

Tüm Yinelemelerin Arka Plan Rengini Değiştir

Arka plan rengiyle birlikte.

• Arka Plan Rengi: #939bff

Woo Image Modülüne Üst Kenar Boşluğu Ekle

Ve 3. sütunun üstünde biraz boşluk yaratmak için Woo Image Module'ü açacağız ve biraz üst kenar boşluğu ekleyeceğiz.

• Üst Marj: 18vw (Masaüstü), 0vw (Tablet ve Telefon)

Sütun 3'teki Woo Modüllerinin Altına Kod Modülü Ekleyin

Bu öğreticinin son kısmı, öğelerin tablette (yan yana yerine) her birinin altında gösterilmesine izin vermektir. Bunu yapmak için bir Kod Modülü ekleyeceğiz.

Sayfa CSS Kodu Ekle

Ve birkaç satır CSS kodu ekleyeceğiz. Bu adımı tamamladığınızda, işiniz bitti!

<style>
@media only screen and (max-width: 980px) {
.tablet-fullwidth {
width: 100% !important;
}
}</style>

Ön izleme

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

Son düşünceler

Bu gönderide, sepete ekle düğmeleriyle canlı bir ürün ızgarasını nasıl yeniden oluşturacağınızı gösterdik. Bu, açılış sayfanızda birden fazla ürünü sergilemenin harika bir yoludur. Bu eğitim, Divi'nin yerleşik öğe seçenekleriyle birleştirildiğinde Divi'nin yeni WooCommerce modüllerinin ne kadar çok yönlü olduğunu göstermeye gider. JSON dosyasını da ücretsiz olarak indirebildiniz! Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümünde bir yorum bıraktığınızdan emin olun.

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.