Kullanmaya karar verdiğiniz genel fiyatlandırma stratejisine rağmen, potansiyel müşterilerinizin ürünlerinizin ve/veya hizmetlerinizin fiyatlandırması hakkında her şeyi öğrenmesine izin vermek bir zorunluluktur. Elbette, fiyatlandırmanızı çeşitli etkili ve kullanıcı dostu yollarla sergilemeniz (bir fiyatlandırma listesi eklemek veya bir fiyatlandırma tablosu kullanmak gibi) her zaman önerilir. Peki ya size, müşterileriniz satın alma kararları sürecinde işleri daha da pratik (ve biraz da ilgi çekici) hale getirmenin bir yolu olduğunu söylesek? Bunu, WordPress sitenize basit ama çekici bir fiyat hesaplayıcı öğesi ekleyerek yapabilirsiniz.
Fiyatlandırma hesaplayıcıları, ziyaretçilerinizin geçiş anahtarını kullanarak satın almakla ilgilendikleri ürünleri basitçe seçmelerine izin verdiği için harikadır. Anahtarları kullanarak fiyatları seçtikten sonra, ekranda toplam hesaplanan fiyatı anında görebilecekler. Beğendikleri (veya beğenmedikleri) herhangi bir öğeyi kolayca ekleyebilir veya kaldırabilirler ve ardından, satın almaya hazır olduklarında satın al düğmesine basabilirler.
Kendi WordPress sitenizde bir fiyat hesaplayıcı oluşturmak için önce uygun bir eklentinin yardımına ihtiyacınız var – ve bize sorarsanız, Elementor için güçlü WordPress Eklentileri ve onun çok yönlü Fiyat Hesaplayıcı widget’ından daha iyi bir seçim yoktur.
Bu yüzden bu kez, bu pratik pencere öğesiyle birlikte gelen tüm seçenekleri sizinle paylaşacağız ve siteniz için düzgün görünümlü bir fiyat hesaplayıcı kurmak için atmanız gereken adımları göstereceğiz.
İşte:
-
Fiyat Hesaplayıcı Widget’ını WordPress Sitenize Ekleme
-
Widget İçeriğini Düzenleme
-
Fiyatlandırma Hesaplayıcı Pencere Öğesini Şekillendirme
-
Bitmiş Bir Fiyatlandırma Hesaplama Öğesini Çoğaltma
-
Çoğaltılmış Öğelerin Stilini Ayarlama
Fiyat Hesaplayıcı Widget’ını WordPress Sitenize Ekleme
100’den fazla ücretsiz, tamamen özelleştirilebilir pencere öğesiyle WordPress Addons for Elementor eklentisi, siteniz için hayal edebileceğiniz herhangi bir bölüm veya sayfa oluşturmak için kullanabileceğiniz gerçekten benzersiz bir öğe seçimine sahiptir – yaratıcı bir öğe, bir vitrin eklentisi veya e-Ticaret mağazanız veya başka herhangi bir işletme için uygun olabilir. İkincisinden bahsetmişken, Fiyatlandırma Hesaplayıcı widget’ı var. Bu pencere öğesi, fiyatlandırma anlaşmalarını aynı anda yenilikçi, pratik ve esnek bir şekilde görüntülemenizi sağlayan çok sayıda değiştirilebilir özellik içerdiğinden harikadır. Farklı fiyatlar, para birimleri ve dönemler ekleyebilecek, geçiş düğmelerine stil uygulayabilecek, renkleri ve tipografiyi değiştirebilecek ve daha fazlasını yapabileceksiniz.
Bununla birlikte Fiyat Hesaplayıcı widget’ını kendi sitenize nasıl ekleyebileceğinize, özelleştirebileceğinize ve stillendirebileceğinize bir göz atalım. Hatta okumak yerine video izlemeyi tercih ederseniz, aynı konuyu bir videoda ele aldık:
Her şeyden önce, Elementor sayfanızın arka ucuna gitmelisiniz.
Fiyatlandırma hesaplayıcılarını önceden eklemeyi planladığımız bir bölüm eklediğimizi unutmayın. Fiyatlandırma hesaplayıcıları için (İç Bölüm öğesini kullanarak eklediğimiz) dört farklı sütunun yanı sıra bölüm arka plan resmi, başlık metni vardır.
Fiyatlandırma Hesaplayıcı Widget’ını Ekleme
Elementor kenar çubuğunda “fiyat hesaplayıcı” öğesini bulun. Sağdaki sayfaya (ilk sütuna) sürükleyin.
Gördüğünüz gibi, pencere öğesi varsayılan olarak şeffaftır ve minimum stille bazı yer tutucu metinler içerir. Hatta arka plan resmimiz nedeniyle widget’ı görmek biraz zor, bu yüzden bunu birkaç dakika içinde düzeltmeyi planlıyoruz.
Widget Alanının Görünümünü Ayarlama
Ama önce, İçerik sekmesindeki (Genel ayarlar) ilk seçeneğe bir göz atalım – Düzen. Varsayılan olarak Yan ayarına ayarlanmıştır. Fakat Basit ayarı örneğimize daha iyi uyuyor, bu yüzden onu seçtik.
Bu düzen, fiyatı en üste ve öğeleri ortaya koyarken, açıklama ve düğme widget’ın en altında yer alır.
Bunun dışında, öğemizin Arka Plan Rengini değiştirmek için hızla Stil sekmesine geçebiliriz. Düz beyaz (#FFFFFF) seçtik.
Hatta hemen aşağıda bulunan bir seçenek olan Kenarlık Rengini de ayarladık (kullandığımız hex kodu #e1e1e1).
Son olarak kenarlığı biraz daha belirgin hale getirmek için Kenarlık Genişliğini 1 piksele yükselttik.
Tabii ki, tüm bu seçenekleri tamamen kendi zevkinize göre ayarlamakta özgürsünüz.
Şimdi size içerikle ilgili diğer seçenekleri göstermek için İçerik sekmesine dönelim.
Widget İçeriğini Düzenleme
Artık İçerik sekmesine geri döndüğümüze göre, widget’ın içeriğini düzenlemeye başlamanın zamanı geldi. Burada, düğmenin içeriğini ve tek tek öğeleri ayarlama olanağını da içeren bazı genel seçenekler vardır. Tüm bu seçeneklere daha ayrıntılı bir göz atalım.
Genel İçerik Seçeneklerini Düzenleme
Buradaki ilk kullanılabilir seçenek (Düzen’den sonra), varsayılan Açıklamayı değiştirmek içindir ve kendi açıklamanızı eklemenize olanak tanır.
Ardından Para Birimi alanı, istediğiniz para birimini fiyatın yanındaki alana eklemenizi sağlar. Bu metin alanıdır, dolayısıyla buraya ne girerseniz girin sayfada görüntülenecektir. Kendimiz için dolarlara bağlı kalmaya karar verdik.
Aynısı, aşağıdaki Alan adı verilen Dönem için de geçerli – /mo (ay) işaretini burada bıraktık. Bir kez daha, bu metni istediğiniz herhangi bir şeyle değiştirebilirsiniz.
Daha sonra Düğme Metni var – burada yalnızca küçük bir değişiklik yaptık ve bu seçeneği, düğmemizde “Şimdi satın al” yerine “Satın al” yazacak şekilde düzelttik.
Düğme URL’si, düğmenize bir URL eklemenizi sağlar. Bu örneği yalnızca eğitimimiz için oluşturduğumuz için, buraya yer tutucu metin olarak bir hashtag ekledik.
Öğeleri Özelleştirme
Sırada Alt Öğeler bölümü var. Bu bölümde varsayılan olarak üç farklı Öğe vardır – bunlar aslında sayfanızda hesaplama yapmaya yarayan üç satırlık öğelere karşılık gelir. Örneğimiz için üç öğeye ihtiyacımız olmadığı için bir öğeyi sildik ve yalnızca iki öğeyle devam etmeye karar verdik. Fakat öğenize daha fazla öğe eklemek istiyorsanız, “+Öğe Ekle” düğmesine basmanız yeterlidir.
Her öğenin kendi seçenekleri vardır. Bir öğe içinde bulabileceğiniz ilk seçenek Fiyat’tır – söz konusu öğe için sayısal değerinizi buraya girebilirsiniz. Hatta Başlık alanı, öğenizin adını girmenize olanak tanır (bizim yaptığımız gibi).
Daha sonra, öğenin etkin olup olmayacağına ve varsayılan olarak fiyat hesaplamasına dahil edilip edilmeyeceğine karar vermenizi sağlayan Aktif Öğe adının hemen altında bulunan geçiş anahtarı vardır. Evet olarak değiştirirseniz, ilk öğenin artık öğenin kendisinde de açık olduğunu görebilirsiniz. Hatta ilk kalem hesaplamaya dahil edildiği anda toplam fiyatlandırma otomatik olarak değişti.
Bununla birlikte ziyaretçileriniz satın almaya karar vermeden önce sayfanızdaki öğenin içindeki öğeyi devre dışı bırakabilecektir.
İkinci ürün için fiyatı 22$ olarak değiştirdik. Anında, hesaplamanın buna göre değiştiğini görebileceksiniz (çünkü her iki öğe de etkin olarak işaretlenmiştir).
Başlığı da değiştirdik ve ikinci öğeyi de aktif tutmaya karar verdik.
Düğme ve Düğme Simgesini Ayarlama
Sırada, düğme düzenini, türünü ve boyutunu değiştirmenize ve ayrıca düğmenin altı çizili özelliğini etkinleştirmenize veya devre dışı bırakmanıza olanak tanıyan Düğme ayarları yer alır. Düğme öğesini nasıl ekleyeceğiniz, özelleştireceğiniz ve stillendireceğiniz konusunda, bu seçeneklerden tüm ayrıntılarıyla bahsettiğimiz ayrı bir makale hazırladık, bu nedenle daha fazla bilgi için kontrol ettiğinizden emin olun.
Hatta örneğimiz için varsayılan düğme ayarlarını korumaya karar verdik.
Düğme Simgesi bölümü, düğme metninin yanına yerleştirilecek bir simge eklemenizi sağlar. Simge kitaplığından bir tane kullanabilir veya bir SVG yükleyebilirsiniz.
Hatta Simge Konumunuzu da değiştirebilirsiniz.
Örneğimiz için bir SVG yükledik.
Simgenizi seçtikten sonra Medya Ekle düğmesine bastığınızdan emin olun.
Fiyatlandırma Hesaplayıcı Pencere Öğesini Şekillendirme
Şimdi, Stil seçeneklerine geçeceğiz. Daha önce mevcut olan ilk seçeneklerden birkaçını zaten değiştirdik. Bunlar Stil bölümündeki ilk üç seçenektir – Arka Plan Rengi, Kenarlık Rengi ve Kenarlık Genişliği.
Bu bölümde kalan tek seçenek Dolgu olarak adlandırılır. Bununla, içeriğin etrafındaki alanı ayarlayabilirsiniz. Buradaki alanların bağlantısını kaldırdık ve üstteki dolguyu 56 piksele ayarladık, gerisini 52 piksele ayarladık.
Değiştirici Stili
Sırada, açma/kapatma anahtarlarının görünümünü kendileri şekillendirmenize izin veren Switcher Style bölümü var. Buradaki seçenekler iki farklı bölüme ayrılabilir – Etkin olmayan anahtar görünümü için seçenekleri biçimlendirmeye yarayan Normal ve etkinleştirilen anahtar için kullanılan Anahtar.
Normal ayar seçenekleriyle başlayalım – Düğme Rengi (beyaz renk için #ffffff onaltılık kodunu kullanarak değiştirdik) ve anahtar arka planını değiştiren Arka Plan Rengi (#e1e1e1 onaltılık kodunu burada belirledik) var. . Geçiş anahtarlarını tamamen çerçeveleyecek Kenarlık Rengi de vardır.
Aktif seçenekler kümesi altında, üç benzer ayara sahipsiniz – Aktif Düğme Rengi, Aktif Arka Plan Rengi ve Aktif Kenarlık Rengi.
Etkin olmayan ve etkin anahtarların bir şekilde farklılık göstermesini istediğimiz için Etkin Arka Plan Rengi için #d1b17d onaltılık bir kod girdik.
Kenar Genişliğini artırabilir ve hem Normal hem de Etkin kenarlık renklerinin daha görünür olmasına yardımcı olabilirsiniz (böylece bu ayar her iki ekran için de çalışır).
Öğe Başlığı Stili
Öğe Başlığı Stiline geçiyoruz – burada mevcut olan ilk seçenek Başlık Etiketidir.
H1’den P’ye kadar her şeyi ayarlayabilirsiniz (biz onu P etiketine ayarladık). Başlık metninizin rengini ve Başlık Tipografisini değiştirmek isterseniz Başlık Rengi de vardır. İkinci seçenek, başlık metninizin tipografisiyle ilgili kapsamlı bir dizi ayar içerir. Bunlar yazı tipi ailesini, boyutunu, ağırlığını vb. içerir.
Fiyat Stili ve Açıklama Stili
Fiyat Stili bölümünün adı oldukça açıklayıcıdır – hesaplanan fiyatınızın stilini belirlemenize olanak tanır. Seçenekler arasında Fiyat Rengi (#1e1e1e siyah renkli onaltılık kodunu kullandık) ve Fiyat Tipografisi (Başlık Tipografisi ile aynı) yer alır. Buradaki yazı tipi boyutunu ve yazı tipi ağırlığını sırasıyla 70px ve 500 olarak değiştirdik.
Para Birimi Rengi, fiyat toplamının yanında para biriminin rengini ayarlamanıza olanak tanır. Aynı rengi #1e1e1e kullandık (sayı için de kullandık).
Para Birimi Tipografisi, mevcut diğer tüm tipografi seçenekleriyle aynıdır. Ağırlığı burada 500 olarak ayarladık.
Daha sonra fiyatla ilgili dönemin rengini belirlemenizi sağlayan Dönem Rengi gelir (örneğimizde “/mo” yazan metin). Şimdiye kadar kullandığımız aynı #1e1e1e hex kodunu ayarladık.
Son olarak tüm tanıdık tipografi ile ilgili ayarlara sahip Dönem Tipografisine de sahipsiniz (burada hiçbir şeyi değiştirmemeye karar verdik).
Para Birimi Marjı, para birimi sembolünün etrafına daha fazla boşluk eklemek için kullanılabilir. Benzer şekilde Nokta Kenar Boşluğu, nokta metninin etrafına daha fazla boşluk eklemenize olanak tanır. Fakat yalnızca altta ve solda (nokta metninin konumu nedeniyle). Bu alanların bağlantısını kaldırdık ve alta 5 piksel ve sola 8 piksel koyduk.
Son olarak Açıklama Stili seçenek grubu, fiyatlandırma hesaplayıcınızın açıklama metnini şekillendirmek için iki seçeneğe sahiptir: Açıklama Rengi ve Açıklama Tipografisi, her ikisi de kendi kendini açıklayıcıdır.
Düğme Stili
Şimdi, Düğme Stili seçenekleri, Satın Alma düğmenizin görünümünü tamamen şekillendirmenize olanak tanır.
Burada bulunan ilk şey, yukarıda bahsettiğimiz tüm standart seçeneklere sahip başka bir Tipografi seçenekleri setidir. Örneğimiz için hiçbir şeyi değiştirmedik. Fakat burada istediğiniz ayarı değiştirmekte özgürsünüz.
Daha sonra yine iki anahtar vardır – Normal (düzenli olarak görüntülendiğinde düğmeyi biçimlendirmenizi sağlar) ve Hover (düğmenin üzerine gelindiğinde görünümünü biçimlendirmek için).
Normal ayarlar için Metin Rengi vardır – düz beyaz olan #ffffff onaltılı kodunu ayarladık.
Arka Plan Rengi, düğmenin kendi rengidir. biz…