価格グリッドを追加しますか Elementor ?

あなたがあなたを使用している場合 サイトのWeb サービスや製品を販売するには、提供する価格プランを表示することが重要です。 Elementor、最も人気のあるWordPressページビルダープラグインには、ウィジェットが付属しています 価格表 これを使用して、ページまたはテンプレートに価格設定グリッドを簡単に追加できます。 この記事では、このウィジェットの使用方法を紹介します。

また読みます: Elementorで丸みを帯びた画像を作成する方法 

価格表ウィジェット自体は、 Elementor。 Pro したがって、それを使用できるようにするには、次を使用する必要があります Elementor プロ。 この記事では、Price Table ウィジェットを編集領域に直接追加します。

Elementorページまたはテンプレートに価格グリッドを追加するにはXNUMXつのオプションがあります。 まず、事前定義されたブロックテンプレートを使用できます。 次に、自分でテーブルを作成できます。 ゼロから。

定義済みのテンプレートから価格グリッドを追加する

Elementorには、約14の価格グリッドブロックデザインがあり、そこから選択できます。 繰り返しになりますが、価格グリッドはElementor Proでのみ利用可能であるため、テンプレートを使用するにはElementorProを使用する必要があります。 価格グリッドブロックテンプレートを使用するには、編集ボックスのフォルダアイコンをクリックして、テンプレートライブラリを開きます。

表示されるテンプレートライブラリで、タブをクリックします ブロック とカテゴリで選択します 価格(英語) ドロップダウンメニューで、モデルをフィルタリングします。 気に入ったモデルを選択してボタンをクリックしてください インサート Elementorエディターにインポートします。

Elementorに価格グリッドを追加する

次に、左側のパネルに移動して、グリッドのデフォルトのコンテンツを変更できます。

価格表を最初から追加する

追加する価格設定グリッドの独自の設計コンセプトがある場合は、テーブルを最初から作成することをお勧めします。 作業を容易にするために、テーブルを作成できます。 完了したら、それをコピーして、重複するテーブルの内容をカスタマイズできます。 それはあなたに多くの時間を節約します。

また見なさい: Elementorでチームメンバーセクションを作成する方法

新しいセクションを追加することから始め、作成するテーブルの数に応じて列構造を選択し、ウィジェットをドラッグします 価格表 列のXNUMXつに。

左側のパネルに移動して、デフォルトのコンテンツを変更します。 タブの下でコンテンツを編集できます コンテンツ。 これを編集するために開くことができる5つのパラメーターブロックがあります:ヘッダー、価格設定、機能、フッター、およびリボン。

Elementorに価格グリッドを追加する
  • ヘッダ

このブロックを開いて、テーブルヘッダーの内容を変更できます。 タイトルはすぐに変更できます 役職 とすぐに説明 説明。 理想的には、テーブルのヘッダーセクションを使用してパッケージの名前を追加します。

  • 価格(英語)

このブロックを開いて、パッケージの価格を変更できます。 オプションを有効にすることができます セール パッケージが販売されている場合。 WordPress カスタム フィールドに関する知識がある場合は、データベース アイコンをクリックして動的価格設定を追加することもできます。 données フィールド上 価格。

  • 特徴

このブロックを開いて、パッケージで提供する機能を追加できます。 デフォルトでは、XNUMXつの機能があります。 エンティティを開いて編集できます。 新しい機能を追加するには、ボタンをクリックするだけです 要素を追加します。

また読みます: Elementor PopupBuilderを使用する7つのクリエイティブな方法  

デフォルトでは、各機能にはチェックリストアイコンがあります。 アイコンを変更するには、アイコンをクリックするだけです。 削除するには、ゴミ箱アイコンをクリックするだけです。

  • フッター

フッターは、リンクと召喚ボタンを追加できるセクションです。このセクションに追加情報を追加することもできます。

  • リボン

「SALE」、「SPECIAL」、「HOTOFFER」などのセールタグをテーブルに追加できます。 セールタグ、または任意のタグを追加する場合は、ブロックを開くことができます リボン オプションを有効にします 表示。 フィールドにお気に入りのラベルを追加できます タイトル オプションの位置を設定します ポジション。

グリッドのカスタマイズ

ラベルのコンポーネントをカスタマイズするには、タブに切り替えることができます  左側のパネルにあります。 このタブにはXNUMXつの設定ブロックも表示されます。

  • ヘッダ :このブロックを開いて、テーブルのヘッダーセクションをカスタマイズできます。 ヘッダーの背景、タイトルと説明のタイポグラフィ(フォントファミリ、フォントサイズ、フォントスタイル)、タイトルのテキストの色と説明などを設定できます。
  • 価格: このブロックを開いて、価格設定セクションをカスタマイズできます。 背景色、タイポグラフィ、テキストの色、通貨記号、位置などを設定できます。
  • 特徴 :このブロックを開いて、エンティティセクションをカスタマイズできます。 背景、テキストの色、タイポグラフィ、配置、セパレータのオン/オフなどを設定できます。
  • フッター :このブロックを開いて、フッターセクションをカスタマイズできます。 背景、ボタンのサイズ、ボタンの色、ボタンのテキストのタイポグラフィなどの要素を定義できます。
  • リボン: このブロックは、オプションをアクティブにした場合にのみ表示されます リボン タブの下 コンテンツ。 このブロックを開いて、色、テキストの色、タイポグラフィなどのリボンをカスタマイズできます。

最初のテーブルが完成したら、それを他の列にコピーし、各テーブル/プランで提供する機能に応じてコンテンツを置き換えることができます。 テーブルをコピーするには、ウィジェットのハンドルを右クリックして、 コピーする、 次に、貼り付けたい列を右クリックして、 ペースト.

最後に

Elementor Proには、ページまたはテンプレートに価格グリッドを簡単に追加できる価格テーブルウィジェットが付属しています。 いくつかのアドオン-など ハッピーアドオンエッセンシャルアドオン とJandElements -また、異なるスタイルオプションを持つ同じウィジェットがあります。

ElementorProを今すぐ入手!!!

まとめ

ここは ! Elementorで価格グリッドを追加する方法を示すこの記事は以上です。 そこへの行き方に不安がある場合fでお知らせください commentaires.

ただし、相談することもできます 私たちのリソース、インターネットサイトの作成プロジェクトを実行するためにより多くの要素が必要な場合は、 WordPressブログ作成 または Divi:史上最高のWordPressテーマ.

しかし、その間に、 さまざまなソーシャルネットワークでこの記事を共有する.

...