Divi Açılış Sayfanızda Popüler Ürünleri Yaratıcı Bir Şekilde Öne Çıkarma

Bir açılış sayfasında popüler ürünleri gösterirken, yalnızca doğru ürünleri seçmek değil, aynı zamanda onları çekici bir şekilde sergilemek de önemlidir. Divi'nin yeni WooCommerce Modülleri ile sayısız yeni tasarım olasılığı kucağımıza düştü. İlham almanıza yardımcı olmak için, bir sonraki Divi açılış sayfanız için kullanabileceğiniz güzel ve zarif bir popüler ürün tasarımını yeniden yaratacağız. 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.

masaüstü

Statik

üzerine gelin

Mobil

Popüler Ürün Düzenini ÜCRETSİZ İndirin

Ücretsiz popüler ürünler düzenine 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.

Yeniden Yaratmaya Başlayalım!

Yeni Bölüm Ekle

aralık

Yeni bir sayfaya veya mevcut bir sayfaya normal bir bölüm ekleyerek başlayın. Bölüm ayarlarını açın ve üst ve alt dolgu değerlerini buna göre ayarlayın:

• Üst Dolgu: 8vw
• Alt Dolgu: 8vw

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 boyutlandırma ayarlarını değiştirin.

• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1
• Genişlik: 85vw
• Maksimum Genişlik: %100

Sütuna Woo Görüntü Modülü Ekle

Dinamik İçerik

Modül eklemeye başlama zamanı! İhtiyacımız olan ilk modül Woo Image Module. Görüntülemek istediğiniz ürünü seçin.

resim

Tasarım sekmesine gidin ve görüntü ayarlarını değiştirin.

• Görüntü Yuvarlatılmış Köşeler: 20px (Tüm Köşeler)

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

Sütuna Woo Başlık Modülü Ekle

Dinamik İçerik

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

Başlık Metni Ayarları

Modülün başlık metni ayarlarını aşağıdaki gibi değiştirin:

• Başlık Başlık Düzeyi: H3
• Başlık Yazı Tipi: Prata
• Başlık Metin Boyutu: 3vw (Masaüstü), 5vw (Tablet), 7vw (Telefon)

aralık

Farklı ekran boyutlarına bazı özel kenar boşluğu değerleri ekleyerek modülün ayarlarını tamamlayın.

• Üst Marj: 7vw (Masaüstü), 14vw (Tablet ve Telefon)
• Alt Kenar Boşluğu: 2vw (Masaüstü), 4vw (Tablet ve Telefon)
• Sol Kenar Boşluğu: 2vw (Masaüstü), 5vw (Tablet ve Telefon)
• Sağ Kenar Boşluğu: 2vw (Masaüstü), 5vw (Tablet ve Telefon)

Sütuna Woo Açıklama Modülü Ekle

Dinamik İçerik

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

Metin Ayarları

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

• Metin Yazı Tipi: Montserrat
• Metin Boyutu: 0.8vw (Masaüstü), 1.6vw (Tablet), 2vw (Telefon)
• Metin Satır Yüksekliği: 1.8em

aralık

Farklı ekran boyutlarında da özel kenar boşluğu değerleriyle oynayın.

• Üst Marj: 2vw (Masaüstü), 4vw (Tablet ve Telefon)
• Alt Kenar Boşluğu: 2vw (Masaüstü), 4vw (Tablet ve Telefon)
• Sol Kenar Boşluğu: 2vw (Masaüstü), 5vw (Tablet ve Telefon)
• Sağ Kenar Boşluğu: 2vw (Masaüstü), 5vw (Tablet ve Telefon)

Woo Sepete Ekle Modülünü Sütuna Ekle

Dinamik İçerik

Woo Açıklama Modülünün hemen altına bir Woo Sepete Ekle Modülü ekleyeceğiz. İstediğiniz bir ürünü seçin.

Varsayılan Alan Ayarları

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

• Alanlar Arka Plan Rengi: #ffffff
• Alanlar Metin Rengi: #3d3d3d
• Alan Yazı Tipi: Montserrat

