要素 – ボタン

ボタン コンテンツタイプを使用して、Page Builder ステージに個々のボタンまたは一連のボタンを追加します。 ボタンは水平方向または垂直方向に配置でき、ステージの行、列、タブ、バナーに直接追加できます。

店頭にボタンが設置されているバナー

NOTE
Page Builder コンテンツに大きな変更を加える場合は、 管理者セッションの有効期間を増やして、作業中にセッションがタイムアウトしないようにすることをお勧めします。

ツールボックス

ボタン コンテンツ タイプを使用する場合は、個々のボタンと、1 つ以上のボタンを保持するボタン コンテナを追加および編集します。 それぞれに独自のツールボックスがあり、Page Builder のステージでボタンのデザインに使用します。

個々のボタンのツールボックス

ボタンツールボックス

ツール
アイコン
説明
設定
設定アイコン {width="25"}
「編集ボタン」ページが開きます。このページで、ボタンのプロパティを変更できます。
複製
複製アイコン {width="25"}
ボタンをコピーします。
削除
削除アイコン {width="25"}
ステージからボタンを削除します。

ボタンコンテナツールボックス

ボタンコンテナツールボックス

ツール
アイコン
説明
移動
移動アイコン {width="25"}
ボタンコンテナをページ上の別の有効な場所に移動します。
追加
追加アイコン {width="25"}
コンテナにボタンを追加します。
(ラベル)
ボタン
現在のコンテナをボタン要素として識別します。
設定
設定アイコン {width="25"}
編集ボタン ページを開きます。このページで、コンテナのプロパティを変更できます。
Hide
アイコンを非表示 {width="25"}
ボタンコンテナを非表示にします。
表示
アイコンを表示 {width="25"}
非表示のボタンコンテナを表示します。
複製
複製アイコン {width="25"}
ボタンコンテナをコピーします。
削除
削除アイコン {width="25"}
ボタンコンテナとそのコンテンツをステージから削除します。
NOTE
非表示の要素はデータベースに保存され、顧客には表示されません。 ただし、これらの要素は、サイトをクロールする検索エンジンやその他のボットには表示されます。 また、非表示の属性を持つ API 呼び出しを通じてリクエストされた場合、ステージから削除しない限り、コンテンツの一部として返されます。

個々のボタンの追加

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

    ボタンのステージへのドラッグ {width="500" modal="regular"}

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

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

    基本ボタンの設定 {width="600" modal="regular"}

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

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

    プライマリおよびセカンダリボタンの例 {width="500" modal="regular"}

  5. 次のいずれかのタイプを使用して 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 ページの名前(一部または全部)を入力するか、空白フィールドをクリックして完全なリストを表示します。 次に、検索結果リストでページの名前を選択します。

      ボタンリンクの CMS ページを選択 {width="600" modal="regular"}

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

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

一連のボタンの追加

次のセクションでは、個々のボタンから開始して、ボタンコンテナ内に 3 つのボタンのセットを作成する一連の手順について説明します。 個々のボタンがまだない場合は、前の手順に従って、個々のボタンをステージに追加します。

手順 1:2 番目のボタンの作成

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

    別のボタンの追加 {width="500" modal="regular"}

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

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

    ボタンの編集 {width="500" modal="regular"}

  4. Button TypeSecondary に設定します。

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

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

    お問い合わせボタンの設定 {width="600" modal="regular"}

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

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

手順 2:3 番目のボタンの作成

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

    ボタンの複製 {width="500" modal="regular"}

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

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

    3 番目のボタンのツールボックス {width="500" modal="regular"}

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

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

手順 3:ボタンコンテナの更新

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

    ボタンコンテナツールボックス {width="500" modal="regular"}

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

  3. All Buttons are same sizeYes に設定します。

    同じサイズの積み重ねボタン {width="300"}

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

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

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

    ステージ上の積み重ねボタン {width="500" modal="regular"}

ボタンの移動

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

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

    ボタンの移動 {width="500" modal="regular"}

ボタンの設定の変更

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

    ボタンツールボックス {width="500" modal="regular"}

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

    • 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 ページとして識別します。
  3. 必要に応じて 詳細設定を完了します。

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

ボタンコンテナの設定の変更

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

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

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

      table 0-row-2 1-row-2 2-row-2 layout-auto
      オプション 説明
      Inline ボタンを水平方向に配置します。
      Stacked ボタンを垂直方向に配置します。
    • 必要に応じて「All buttons are same size」オプションを設定します。

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

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

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

詳細設定の変更

個々のボタンおよびボタンコンテナの Advanced ​設定を変更できます。

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

    table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 layout-auto
    オプション 説明
    Default 現在のテーマのスタイル シートで指定されている線形の既定の設定を適用します。
    Left 指定したパディングに対する許容値を使用して、親コンテナの左境界線に沿ってコンテンツを配置します。
    Center 親コンテナの中央にコンテンツを配置します。指定したパディングに対する許容値を使用します。
    Right 親コンテナの右端に沿ってコンテンツを配置します。指定したパディングは許容されます。
  2. ボタンコンテナまたはボタンコンテナの 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 コンテナの境界線は、先頭行として表示されます。
  3. None 以外の境界線のスタイルを設定する場合は、境界線の表示オプションを完了します。

    table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
    オプション 説明
    Border Color 見本を選択するか、カラーピッカーをクリックするか、有効なカラー名または同等の 16 進数値を入力して、カラーを指定します。
    Border Width 境界線の幅のピクセル数を入力します。
    Border Radius ピクセル数を入力して、境界線の各コーナーを丸めるために使用する半径のサイズを定義します。
  4. (オプション)ボタンまたはボタンコンテナに適用する現在のスタイルシートの CSS classes の名前を指定します。

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

  5. ボタンまたはボタンコンテナの外側の余白と内側のパディングを決定する 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
recommendation-more-help
85b60248-86a4-4d5f-9933-5179643f608d