メディア – スライダー

スライダーを配置するページ、ブロック、またはダイナミック ブロックを開き、 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:

を Border スライドの 4 つの辺すべてに適用するスタイル：

境界線のスタイルを 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,000 ミリ秒に設定されています。これは 4 秒です。 自動再生をに設定した場合 Noの場合、デフォルトでは最初のスライドが表示されますが、次のスライドを順番に表示するには、ユーザーがスライドナビゲーション（ドットまたは矢印）をクリックする必要があります。

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

スライド間のトランジションをスムーズにするには、を設定します Fade 対象： Yes.

フェードを適用すると、スライドは元の位置に表示されますが、コンテンツはスムーズに切り替わります。 フェードを使用しない場合は、スライド間の水平方向の移動が表示されます。

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

ページが開いている間にスライドショーを無限に繰り返すには、次のように設定します Infinite Loop 対象： Yes.

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

• 次を含める 次 および 前へ 各スライドの左右にある矢印を設定 Show Arrows 対象： Yes.

• スライダーの下に一連のナビゲーションドットを含めるには、次のように設定します Show Dots 対象： Yes.

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

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

完了したら、 Save 設定を適用し、 Page Builder ワークスペース。

親スライダーコンテナ内のスライドの位置を制御するには、 Alignment:

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

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

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

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

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

対応する値を図に入力します。

スライダーを含めたページを開き、次のように設定します Enable Page 対象： Yes.

右上隅のをクリックします Save 矢印と選択 Save & Close.

でページを検索します。 ページ グリッドと選択 View が含まれる Action ​列。

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

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

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