Gutenberg Blok Düzenleyicisi ile Fiyatlandırma Tabloları Oluşturun

Bir yıldan fazla bir süre içinde Gutenberg blok editöründe büyük bir evrim gördük. Klasik WordPress editörüyle karşılaştırıldığında, artık yazılarımızda ve sayfalarımızda daha önce yalnızca kodlama ile yapılabilen öğeleri tasarlayabiliyoruz.

Örneğin, klasik düzenleyicide, bir gönderide tablo göstermenin en kolay yolu, söz konusu tabloyu bir elektronik tabloda oluşturmak, bir resim olarak dışa aktarmak ve ardından onu göstermek istediğiniz yere gönderiye eklemekti. Ancak şimdi yeni WordPress düzenleyicide bulduğumuz bloklardan biri tablo bloğu. Bakalım Gutenberg ile nasıl bir tablo oluşturacağız ve bu aynı blok ile ne kadar fiyat tablosu oluşturabileceğiz.

Masa Bloğu

Bir tablo oluşturmak, içinde istediğimiz satır ve sütunların sayısını ve bunların hizalamasını belirttiğimiz yeni bir Tablo bloğu eklemek kadar kolaydır.

Bir Tablo bloğunda aşağıdaki özellikleri özelleştirebiliriz:

Ayrıca her hücrede metnin hizalamasını ve yazı tipinin kalın mı yoksa italik mi olduğunu belirtebilir ve bağlantılar ekleyebiliriz. Ayrıca, tabloyu herhangi bir zamanda satır ve/veya sütun ekleyerek veya çıkararak değiştirebiliriz.

Bu sayede aşağıdaki tabloyu kolayca oluşturabildiğimizi görüyoruz:

	Nelio A/B Test Planları
Temel	Profesyonel	Girişim
serbest çalışanlar ve kişisel web siteleri için	küçük girişimciler için	optimize etmeye odaklanan ekipler için
29 € / ay	89 € / ay	259 € / ay
1 site	5 site	? 10 site
Test edilmiş sayfalara 5.000 ziyaret	Test edilmiş sayfalara 35.000 ziyaret	Test edilmiş sayfalara 200.000 ziyaret
Abone ol	Abone ol	Abone ol

Bu, klasik editörle yapabileceğimizden çok daha basit ve hızlı. Ve elde edilen sonuç kesinlikle bir veri tablosu göstermeye hizmet edebilir.

Tablo Blok Sınırlamaları

Bir önceki tabloyu oluşturmak bizim için çok kolay olsa da epeyce sınırlamalarla karşılaştık. Bir yandan Gutenberg'de Table type bloğu ile tasarladığınız tablolar responsive değildir. Yani tablo kırılmaz ama tablonun farklı öğelerini sütunlar halinde gösteremeden küçülür:

Cihazlara tam uyum sağlayan bir tablo, tüm hücrelerin çok daha iyi görüntülenmesi için tabloyu sütunlara bölerek tablonun öğelerini gösterir.

Cihazlara uyum (in)yeteneğine ek olarak, fark etmiş olabileceğiniz gibi, bir tablo bloğunda her hücrede yazı tipini ve boyutunu, renkleri vb. kolayca değiştiremiyoruz. Yani Gutenberg tablo bloğu tüm sınırlamaları nedeniyle ürünleriniz için cazip bir fiyat tablosu oluşturmak için kullanışlı değildir.

Bu duyarlı tabloları nasıl oluşturabiliriz?

alternatifler

Sütun Bloğu

Bir alternatif, tabloyu sütun bloğuyla düzenlemeye çalışmak olabilir:

Sütun bloğunun Tablo bloğuna kıyasla avantajı, tamamen duyarlı olmasıdır ve bir mobil ekranda planların her birinin diğerinin arkasında görüntülendiğini göreceğiz.

Sütunların tamamen duyarlı olduğunu görüyoruz. Ve elbette, çok az bilgi göstermek ve çok fazla komplikasyon olmaksızın sütunlar dikkate alınması gereken bir alternatiftir.

Fiyat Tablosu Blok Eklentileri

Cazip fiyat tabloları oluşturmanız gerekiyorsa benim tavsiyem, bunun için bloklar içeren bazı eklentileri yüklemenizdir. Kodlara dokunmadan herhangi bir özelleştirmeye izin vermeyebilirler, ancak çoğu durumda çok şık sonuçlar elde edebilirsiniz. Gutenberg blok düzenleyicisi ile tamamen entegre edilmiş bazı örneklere bakalım.

CoBlock'lar

Coblocks, tamamen Gutenberg'e uyarlanmış bir dizi blok içeren bir eklentidir. Bunlardan biri Fiyat Tablosu bloğudur.

