Divi ile Geri Sayım 'Günün Fırsatı' Ürün Bölümü Nasıl Oluşturulur

Çevrimiçi dönüşüm oranlarını artırmanın yollarını ararken, birçok web sitesinin açılış sayfalarında 'günün fırsatı' ürün bölümünün bulunduğunu fark edeceksiniz. Bu, ziyaretçilere aciliyet duygusu verir ve karar verme sürecini kısaltabilir. Bu gönderide, yalnızca Divi'nin yerleşik seçenekleriyle günün ürün bölümü tasarımının çarpıcı bir geri sayım fırsatını nasıl oluşturacağınızı göstereceğiz. Kullandığımız tasarım stili zarif ve temizdir ve tasarımdaki farklı öğeleri vurgulamak için bir miktar renk içerir. 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ü

Mobil

Geri Sayım 'Günün Fırsatı' Ürün Bölümünü ÜCRETSİZ İndirin

Ücretsiz geri sayım 'günün fırsatı' ürün bölümünden yararlanmak için öncelikle aşağıdaki butondan indirmeniz gerekiyor. İ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.

Youtube Kanalımıza Abone Olun

Yeniden Yaratmaya Başlayalım!

Yeni Bölüm Ekle

Günün fırsatı ürün bölümünü eklemek istediğiniz sayfayı açın ve yeni bir normal bölüm ekleyin.

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 boyutlandırma ayarlarında satırın ekranı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

aralık

Boşluk ayarlarında satırın varsayılan üst ve alt dolgusunu kaldırarak devam edin.

• Üst Dolgu: 0px
• Alt Dolgu: 0px

Sütun 1

Sonraki sütun 1 ayarlarını açın.

Varsayılan Degrade Arka Planı

Ve buna varsayılan bir degrade arka planı ekleyin.

• Renk 1: #1c1c1c
• Renk 2: #ffffff
• Gradyan Yönü: 90deg
• Başlangıç ​​Konumu: %66
• Bitiş Konumu: %66

Vurgulu Gradyan Arka Planını Kaldır

Fareyle üzerine gelindiğinde aynı degrade arka planını kaldırın.

2. sütun

Sonraki sütun 2 ayarlarını açın.

aralık

Ve farklı ekran boyutlarına bazı özel sol ve sağ dolgu ekleyin.

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

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

Dinamik İçerik

Satır ve sütun ayarlarını tamamladığımıza göre artık modül eklemeye başlayabiliriz. Sütun 1'e bir Woo Görüntü Modülü ekleyin ve tercih ettiğiniz ürünü seçin.

• Ürün: Listede bulun

Elementler

Bir sonraki satış rozetini kaldırın.

• Satış Rozetini Göster: KAPALI

aralık

Bazı özel boşluk değerleri de ekleyin.

• Üst Marj: 6vw
• Sol Dolgu: 3vw (Tablet ve Telefon)
• Sağ Dolgu: 3vw

Sütun 1'e Metin Modülü Ekle

İçerik Ekle

Sütun 1'de ihtiyacımız olan sonraki ve son modül bir Metin Modülüdür. Seçtiğiniz bazı içeriği girin.

Arka plan rengi

Modülün arka plan rengini değiştirin.

• Arka Plan Rengi: rgba(165,255,250,0.4)

Metin Ayarları

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

• Metin Yazı Tipi: Playfair Ekranı
• Metin Yazı Tipi Ağırlığı: Ağır
• Metin Yazı Tipi Stili: Büyük Harf
• Metin Rengi: #ffffff
• Metin Boyutu: 1.5vw (Masaüstü), 3vw (Tablet), 3.5vw (Telefon)

boyutlandırma

Farklı ekran boyutlarında da genişlikle oynayın.

• Genişlik: 20vw (Masaüstü), 40vw (Tablet), 45vw (Telefon)

aralık

Ardından, boşluk ayarlarına gidin ve bazı özel üst ve alt dolgu ekleyin.

