要素 – ボタン

Page Builder パネルで Elements を展開し、Buttons プレースホルダーをステージ上の行、列またはタブセットにドラッグします。

{width="500" modal="regular"}

ボタンにカーソルを合わせてツールボックスを表示し、設定 （ ）アイコンを選択します。

ボタンに表示する Button Text を入力します。

{width="600" modal="regular"}

Button Type を次のいずれかに設定します。

{width="500" modal="regular"}

次のいずれかのタイプを使用して Button Link を設定します。

• URL - リンクの宛先 URL を入力します。

  URL は、ストア内の製品またはページへの相対リンク、または完全修飾 URL にすることができます。

  相対 URL の例 – ../luma-analog-watch.html

  完全修飾 URL の例 – http://mystore.com/luma-analog-watch.html

  リンクが別の web サイトに移動する場合は、新しいブラウザータブでリンクを開くことで、現在のページをストアで開いたままにすることができます。

  訪問者がストアから移動しないようにするには、「Open in new tab」チェックボックスを選択します。

• Product – 製品名（一部または全部）または SKU を入力し、リストで製品名を選択します。

  note note
  NOTE
  製品は、「在庫切れの製品を表示 設定に従ってリストに表示さ ます。 Inventory management を使用しているマルチ Source マーチャントの場合、商品リストは、デフォルト web サイトにのみ割り当てられたソースによって制限されます。

  {width="600" modal="regular"}

• Category - カテゴリ名（一部または全部）を入力するか、空白フィールドをクリックしてカテゴリツリーを表示します。 次に、ツリーでカテゴリ名を選択します。

  {width="600" modal="regular"}

• Page - CMSページの名前（一部または全部）を入力するか、空白フィールドをクリックして一覧を表示します。 次に、検索結果リストでページの名前を選択します。

  {width="600" modal="regular"}

必要に応じて 詳細設定を完了します。

完了したら、右上隅の Save をクリックして設定を適用し、Page Builder ワークスペースに戻ります。

ボタンコンテナにカーソルを合わせてツールボックスを表示し、「追加 （ {width="20"}）」アイコンを選択します。

{width="500" modal="regular"}

2 番目のボタンに表示するテキストを入力します。

新規ボタンをクリックしてツールボックスを表示し、設定 （ {width="20"}）アイコンを選択します。

{width="500" modal="regular"}

Button Type を Secondary に設定します。

必要に応じて Button Link を設定します。

次の例では、リンクは、「お問い合わせ ​ ページに移動する相対 URL で ​。

{width="600" modal="regular"}

必要に応じて 詳細設定を完了します。

完了したら、「Save」をクリックして設定を適用し、Page Builder ワークスペースに戻ります。

ステージの 2 番目のボタンを再度クリックし、「複製」（ {width="20"}）アイコンを選択します。

{width="500" modal="regular"}

3 番目のボタンに表示するテキストを入力します。

3 番目のボタンをクリックしてツールボックスを表示し、設定 （ {width="20"}）アイコンを選択します。

{width="500" modal="regular"}

必要に応じて Button Link を更新します。

右上隅にある「Save」をクリックして設定を適用し、Page Builder ワークスペースに戻ります。

ボタンコンテナにカーソルを合わせてツールボックスを表示し、設定 （ {width="20"}）アイコンを選択します。

{width="500" modal="regular"}

「Appearance」で、「Stacked」を選択します。

All Buttons are same size を Yes に設定します。

{width="300"}

必要に応じて、「ボタンコンテナの設定の変更 の説明を使用して残りの設定を更新しす。

完了したら、「Save」をクリックして設定を適用し、Page Builder ワークスペースに戻ります。

完全な積み重ねボタンセットがステージに表示され、1 つのプライマリボタンと 2 つのセカンダリボタンが表示されます。

{width="500" modal="regular"}

移動するボタンをクリックします。

ボタンテキストの直前に表示される「移動」（ {width="20"}）アイコンを選択して、ボタンコンテナ内のボタンの新しい位置にドラッグします。

{width="500" modal="regular"}

ステージ上のボタンをクリックしてツールボックスを表示し、設定 （ {width="20"}）アイコンを選択します。

{width="500" modal="regular"}

必要に応じて標準設定を更新します。

• Button Text - ボタンに表示するテキストを入力します（ステージから直接更新することもできます）。

• Button Type - ボタンの形式を決定します。

  table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
  タイプ	説明
  Primary	現在のスタイル シートからプライマリ ボタン スタイルを適用します。
  Secondary	現在のスタイル シートからセカンダリ ボタン スタイルを適用します（該当する場合）。
  Link	ボタンではなくハイパーリンクを作成します。

• Button Link - ボタンがクリックされたときに提供される宛先ページを決定します。

  table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 layout-auto
  オプション	説明
  URL	宛先ページの識別に相対 URL または完全修飾 URL を使用します。
  Product	製品名または SKU に基づいて宛先ページを識別します。 製品名は、部分的または完全な名前に基づいて検索できます。 検索結果のリストから製品が選択されます。
  Category	宛先ページをカテゴリツリー内の特定のカテゴリまたはサブカテゴリとして識別します。
  Page	リンク先ページを特定のCMSページとして識別します。

必要に応じて 詳細設定を完了します。

設定を保存して Page Builder ワークスペースに戻るには、右上隅の「Save」をクリックします。

ボタンコンテナにカーソルを合わせてツールボックスを表示し、設定 （ {width="20"}）アイコンを選択します。

必要に応じて、Appearance 設定を更新します。

• 配置オプションを使用して、コンテナ内のボタンを水平または垂直に表示します。

  table 0-row-2 1-row-2 2-row-2 layout-auto
  オプション	説明
  Inline	ボタンを水平方向に配置します。
  Stacked	ボタンを垂直方向に配置します。

• 必要に応じて「All buttons are same size」オプションを設定します。

  Yes に設定すると、コンテナ内のすべてのボタンは、最長のボタンテキストの長さに基づいて一定のサイズになります。

必要に応じて 詳細設定を入力します。

完了したら、「Save」をクリックして設定を適用し、Page Builder ワークスペースに戻ります。

親コンテナ内の位置を制御するには、Alignment のオプションを選択します。

ボタンコンテナまたはボタンコンテナの 4 つの辺すべてに適用する Border スタイルを設定します。

None 以外の境界線のスタイルを設定する場合は、境界線の表示オプションを完了します。

（オプション）ボタンまたはボタンコンテナに適用する現在のスタイルシートの CSS classes の名前を指定します。

複数のクラス名はスペースで区切ります。

ボタンまたはボタンコンテナの外側の余白と内側のパディングを決定する Margins and Padding の値をピクセル単位で入力します。

対応する値を図に入力します。