WordPressでお洒落な料金表を表示させるページビルダープラグインBrizy！

ノーコードでWordPressサイトが作れるページビルダープラグインBrizyを使うと、料金表をお洒落にデザインする事が出来ます！

BrizyとはElementorのようにノーコードでWordPressサイトを構築できるページビルダーです。ElementorやDiviとの違いは、デザインテンプレートの種類。デザイナーでなくても、デザインテンプレートを使えばお洒落なサイトを構築できる点がすぐれています！

料金用ページ構築全体の流れ

1. Brizyプラグインをインストール・有効化（無料版でも有料版でもOkです）
2. 料金表を構築したいページでBrizyビルダーを起動
3. 料金表デザインテンプレートを選択
4. テキスト修正
5. 完成

とっても簡単に構築出来ますので、詳しく解説をしていきます！

Brizyプラグインがインストール済という事を前提に解説を進めます。
テーマは何を使っていても大丈夫なのですが、デモ用にテーマは無料テーマLightninを使いました。無料テーマCocoonでも動作確認済です。

Brizyビルダー起動

固定ページ新規追加で編集ページを開き、タイトルに【料金表（何でも構いません）】と入力し一度【公開】

その後、【Edit with Brizy】でBrizyビルダーを起動します！

ビルダー起動しました。

料金表デザインブロックを選択

真ん中の青い【＋】アイコンをクリックして、デザインブロックを追加します。

【Pricing】という項目を選択すると料金表のデザインブロックにソート出来ます。

【Pro】がついているものは有料版の方のみ利用可能なデザインブロックですが、無料版でも選べるデザインブロックは数種類あります！

今回、下記のデザインブロックを選択してみます。

デザイン反映されました。右下のアイコンをクリックするとプレビューが見れます。

プレビュー

料金表カスタマイズ

テキスト修正

テキスト修正はそのままクリックして修正するだけなのでとても簡単です

フォントサイズ、フォントスタイルを変えたい場合はテキストをクリックするとカスタマイズアイコンが出てくるのでこちらで変更可能です。

色を変えたい時は色のアイコンなど、直感的に操作が可能となっています。

色変更

色は左端のアイコンで変える事が出来ます。

色パターンが元々入っていますが、パターン以外の色を使う事ももちろん可能です。

例えば、右項目の背景色を変えたい場合

角に+マークなどが出てくるので、クリックするとカスタマイズ項目が出てきます。色のアイコンをクリックすると色を変える事が出来ます。

リンクを付ける

ボタン項目をクリックして表示されるカスタマイズアイコンの中のリンクアイコンでリンク先を指定できます。

余白の設定

paddingやmarginといった余白の設定もノーコードで出来ます！

【歯車アイコン】　＞【その他の設定】

コーナーを使うと角を丸くすることが出来ます。

アニメーションの設定も可能

その他の設定を開いた状態で【高度】タブへ切り替えるとanimation設定項目があります。

独自cssタグやcssコードを埋め込むことも可能です。

料金表だけ突然表示してもおかしいと思うので、もう少しカスタマイズをしていきます。

見出し追加

左端の+アイコンをクリックすると、通常のブロックエディタのようにブロックパーツが入っています。

この中から使いたいパーツを選択して、入れたい箇所にドラックで持っていきます。

テキストアイコンで見出しのフォントサイズを指定します。（カスタマイズで好きなサイズへ変更しても大丈夫です）

歯車アイコンをクリックするとタグを設定できるのでh2を選択してみます。

今回は見出しを追加ましたが、通常のテキスト、画像等好きなブロックを好きなだけ追加できます。
新しくBrizyのデザインブロックを追加する事も可能です。

レスポンシブ調整

タブレット・モバイルでレイアウトを調整可能です。

左端のPCアイコンをクリックしてタブレットモードに切り替えます。

余白、フォントサイズ等気になる部分を修正していきます。

モバイル

モバイルでよくある事ですが、2カラムの場合レスポンシブで縦に並びますが、縦並びの順番を変えたい！という事にも対応しています。

また、モバイルでも2カラムのままにしたい！という場合には、横幅のサイズを両方とも50%以下になるように縮めてあげると並びます。

料金表完成

PC

タブレット

モバイル

まとめ

ノーコード、ノーデザイナーでもお洒落な料金表がWordPressで作れるページビルダーBrizyの紹介でした。

レスポンシブにきちんと対応していますが、レスポンシブもオリジナルでカスタマイズ可能なので、こだわりたい方にもおすすめのページビルダープラグインです。

ページビルダープラグインBrizyは料金表以外にも、CTAのデザインブロックやお客様の声等、様々なデザインブロックが揃っています。

Brizyを習得して、WordPressサイト構築の幅を広げてください！

私はBrizyを使う事でWordPressサイト制作のスピードが大幅に早くなりました！