Divi Sitenize Ödeme Hesaplayıcı ve Sınırlı Süreli Anlaşma Nasıl Eklenir

Web sitenizde ürün satmaya çalışıyorsanız, dönüşümleri artırmak için ekleyebileceğiniz belirli öğeler vardır. Bu özellikle araba gibi büyük biletler için geçerlidir.

Kabul edelim, hepimiz bir araba için 30 bin nakit paraya (veya disipline) sahip değiliz. Bu nedenle, yeni bir araba satın almak istediğinizde, çevrimiçi ödeme hesaplayıcıları satın alma sürecinde önemli bir rol oynayabilir. Arka planda çalışan matematik sihirbazlığının yanı sıra, ödeme hesaplayıcıları, alıcıya web sitenizde, satıcı için dönüşümleri gerçekten artırabilecek uygun bir araçla yardımcı olur.

Bir kullanıcıyı bir düğmeyi tıklamaya teşvik etmenin başka bir yolu, kullanıcıya anlaşmanın yakında sona ereceğini daha açık hale getirmek için öne çıkan bir anlaşmaya bir geri sayım sayacı eklemektir.

Bu kullanım örneği eğitiminde, web sitenize bir ödeme hesaplayıcısını ve sınırlı süreli bir anlaşmayı nasıl ekleyeceğinizi göstereceğim. Ödeme hesaplayıcıyı eklemek için, Hesaplanan Alanlar Formu eklentisini kullanacağım ve tasarımı, Araba Satıcısı Finansman Sayfası Düzenine uyacak şekilde Görsel Oluşturucu ile özelleştireceğim. Ayrıca, Araba Satıcısı Listeleri Sayfası düzenindeki öğeleri nasıl kullanabileceğinizi ve sınırlı süreli özellikli bir anlaşma oluşturmak için bunları Geri Sayım sayacıyla nasıl birleştirebileceğinizi göstereceğim.

Başlayalım!

Gizlice Bakış

Ödeme hesaplayıcısına ve oluşturacağımız sınırlı süreli özellikli anlaşmaya kısa bir bakış:

Bu Eğitim için Neye İhtiyacınız Var?

Bu kullanım örneği eğitimi için ihtiyacınız olacak:

• Divi Teması
• Visual Builder'dan erişilebilen Araba Satıcısı Düzen Paketi (Finansman Sayfası ve Listeler Sayfası Düzeni).
• Hesaplanan Alanlar Formu eklentisi

Eklenti İşlevselliğini Keşfetmek

Hesaplanan Alanlar Formu Eklentisi, ne yaptığınızı biliyorsanız, hayal edebileceğiniz her türlü hesaplamayı oluşturmak için güçlü bir araçtır. Ancak hayatınızı kolaylaştırmak istiyorsanız (siz matematikçi olmayanlarla konuşuyorum), daha kolay uygulama için eklentinin profesyonel sürümlerine bakmalısınız. Örneğin, Developer veya Platinum sürümleri, finansal denklemlerin uygulanmasını çok daha kolay hale getiren bir finansal modül içerir.

Neyse ki, ücretsiz sürüm, bir Kira Hesaplama Formu da dahil olmak üzere, çalışmaya başlamanız için önceden oluşturulmuş bazı yararlı formlar sunar.

Şimdi bu formların nasıl oluşturulduğuna bir göz atalım. Kira Hesaplama Formu ayarlarını görüntülemek için tıklayın. Orada yeni alanlar ekleyebileceğiniz ve alan ve form ayarlarını düzenleyebileceğiniz Form Oluşturucu'yu göreceksiniz.

Belirli bir alanı düzenlemek için sağdaki form oluşturucudaki alanın üzerine gelmeniz yeterlidir; alan ayarları solda görünecektir.

Bu Kira Hesaplayıcı formunda Aylık Ödeme, Toplam Ödeme ve Faiz Tutarını hesaplayan üç Hesaplanmış Alan bulunur. Bu özel hesaplanmış alanlar, kullanıcının sayı giriş alanlarına (Kredi Tutarı, Faiz Oranı, % vb…) girdiği değerlere göre yeni hesaplamalar üretecektir.

Bu alanı oluşturmak için denklemin nasıl kullanıldığını görmek için Aylık Ödeme Hesaplanan Alanına tıklayın.

Bu denklemin arkasındaki matematiğe çok fazla ayrıntıya girmeden (istesem bile yapamadım), denklemde kullanılan farklı alan adı değişkenlerine dikkat çekmek istiyorum. Farklı değişkenler, formdaki belirli alanlarla ilişkilidir. Ve form alanları girildikten sonra bu değişkenler gerçek sayılarla değiştirilir ve denklemin hesaplanan alanı (bu durumda Aylık Ödeme) dışarı tükürmesine izin verir. Bu form için kullanılan farklı denklem formatlarını kontrol etmekten çekinmeyin.

Ödeme Hesaplayıcı Kısa Kodunu Sayfanıza Ekleme