• Üst Dolgu: 3vw
• Alt Dolgu: 3vw

Kutu Gölge

Tasarıma biraz derinlik kazandırmak için bir kutu gölgesi de ekleyeceğiz.

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

Dönüştür Çeviri

Dönüştürme çeviri değerlerini kullanarak modülü yeniden konumlandırarak metin modülünü tamamlayın.

• Sağ: -38vw (Masaüstü), -74vw (Tablet ve Telefon)

Sütun 2'ye Metin Modülü Ekle

İçerik Ekle

Bir sonraki sütuna! Orada, ihtiyacımız olan ilk modül normal bir Metin Modülü. Seçtiğiniz bazı içeriği ekleyin.

Metin Ayarları

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

• Metin Yazı Tipi: Sans'ı Aç
• Metin Yazı Tipi Ağırlığı: Hafif
• Metin Yazı Tipi Stili: Büyük Harf
• Metin Rengi: #000000
• Metin Boyutu: 1vw (Masaüstü), 3vw (Tablet), 4vw (Telefon)

aralık

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

• Üst Marj: 8vw (Masaüstü), 12vw (Tablet ve Telefon)
• Alt Dolgu: 2vw (Masaüstü), 5vw (Tablet), 7vw (Telefon)
• Sol Dolgu: 2vw

Sınır

Sırada bir sol kenarlık ekliyoruz.

• Sol Kenar Genişliği: 2px
• Sol Kenar Rengi: rgba(0,219,193,0.4)

2. Sütun'a Geri Sayım Sayacı Modülü Ekle

Başlık Kutusunu Boş Bırak ve Tarihi Ayarla

Geri Sayım Sayacı Modülü olan bir sonraki modüle geçin. Başlık kutusunu boş bıraktığınızdan emin olun ve istediğiniz tarihi seçin.

Arka Plan Rengini Kaldır

Sonraki arka plan ayarlarını açın ve arka plan rengini devre dışı bırakın.

• Arka Plan Rengini Kullan: HAYIR

Metin Ayarları

Tasarım sekmesine gidin ve metin hizalamasını değiştirin.

• Metin Hizalama: Sol

Sayı Metin Ayarları

Sonraki sayı metin ayarlarını değiştirin.

• Sayı Yazı Tipi: Açık Sans
• Sayılar Yazı Tipi Ağırlığı: Yarı Kalın
• Sayılar Metin Rengi: #00dbc1
• Sayılar Metin Boyutu: 2vw (Masaüstü), 4vw (Tablet), 6vw (Telefon)

Ayırıcı Metin Ayarları

Ardından, ayırıcı metin rengini değiştirin.

• Ayırıcı Metin Rengi: #ffffff

Etiket Metni Ayarları

Ayrıca etiket metninin görünümünü ve verdiği hissi de değiştirin.

• Etiket Metni Rengi: #282828
• Etiket Metin Boyutu: 0.8vw (Masaüstü), 1.3vw (Tablet), 2vw (Telefon)

boyutlandırma

Modülün genişliğini farklı ekran boyutlarında küçültün.

• Genişlik: 30vw (Masaüstü), 45vw (Tablet), 65vw (Telefon)

aralık

Ve boşluk ayarlarında dolgu değerlerini değiştirin.

• Üst Dolgu: 0px
• Alt Dolgu: 0px
• Sol Dolgu: 2vw
• Sağ Dolgu: 0px

Sınır

Sol kenarlık ekleyerek modülün ayarlarını tamamlayın.

• Sol Kenar Genişliği: 2px
• Sol Kenar Rengi: rgba(0,219,193,0.4)

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

Dinamik İçerik

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

• Ürün: Listede bulun

Bağlantı

Sonraki modüle bir ürün bağlantısı ekleyin.

• Ürün Bağlantısı: Listede bulun

Başlık Metni Ayarları

Modülün başlık metni ayarlarını değiştirerek devam edin.

