Divi'de Güzel Bir Fiyat Tablosu Nasıl Stillendirilir
Yayınlanan: 2018-12-28Fiyatlandırma tabloları genellikle bir sayfanın ana CTA'sıdır. Bu yüzden onları uygun şekilde şekillendirmek önemlidir. Divi ile birçok dönüş yapabilir ve tam olarak hayal ettiğiniz gibi fiyat tabloları oluşturabilirsiniz. Size biraz fikir vermek için, üzerinde çalıştığınız her tür web sitesi için kullanabileceğiniz çarpıcı bir fiyat tablosu oluşturduk. Yalnızca Divi'nin yerleşik seçeneklerini kullanarak A'dan Z'ye sonucu oluşturmada size rehberlik edeceğiz.
Hadi hadi bakalım!
Ön izleme
Öğreticiye dalmadan önce, farklı ekran boyutlarındaki sonuca hızlıca bir göz atalım.
masaüstü
Mobil
Görüntüleri ÜCRETSİZ İndirin
Bu eğitimde kullanılan görsellere 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.
Ü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.
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!
Divi'de Güzel Bir Fiyat Tablosu Nasıl Stillendirilir
Youtube Kanalımıza Abone Olun
Hadi Yaratmaya Başlayalım!
Yeni Bölüm Ekle
Degrade Arka Plan
Yeni bir sayfa oluşturun ve aşağıdaki gradyan arka planını kullanarak normal bir bölüm ekleyin:
- Renk 1: #ffffff
- Renk 2: #353272
- Başlangıç Konumu: %50
- Bitiş Konumu: %50
aralık
Ardından, bölümün boşluk ayarlarına gidin ve özel kenar boşluğu ve dolgu değerlerini değiştirin.
- Alt Kenar Boşluğu: 50px (Masaüstü), 20px (Tablet ve Telefon)
- Sol Kenar Boşluğu: 50px (Masaüstü), 20px (Tablet ve Telefon)
- Sağ Kenar Boşluğu: 50px (Masaüstü), 20px (Tablet ve Telefon)
- Üst Dolgu: 0px
- Alt Dolgu: 0px
Yeni Satır Ekle
Sütun Yapısı
Bölüm ayarlarını değiştirmeyi bitirdikten sonra, aşağıdaki sütun yapısını kullanarak devam edebilir ve yeni bir satır ekleyebilirsiniz:
boyutlandırma
Henüz herhangi bir modül eklemeden, tasarım sekmesinde satır ayarlarını açın ve boyutlandırma ayarlarını değiştirin.
- Bu Satırı Tam Genişlikte Yap: Evet
- Özel Oluk Genişliğini Kullan: Evet
- Oluk Genişliği: 1
aralık
Ardından, boşluk ayarlarına gidin ve bazı özel dolgu değerleri ekleyin.
- Üst Dolgu: 94px
- Alt Dolgu: 177px
- Sol Dolgu: 150 piksel (Masaüstü), 30 piksel (Tablet ve Telefon)
- Sağ Dolgu: 150 piksel (Masaüstü), 30 piksel (Tablet ve Telefon)
- Sütun 1, 2 ve 3 Sol Dolgu: 10px
- Sütun 1, 2 ve 3 Sağ Dolgu: 10 piksel
Metin Modülü #1'i Sütun 1'e ekleyin
İçerik Ekle
Modül eklemeye başlama zamanı! Oluşturmak istediğimiz fiyat tablosunu çeşitli modüller kullanarak özelleştiriyoruz. İhtiyacımız olan ilk modül bir Metin Modülü. İçerik kutusuna ilk üyelik türünün adını ekleyin.
Arka plan rengi
İçeriği ekledikten sonra arka plan ayarlarına gidin ve beyaz bir arka plan rengi ekleyin.
- Arka Plan Rengi: #ffffff
Arka plan görüntüsü
Arka plan resmi sekmesine geçin ve bu yazının başında paylaşılan indirme klasöründe bulabileceğiniz ' divi-beauty-pricing-table-background-pattern-1.png ' dosyasını yükleyin.
- Arka Plan Resmi Boyutu: Kapak
- Arka Plan Resmi Konumu: Üst Merkez
- Arka Plan Resmi Tekrarı: Tekrar Yok
Metin Ayarları
Sonraki metin ayarlarını değiştirin.
- Metin Yazı Tipi Ağırlığı: Ultra Kalın
- Metin Rengi: #ffffff
- Metin Boyutu: 80px
- Metin Harf Aralığı: -3px
- Metin Satır Yüksekliği: 1em
aralık
Ve bazı özel kenar boşluğu ve dolgu değerleri ekleyin.
- Üst Marj: 5vw (Masaüstü), 0vw (Tablet ve Telefon)
- Üst Dolgu: 20px
- Alt Dolgu: 200px
Sınır
Sol üst ve sağ köşelere '20px' ekleyerek devam edin.
Kutu Gölge
Üstüne üstlük, Metin Modülüne ince bir kutu gölgesi verin.
- Kutu Gölgesi Dikey Konumu: -20px
- Kutu Gölge Bulanıklığı Gücü: 80px
- Kutu Gölge Yayılma Gücü: -10px
- Gölge Rengi: rgba(0,0,0,0.15)
Sütun 1'e Düğme Modülü Ekle
Kopya Ekle
Sütun 1'de ihtiyaç duyacağımız ikinci modül bir Düğme Modülüdür. Seçimin bir kopyasını ekleyin.
Düğme Hizalama
Ardından hizalama ayarlarına gidin ve hizalamayı orta olarak değiştirin.
- Düğme Hizalama: Merkez
Düğme Ayarları
Buton ayarlarında butonun görünümünde bazı değişiklikler yaparak devam edeceğiz.
- Düğme için Özel Stilleri Kullan: Evet
- Düğme Metin Rengi: #ffffff
- Renk 1: #6932ff
- Renk 2: #30acf4
- Gradyan Yönü: 100deg
- Düğme Kenar Genişliği: 0px
- Düğme Harf Aralığı: -2px
- Yazı Tipi Ağırlığı: Ultra Kalın
aralık
Ardından, güzel görünmesi için düğmeye biraz dolgu ekleyin ve sütundaki önceki modülle örtüşme oluşturmak için negatif üst kenar boşluğu uygulayın.
- Üst Kenar Boşluğu: -54px
- Üst Dolgu: 10px
- Alt Dolgu: 10px
- Sol Dolgu: 30px
- Sağ Dolgu: 30px
Kutu Gölge
Son olarak, ince bir kutu gölgesi ekleyin.
- Kutu Gölge Bulanıklığı Gücü: 80px
- Kutu Gölge Yayılma Gücü: -14px
- Gölge Rengi: rgba(0,0,0,0.3)
Metin Modülü #2'yi Sütun 1'e ekleyin
İçerik Ekle
İhtiyacımız olan bir sonraki modül, üyelik tipinin fiyatına sahip başka bir Metin Modülü.
Arka plan rengi
Fiyatı ekledikten sonra arka plan ayarlarına gidin ve beyaz bir arka plan rengi uygulayın.
- Arka Plan Rengi: #ffffff
Metin Ayarları
Sonraki metin ayarlarını değiştirin.
- Metin Yazı Tipi Ağırlığı: Ultra Kalın
- Metin Rengi: rgba(0,0,0,0.05)
- Metin Boyutu: 120px
- Metin Satır Yüksekliği: 1em
aralık
Ve boşluk ayarlarında bazı özel dolgu değerleri uygulayın.
- Üst Dolgu: 100 piksel
- Alt Dolgu: 100px
- Sol Dolgu: 80px
Sınır
Ardından kenarlık ayarlarına gidin ve sol ve sağ alt köşelere '30px' ekleyin.
Kutu Gölge
Son olarak, modüle bir kutu gölgesi verin.
- Kutu Gölgesi Yatay Konumu: 0px
- Kutu Gölge Dikey Konumu: 2px
- Kutu Gölge Bulanıklığı Gücü: 80px
- Kutu Gölge Yayılma Gücü: 0px
- Gölge Rengi: rgba(0,0,0,0.21)
Sütun 1'e Metin Modülü #3'ü ekleyin
İçerik Ekle
Sütun 1'de ihtiyacımız olan sonraki ve son modül başka bir Metin Modülüdür. İçerik kutusuna üyelik tipinin fiyatını ekleyin.
Metin Ayarları
Sonraki metin ayarlarını değiştirin.
- Metin Yazı Tipi Ağırlığı: Ultra Kalın
- Metin Rengi: #000000
- Metin Boyutu: 50px
- Metin Satır Yüksekliği: 1em
aralık
Ve özel boşluk değerleriyle oynayarak bu modül ile bir önceki modül arasında bir örtüşme oluşturun.
- Üst Kenar Boşluğu: -180px
- Alt Kenar Boşluğu: 180 piksel (Tablet ve Telefon)
- Sol Dolgu: 100 piksel
Sütun 1'deki Tüm Modülleri İki Kez Klonlayın ve Kopyaları Kalan Sütunlara Yerleştirin
1. sütundaki modülleri değiştirmeyi bitirdikten sonra, devam edip modüllerin her birini iki kez klonlayabilir ve kopyaları kalan iki sütuna yerleştirebilirsiniz.
Sütundaki Modüllerin İçeriğini Değiştir
Yinelenenlerin içeriğini web sitenizde paylaştığınız diğer iki üyelik türüne göre değiştirin.
2. Sütundaki Fiyatlandırma Tablosunu Değiştirin
Metin Modülü #1'in Arka Plan Resmini Değiştir
Ayrıca orta fiyat tablosunu da vurguluyoruz. Sütun 2'deki ilk Metin Modülünü açın ve arka plan resmini indirme klasöründe bulabileceğiniz ' divi-güzel-pricing-table-background-pattern-2.png ' dosyasına değiştirin.
Metin Modülü #1'in Üst Kenar Boşluğunu Kaldır
Bu üyelik türünü vurgulamak için, boşluk ayarlarındaki ilk Metin Modülünün üst kenar boşluğunu kaldıracağız.
Düğme Degrade Arka Planını Değiştir
Düğme Modülü için başka bir gradyan arka planı kullanarak yeni arka plan görüntüsünü de eşleştireceğiz.
- Renk 1: #fb32ff
- Renk 2: #ff304f
- Gradyan Yönü: 100deg
Ön izleme
Artık tüm adımlardan geçtik, şimdi sonuca farklı ekran boyutlarında son bir göz atalım.
masaüstü
Mobil
Son düşünceler
Bu gönderide, bir sonraki Divi projeniz için güzel bir fiyatlandırma tablosunu nasıl şekillendireceğinizi gösterdik. Size öğretici boyunca adım adım rehberlik ettik ve yalnızca Divi'nin yerleşik seçeneklerini kullanarak çarpıcı bir sonuç elde ettik! Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümünde bir yorum bıraktığınızdan emin olun.