Özel CSS olmadan duyarlı bir Squarespace fiyat tablosu nasıl oluşturulur

Fiyatlandırma tablosu, müşterilerinizin paralarının karşılığında ne aldıklarını kolayca görmelerini sağlar. SaaS planları, ajans paketleri, üyelikler veya abonelikler satıyor olmanız fark etmez; bu her durumda önemlidir. Nitekim 2024 Zuora/Harris Poll araştırmasına göre ABD’deki yetişkinlerin yüzde 80’i, tekrarlayan ürünleri satın alma ve ödeme biçimlerindeki esnekliğin “önemli,” “çok önemli” veya “kesinlikle vazgeçilmez” olduğunu belirtmiştir.

Ancak Squarespace, geleneksel satır ve sütunlardan oluşan bir tablo için yerleşik bir blok sunmaz. Metin, butonlar ve Fluid Engine kullanarak kendi tablonuzu oluşturabilirsiniz; fakat bunu masaüstü ve mobil düzenler için ayrı ayrı yapmanız gerekir. 

Ya da üç fiyatlandırma kartını iki farklı ekran boyutunda elle hizalamakla öğleden sonranızı geçirmek istemiyorsanız, size daha zahmetsiz bir yol göstereyim.

Seçenek 1: Squarespace’in yerleşik düzen bloklarıyla tablo oluşturma

Squarespace’te zaten bir Fiyatlandırma Planı bloğu bulunur; bu nedenle sattığınız ürüne bağlı olarak sıfırdan tablo oluşturmanıza gerek kalmayabilir. Bu blok; üyelikler ve erişim kısıtlamalı içerikler — Üye Siteleri, kurslar, videolar ve ücretli bloglar dahil — için fiyatlandırma planlarıyla çalışır. 

Ücretsiz, tek seferlik, taksitli veya tekrarlayan erişim seçenekleri sunabilir ve karşılaştırma yapılabilmesi için birden fazla plan bloğunu yan yana yerleştirebilirsiniz.

Sattığınız ürün bu tanıma uyuyorsa, kurulum şu şekildedir:

1. Fiyatlandırma planınızı oluşturun: Ürünler bölümünden satmak istediğiniz içeriği veya üyeliği oluşturun, ardından fiyatlandırma ve erişim kurallarını belirleyin. Uygun içerikleri bir araya getiren paket planlar da oluşturabilirsiniz.
2. Fiyatlandırma Planı bloğu ekleyin: Sayfanızı düzenleyin, Blok ekle (+) seçeneğine tıklayın, Fiyatlandırma Planı‘nı seçin ve oluşturduğunuz planı belirleyin.
3. Planı stilize edin: Tasarım bölümünden başlık, açıklama, fiyat, avantajlar ve butonun görüntülenip görüntülenmeyeceğini seçin. Birden fazla planı yan yana göstermek istiyorsanız ek bloklar ekleyin.

Ancak buradaki kısıtlama, Squarespace’in Fiyatlandırma Planı bloğunun üyeliklere ve erişim kısıtlamalı içeriklere bağlı olmasıdır. Bu blok; SaaS katmanlarını, ajans paketlerini, freelance sabit ücret anlaşmalarını veya diğer hizmetleri karşılaştıran bir tablo için uygun değildir.

Bu tür ihtiyaçlar için yerleşik çözüm Fluid Engine‘dir; her katmanı ayrı metin ve buton bloklarından oluşturur, ardından bunları sütunlar halinde hizalarsınız. Ancak masaüstü ve mobil düzenler için ayrı ayrı çalışmanız gerekir. 

Squarespace’in kendi belgelerinde de bu bloğun erişim kısıtlamalı içerik satışı için var olduğu, planları, paketleri veya hizmetleri karşılaştırmak amacıyla genel amaçlı bir tablo oluşturmak için tasarlanmadığı belirtilmektedir.

Bağımsız geliştiricilerden Squarespace’e özel fiyatlandırma tablosu eklentileri de satın alabilirsiniz. Örneğin Will Myers, üç hazır stil ve Squarespace 7.1 desteği sunan bir eklentiyi site başına 25 dolara satmaktadır. Ancak bunu tavsiye etmem; çünkü bu eklenti ne Squarespace’in resmi Uzantılar pazaryerinin ne de resmi bir Squarespace entegrasyonunun parçasıdır.

Seçenek 2: Ücretsiz ve özelleştirilebilir bir fiyatlandırma tablosu widget’ı ekleme

Yan yana dizilmiş birden fazla kart yerine bir karşılaştırma tablosu tercih ediyorsanız Jotform Fiyatlandırma Tablosu Widget’ını kullanabilirsiniz.

Görsel oluşturucu sayesinde aylık ve yıllık tablolar ekleyebilir; planları ve özellikleri düzenleyebilir; her harekete geçirici mesajı (CTA) istediğiniz sayfaya yönlendirebilir; kart, carousel veya tam karşılaştırma düzenleri arasından seçim yapabilirsiniz. 

Ayrıca önerilen katmanı Popüler etiketiyle vurgulayabilir; indirimler ve eski fiyatlar ekleyebilir; renkleri, tipografiyi, butonları, sütun genişliklerini ve mobil davranışı kontrol edebilirsiniz. 

Hızlı ve zahmetsiz bir şekilde başlayın: 

1. Fiyatlandırma tablonuzu oluşturun: Planlarınızı, fiyatlarınızı, özelliklerinizi, açıklamalarınızı ve CTA bağlantılarınızı ekleyin. Birden fazla tablo oluşturabilir (örneğin aylık ve yıllık fiyatlandırma) ve ziyaretçilerin bunlar arasında geçiş yapmasını sağlayabilirsiniz.
2. Bir düzen seçin ve stilize edin: Modern Grid, Compact Columns, Classic Comparison veya Card Carousel gibi hazır şablonlardan birini seçin, ardından tasarımı Squarespace sitenize uyacak şekilde ayarlayın. 
3. Squarespace’e yerleştirin: Web Sitenizde Ücretsiz Deneyin butonuna tıklayın, oluşturulan gömme kodunu kopyalayın, ardından Squarespace sayfanızı açıp bir Kod bloğu ekleyin. Kodu HTML olarak yapıştırın, Kaynağı Göster seçeneğinin kapalı olduğundan emin olun, ardından kaydedin ve sayfayı önizleyin.

Jotform fiyatlandırma tablosunu tek bir gömme olarak yönetir, böylece Squarespace’in tek yapması gereken onu görüntülemektir. Üstelik şu an için tekrarlayan bir widget ücreti de yoktur: Jotform Web Sitesi Widget’ları 2027’ye kadar ücretsizdir.

Widget kütüphanesindeyken…

Yalnızca fiyatlandırma tablolarıyla sınırlı kalmayın. Jotform Web Sitesi Widget’ları ile başka özellikler de ekleyebilirsiniz:

• Fiyatlandırma, faturalandırma, iptal, özellik ve kullanıma başlama sorularına yönelik SSS Widget’ı
• Ziyaretçileri Google’a yönlendirmek yerine sosyal kanıtı doğrudan karar anında sunmanızı sağlayan Google Yorumları Widget’ı
• Bülten kayıtları, indirimler, demolar, lansman duyuruları veya çıkış teklifleri için Popup Widget’ı

Fiyatlandırma tablosu görevini tamamladıktan sonra ise Jotform’un Squarespace entegrasyonu, gömülü kayıt veya ödeme formlarıyla bir sonraki adımı devralabilir.