要素 – ボタン

が含まれる 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ただし、製品のリストは、デフォルトの 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:

を Border ボタンまたはボタンコンテナの 4 つの辺すべてに適用されるスタイル：

境界線のスタイルを Noneの場合は、次のボーダー表示オプションを入力します。

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

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

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

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