メディア – スライダー

スライダーを配置するページ、ブロック、または動的ブロックを開き、Content セクションを展開します。

Page Builder パネルで、Media​を展開し、Slider プレースホルダーをステージ上の行、列、またはタブにドラッグします。

次の例では、行の背景色は黄色（#fffd16）です。

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

スライダーコンテナは、1つの空のスライドでステージに表示されます。

スライダーコンテナ内をクリックして​ テキストエディターを表示し、最初のスライドのコンテンツを入力します。

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

スライダーの下部にあるナビゲーションドットをクリックして、個々のスライドのツールボックスを表示し、設定 （ {width="20"}）アイコンを選択します。

スライダーには2つのツールボックスがあります。 下部のスライドツールボックスを使用していることを確認してください。

必要に応じて、次のセクションに従って設定を完了します。

• Appearance
• Background
• Content
• Search Engine Optimization
• Advanced

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

スライドの下にあるナビゲーションドットをクリックしてツールボックスを表示し、複製 （ {width="20"}）アイコンを選択します。

{width="500" modal="regular"}

新しいスライドのナビゲーションドットをクリックして、ツールボックスを表示し、設定 （ {width="20"}）アイコンを選択します。

必要に応じて、次のセクションに従って設定を変更します。

• Appearance
• Background
• Content
• Advanced

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

上部のスライダーコンテナにカーソルを合わせてツールボックスを表示し、追加 （ {width="20"}）アイコンを選択します。

{width="500" modal="regular"}

独自のナビゲーションドットとツールボックスを含む新しい空白のスライドがスライダーに追加され、ステージに表示されます。

{width="500" modal="regular"}

新しいスライドのナビゲーションドットをクリックして、ツールボックスを表示し、設定 （ {width="20"}）アイコンを選択します。

必要に応じて、次のセクションに従って設定を変更します。

• Appearance
• Background
• Content
• Advanced

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

​ スライドに表示するウィジェット ​を作成します。

スライダーを配置するページ、ブロック、または動的ブロックを開き、Content セクションを展開します。

Page Builder パネルで、Media​を展開し、Slider プレースホルダーをステージ上の行、列、またはタブにドラッグします。

スライダーコンテナ内をクリックして​ テキストエディター ツールバーを表示し、ウィジェットの挿入 （ {width="20"}）アイコンをクリックします。

必要な​ Widget Type ​を選択します。

ウィジェットの種類によって異なる設定を指定します

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

完了したら、右上隅の「Insert Widget」をクリックします。

必要に応じてその他の設定を変更します。

完了したら、右上隅の「Save」をクリックします。

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

ステージのスライダー表示を変更し、変更するスライドを表示します。

個々のスライドツールボックスで、設定 （ {width="20"}）アイコンを選択し、必要に応じて次のセクションに従って設定を完了します。

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

次のいずれかのスライド配置タイプを選択します。

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

Slide Name​を入力します。

編集モードで作業している場合、スライド名はナビゲーションドットの上にツールチップとして表示されます。 スライド名はストアフロントから表示されません。

ナビゲーションの {width="500" modal="regular"}

スライドの​ Minimum Height ​を入力します。

最小の高さは、有効なCSS単位（100px、50%、50em、100vhなど）または計算（100vh - 237pxなど）を含む数値にすることができます。

例えば、スライドの最小高さを設定してページ全体の高さをカバーし、背景画像とビデオを使用して魅力的なデザインオプションを作成できます。

プレースホルダーまたは既存のテキストをクリックし、スライドに表示する新しいテキストを入力します。

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

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

{width="500" modal="regular"}

スライダーの下部にあるナビゲーションドットをクリックして、個々のスライドのツールボックスを表示し、設定 （ {width="20"}）アイコンを選択します。

Content​セクションで、スライドと共に表示する​ Message Text ​を入力します。

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

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

エディターツールバーを使用して、必要に応じてテキストを書式設定します。

この例の最初のスライドには背景画像がありますが、メッセージテキストはありません。 スライダーの上にあるBuy 3 Get 1 Free テキストは、テキストコンテナ内にあります（後で追加）。

必要に応じて、スライドに​ Link ​を指定します。

リンクは、お客様がスライド領域をクリックしたときに表示される宛先ページです。 次の3つのリンクタイプのいずれかを使用できます。

• URL – 相対URLまたは完全修飾URLのいずれかにリンクします。

