メディア – バナー

Page Builder パネルで Media を展開し、Banner プレースホルダーをステージにドラッグします。

{width="600" modal="regular"}

Upload Image ​ボタンと​ Select from Gallery ボタンが含まれているので、ステージから直接バナーコンテンツをすばやく変更できます。 Edit Banner ​ページのコンテンツを変更することもできます。

バナープレースホルダー内をクリックして テキストエディターを表示し、バナーのコンテンツを入力します。

コンテンツ設定を使用して、より複雑なバナーコンテンツを含めることもできます。

バナーコンテナにカーソルを合わせてツールボックスを表示し、設定 （ ）アイコンを選択します。

使用可能な設定の更新について詳しくは、次の節を参照してください。

• Appearance
• Content
• Background
• Advanced

完了したら、右上隅の「Save」をクリックして、Edit Banner ​ページを閉じます。

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

プレースホルダーテキストをクリックし、バナーに表示するテキストを入力します。

テキストボックスの上にエディターツールバーが表示されます。

{width="600" modal="regular"}

エディターツールバーを使用して、テキストの入力や書式設定のほか、リンク、画像、ウィジェットなどの要素を挿入します。

{width="600" modal="regular"}

バナーコンテナの上にマウスポインターを置くと、ツールボックスが表示されます。次に、設定 （ {width="25"}）アイコンを選択します。

「Content」セクションまでスクロールし、Message Text ​エディターを使用してバナーテキストを入力および書式設定します。

テキストリンク、画像、ウィジェットなどの要素を挿入することもできます。

{width="600" modal="regular"}

必要に応じて、バナー Link を指定します。

リンクは、顧客がバナーボタンまたは領域をクリックすると表示される宛先ページです。 次の 3 つのリンクタイプのいずれかを使用できます。

• URL – 相対 URL または完全修飾 URL へのリンク。
• Product – 製品名または SKU に基づいて宛先ページを識別します。 部分的または完全な名前に基づいて、名前で製品を検索します。 検索結果リストから製品を選択します。
• Category - カテゴリツリー内の特定のカテゴリまたはサブカテゴリとして宛先ページを識別します。 名前の一部または全部に基づいてカテゴリを検索します。 表示されたツリーの展開セクションからカテゴリを選択します。
• Page – 宛先ページを特定のコンテンツページとして識別します。 名前の一部または全部に基づいてページを検索します。 検索結果リストからページを選択します。

note note
NOTE
2.4.1 リリース以降、ストアフロントの表示に関する問題により、Page Builder はバナーとネストされたテキスト内のリンクのリンクをサポートしなくなりました。 Message Text ​でリンクを使用している場合、「Link」オプションを設定することはできません。 バナー全体に 1 つのリンクを使用する場合は、テキストからすべてのリンクを削除できます。
{width="200"}

必要に応じて、リンクをたどるように顧客に促すボタンを追加します。

バナーの外観を設定すると、テキストの下に 1 つのリンクまたはボタンが配置されます。 追加するリンクまたはボタンのプロパティを入力します。

{width="600" modal="regular"}

• Show Button を次のいずれかに設定します。

  table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
  オプション	説明
  Always	ボタンは常にバナーに表示されます。
  On Hover	ボタンは、マウスポインターを置いたときにのみバナーに表示されます。
  Never Show	ボタンがバナーに表示されない。

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

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

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

  現在のテーマのボタンのスタイルによって、ボタンの形式が決まります。 通常、プライマリボタンの背景色は、セカンダリボタンの背景色よりも目立ちます。

Show Overlay を次のいずれかに設定します。

オーバーレイを使用して、Appearance 設定で定義されたアクティブなコンテンツ領域に背景色を適用することができます。 バナーの背景画像は、バナーの全幅に対して表示されたままになります。

オーバーレイの表示を選択した場合は、Overlay Color を設定します。

• カラーなし スウォッチをクリックし、スウォッチを選択します。
• カラーなし フィールドに、有効なカラー名または 16 進数値を入力します。

{width="600" modal="regular"}

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

{width="600" modal="regular"}

バナーに追加されるコンテンツコンテナの水平方向の位置を制御するには、Alignment のいずれかを選択します。

バナーコンテナの 4 つの側面すべてに適用する Border スタイルを設定します。

None 以外の境界線のスタイルを設定する場合は、境界線の表示オプションを完了します。

• Border Color - カラーを指定するには、見本を選択するか、カラーピッカーをクリックするか、有効なカラー名または同等の 16 進数値を入力します。

  {width="600" modal="regular"}

• Border Width – 境界線の幅のピクセル数を入力します。

• Border Radius – 境界線の各コーナーを丸めるために使用する半径のサイズを定義するピクセル数を入力します。

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

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

バナーの外側の余白と内側のパディングを指定する Margins and Padding の値をピクセル単位で入力します。

対応する各値をバナーコンテナ図に入力します。