要素 – ボタン

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
  商品は、在庫切れ商品を表示​の設定に従ってリストに表示されます。 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"}）アイコンを選択します。

3番目のボタンの {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​の値をピクセル単位で入力して、ボタンまたはボタンコンテナの外側の余白と内側の余白を決定します。

対応する値をダイアグラムに入力します。