Elementorでデザインの良い価格表を簡単に作成する方法【WordPress】

ヨッチ

こんにちは。代表のヨッチです。
ミライヨッチにお越しいただき、ありがとうございます。

Elementor Proには、価格表（プライステーブル）専用ウィジェットが用意されています。
ウィジェットの機能を使えば、HTML・CSSなしのノーコードで価格表を作成できます。

自分でデザインすることもできますが、スタイルの調整って意外と時間がかかりますよね。
そこで、デザイン済みテンプレートを使えば、素早くクオリティの高い価格表を作ることができます。

では、どうやってテンプレートから価格表を作成するのか？
この記事でわかりやすく解説しますね。

記事の内容を動画でまとめました！

ヨッチ

記事について、動画ですべてお話ししています。
補足も交えて解説しているので、気になる方はこちらもどうぞ。

Elementor Proのページテンプレートを使う方法

「Elementor Pro」を使えば、ドラッグ＆ドロップで価格表ウィジェットを挿入できます。
しかもテンプレートが用意されているので、自分でデザインしなくてもOKです。

テンプレートを挿入してから、デザインを微調整することもできます。

価格表（プライステーブル）のウィジェットは、Pro版専用の機能です。
通常版・Pro版の違いは、こちらでチェックできます。

では、さっそくElementor Proで価格表を挿入してみましょう！

価格表（プライステーブル）のテンプレートを選ぶ

まずは、Elementor Proのメニューから価格表のテンプレートを選んで挿入します。

固定ページ・ブロックのどちらにも、価格表のテンプレートは用意されています。

Elementor Proの「ブロック」は、シンプルなデザインが揃っています。
固定ページでは、ページごとに調整された価格表が使われています。

今回は、固定ページからテンプレートを選んで挿入してみました。

ページ内の不要なウィジェットは、すべて削除しておきましょう。
価格表を挿入できたら、スタイルなどを微調整すれば完了です。

Envato Elementsのブロックテンプレートを使う方法

「Envato Elements」は、エレメンターで使える追加テンプレートのアドオンです。
無料版でも、たくさんの高品質なテンプレートが用意されています。

Elementor Proにお気に入りのデザインがなくても、アドオンを使えばさらに選択肢が増えます。

実際にどんなデザインの価格表があるのか？
使い方とあわせて見ていきましょう！

「Envato Elements」の導入方法は、こちらで詳しく解説しています。

アドオンを導入したら、専用アイコンからメニューを開きましょう。

「Free Blocks」を開くと、用意されているブロック一覧が表示されます。
今回は、「Pricing Table」を開きました。

価格表（プライステーブル）のテンプレートがまとめて表示されています。
気に入ったデザインが見つかったら、「Insert Template」をクリックしましょう。

これで価格表が挿入されました。

このまま使っても良いですし、スタイル等でデザインを調整するのもOKです。
細かなカスタマイズは、Elementorの機能で進めていきましょう。

テンプレートをカスタマイズして調整する

テンプレートのカスタマイズは、Elementorのウィジェット機能を使用します。
コンテンツ・スタイル・高度な設定から、自由に編集ができます。

コンテンツ

タイトル・価格・リスト・リボンなどを変更できます。

スタイル

書体・カラーなどのスタイルを変更できます。
見た目の印象をガラッと変えたいときに便利です。

高度な設定

マージン・パディングのほか、モーション効果なども設定できます。
すでに設定済みのアニメーションを変更したいときも、「高度な設定」から変更可能です。

【まとめ】テンプレートで素早くハイクオリティな価格表を作れる

Elementorは、ワードプレスで簡単にページ作成できるページビルダーです。
直感的に操作できるだけでなく、テンプレートも充実しています。

すべて自分でデザインしなくても、テンプレートをベースに作成すれば効率が良いです。
ウィジェットの機能で、サクッとカスタマイズもできます。

HTML・CSSなしのノーコードで、ここまで自由度の高いデザインができるのは便利ですよね。
ほんの少し手を加えるだけで、目を引くプライステーブルを実装できます。

プライステーブルはPro専用なので、興味があれば試してみてはどうでしょうか？