Divi’de güzel bir fiyat masası nasıl organize edilir
Fiyat tablosu genellikle bir sayfanın ana CTA’sıdır. Bu yüzden düzgün düzenlemek önemlidir. Divi ile, birçok tur alıp tam olarak hayal ettiğiniz bir fiyat tablosu oluşturabilirsiniz. Size bazı düşünceler vermek için, üzerinde çalıştığınız her türlü web sitesi için kullanabileceğiniz inanılmaz bir fiyat tablosu yaptık. Yalnızca varsayılan Divi seçeneğini kullanarak A’dan Z’ye sonuç vermenize rehberlik edeceğiz. Haydi Yapalım şunu! Önizleme Eğiticiye girmeden önce, sonuçlara farklı bir ekran boyutunda bir göz atalım.
Masaüstü
Dosyayı indir
Divi bültenine katılmak için ücretsiz indirin ve en iyi divi düzen paketinin kopyasına bir e -posta göndereceğiz, ayrıca birçok kaynak, ipucu ve olağanüstü ve ücretsiz divi hileleri. Takip et ve kısa sürede bir divi ustası olacaksınız. Abone olduysanız, e -posta adresinizi aşağıya yazın ve Düzen Paketine erişmek için İndir’i tıklayın.
Abone olmayı başardınız. Aboneliğinizi onaylamak için lütfen e -posta adresinizi kontrol edin ve Ücretsiz Haftalık Divi Düzen Paketine erişin! Yeni bir sayfa için gradyan arka planının yeni bir bölümünü ekleyin ve aşağıdaki gradyan arka planını kullanarak normal bölümü ekleyin:
Renk 1: #ffffff
Renk 2: #353272
Başlangıç Pozisyonu:% 50
Son pozisyon:% 50
Mesafe Ardından, uzay alanı ayarlarını girin ve özel kenar boşluklarını ve dolgu değerlerini değiştirin. Alt kenar boşluğu: 50 piksel (masaüstü), 20px (tablet ve cep telefonu)
Sol kenar boşluğu: 50 piksel (masaüstü), 20px (tablet ve cep telefonu)
Sağ kenar boşluğu: 50 piksel (masaüstü), 20px (tablet ve cep telefonu)
Üst dolgu: 0px
Aşağıda dolgu: 0px
Sütun yapısının yeni bir satırı ekleyin Ayarları değiştirdikten sonra, devam edebilir ve aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyebilirsiniz: Herhangi bir modül eklemeden yapıştırıcı, satır ayarlarını açın ve tasarım sekmesindeki boyut ayarlarını değiştirin. Bu çizgiyi tamamen genişletin: evet
Özel Talang genişliği kullanın: evet
Talang genişliği: 1
Mesafe, o zaman, boşluk ayarlarını açık ve bazı özel dolgu değerleri ekleyin. Üst dolgu: 94px
Dolgu Alt: 177px
Sol dolgu: 150 piksel (masaüstü), 30px (tablet ve cep telefonu)
Sağ dolgu: 150 piksel (masaüstü), 30px (tablet ve cep telefonu)
Sütun 1, 2 ve 3 Sol dolgu: 10 piksel
Sütun 1, 2 ve 3 Sağ dolgu: 10px
1 numaralı metin modülünü Sütun 1’e ekleyin, içeriği ekleyin Modül eklemeye başlamanın zamanı geldi! Çeşitli modüller kullanarak yapmak istediğimiz fiyat tablosunu ayarlıyoruz. İhtiyacımız olan ilk modül metin modülü. İçerik kutusuna ilk üyelik türünün adını ekleyin. Arka plan rengi İçerik ekledikten sonra, arka plan ayarlarını açın ve beyaz arka plan renkleri ekleyin. Arka plan rengi: #fffffff Arka plan görüntüsü Arka Plan Görüntüsü sekmesine döner ve bu yayının başında paylaşılan indirme klasöründe bulabileceğiniz ‘divi-fiyatlama-tablo-bacground-1.png’ dosyasını yükleyin.
Arka Plan Görüntü Boyutu: Kapak Arka Plan Görüntü Pozisyonu: Üst Orta
Arka plan görüntüsünün tekrarlanması: Tekrar yok
Metin Ayarları Sonraki metin ayarlarını değiştirir.
Metin yazı tipi ağırlığı: çok kalın Metin rengi: #ffffff
Metin Boyutu: 80px
Metin mektubu alanı: -3px
Hat yüksekliği metni: 1em
Mesafe ve bazı özel marj ve dolgu değerleri ekleyin.
Üst kenar: 5VW (masaüstü), 0vw (tablet ve cep telefonu) Üst dolgu: 20px
Dolgu Alt: 200px
Sınır, üst kısmın sol ve sağ köşesine ’20px’ ekleyerek devam edin.
Kutunun gölgesi tamamlamak için yumuşak gölge metin modülünü verin. Kutu gölgesinin dikey konumu: -20px Bulanık Güç Gölgesi Kutusu: 80px
Düğmeler için özel bir stil kullanın: evet Metin Renk Düğmesi: #fffffff
Renk 1: #6932ff
Renk 2: #30ACF4
Gradyan yönü: 100 derece
Düğmenin sınır genişliği: 0px
Mektup Mesafe Düğmesi: -2px Harf ağırlığı: Bir sonraki mesafede çok kalın, iyi görünmesi için düğmeye biraz dolgu ekleyin ve negatif üst kenar boşluğunu sütundaki önceki modülle örtüşmek için uygulayın.
Üst kenar: -54px
Üst dolgu: 10 piksel Dolgu Alt: 10 piksel
Sol dolgu: 30px
Sağ dolgu: 30px
Son fakat en az değil kutunun gölgesi, pürüzsüz bir kutu gölgesi ekleyin.
Bulanık Güç Gölgesi Kutusu: 80px
Kutunun gölgesinin dağılımının gücü: -14px Gölge Rengi: RGBA (0.0,0,0,3)
Sütun 1’e Metin Modülü #2 ekleyin İhtiyacımız olan bir sonraki modülün içeriğini ekleyin, üyelik türünün fiyatına sahip başka bir metin modülü.
Fiyatlar ekledikten sonra arka plan rengi, arka plan ayarlarını açın ve beyaz arka plan renkleri uygulayın.
Arka plan rengi: #ffffff Metin Ayarları Sonraki metin ayarlarını değiştirir. Metin yazı tipi ağırlığı: çok kalın
Metin Rengi: RGBA (0.0,0,0.05) Metin Boyutu: 120 piksel
Hat yüksekliği metni: 1em
Mesafe ve boşluk ayarlarında bazı özel dolgu değerleri uygulayın.
Üst dolgu: 100 piksel
Dolgu Alt: 100 piksel Sol dolgu: 80 piksel
Daha sonra sınır ayarına gidin ve alt kısmın sol ve sağ köşesine ’30px’ ekleyin.
Son fakat en az değil kutunun gölgesi, bir kutu gölge modülü verin.
Yatay konum gölge kutusu: 0px Dikey Konum Gölge Kutusu: 2px Bulanık Güç Gölgesi Kutusu: 80px
Gölge kutularının dağılımının gücü: 0px
Gölge Renk: RGBA (0.0,0,0.21)
Sütun 1’e Metin Modülü #3 ekleyin Bir sonraki içeriğin içeriğini ekleyin ve son olarak Sütun 1’de ihtiyacımız olan şey başka bir metin modülüdür. Üyelik türünün fiyatını içerik kutusuna ekleyin.
Metin Ayarları Sonraki metin ayarlarını değiştirir.
Metin yazı tipi ağırlığı: çok kalın Metin rengi: #000000 Metin Boyutu: 50 piksel
Hat Metninin Yüksekliği: 1 Emell ve bu modül arasında ve daha önce özel alan değerleriyle oynayarak üst üste bindirin.
Üst kenar: -180px
Alt kenar boşluğu: 180px (tablet ve cep telefonu)
Sol dolgu: 100 piksel Sütun 1’deki tüm modüllerin klonları iki kez iki kez ve kalan sütuna yinelenmeyi yerleştirin Modülü Sütun 1’deki değiştirmeyi bitirdikten sonra, her bir modülü iki kez klonlayabilir ve kalan iki sütuna yinelenebilirsiniz.
Sütundaki modülü değiştirin Yinelenen içeriği, web sitenizde paylaştığınız diğer iki üyelik türüne göre değiştirin.
Sütun 2’deki fiyat tablosunu değiştirin #1 metin modülünün arka plan görüntüsünü değiştirin Orta fiyat tablosunu da vurguladık. Sütun 2’deki ilk metin modülünü açın ve arka plan görüntüsünü indirme klasöründe bulabileceğiniz ‘divi-fiyatlama-tablo-tablo-pattern-2.png’ dosyasına değiştirin.
#1 metin modülünün kenar boşluğunu kaldırın Bu tür üyeliği vurgulamak için, alan ayarlarında ilk metin modülünün marjını sileceğiz. Degrade düğmemizin 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üyle eşleşecektir. Renk 1: #FB32FF Renk 2: #FF304F Gradyan yönü: 100 derece Önizleme Şimdi tüm adımlardan geçtikten sonra, farklı ekran boyutlarında nihai sonuçlara bakalım. Masaüstü
Hücresel
Abone olmayı başardınız. Aboneliğinizi onaylamak için lütfen e -posta adresinizi kontrol edin ve Ücretsiz Haftalık Divi Düzen Paketine erişin! Yeni bir sayfa için gradyan arka planının yeni bir bölümünü ekleyin ve aşağıdaki gradyan arka planını kullanarak normal bölümü ekleyin:
Renk 1: #ffffff
Renk 2: #353272
Başlangıç Pozisyonu:% 50
Son pozisyon:% 50
Mesafe Ardından, uzay alanı ayarlarını girin ve özel kenar boşluklarını ve dolgu değerlerini değiştirin. Alt kenar boşluğu: 50 piksel (masaüstü), 20px (tablet ve cep telefonu)
Sol kenar boşluğu: 50 piksel (masaüstü), 20px (tablet ve cep telefonu)
Sağ kenar boşluğu: 50 piksel (masaüstü), 20px (tablet ve cep telefonu)
Üst dolgu: 0px
Aşağıda dolgu: 0px
Sütun yapısının yeni bir satırı ekleyin Ayarları değiştirdikten sonra, devam edebilir ve aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyebilirsiniz: Herhangi bir modül eklemeden yapıştırıcı, satır ayarlarını açın ve tasarım sekmesindeki boyut ayarlarını değiştirin. Bu çizgiyi tamamen genişletin: evet
Özel Talang genişliği kullanın: evet
Talang genişliği: 1
Mesafe, o zaman, boşluk ayarlarını açık ve bazı özel dolgu değerleri ekleyin. Üst dolgu: 94px
Dolgu Alt: 177px
Sol dolgu: 150 piksel (masaüstü), 30px (tablet ve cep telefonu)
Sağ dolgu: 150 piksel (masaüstü), 30px (tablet ve cep telefonu)
Sütun 1, 2 ve 3 Sol dolgu: 10 piksel
Sütun 1, 2 ve 3 Sağ dolgu: 10px
1 numaralı metin modülünü Sütun 1’e ekleyin, içeriği ekleyin Modül eklemeye başlamanın zamanı geldi! Çeşitli modüller kullanarak yapmak istediğimiz fiyat tablosunu ayarlıyoruz. İhtiyacımız olan ilk modül metin modülü. İçerik kutusuna ilk üyelik türünün adını ekleyin. Arka plan rengi İçerik ekledikten sonra, arka plan ayarlarını açın ve beyaz arka plan renkleri ekleyin. Arka plan rengi: #fffffff Arka plan görüntüsü Arka Plan Görüntüsü sekmesine döner ve bu yayının başında paylaşılan indirme klasöründe bulabileceğiniz ‘divi-fiyatlama-tablo-bacground-1.png’ dosyasını yükleyin.
Arka Plan Görüntü Boyutu: Kapak Arka Plan Görüntü Pozisyonu: Üst Orta
Arka plan görüntüsünün tekrarlanması: Tekrar yok
Metin Ayarları Sonraki metin ayarlarını değiştirir.
Metin yazı tipi ağırlığı: çok kalın Metin rengi: #ffffff
Metin Boyutu: 80px
Metin mektubu alanı: -3px
Hat yüksekliği metni: 1em
Mesafe ve bazı özel marj ve dolgu değerleri ekleyin.
Üst kenar: 5VW (masaüstü), 0vw (tablet ve cep telefonu) Üst dolgu: 20px
Dolgu Alt: 200px
Sınır, üst kısmın sol ve sağ köşesine ’20px’ ekleyerek devam edin.
Kutunun gölgesi tamamlamak için yumuşak gölge metin modülünü verin. Kutu gölgesinin dikey konumu: -20px Bulanık Güç Gölgesi Kutusu: 80px
Kutunun gölgesinin dağılımının gücü: -10px
Gölge Rengi: RGBA (0.0,0,0.15)
Düğme modülünü Sütun 1’e ekleyin Sütun 1’de ihtiyacımız olan ikinci modülün bir kopyasını düğme modülüdür. Birkaç kopya ekleyin.
Düğmenin hizalanması, tesviye ayarlarını açın ve seviyeyi ortaya değiştirin.
Düğmeler için özel bir stil kullanın: evet Metin Renk Düğmesi: #fffffff
Renk 1: #6932ff
Renk 2: #30ACF4
Gradyan yönü: 100 derece
Düğmenin sınır genişliği: 0px
Mektup Mesafe Düğmesi: -2px Harf ağırlığı: Bir sonraki mesafede çok kalın, iyi görünmesi için düğmeye biraz dolgu ekleyin ve negatif üst kenar boşluğunu sütundaki önceki modülle örtüşmek için uygulayın.
Üst kenar: -54px
Üst dolgu: 10 piksel Dolgu Alt: 10 piksel
Sol dolgu: 30px
Sağ dolgu: 30px
Son fakat en az değil kutunun gölgesi, pürüzsüz bir kutu gölgesi ekleyin.
Bulanık Güç Gölgesi Kutusu: 80px
Kutunun gölgesinin dağılımının gücü: -14px Gölge Rengi: RGBA (0.0,0,0,3)
Sütun 1’e Metin Modülü #2 ekleyin İhtiyacımız olan bir sonraki modülün içeriğini ekleyin, üyelik türünün fiyatına sahip başka bir metin modülü.
Fiyatlar ekledikten sonra arka plan rengi, arka plan ayarlarını açın ve beyaz arka plan renkleri uygulayın.
Arka plan rengi: #ffffff Metin Ayarları Sonraki metin ayarlarını değiştirir. Metin yazı tipi ağırlığı: çok kalın
Metin Rengi: RGBA (0.0,0,0.05) Metin Boyutu: 120 piksel
Hat yüksekliği metni: 1em
Mesafe ve boşluk ayarlarında bazı özel dolgu değerleri uygulayın.
Üst dolgu: 100 piksel
Dolgu Alt: 100 piksel Sol dolgu: 80 piksel
Daha sonra sınır ayarına gidin ve alt kısmın sol ve sağ köşesine ’30px’ ekleyin.
Son fakat en az değil kutunun gölgesi, bir kutu gölge modülü verin.
Yatay konum gölge kutusu: 0px Dikey Konum Gölge Kutusu: 2px Bulanık Güç Gölgesi Kutusu: 80px
Gölge kutularının dağılımının gücü: 0px
Gölge Renk: RGBA (0.0,0,0.21)
Sütun 1’e Metin Modülü #3 ekleyin Bir sonraki içeriğin içeriğini ekleyin ve son olarak Sütun 1’de ihtiyacımız olan şey başka bir metin modülüdür. Üyelik türünün fiyatını içerik kutusuna ekleyin.
Metin Ayarları Sonraki metin ayarlarını değiştirir.
Metin yazı tipi ağırlığı: çok kalın Metin rengi: #000000 Metin Boyutu: 50 piksel
Hat Metninin Yüksekliği: 1 Emell ve bu modül arasında ve daha önce özel alan değerleriyle oynayarak üst üste bindirin.
Üst kenar: -180px
Alt kenar boşluğu: 180px (tablet ve cep telefonu)
Sol dolgu: 100 piksel Sütun 1’deki tüm modüllerin klonları iki kez iki kez ve kalan sütuna yinelenmeyi yerleştirin Modülü Sütun 1’deki değiştirmeyi bitirdikten sonra, her bir modülü iki kez klonlayabilir ve kalan iki sütuna yinelenebilirsiniz.
Sütundaki modülü değiştirin Yinelenen içeriği, web sitenizde paylaştığınız diğer iki üyelik türüne göre değiştirin.
Sütun 2’deki fiyat tablosunu değiştirin #1 metin modülünün arka plan görüntüsünü değiştirin Orta fiyat tablosunu da vurguladık. Sütun 2’deki ilk metin modülünü açın ve arka plan görüntüsünü indirme klasöründe bulabileceğiniz ‘divi-fiyatlama-tablo-tablo-pattern-2.png’ dosyasına değiştirin.
#1 metin modülünün kenar boşluğunu kaldırın Bu tür üyeliği vurgulamak için, alan ayarlarında ilk metin modülünün marjını sileceğiz. Degrade düğmemizin 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üyle eşleşecektir. Renk 1: #FB32FF Renk 2: #FF304F Gradyan yönü: 100 derece Önizleme Şimdi tüm adımlardan geçtikten sonra, farklı ekran boyutlarında nihai sonuçlara bakalım. Masaüstü
Hücresel