Lease Calculator Form Shortcode'unu sayfanıza eklemek için önce form listesine geri dönün ve Lease Calculator Formunun yanındaki kısa kodu kopyalayın.

Ardından, Araba Satıcısı Finansman Sayfası Düzeni ile sayfanıza gidin. Henüz yoksa, yeni bir sayfa oluşturun ve Divi Builder'ı kullanarak düzeni içe aktarın.

“Kaynaklar” başlıklı bölümün hemen altındaki bölümü bulun. Bu bölüm, sağda iletişim formu ve solda bir metin modülü bulunan iki sütunlu bir satıra sahiptir. Sol sütundaki Metin Modülünü, iletişim formunun hemen yukarısındaki sağ sütunun üstüne taşıyın.

Artık kısa kodumuzu kullanarak hesap makinemizi sol sütuna ekleyebiliriz. Devam edin ve yeni bir metin modülü ekleyin ve kısa kodu içerik kutusuna yapıştırın.

Ödeme Hesaplayıcı Tasarımını Özelleştirme

Formumuzu düzene uyacak şekilde şekillendirmeye başlamadan önce, eklentinin formunuza özel bir görünüm kazandırmak için kullanabileceğiniz önceden tasarlanmış bazı şablonlar içerdiğini belirtmek isterim. Bu seçeneğe form ayarlarından erişebilirsiniz.

Ancak bunun, metin modülü ayarlarında şablonun css'sini geçersiz kılma yeteneğinizi sınırladığını unutmayın. Bu yüzden, formu varsayılan şablonda tutmanın ve mümkün olduğunca Divi Builder ile stil eklemenin en iyisi olduğunu düşünüyorum.

Kısa kodunuzla metin modülünüze gidin ve metin rengini açık olarak değiştirin.

Metnin geri kalanını düzeninizle eşleştirmenin hızlı bir yolu, sağ sütundaki tanıtım yazısı modülüne gitmek ve kullanılan gövde metni stilini kopyalamaktır.

Ardından sol sütundaki metin modülüne sağ tıklayın ve gövde metin stillerini modüle yapıştırın.

Bu, metin ayarlarını düzene uyacak şekilde güncelleyecektir.

Şimdi tanıtıcı modüle geri dönün ve Başlık Metni Stillerini kopyalayın.

Ardından bunları metin modülüne yapıştırın. Bu, hesaplayıcı formunuzun başlık metnini düzeninize uyacak şekilde güncelleyecektir.

Artık form metniniz mizanpajınızla eşleştiğine göre, form alanlarını tasarlamak için özel CSS'ye son bir dokunuşa ihtiyacınız olacak. SSS sayfasındaki formdaki farklı öğeleri hedeflemek için eklenti tarafından kullanılan CSS Kimliklerini ve Sınıflarını bulabilirsiniz.

Tüm giriş alanlarını hedeflemek istediğimiz için Tema Özelleştirici > Ek CSS'ye gidin ve aşağıdaki CSS'yi girin:

#fbuilder input,
#fbuilder textarea,
#fbuilder select {
border: none;
padding: 0.5em 0.2em 0.5em 1em;
font-size: 16px;
}

Tüm bu css, girdi alanlarımıza daha fazla dolgu vermek, çirkin kenarlığı çıkarmak ve yazı tipi boyutunu artırmaktır.

Artık formunuz yola çıkmaya hazır!

Sınırlı Süreli Anlaşma Oluşturma

Ödeme hesaplayıcımız devreye girdiğinde, sınırlı süreli özellikli bir anlaşma oluşturmaya hazırız. Bunu yapmak için, ihtiyacımız olan tasarım öğelerine atlamak için Araba Satıcısı Listeleri Sayfası düzeninden bir araba listesi kullanacağız. Ardından, sınırlı süreli teşvik oluşturmak için bir geri sayım sayacı ile birlikte aradığımız fiyat metin tasarımını elde etmek için bir fiyatlandırma tablosu modülü ekleyeceğiz.

Tasarıma Hızlı Başlamak için Araba Listesini Kullanma

Önce Araba Satıcısı Listeleri Sayfa Düzenine gidin ve görsel oluşturucuyu dağıtın. Öne çıkan listenin bulunduğu ilk satırı bulun ve satır menünüzdeki “Kütüphaneye ekle” simgesine tıklayarak satırı Divi kitaplığınıza kaydedin. Düzeninize bir ad verin ve “Kütüphaneye Kaydet”e tıklayın.

Şimdi Finansman Sayfası Düzeni ile sayfanıza geri dönün ve üst başlık bölümünün altına yeni bir normal bölüm ekleyin. Ardından, satır daire ekle simgesine tıklayarak, kitaplıktan ekle sekmesine tıklayarak ve ardından listeden kaydettiğiniz satırı seçerek kaydettiğiniz satırı divi kitaplığınıza ekleyin.

Bölüm ayarlarınızı aşağıdaki gibi güncelleyin:

Arka plan resmi ekle
Arka Plan Gradyanı Sol Renk: rgba(0,0,0,0.8)
Arka Plan Gradyanı Sağ Renk: #ffffff
Gradyanı Arka Plan Resminin Üstüne Yerleştir: EVET

