価格リストブロックを使用すると、説明と価格が添えられた、視覚的に魅力的なアイテムのリストを作成できます。レストランのメニュー、サービスパッケージ、または製品の提供物を紹介する場合でも、このブロックを使用すると、アイテムを柔軟かつ洗練された方法で提示できます。
リストの各アイテムには、タイトル、説明、価格、オプションの割引価格、画像、およびリンクを含めることができます。全体的なレイアウト、画像の配置、価格の配置を制御し、すぐに開始できるようにデザイン済みのテンプレートから選択できます。
価格リストブロックをページに追加する
SeedProdページに価格リストブロックを追加するには、次の手順に従ってください。
ステップ1：ブロックを追加する
デザイン > ブロックの下で、価格リストブロックをページの目的のセクションにドラッグアンドドロップします。
ステップ2：コンテンツ設定を構成する
追加したら、価格リストブロックをクリックして設定を開きます。コンテンツタブは、価格リストアイテム、レイアウト、画像エリアの3つのセクションに分かれています。
価格リストアイテム：
- アイテムリスト：各価格リストアイテムは、ドラッグ可能な行として表示されます。アイテムをドラッグして並べ替えます。アイテムにカーソルを合わせると、複製および削除ボタンが表示されます。個々の設定を展開するには、アイテムのタイトルをクリックします。
- タイトル：リストに表示されるアイテムの名前を入力します。
- 説明：アイテムの説明を入力します。太字、斜体、下線、リンクなどの基本的なリッチテキスト書式設定をサポートします。
- 価格：アイテムの表示価格を入力します（例：$20）。
- 割引を提供しますか？：オンにすると、元の価格とともに割引価格が表示されます。有効にすると、実際の価格フィールドに入力します。これは取り消し線付きの元の価格になり、価格フィールドには割引額が表示されます。
- 画像：このアイテムの横に表示する画像をアップロードまたは選択するか、画像ソースフィールドに直接画像URLを入力します。
- 代替テキスト：アクセシビリティとSEOのために、アイテムの画像の代替テキストを入力します。
- リンク：このアイテムをクリッカブルにするためのURLを入力します。レイアウトセクションのリンク完了ボックス設定と連携します。
- 新規アイテムを追加：アイテムリストの下部にあるボタンをクリックして、新しい価格リストエントリを追加します。
レイアウト:
- 画像の位置：テキストコンテンツに対するアイテム画像の表示位置を設定します - 上、左、右、またはなし（画像を表示しない）。
- 価格の位置：価格の表示位置を選択します - 見出しの右（価格は見出しと同じ行に、見出しと価格の区切り線で区切られて表示されます）または見出しと説明の下（価格は説明テキストの後に表示されます）。注：画像の位置が上に設定されている場合、このオプションは利用できません。
- タイトル価格区切り線: 価格位置が「見出しの右」に設定されている場合に、アイテムタイトルと価格の間の区切り線のスタイルを選択します — 実線、点線、破線、またはなし。
- 全体のアライメント: すべてのアイテムの水平方向のアライメントを設定します — 左揃え、中央揃え、または右揃え。
- 垂直方向のアライメント: 各行内で画像とテキストコンテンツが垂直方向にどのように揃うかを設定します — 上揃え、中央揃え、または下揃え。画像位置が「上」に設定されていない場合に利用可能です。
- リンク全体ボックス: 各アイテムに設定されたリンクURLを使用して、アイテムタイトルだけでなく、アイテム行全体をクリック可能にするにはオンに切り替えます。
画像エリア:
- 形状: すべてのアイテム画像に適用される形状を選択します — デフォルト（正方形）、丸みを帯びた（わずかに丸い）、円形（完全に円形）、またはカスタム（各コーナーの境界線の半径を個別に設定）。
- 幅: 画像エリアの幅を1pxから300pxの間で設定します。
- 画像境界線の半径: 形状がカスタムに設定されている場合、各コーナー（左上、右上、右下、左下）の境界線の半径を個別に設定します。
ステップ2a: テンプレートスタイルを選択する
テンプレートタブでは、事前にデザインされたレイアウトテンプレートから選択して、価格リストの外観をすばやく設定できます。
- 利用可能なテンプレート: 3つのテンプレートから選択します — 左レイアウトテンプレート（画像が左側）、右レイアウトテンプレート（画像が右側）、および画像なしテンプレート（画像なしのテキストと価格のみ）。テンプレートをクリックすると、そのレイアウトと間隔の設定が即座に適用されます。
ステップ3：デザインをカスタマイズする
高度な設定タブでは、価格リストブロックのタイポグラフィ、色、境界線、背景を微調整できます。
スタイル:
- タイトルタイポグラフィ: すべてのアイテムタイトルのフォントファミリー、サイズ、太さ、スタイルを設定します。
- 説明タイポグラフィ: すべてのアイテム説明テキストのタイポグラフィを設定します。
- 価格タイポグラフィ: すべてのアイテム価格テキストのタイポグラフィを設定します。
- タイトルカラー: アイテムタイトルのテキストカラーを設定します。
- 説明カラー: アイテム説明テキストのカラーを設定します。
- 価格カラー: アイテム価格テキストのカラーを設定します。
- 割引カラー: アイテムで割引が有効になっている場合に表示される取り消し線付きの元の価格の色を設定します。
- テキストシャドウ: テキストにシャドウ効果を追加します — なし、ヘアライン、小、中、大、特大、2倍特大から選択します。
間隔：
- マージン: 価格リストブロックの外側の間隔（上、右、下、左）を制御します。これにより、ブロックとページ上の周囲の要素との間にどれだけのスペースが表示されるかが決まります。
- パディング: 価格リストブロックの内側の間隔（上、右、下、左）を調整します。これにより、リストコンテンツとブロックの端の間に十分なスペースが生まれます。
境界線:
- 境界線のスタイル: ブロックの境界線のスタイルを設定します — 実線、点線、または破線。
- 境界線のカラー: ブロックの境界線のカラーを設定します。
- 境界線の幅: 各辺（上、右、下、左）の境界線の太さを設定します。
- 境界線の半径: ブロックのコーナーの丸みを設定します。
背景:
- 背景色: 価格リストブロック全体の単色背景を設定します。
- 背景画像:ブロックの背景画像を選択またはアップロードします。位置、サイズ、繰り返し動作のオプションがあります。
属性:
- CSS ID:価格リストブロックの自動生成された一意の識別子を表示します。このIDは、カスタムスタイリングまたはJavaScriptのターゲット設定のためにSeedProdによって自動的に作成されます。
- カスタムクラス: テーマまたはカスタムCSSから特定のスタイルを適用するためにカスタムCSSクラスを追加します。
- カスタム属性: ブロックラッパー要素に任意のHTML属性を追加します。属性名を改行し、attribute-name|valueの形式で入力します。
デバイス表示:
- デスクトップで非表示:デスクトップ画面で価格リストブロックを非表示にします。
- タブレットで非表示:タブレットデバイスで価格リストブロックを非表示にします。
- モバイルで非表示:モバイルデバイスで価格リストブロックを非表示にします。
ステップ4：変更を保存
価格リストブロックの設定と外観のカスタマイズが完了したら、必ず作業を保存してください。
ページに価格リストブロックを追加しました！これを使用して、訪問者があなたの提供するものを簡単に閲覧し、価格を比較し、行動を起こせるような、魅力的で情報量の多いリストを作成できます。さまざまなレイアウト、画像の形状、テンプレートスタイルを試して、あなたのブランドに完全に一致する価格リストを作成してください。