• Alan Kenarlık Genişliği: 0px
• Alan Kenarlığı Rengi: #3d3d3d

Fareyle Üzerine Gelme Alanları Ayarları

Fareyle üzerine gelindiğinde kenarlık genişliğini değiştirin.

• Alanlar Kenarlık Genişliği: 1px

Varsayılan Düğme Ayarları

Sonraki düğme ayarlarını açın ve düğmeyi biçimlendirin.

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

• Düğme Yazı Tipi: Prata

• Üst Dolgu: 0.5vw
• Alt Dolgu: 0.5vw
• Sol Dolgu: 2vw
• Sağ Dolgu: 2vw

Fareyle Üzerine Gelme Düğmesi Ayarları

Fareyle üzerine gelindiğinde düğme kenarlığı genişliğini değiştirin.

• Düğme Kenar Genişliği: 1px

aralık

Ardından aralığa gidin ve farklı ekran boyutlarına bazı özel kenar boşlukları değerleri ekleyin.

• Alt Kenar Boşluğu: 7vw (Masaüstü), 14vw (Tablet ve Telefon)
• Sol Kenar Boşluğu: 2vw (Masaüstü), 5vw (Tablet ve Telefon)
• Sağ Kenar Boşluğu: 2vw (Masaüstü), 5vw (Tablet ve Telefon)

Varsayılan Kenarlık Ayarları

Modülün kenarlık ayarlarını da değiştirin.

• Alt Kenar Genişliği: 1px
• Alt Kenar Rengi: #3d3d3d

Kenarlık Ayarlarının üzerine gelin

Ve fareyle üzerine gelindiğinde kenarlık genişliğini kaldırın.

• Alt Kenar Genişliği: 0px

Sütuna Woo Fiyat Modülü Ekle

Dinamik İçerik

Sütunda ihtiyacımız olan son modül bir Woo Fiyat Modülü. İstediğiniz bir ürünü seçin.

Başlık Metni Ayarları

Modülün tasarım sekmesine gidin ve fiyat metin ayarlarını buna göre değiştirin:

• Fiyat Metni Yazı Tipi: Montserrat
• Fiyat Metni Yazı Tipi Ağırlığı: Hafif
• Fiyat Metin Rengi: #333333
• Fiyat Metin Boyutu: 2vw (Masaüstü), 4vw (Tablet), 6vw (Telefon)
• Fiyat Çizgisi Yüksekliği: 1.8em

aralık

Kenar boşluğu değerlerini de değiştirin.

• Alt Marj: 5vw
• Sol Kenar Boşluğu: 2vw (Masaüstü), 5vw (Tablet ve Telefon)
• Sağ Kenar Boşluğu: 2vw (Masaüstü), 5vw (Tablet ve Telefon)

Sütunu İki Kez Klonla

Sütunu ve içindeki tüm modülleri tamamladıktan sonra, tüm sütunu iki kez klonlayabilirsiniz.

Satır Sütun Yapısını Değiştir

Sonraki satırın sütun yapısını değiştirin.

Tüm Dinamik İçeriği Değiştir

2. ve 3. sütundaki tüm dinamik içeriği seçtiğiniz diğer ürünlerle değiştirerek devam edin.

Sütun 2 Modül Aralığını Değiştir

Woo Başlık Modülü

İkinci sütundaki modüller bazı ek boşluk değişikliklerine ihtiyaç duyar. Woo Başlık Modülü ile başlayın.

• Sol Kenar Boşluğu: 5vw (Tüm Cihazlar)
• Sağ Marj: 5vw (Tüm Cihazlar)

Woo Açıklama Modülü

Daha sonra Woo Açıklama Modülünün boşluk ayarlarını değiştirin.

