ヒーローバナーとカルーセル要素を使ったスライドショーのデザイン

適切にデザインされたスライドショーは、オンライン ストアの外観を向上させ、ユーザー エクスペリエンスを向上させることができます。 

電子商取引ウェブサイトで最も人気のあるセクションの1つは ヒーローバナースライドショーでは、ホームページの上部に主要な製品、プロモーション、ブランド メッセージなどが表示されます。

スライドショーとは何か、なぜ使用するのか?

スライドショーとは、複数のメッセージ、プロモーション、または商品を、通常はホームページ上部の単一のセクションに表示するために用いられる、一連のバナーまたは画像を回転させるものです。これにより、訪問者の関心を素早く引きつけ、圧倒されることなくエンゲージメントを維持することができます。

カルーセル形式を使用すると、次の点を強調できます。

• 注目商品や季節商品
• 期間限定のプロモーションやオファー
• ブランドメッセージや新コレクション

適切にデザインされたスライドショーは、オンライン ストアの見栄えを向上させ、ユーザー エクスペリエンスを強化します。 

GemPages でスラ​​イドショーや画像カルーセルをデザインする方法

GemPagesを使えば、スライドショーの作成はシンプルかつ柔軟です。 回転木馬 の三脚と ヒーローバナー 全体的なユーザー エクスペリエンスを向上させ、クリック数を増やす、目を引くインタラクティブなスライドを作成するための要素です。 

このガイドでは、これらの要素を使用してヒーロー バナー スライドショーをデザインするための手順を段階的に説明します。

ステップ1： GemPagesエディターにアクセスする

に行きます GemPagesダッシュボード > ページをクリックし、対象のページを見つけてエディターを開きます。

ステップ2： カルーセル要素をページに追加する

ドラッグアンドドロップ カルーセル要素 スライドショーを表示するセクションに追加します。

注意： カルーセルエレメントには、スライドの長さやトランジション効果などのカスタマイズ可能な設定が付属しています。これらの設定について詳しくは、 この記事.

ステップ3: カルーセルにヒーローバナー要素を追加する

左側のサイドバーから、Hero Banner Element をカルーセルにドラッグ アンド ドロップします。

ヒーローバナーには、 背景画像、見出し、テキストブロック、ボタン.

画像、アイコン、アイテム リストなどの追加要素を使用して、ヒーロー バナーを充実させることができます。

ステップ4： ヒーローバナーをカスタマイズする

それでは、ヒーローバナーをカスタマイズしてみましょう。 設定 タブをクリックします。左側のサイドバーから、ヒーローバナーの要素を自由に変更できます。

具体的な例を挙げますと、以下の通りです。

• 画像をヒーローバナーにアップロードします:

• 背景色を変更:

• 見出し、テキストブロック、ボタンなどを編集します。

ステップ5： スライドを複製する  

メインのカルーセル要素に戻る 設定 タブには何も表示されないことに注意してください。

• 右クリックして ヒーローバナー >「親要素を選択” をクリックすると、カルーセルのメイン設定に戻ります。

• また、 小さな点をクリックしてください カルーセルの下にある をクリックして設定にアクセスします。

左側のサイドバーから、 アイテム管理 セクションの横にあるボックスをクリックします 注文 アイテム管理ダイアログを開きます。

覆いかぶさります アイテム1 とをクリックしてください 複製 スライダー 1 を複製するにはアイコンをクリックします。

複製されたスライダー（スライダー2）は、 アイテム1、自動的に名前が付けられます アイテム5.

このヒントは、同じデザインを再利用できるようにすることで時間を節約します。複製した各スライドの画像とテキストを更新するだけです。

よくあるご質問

1. 画像の代わりにビデオをスライドショーに追加できますか?

現在、カルーセル要素は画像ベースのスライドをサポートしています。ただし、ビデオスライドショーをシミュレートしたい場合は、各スライド内のヒーローバナーにビデオ要素を手動で挿入できます。ただし、読み込み速度に影響する可能性がありますのでご注意ください。

2. XNUMX つのカルーセルにスライドをいくつ追加できますか?

追加できるスライドの数に厳密な制限はありません。ただし、パフォーマンスとユーザーエクスペリエンスの観点から、スライドは5枚以下に抑えることをお勧めします。

3. スライドの遷移速度とアニメーションを制御できますか?

はい！カルーセル設定から、トランジションの継続時間、自動再生の切り替え、アニメーションの種類（フェードまたはスライド）、ループ動作を調整できます。

4. スライドショーはモバイル デバイスでも応答しますか?

はい、もちろんです。GemPagesのカルーセルとヒーローバナー要素は完全にレスポンシブです。また、エディターのレスポンシブビューモードを使用して、モバイルやタブレットのビューに合わせてレイアウトをカスタマイズすることもできます。

5. 各スライドに異なるリンクを追加できますか?

はい。各ヒーローバナースライドには、固有のリンクを持つボタンまたはクリック可能な画像を含めることができます。各ヒーローバナーブロック内のボタン要素または画像リンクをカスタマイズするだけです。

6. ライブ ページでカルーセルが正しく表示されないのはなぜですか?

ことを確認してください ディスプレイ 条件が正しく設定され、カルーセル要素がすべてのデバイスで表示されるセクション内に配置されていることを確認してください。また、公開ステータスを再確認し、ブラウザのキャッシュをクリアしてください。