Şimdi araç özelliklerini içeren metin modülünü sıranızın orta sütunundan sağ sütunun üstüne taşıyın. Geçmiş Rapor Düğmesini ve “34000$” fiyatı olan metin modülünü silin.

Özel Fiyat Metni Oluşturmak için Fiyat Tablosu Ekleme

Boş orta sütuna yeni bir Fiyatlandırma Tabloları Modülü ekleyin. Fiyatlandırma Tabloları modülünü kullanmak, özel html/css kullanmak zorunda kalmadan öne çıkan anlaşmanız için fiyat tasarımını kullanmanıza olanak tanır.

Fiyatlandırma tabloları ayarlarında, yalnızca bir tablo kalacak şekilde varsayılan olarak oluşturulan fiyatlandırma tablolarından birini silin. Ardından aşağıdakileri güncelleyin:

Madde İşaretini Göster: HAYIR
Arka Plan Rengi: rgba(255,255,255,0)

Ardından tasarım ayarlarını aşağıdaki gibi güncelleyin:

Tablo Başlığı Arka Plan Rengi: rgba(0,0,0,0)
Gövde Yazı Tipi : Teko
Gövde Yazı Tipi Ağırlığı: Normal
Gövde Metni rengi: #c10f1b
Gövde Çizgisi Yüksekliği: 1.2em
Para Birimi & Frekans Yazı Tipi: Teko
Para Birimi ve Frekans Yazı Tipi Ağırlığı: Yarı Kalın
Para Birimi & Frekans Metin Rengi: rgba(0,0,0,0.63)
Para Birimi ve Frekans Metin Boyutu: 30px
Fiyat Yazı Tipi: Teko
Fiyat Yazı Tipi: Ağırlık: Normal
Fiyat Metin rengi: #c10f1b
Özel Kenar Boşluğu: 5 piksel alt
Kenar Genişliği: 0px

Şimdi içerik sekmesine geri dönün ve belirli fiyatlandırma tablosunun ayarlarını aşağıdaki gibi güncellemek için tıklayın.

Başlığı ve Altyazıyı çıkarın.
Her ay
Fiyat: 199

Ve içerik kutusundaki metni değiştirmek için aşağıdakini ekleyin:

for 36 Months
$2000 down

Tasarım ayarları altında aşağıdakileri güncelleyin:

Gövde Metin Boyutu: 28px
Gövde Çizgisi Yüksekliği: 0.2em
Özel Dolgu: 20px Üst, 0px alt, 0px Sol, 0px Sağ

Öne Çıkan Anlaşmaya Geri Sayım Sayacı Ekleme

Sınırlı süreli teklifi oluşturmak için, öne çıkan fırsatı içeren satırın üzerine bir geri sayım sayacı ekleyeceğiz.

Önce yeni bir sütun satırı ekleyin ve satıra bir geri sayım sayacı modülü ekleyin.

Yeni satırı, öne çıkan anlaşmanın bulunduğu satırın üzerine sürükleyin. Bölüm Üst Dolgusunu çıkarın ve yeni satırın üst ve alt dolgusunu çıkarın.

Şimdi Geri Sayım Sayacı ayarlarını aşağıdaki gibi güncelleyin:

Geri Sayım Sayacı Başlığı: Anlaşma Yakında Sona Eriyor
Arka Plan Rengi: #c10f1b

Başlık yazı tipi: Teko
Başlık Metin Boyutu: 50px
Sayı Yazı Tipi: Teko
Genişlik: 500 piksel
Modül Hizalaması: Merkez
Kutu Gölgesi: ekran görüntüsüne bakın

Alt kutunuzun gölgesine biraz nefes alma alanı sağlamak için geri sayım sayacınızın altındaki satıra %5'lik bir üst dolgu eklemeniz gerekecek.

Şimdi nihai sonucu kontrol edin.

Son düşünceler

Hesaplanan Alanlar Formu eklentisi, istediğiniz hemen hemen her şeyi hesaplamak için formlar oluşturmanıza olanak tanır, ancak öğrenme eğrisi, gelişmiş hesaplamalar için biraz dik görünüyor. Neyse ki, eklentinin ücretsiz sürümü, kutudan çıkar çıkmaz çalışacak bir kiralama hesaplayıcı ile birlikte gelir. Ve onu Divi'ye eklemek, bir kısa kod eklemek ve birkaç ayarı güncellemek kadar kolaydır.

Hazır bir düzen kullanmanın en güzel yanlarından biri, sitenize ek öğeler eklemek için sıfırdan başlamanız gerekmemesidir. Sınırlı süreli özellikli anlaşmayı oluşturmak hızlı ve kolaydı, çünkü işleri yoluna koymak için bir araba listeleme tasarımı kullandık.

Bunun, kendi sitenizde dönüşümleri artırmak için gerekli öğeleri ekleme sürecini kolaylaştıracağını umuyorum.

Yorumlarda sizden haber bekliyorum.

Şerefe!