要素 – ボタン
作成対象：
- 初心者
- 中級
- ユーザー
ボタン コンテンツタイプを使用して、Page Builder ステージに個々のボタンまたは一連のボタンを追加します。 ボタンは水平方向または垂直方向に配置でき、ステージの行、列、タブ、バナーに直接追加できます。
NOTEツールボックス
ボタン コンテンツ タイプを使用する場合は、個々のボタンと、1 つ以上のボタンを保持するボタン コンテナを追加および編集します。 それぞれに独自のツールボックスがあり、Page Builder のステージでボタンのデザインに使用します。
個々のボタンのツールボックス
| ツール | アイコン | 説明 |
|---|---|---|
| 設定 |
 | 「編集ボタン」ページが開きます。このページで、ボタンのプロパティを変更できます。 |
| 複製 |
 | ボタンをコピーします。 |
| 削除 |
 | ステージからボタンを削除します。 |
ボタンコンテナツールボックス
| ツール | アイコン | 説明 |
|---|---|---|
| 移動 |
 | ボタンコンテナをページ上の別の有効な場所に移動します。 |
| 追加 |
 | コンテナにボタンを追加します。 |
| （ラベル） | ボタン | 現在のコンテナをボタン要素として識別します。 |
| 設定 |
| 編集ボタン ページを開きます。このページで、コンテナのプロパティを変更できます。 |
| Hide |
 | ボタンコンテナを非表示にします。 |
| 表示 |
 | 非表示のボタンコンテナを表示します。 |
