メディア – バナー

が含まれる 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:

を Border バナーコンテナの 4 つの側面すべてに適用されるスタイル：

境界線のスタイルを Noneの場合は、次のボーダー表示オプションを入力します。

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

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

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

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

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

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

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

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