• Product – 製品名またはSKUに基づいて宛先ページを識別します。 部分的または完全な名前に基づいて、製品を名前で検索します。 検索結果リストから商品を選択します。

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

• Category – 宛先ページをカテゴリ ツリー内の特定のカテゴリまたはサブカテゴリとして識別します。 部分的または完全な名前に基づいてカテゴリを検索します。 表示されたツリーの展開されたセクションからカテゴリを選択します。

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

• Page – 宛先ページを特定のコンテンツ ページとして識別します。 部分的または完全な名前に基づいてページを検索します。 検索結果リストからページを選択します。

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

2.4.1 リリース以降、Page Builderでは、ストアフロントでの表示に関する問題により、ネストされたテキスト内のスライドとリンクのリンクがサポートされなくなりました。 「_Message Text_」でリンクを使用している場合、「_Link_」オプションを設定することはできません。 スライド全体に1つのリンクを使用する場合は、テキストからすべてのリンクを削除できます。

{width="300"}

訪問者がストアから離れるのを防ぐ場合は、Open in new tab チェックボックスを選択します。 チェックボックスをオフにすると、リンクされた宛先が同じブラウザータブで開き、訪問者をストアから効果的に移動させることができます。

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

スライド アピアランス​の位置は、テキストの下に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​を次のいずれかに設定します：

オーバーレイを使用して、「アピアランス」設定で定義されているアクティブコンテンツ領域に背景色を適用できます。 スライドの背景画像は、スライドの全幅にわたって表示されたままです。

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

オーバーレイを表示する場合は、Overlay Color​を設定します。

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

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

スライドに追加されたコンテンツの水平方向の配置を制御するには、Alignment​を選択します。

スライドのすべての4つの側面に適用される​Border スタイルを設定します。

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

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

（オプション）現在のスタイルシートから​ CSS classes ​の名前を指定して、スライドに適用します。

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

Margins and Padding​の値をピクセル単位で入力して、スライドの外側の余白と内側の余白を指定します。

スライド図に対応する各値を入力します。

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

ドラッグすると、赤いガイドラインがスライダーの上に挿入ポイントを示します。

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

必要に応じて、エディターを使用してテキストの書式を設定します。

{width="500" modal="regular"}

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

{width="500" modal="regular"}

スライドの​ Minimum Height ​を入力します。

最小の高さは、有効なCSS単位（100px、50%、50em、100vhなど）または計算（100vh - 237pxなど）を含む数値にすることができます。

例えば、スライダーの最小高さを設定して、ページ全体の高さを伸ばすと、ページ全体の背景画像やビデオに対して魅力的なオプションが表示されます。

{width="400"}

ページの読み込み時にスライダーを開始する場合は、Autoplay​をYesに設定し、Autoplay Speed​をスライド間の遅延時間のミリ秒数に設定します。

デフォルトでは、速度は4秒の4000 msに設定されています。 自動再生をNoに設定すると、最初のスライドがデフォルトで表示され、お客様はスライドナビゲーション（ドットまたは矢印）をクリックして次のスライドを順番に表示する必要があります。

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

あるスライドから次のスライドへの移行をスムーズにするには、Fade​をYesに設定します。

フェードでは、スライドは配置されたままのように見えますが、コンテンツは次から次へとスムーズに変化します。 フェードを使用しない場合、1つのスライドから次のスライドへの水平方向の移動が表示されます。

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

ページを開いているときにスライドショーを無期限に繰り返すには、Infinite Loop​をYesに設定します。

スライダーのナビゲーションコントロールの種類を選択するには、次の操作を行います。

• 各スライドの左側と右側に​ 次 ​と​ 前 ​の矢印を含めるには、Show Arrows​をYesに設定します。

• スライダーの下に一連のナビゲーションドットを含めるには、Show Dots​をYesに設定します。

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

必要に応じて、詳細 スライダーの設定を完了します。

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

親スライダーコンテナ内のスライドの位置を制御するには、Alignment​を選択します。

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

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

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

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

Margins and Padding​の値をピクセル単位で入力して、スライダーコンテナの外側の余白と内側の余白を決定します。

対応する値をダイアグラムに入力します。

スライダーを含めたページを開き、Enable Page​をYesに設定します。

右上隅の​ Save ​矢印をクリックし、Save & Close​を選択します。

ページ グリッドでページを検索し、Action​列の​ View ​を選択します。

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

スライダーをプレビューする場合は、モバイルデバイスでどのように表示されるかを確認できるように、ウィンドウのサイズを変更します。

{width="400" modal="regular"}