| 複製 |
| ボタンコンテナをコピーします。 |
| 削除 |
| ボタンコンテナとそのコンテンツをステージから削除します。 |
NOTE個々のボタンの追加
-
Page Builder パネルで Elements を展開し、Buttons プレースホルダーをステージ上の行、列またはタブセットにドラッグします。
-
ボタンにカーソルを合わせてツールボックスを表示し、設定 （
-
ボタンに表示する Button Text を入力します。
-
Button Type を次のいずれかに設定します。
タイプ説明Primary現在のスタイル シートからプライマリ ボタン スタイルを適用します。Secondary現在のスタイル シートからセカンダリ ボタン スタイルを適用します（該当する場合）。Linkボタンではなくハイパーリンクを作成します。
-
次のいずれかのタイプを使用して 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製品は、「在庫切れの製品を表示 設定に従ってリストに表示さ ます。 Inventory management を使用しているマルチ Source マーチャントの場合、商品リストは、デフォルト web サイトにのみ割り当てられたソースによって制限されます。
-
Category - カテゴリ名（一部または全部）を入力するか、空白フィールドをクリックしてカテゴリツリーを表示します。 次に、ツリーでカテゴリ名を選択します。
-
Page - CMS ページの名前（一部または全部）を入力するか、空白フィールドをクリックして完全なリストを表示します。 次に、検索結果リストでページの名前を選択します。
-
-
必要に応じて 詳細設定を完了します。
-
完了したら、右上隅の Save をクリックして設定を適用し、Page Builder ワークスペースに戻ります。
一連のボタンの追加
次のセクションでは、個々のボタンから開始して、ボタンコンテナ内に 3 つのボタンのセットを作成する一連の手順について説明します。 個々のボタンがまだない場合は、前の手順に従って、個々のボタンをステージに追加します。
手順 1:2 番目のボタンの作成
-
ボタンコンテナにカーソルを合わせてツールボックスを表示し、「追加 （
-
2 番目のボタンに表示するテキストを入力します。
-
新規ボタンをクリックしてツールボックスを表示し、設定 （
-
Button Type を
Secondaryに設定します。 -
必要に応じて Button Link を設定します。
次の例では、リンクは、「お問い合わせ ページに移動する相対 URL で。
-
必要に応じて 詳細設定を完了します。
-
完了したら、「Save」をクリックして設定を適用し、Page Builder ワークスペースに戻ります。
手順 2:3 番目のボタンの作成
-
ステージの 2 番目のボタンを再度クリックし、「複製」（
-
3 番目のボタンに表示するテキストを入力します。
-
3 番目のボタンをクリックしてツールボックスを表示し、設定 （
-
必要に応じて Button Link を更新します。
-
右上隅にある「Save」をクリックして設定を適用し、Page Builder ワークスペースに戻ります。
手順 3：ボタンコンテナの更新
-
ボタンコンテナにカーソルを合わせてツールボックスを表示し、設定 （
-
「Appearance」で、「Stacked」を選択します。
-
All Buttons are same size を
Yesに設定します。
-
必要に応じて、「ボタンコンテナの設定の変更 の説明を使用して残りの設定を更新しす。
-
完了したら、「Save」をクリックして設定を適用し、Page Builder ワークスペースに戻ります。
完全な積み重ねボタンセットがステージに表示され、1 つのプライマリボタンと 2 つのセカンダリボタンが表示されます。
ボタンの移動
-
移動するボタンをクリックします。
-
ボタンテキストの直前に表示される「移動」（
ボタンの設定の変更
-
ステージ上のボタンをクリックしてツールボックスを表示し、設定 （
-
必要に応じて標準設定を更新します。
-
Button Text - ボタンに表示するテキストを入力します（ステージから直接更新することもできます）。
-
Button Type - ボタンの形式を決定します。
タイプ説明Primary現在のスタイル シートからプライマリ ボタン スタイルを適用します。Secondary現在のスタイル シートからセカンダリ ボタン スタイルを適用します（該当する場合）。Linkボタンではなくハイパーリンクを作成します。 -
Button Link - ボタンがクリックされたときに提供される宛先ページを決定します。
オプション説明URL宛先ページの識別に相対 URL または完全修飾 URL を使用します。Product製品名または SKU に基づいて宛先ページを識別します。 製品名は、部分的または完全な名前に基づいて検索できます。 検索結果のリストから製品が選択されます。Category宛先ページをカテゴリツリー内の特定のカテゴリまたはサブカテゴリとして識別します。Page宛先ページを特定の CMS ページとして識別します。
-
-
必要に応じて 詳細設定を完了します。
-
設定を保存して Page Builder ワークスペースに戻るには、右上隅の「Save」をクリックします。
ボタンコンテナの設定の変更
-
ボタンコンテナにカーソルを合わせてツールボックスを表示し、設定 （
-
必要に応じて、Appearance 設定を更新します。
-
配置オプションを使用して、コンテナ内のボタンを水平または垂直に表示します。
オプション説明Inlineボタンを水平方向に配置します。Stackedボタンを垂直方向に配置します。 -
必要に応じて「All buttons are same size」オプションを設定します。
Yesに設定すると、コンテナ内のすべてのボタンは、最長のボタンテキストの長さに基づいて一定のサイズになります。
-
-
必要に応じて 詳細設定を入力します。
-
完了したら、「Save」をクリックして設定を適用し、Page Builder ワークスペースに戻ります。
詳細設定の変更
個々のボタンおよびボタンコンテナの Advanced 設定を変更できます。
-
親コンテナ内の位置を制御するには、Alignment のオプションを選択します。
オプション説明Default現在のテーマのスタイル シートで指定されている線形の既定の設定を適用します。Left指定したパディングに対する許容値を使用して、親コンテナの左境界線に沿ってコンテンツを配置します。Center親コンテナの中央にコンテンツを配置します。指定したパディングに対する許容値を使用します。Right親コンテナの右端に沿ってコンテンツを配置します。指定したパディングは許容されます。 -
ボタンコンテナまたはボタンコンテナの 4 つの辺すべてに適用する Border スタイルを設定します。
オプション説明Default関連付けられたスタイル シートで指定されている既定の罫線スタイルを適用します。Noneコンテナの境界線の表示はしません。Dottedコンテナの境界線は点線で表示されます。Dashedコンテナの境界線は破線で表示されます。Solidコンテナの境界線は実線で表示されます。Doubleコンテナの境界線は二重線で表示されます。Grooveコンテナの境界線は溝付き線で表示されます。Ridgeコンテナの境界線は、境界線として表示されます。Insetコンテナの境界線は、インセットされた線として表示されます。Outsetコンテナの境界線は、先頭行として表示されます。 -
None以外の境界線のスタイルを設定する場合は、境界線の表示オプションを完了します。オプション説明Border Color見本を選択するか、カラーピッカーをクリックするか、有効なカラー名または同等の 16 進数値を入力して、カラーを指定します。Border Width境界線の幅のピクセル数を入力します。Border Radiusピクセル数を入力して、境界線の各コーナーを丸めるために使用する半径のサイズを定義します。 -
（オプション）ボタンまたはボタンコンテナに適用する現在のスタイルシートの CSS classes の名前を指定します。
複数のクラス名はスペースで区切ります。
-
ボタンまたはボタンコンテナの外側の余白と内側のパディングを決定する Margins and Padding の値をピクセル単位で入力します。
対応する値を図に入力します。
コンテナ領域説明Marginsコンテナのすべての側面の外側の端に適用される空白スペースの量。 オプション：Top/Right/Bottom/LeftPaddingコンテナのすべての側面の内側の端に適用される空白のスペースの量です。 オプション：Top/Right/Bottom/Left