料金表ブロックを使用すると、視覚的に魅力的で高度な料金表を作成し、製品やサービスを紹介できます。サブスクリプションプラン、サービスティア、または製品パッケージのいずれを提示する場合でも、このブロックを使用すると、各プランの表示方法を完全に制御できます。
各料金表には、プラン名、通貨記号付きの価格、請求期間、説明、オプションの通常/元の価格、機能リスト、および最大2つの行動喚起ボタンが含まれます。複数の料金表ブロックを並べて配置して、訪問者がプランを比較し、購入を決定するのに役立つ完全な料金セクションを作成します。
ページに料金表ブロックを追加する
SeedProdページに料金表ブロックを追加するには、次の手順に従います。
ステップ1：ブロックを追加する
デザイン > ブロックの下で、料金表ブロックをページの目的のセクションにドラッグアンドドロップします。
ステップ2：コンテンツ設定を構成する
追加したら、料金表ブロックをクリックして設定を開きます。コンテンツタブは、プランヘッダーとボタンのメイン設定エリアと、プランの機能アイテムの機能リストセクションに分かれています。
プランヘッダー:
- プラン名: 価格プランの名前（例: ベーシック、プロ、エンタープライズ）を入力します。これは料金表の上部に目立つように表示されます。
- 価格: プランの数値価格（例: 29）を入力します。通貨記号と期間は別途設定されます。
- 通貨記号: ドル（$）、ユーロ（€）、ポンド（£）、ルピー（₹）、円（¥）など、一般的な通貨のドロップダウンから表示する通貨記号を選択します。必要な記号をカスタム記号フィールドに入力するには、カスタムを選択します。
- 通貨記号の位置: 通貨記号が価格番号の前または後のどちらに表示されるかを設定します。
- 期間: 価格の後に表示される請求期間のテキスト（例: /月、/年、/ユーザー）を入力します。期間を表示せずに価格を表示するには、空白のままにします。
- 通常価格を表示: 現在の価格の上に元の価格または通常価格を表示するには、トグルをオンにします。割引率を表示する場合に便利です。有効にすると、通常価格の金額と、その前に表示される通常価格ラベル（例: 「通常」）を入力します。
- 説明: プランの短いタグラインまたは説明（例: 「初心者向け」）を入力します。太字、斜体、下線、リンクなどの基本的なリッチテキストフォーマットをサポートします。
ボタン：
- トップボタンを表示: 機能リストの上に表示される行動喚起ボタンを表示するには、トグルをオンにします。有効にすると、トップボタンのテキスト、トップボタンのリンクを入力し、オプションでリンクの新しいウィンドウで開くをチェックします。ボタンの角の丸みを制御するには、トップボタンの境界線の半径（0〜100px）を設定します。
- ボトムボタンを表示: オンにすると、機能リストの下に2つ目のCTAボタンが表示されます。有効にした場合は、ボトムボタンのテキスト、ボトムボタンのリンクを入力し、オプションで新規ウィンドウで開くをチェックします。ボトムボタンの境界半径をデザインに合わせて設定します。
機能リスト:
- 機能アイテム: 各機能はドラッグ可能な行として表示されます。アイテムをドラッグして並べ替えます。アイテムにカーソルを合わせると、複製ボタンと削除ボタンが表示されます。アイテムのテキストをクリックすると、個別の設定を展開できます。
- テキスト: アイテムの機能テキストを入力します。太字、斜体、下線、リンクなどの基本的なリッチテキストフォーマットをサポートします。
- アイコン: アイコンピッカーを使用して、機能テキストの横に表示するアイコンを選択します。デフォルトはチェックマークアイコンです。
- 新規アイテムを追加: 機能リストの下部にあるボタンをクリックして、新しい機能行を追加します。
ステップ3：デザインをカスタマイズする
高度な設定タブでは、価格表のタイポグラフィ、色、ボタン、全体的な外観を微調整できます。高度な設定タブは、5つのスタイルセクションと、標準のスペーシングおよび表示コントロールに分かれています。
ヘッダー:
- プラン名タイポグラフィ: プラン名のテキストのフォントファミリー、サイズ、太さ、スタイルを設定します。
- プラン名の色: プラン名のテキストの色を設定します。
- 通常価格タイポグラフィ: 通常価格を表示オプションが有効な場合の、通常（元の）価格テキストのタイポグラフィを設定します。
- 通常価格の色: 通常価格テキストの色を設定します。
- 説明タイポグラフィ: プラン説明テキストのタイポグラフィを設定します。
- 説明カラー: 説明テキストの色を設定します。
- 背景色: ヘッダー領域（プラン名、価格、説明）の背景色を設定します。
- パディング: ヘッダー領域内の内側のスペース（0〜100px）を設定します。
ボタン：
- トップボタンの色: トップCTAボタンの背景色を設定します。
- トップボタンのサイズ: トップボタンのサイズを選択します — 小、中、大、特大、特大。
- トップボタンのテキスト前アイコン: アイコンピッカーを使用して、ボタンラベルテキストの前に表示されるアイコンを追加します。
- トップボタンのテキスト後アイコン: アイコンピッカーを使用して、ボタンラベルテキストの後に表示されるアイコンを追加します。
- ボトムボタンの色: ボトムCTAボタンの背景色を設定します。
- ボトムボタンのサイズ: ボトムボタンのサイズを選択します — 小、中、大、特大、特大。
- ボトムボタンのテキスト前アイコン: ボトムボタンラベルテキストの前に表示されるアイコンを追加します。
- ボトムボタンのテキスト後アイコン: ボトムボタンラベルテキストの後に表示されるアイコンを追加します。
価格:
- 価格タイポグラフィ: メインの価格数字のフォントファミリー、サイズ、太さ、スタイルを設定します。
- 価格の色: メインの価格数字の色を設定します。
- Price Superscript Typography: 価格の横に上付き文字で表示される通貨記号のタイポグラフィを設定します。
- Price Superscript Top: 通貨記号の上付き文字の垂直位置を価格番号に対して調整します。
機能リスト:
- Features List Typography: すべての機能アイテムテキストのフォントファミリー、サイズ、太さ、スタイルを設定します。
- Features List Color: 機能アイテムのテキストカラーを設定します。
- Icon Color: 各機能アイテムの横に表示されるアイコンの色を設定します。
- Space Between: リスト内の各機能アイテム間のスペース（1〜100px）を設定します。
- Alignment: 機能リストの水平方向の配置を設定します — 左、中央、または右。
- Background Color: 機能リストエリアの背景色を設定します。
- Padding: 機能リストエリア内の内側のスペース（0〜100px）を設定します。
ブロック:
- Border Radius: 価格表ブロック全体の角の丸みを設定します（0〜100px）。
- 境界線のスタイル: ブロックの境界線のスタイルを設定します — 実線、点線、または破線。
- 境界線のカラー: ブロックの境界線のカラーを設定します。
- Border Width: 各辺の境界線の太さを設定します（上、右、下、左）。同期アイコンを切り替えると、すべての辺に同じ値を一度に適用できます。
間隔：
- Margin: 価格表ブロックの外側のスペースを制御します（上、右、下、左）。これにより、テーブルとページ上の周囲の要素との間にどれだけのスペースが表示されるかが決まります。
- Padding: 価格表ブロック内の内側のスペースを調整します（上、右、下、左）。これにより、テーブルコンテンツとブロックの端の間に十分な余白が生まれます。
属性:
- CSS ID: 価格表ブロックの自動生成された一意の識別子を表示します。このIDは、カスタムスタイリングまたはJavaScriptのターゲット指定のためにSeedProdによって自動的に作成されます。
- カスタムクラス: テーマまたはカスタムCSSから特定のスタイルを適用するためにカスタムCSSクラスを追加します。
- Custom Attributes: ブロックラッパー要素に任意のHTML属性を追加します。各属性を新しい行に属性名|値の形式で入力します（例: data-plan|pro）。
デバイス表示:
- Hide on Desktop: デスクトップ画面で価格表ブロックを非表示にします。
- Hide on Tablet: タブレットデバイスで価格表ブロックを非表示にします。
- Hide on Mobile: モバイルデバイスで価格表ブロックを非表示にします。
アニメーション効果:
- Entrance Animation: 価格表がビューにスクロールインしたときに再生されるさまざまなアニメーション効果から選択します。オプションには、バウンス、フェードイン、ズームイン、回転インなどがあります。微妙なアニメーションを追加すると、適切なタイミングで価格プランに注目を集めるのに役立ちます。
ステップ4：変更を保存
価格表ブロックの設定と外観のカスタマイズが完了したら、必ず作業を保存してください。
ページに価格表ブロックを正常に追加しました！複数の価格表ブロックを列レイアウトで横並びに配置して、訪問者がプランを簡単に比較できる完全な価格設定セクションを作成します。ヘッダーの背景、ボタンの色、タイポグラフィを試して、ブランドに一致し、コンバージョンを促進する価格設定セクションを構築してください。