• Üst Marj: 4vw (Tüm Cihazlar)
• Alt Marj: 4vw (Tüm Cihazlar)
• Sol Kenar Boşluğu: 5vw (Tüm Cihazlar)
• Sağ Marj: 5vw (Tüm Cihazlar

Woo Sepete Ekle Modülü

Woo Sepete Ekle Modülünün boşluk ayarlarına geçin.

• Sol Kenar Boşluğu: 5vw (Tüm Cihazlar)
• Sağ Marj: 5vw (Tüm Cihazlar)

Woo Fiyat Modülü

Ve Woo Price Modülünün aralık ayarlarını da değiştirerek sütun 2 modüllerini tamamlayın.

• Sol Kenar Boşluğu: 5vw (Tüm Cihazlar)
• Sağ Marj: 5vw (Tüm Cihazlar)

Sütun Stilleri

Tüm Sütunlar

Arka plan rengi

Artık tüm modüllerimizi yerleştirdiğimize göre, sütunları şekillendirmeye başlayabiliriz. Sütunların her birinin beyaz bir arka plan rengine ihtiyacı vardır.

• Arka Plan Rengi: #ffffff

Sınır

Her sütunun köşelerine de '20px' ekleyebilirsiniz.

• Yuvarlak Köşeler: 20px (Tüm Köşeler)

Sütun 1 ve 3

Varsayılan Kutu Gölgesi

Sütun 1 ve 3'e varsayılan bir kutu gölgesi ekleyerek devam edin.

• Kutu Gölge Dikey Konumu: 22px
• Kutu Gölge Gölge Bulanıklığı Gücü: 150 piksel
• Gölge Rengi: rgba(0,0,0,0) (Masaüstü), rgba(0,0,0,0.1) (Tablet ve Telefon)

Vurgulu Kutu Gölgesi

Vurgulu üzerinde vurgulu gölge rengini değiştirin.

• Gölge Rengi: rgba(0,0,0,0.27)

Varsayılan Filtreler

Ardından, filtre ayarlarına gidin ve hem 1 hem de 3 sütunlarına biraz bulanıklık ekleyin.

• Bulanıklık: 4px (Masaüstü), 0px (Tablet ve Telefon)

Hover Filtreleri

Fareyle üzerine gelindiğinde bulanıklığı kaldırın.

• Bulanıklık: 0 piksel

Varsayılan Z İndeksi

Sonraki sütunlara aynı varsayılan z dizin değerini atayın.

• Z İndeksi: 9

Z indeksinin üzerine gelin

Ve fareyle üzerine gelindiğinde aynı z dizinini artırın.

• Z İndeksi: 12

Yalnızca 1. Sütun

Dönüştür Çeviri

Dönüştürme çevirisi seçeneğini kullanarak sütun 1 konumunu değiştirerek devam edin.

• Sağ: 7vw (Masaüstü), 0vw (Tablet ve Telefon)
• Alt: 2vw (Masaüstü), 0vw (Tablet ve Telefon)

Yalnızca Sütun 3

Dönüştür Çeviri

Sonraki sütun 3 dönüştürme ayarlarını açın ve aşağıdaki ayarları uygulayın:

• Sağ: 7vw (Masaüstü), 0vw (Tablet ve Telefon)
• Alt: -2vw (Masaüstü), 0vw (Tablet ve Telefon)

Yalnızca 2. Sütun

Kutu Gölge

Sütun 2 ayarlarına geçin ve ince bir kutu gölgesi uygulayın.

• Kutu Gölge Dikey Konumu: 22px
• Kutu Gölge Bulanıklığı Gücü: 150 piksel
• Gölge Rengi: rgba(0,0,0,0.27) (Masaüstü), rgba(0,0,0,0.1) (Tablet ve Telefon)

Z İndeksi

Son olarak, ikinci sütunun z dizinini değiştirin ve işiniz bitti!

• Z İndeksi: 11

Ön izleme

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

masaüstü

Statik

üzerine gelin

Mobil

Son düşünceler

Bu gönderide, popüler ürünleri Divi açılış sayfanızda nasıl zarif bir şekilde öne çıkaracağınızı gösterdik. Sadece Divi'nin yerleşik seçeneklerini kullanarak güzel bir sonucun nasıl oluşturulacağını adım adım gösterdik. Bu tasarım örneği, Divi'nin yeni WooCommerce modüllerinin ne kadar çok yönlü olduğunu ve kısa sürede nasıl çarpıcı e-ticaret web tasarımı oluşturabileceğinizi gösteriyor. 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.