グーテンベルクブロックエディタで価格表を作成する

公開: 2020-03-10

1年以上で、グーテンベルクのブロックエディタに大きな進化が見られました。従来のWordPressエディターと比較して、以前はコーディングでしかできなかった投稿やページの要素をデザインできるようになりました。

たとえば、従来のエディタでは、投稿にテーブルを表示する最も簡単な方法は、スプレッドシートにテーブルを作成し、画像としてエクスポートしてから、表示する投稿に挿入することでした。しかし、新しいWordPressエディターで現在見つかっているブロックの1つは、テーブルブロックです。グーテンベルクでテーブルを作成する方法と、この同じブロックで価格テーブルをどの程度作成できるかを見てみましょう。

テーブルブロック

テーブルの作成は、必要な行と列の数とそれらの配置を示す新しいTableブロックを追加するのと同じくらい簡単です。

Tableブロックでは、次のプロパティをカスタマイズできます。

また、各セルにテキストの配置とフォントが太字か斜体かを示し、リンクを追加することもできます。さらに、行や列を追加または削除することで、いつでもテーブルを変更できます。

このようにして、次のテーブルを簡単に作成できることがわかります。

	Nelio A/Bテスト計画
基本	プロ	企業
フリーランサーや個人のウェブサイト向け	小さな起業家のために	最適化に重点を置いたチーム向け
月額29ユーロ	月額89ユーロ	259ユーロ/月
1サイト	5サイト	？ 10サイト
テストされたページへの5,000回の訪問	テストされたページへの35,000回の訪問	テストされたページへの200,000回の訪問
購読	購読	購読

これは、従来のエディターで実行できるよりもはるかに簡単で高速です。そして、得られた結果は確かにデータの表を示すのに役立ちます。

テーブルブロックの制限

前のテーブルを作成するのは非常に簡単でしたが、かなりの数の制限がありました。一方では、グーテンベルクのテーブルタイプブロックを使用して設計したテーブルはレスポンシブではありません。つまり、テーブルは壊れませんが、テーブルのさまざまな要素を列で表示できずに小さくなります。

デバイスに完全に適応するテーブルは、テーブルを列に分割することでテーブルの要素を表示するため、すべてのセルがはるかに適切に表示されます。

お気づきかもしれませんが、デバイスに適応できないことに加えて、テーブルブロックでは、各セルのフォントの種類やサイズ、色などを簡単に変更することはできません。つまり、すべての制限があるため、グーテンベルクのテーブルブロックは、製品の魅力的な価格テーブルを作成するのに役立ちません。

これらのレスポンシブテーブルをどのように作成できますか？

代替案

列ブロック

別の方法は、列ブロックを使用してテーブルをレイアウトしようとすることです。

基本

フリーランサーや個人のウェブサイト向け

月額29ユーロ

1サイト

テストされたページへの5,000回の訪問

プロ

小さな起業家のために

月額89ユーロ

5サイト

テストされたページへの35,000回の訪問

企業

最適化に重点を置いたチーム向け

259ユーロ/月

？ 10サイト

テストされたページへの200,000回の訪問

Tableブロックと比較した場合のcolumnブロックの利点は、完全に応答することです。モバイル画面では、各プランが前後に表示されます。

列が完全に応答していることがわかります。そして確かに、情報をほとんど表示せず、複雑さをあまり多くしない列は、検討するための代替手段です。

価格表ブロックプラグイン

魅力的な価格表を作成する必要がある場合の私の推奨事項は、このためのブロックを含むプラグインのいくつかをインストールすることです。コードに触れることなく、どんな種類のカスタマイズもできないかもしれませんが、多くの場合、非常にエレガントな結果を得ることができます。グーテンベルクブロックエディタと完全に統合されたいくつかの例を見てみましょう。

CoBlocks

Coblocksは、グーテンベルクに完全に適合したブロックのセット全体を含むプラグインです。それらの1つはPriceTableブロックです。

非常にシンプルで使いやすく、コーディングなしで、列の数とタイポグラフィに関連するいくつかの側面、および列とテキストの色をカスタマイズできます。次の画像に示すような、完全にレスポンシブな価格表がすぐに作成されます。

Getwid

同様に、Getwidプラグインには、Gutenbergエディターと完全に互換性のあるブロックのセット全体も含まれています。すばやく、次のような完全にレスポンシブな価格表を簡単に作成できます。

この場合、フォント、背景色、テキストの色をカスタマイズできます。

グーテンベルクのプレミアムブロック

GutenbergプラグインのPremiumBlocsには、非常に魅力的な価格表を作成できるブロックも含まれています。以下に、PricingTableブロックを列に挿入して作成した価格表の画像を示します。

プレミアムブロックプラグイン。 — Gutenbergプラグインのプレミアムブロックを含む価格表。

このブロックでは、アイコン、価格の表示方法のプロパティ、機能、説明などを含める場合は、色、フォント、ボタンの種類をカスタマイズできます。ご覧のとおり、非常に完全なカスタマイズが可能です。

組み込みのエディターを備えたプラグイン

または、WordPressダッシュボードに統合され、非常に完全でカスタマイズされたテーブルを作成できる組み込みの価格表エディターを含む他のタイプのプラグインを見つけることができます。目的のテーブルが作成されると、ショートコードを使用してこのテーブルを任意のページまたは投稿に含めることができます。いくつかの例を見てみましょう：

レスポンシブ価格表

Responsive Pricing Tableは、WordPressに新しいエディターを追加して、価格表を作成できるようにするプラグインです。多数のプランを追加して、それぞれをカスタマイズできます。

プランごとに、名前、サブタイトル、説明、および価格を追加できます。機能のリストを追加したり、購入ボタンをカスタマイズしたり、プランの配色を変更したりすることもできます。

プランが作成されたら、価格設定ページでショートコードを使用してプランを追加する必要があります。

Supsysticによる価格表

Supsystic Pricing Tableプラグインは、テーブルを作成できるWordPressダッシュボードにドラッグアンドドロップエディターを追加します。それはあなたに多くのレスポンシブテーブルデザインを提供します。無料版では、最大7つのデザインを利用できます。

目的のテーブルデザインを選択すると、列の数を変更したり、表示されている各プランの多くの機能をカスタマイズしたりできるエディターができます。また、いつでもレイアウトを変更できます。最後に、前と同じように、テーブルはショートコードを使用して任意のページまたは投稿に含めることができます。

価格表エディターを統合するその他の無料プラグインは次のとおりです。

ARPriceによる価格表
価格表WordPressプラグイン–Fatcatアプリによる簡単な価格表
レスポンシブ価格表ビルダー– wpPricing Builder
WRC価格表
価格表ビルダー–AP価格表Lite
themesCodeによるTC価格表
価格表– bh A WP Life

結論

ご覧のとおり、WordPressには、追加費用なしで直接コーディングすることなく価格表を作成するためのさまざまな選択肢があります。したがって、ニーズに最適なオプションを選択するだけです。

商品の価格を表示するページは、最終的に顧客を獲得するために最も重要になることを忘れないでください。だから、あなたがそれを魅力的にするために費やす時間は無駄にはなりません。そして、あなたにインスピレーションを与えるために、この投稿の注目の画像として際立っているものである、Nelio A / BTesting製品の価格表のデザインを見ることができますか？