要素 – ボタン
ボタン コンテンツタイプを使用して、Page Builder ステージに個々のボタンまたは一連のボタンを追加します。 ボタンは水平方向または垂直方向に配置でき、ステージの行、列、タブ、バナーに直接追加できます。
ツールボックス
ボタン コンテンツ タイプを使用する場合は、個々のボタンと、1 つ以上のボタンを保持するボタン コンテナを追加および編集します。 それぞれに独自のツールボックスがあり、Page Builder のステージでボタンのデザインに使用します。
個々のボタンのツールボックス
ボタンコンテナツールボックス
個々のボタンの追加
-
Page Builder パネルで Elements を展開し、Buttons プレースホルダーをステージ上の行、列またはタブセットにドラッグします。
{width="500" modal="regular"}
-
ボタンにカーソルを合わせてツールボックスを表示し、設定 ( )アイコンを選択します。
-
ボタンに表示する Button Text を入力します。
{width="600" modal="regular"}
-
Button Type を次のいずれかに設定します。
table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto タイプ 説明 Primary
現在のスタイル シートからプライマリ ボタン スタイルを適用します。 Secondary
現在のスタイル シートからセカンダリ ボタン スタイルを適用します(該当する場合)。 Link
ボタンではなくハイパーリンクを作成します。 {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 ワークスペースに戻ります。
一連のボタンの追加
次のセクションでは、個々のボタンから開始して、ボタンコンテナ内に 3 つのボタンのセットを作成する一連の手順について説明します。 個々のボタンがまだない場合は、前の手順に従って、個々のボタンをステージに追加します。
手順 1:2 番目のボタンの作成
-
ボタンコンテナにカーソルを合わせてツールボックスを表示し、「追加 ( {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:3 番目のボタンの作成
-
ステージの 2 番目のボタンを再度クリックし、「複製」( {width="20"})アイコンを選択します。
{width="500" modal="regular"}
-
3 番目のボタンに表示するテキストを入力します。
-
3 番目のボタンをクリックしてツールボックスを表示し、設定 ( {width="20"})アイコンを選択します。
{width="500" modal="regular"}
-
必要に応じて Button Link を更新します。
-
右上隅にある「Save」をクリックして設定を適用し、Page Builder ワークスペースに戻ります。
手順 3:ボタンコンテナの更新
-
ボタンコンテナにカーソルを合わせてツールボックスを表示し、設定 ( {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 ワークスペースに戻ります。
詳細設定の変更
個々のボタンおよびボタンコンテナの Advanced 設定を変更できます。
-
親コンテナ内の位置を制御するには、Alignment のオプションを選択します。
table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 layout-auto オプション 説明 Default
現在のテーマのスタイル シートで指定されている線形の既定の設定を適用します。 Left
指定したパディングに対する許容値を使用して、親コンテナの左境界線に沿ってコンテンツを配置します。 Center
親コンテナの中央にコンテンツを配置します。指定したパディングに対する許容値を使用します。 Right
親コンテナの右端に沿ってコンテンツを配置します。指定したパディングは許容されます。 -
ボタンコンテナまたはボタンコンテナの 4 つの辺すべてに適用する Border スタイルを設定します。
table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2 6-row-2 7-row-2 8-row-2 9-row-2 10-row-2 layout-auto オプション 説明 Default
関連付けられたスタイル シートで指定されている既定の罫線スタイルを適用します。 None
コンテナの境界線の表示はしません。 Dotted
コンテナの境界線は点線で表示されます。 Dashed
コンテナの境界線は破線で表示されます。 Solid
コンテナの境界線は実線で表示されます。 Double
コンテナの境界線は二重線で表示されます。 Groove
コンテナの境界線は溝付き線で表示されます。 Ridge
コンテナの境界線は、境界線として表示されます。 Inset
コンテナの境界線は、インセットされた線として表示されます。 Outset
コンテナの境界線は、先頭行として表示されます。 -
None
以外の境界線のスタイルを設定する場合は、境界線の表示オプションを完了します。table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto オプション 説明 Border Color 見本を選択するか、カラーピッカーをクリックするか、有効なカラー名または同等の 16 進数値を入力して、カラーを指定します。 Border Width 境界線の幅のピクセル数を入力します。 Border Radius ピクセル数を入力して、境界線の各コーナーを丸めるために使用する半径のサイズを定義します。 -
(オプション)ボタンまたはボタンコンテナに適用する現在のスタイルシートの CSS classes の名前を指定します。
複数のクラス名はスペースで区切ります。
-
ボタンまたはボタンコンテナの外側の余白と内側のパディングを決定する Margins and Padding の値をピクセル単位で入力します。
対応する値を図に入力します。
table 0-row-2 1-row-2 2-row-2 layout-auto コンテナ領域 説明 Margins コンテナのすべての側面の外側の端に適用される空白スペースの量。 オプション: Top
/Right
/Bottom
/Left
Padding コンテナのすべての側面の内側の端に適用される空白のスペースの量です。 オプション: Top
/Right
/Bottom
/Left