Çok basit ve kullanımı kolaydır ve kodlama olmadan sütun sayısını ve tipografi ile ilgili bazı yönleri ve ayrıca sütunların ve metnin renklerini özelleştirebilirsiniz. Aşağıdaki resimde gösterildiği gibi hızlı bir şekilde tamamen duyarlı bir fiyat tablosuna sahip olursunuz.

Getwid

Benzer şekilde, Getwid eklentisi ayrıca Gutenberg editörüyle tamamen uyumlu bir dizi blok içerir. Hızla, aşağıdaki gibi tamamen duyarlı bir fiyat tablosunu kolayca oluşturabilirsiniz:

Bu durumda yazı tiplerini, arka plan ve metin renklerini özelleştirebilirsiniz.

Gutenberg için Premium Bloklar

Gutenberg için Premium Bloklar eklentisi ayrıca çok cazip fiyat tabloları oluşturabileceğiniz bloklar içerir. Aşağıda, sütunlara yerleştirilmiş Fiyatlandırma Tablosu bloğu ile oluşturduğum bir fiyat tablosu görüntüsünü gösteriyorum.

Bu blok, diğerlerinin yanı sıra bir simge, fiyatın nasıl görüntüleneceğine ilişkin özellikler, özellikler ve açıklama eklemek istiyorsanız renkleri, yazı tiplerini, düğmelerin türünü özelleştirmenize olanak tanır. Gördüğünüz gibi, çok eksiksiz bir kişiselleştirme sağlar.

Yerleşik Düzenleyicili Eklentiler

Alternatif olarak, WordPress panonuza entegre olan ve çok eksiksiz ve özelleştirilmiş tablolar oluşturabileceğiniz yerleşik bir fiyatlandırma tablosu düzenleyicisi içeren başka eklenti türleri de bulacaksınız. İstenen tablo oluşturulduktan sonra, bu tablo bir kısa kod kullanılarak herhangi bir sayfaya veya gönderiye dahil edilebilir. Hadi bazı örneklere bakalım:

Duyarlı Fiyatlandırma Tablosu

Duyarlı Fiyatlandırma Tablosu, fiyat tabloları oluşturabilmeniz için WordPress'inize yeni bir düzenleyici ekleyen bir eklentidir. Çok sayıda plan ekleyebilir ve her birini özelleştirebilirsiniz.

Her plan için ad, alt başlık, açıklama ve fiyat ekleyebilirsiniz. Ayrıca bir özellik listesi ekleyebilir, satın alma düğmesini özelleştirebilir ve planın renk düzenini değiştirebilirsiniz.

Plan oluşturulduktan sonra, fiyatlandırma sayfasında bir kısa kod kullanarak planı eklemeniz yeterlidir.

Supsystic'e Göre Fiyatlandırma Tablosu

Supsystic Fiyatlandırma Tablosu eklentisi, WordPress panonuza tablolar oluşturabileceğiniz bir sürükle ve bırak düzenleyicisi ekler. Size birçok duyarlı tablo tasarımı sunar. Ücretsiz sürümde 7 adede kadar tasarımınız mevcuttur.

İstenen tablo tasarımını seçtikten sonra, sütun sayısını değiştirmenize ve gösterilen planların her birinin birçok özelliğini özelleştirmenize izin veren bir düzenleyiciniz olur. Ayrıca düzeni istediğiniz zaman değiştirebilirsiniz. Son olarak, daha önce olduğu gibi, tablo herhangi bir sayfaya veya kısa kodlu gönderiye dahil edilebilir.

Fiyat tablosu düzenleyicilerini entegre eden diğer ücretsiz eklentiler şunlardır:

• ARPrice'e göre Fiyatlandırma Tablosu
• Fiyatlandırma Tabloları WordPress Eklentisi – Fatcat Apps'tan Kolay Fiyatlandırma Tabloları
• Duyarlı Fiyatlandırma Tablosu Oluşturucu – wpPricing Oluşturucu
• WRC Fiyatlandırma Tabloları
• Fiyatlandırma Tablosu Oluşturucu – AP Fiyatlandırma Tabloları Lite
• Temalara göre TC Fiyatlandırma TablosuKod
• Fiyatlandırma Tablosu – bh A WP Life

Çözüm

Gördüğünüz gibi, WordPress'te, ekstra ücret ödemeden ve doğrudan kodlamaya gerek kalmadan fiyat tabloları oluşturmak için çok çeşitli alternatifleriniz var. Bu nedenle, yalnızca ihtiyaçlarınıza en uygun seçeneği seçme meselesi.

Ürünlerinizin fiyatlarını gösterdiğiniz sayfanın müşteri çekmek için en kritik sayfa olduğunu unutmayın. Yani onu çekici hale getirmek için harcadığınız zaman boşa gitmeyecektir. Ve size ilham vermesi için, bu yazının öne çıkan görseli olarak öne çıkan Nelio A/B Test ürünümüzün fiyat tablosunun tasarımına göz atabilirsiniz.