• Başlık Başlık Düzeyi: H2
• Başlık Yazı Tipi: Playfair Gösterimi
• Başlık Yazı Tipi Ağırlığı: Ağır
• Başlık Yazı Tipi Stili: Büyük Harf
• Başlık Metin Rengi: #1c1c1c
• Başlık Metin Boyutu: 2.9vw (Masaüstü), 10vw (Tablet), 12vw (Telefon)

aralık

Aralık ayarlarına geçin ve kenar boşluğu değerleriyle oynayın.

• Üst Marj: 4vw (Masaüstü), 10vw (Tablet ve Telefon)
• Alt Kenar Boşluğu: 3vw (Masaüstü), 6vw (Tablet ve Telefon)

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

Dinamik İçerik

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

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

Metin Ayarları

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

• Metin Yazı Tipi: Sans'ı Aç
• Metin Boyutu: 0.8vw (Masaüstü), 1.9vw (Tablet), 2.5vw (Telefon)
• Metin Satır Yüksekliği: 1.8em
• Metin Hizalama: Yasla

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

Dinamik İçerik

Woo Açıklama Modülünün hemen altına bir Woo Fiyat Modülü ekleyin ve ürününüzü seçin.

• Ürün: Listede bulun

Satış Eski Fiyat Metin Ayarları

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

• Satılık Eski Fiyat Yazı Tipi: Açık Sans
• Satış Eski Fiyat Metin Rengi: #00dbc1
• Satılık Eski Fiyat Metin Boyutu: 1vw (Masaüstü), 4vw (Tablet), 6vw (Telefon)
• Satış Eski Fiyat Çizgi Yüksekliği: 1.8em

İndirim Yeni Fiyat Metin Ayarları

İndirimli yeni fiyat metin ayarlarını da değiştirerek devam edin.

• Satılık Yeni Fiyat Yazı Tipi: Açık Sans
• Satış Yeni Fiyat Metin Rengi: #000000
• İndirim Yeni Fiyat Yazı Boyutu: 2vw (Masaüstü), 6vw (Tablet), 8vw (Telefon)
• Satış Yeni Fiyat Çizgi Yüksekliği: 1.8em

boyutlandırma

Ardından, boyutlandırma ayarlarına gidin ve farklı ekran boyutlarının genişliğini değiştirin.

• Genişlik: 10vw (Masaüstü), 35vw (Tablet ve Telefon)

aralık

Bazı özel üst ve alt kenar boşluğu değerleri de ekleyin.

• Üst Marj: 6vw (Masaüstü)
• Alt Kenar Boşluğu: 4vw (Masaüstü), 10vw (Tablet ve Telefon)

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

Dinamik İçerik

Woo Sepete Ekle Modülü olan bir sonraki ve son modüle geçin. Ürününüzü seçin.

• Ürün: Listede bulun

Alanlar Metin Ayarları

Sonraki alanların arka plan rengini değiştirin.

• Alanlar Arka Plan Rengi: rgba(0,219,193,0.4)

Düğme Ayarları

Düğmeyi şekillendirerek modülün tasarımını tamamlayın ve işiniz bitti!

• Düğme İçin Özel Stiller Kullan: Evet
• Düğme Metin Boyutu: 1vw (Masaüstü), 2vw (Tablet), 3vw (Telefon)
• Düğme Metin Rengi: #ffffff
• Düğme Arka Plan Rengi: #1c1c1c

• Düğme Sınır Yarıçapı: 0px
• Düğme Yazı Tipi: Sans'ı Aç
• Düğme Yazı Tipi Stili: Büyük Harf

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

Ö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ü

Mobil

Son düşünceler

Bu gönderide, size günün ürün bölümü tasarımının çarpıcı bir geri sayım fırsatını nasıl oluşturacağınızı gösterdik. Bu tasarımı yalnızca Divi'nin yerleşik woo modüllerini ve seçeneklerini kullanarak oluşturduk. Bu, ürününüze aciliyet duygusu katmanın harika bir yoludur. 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.