メディア – バナー

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

必要に応じて、ボタンを追加して、顧客にリンクのフォローを促します。

バナーのアピアランス設定では、テキストの下に単一のリンクまたはボタンが配置されます。 追加するリンクまたはボタンのプロパティを入力します。

{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​の値をピクセル単位で入力して、バナーの外側の余白と内側の余白を指定します。

バナーコンテナダイアグラムに対応する各値を入力します。