ヒーローバナー要素を使用して注目のコレクションリストセクションを作成する

注目のコレクションについて

おすすめコレクションは、顧客に見てもらいたい商品をハイライトしたグループです。人気カテゴリーや季節限定カテゴリーへのクイックリンクとして機能することが多く、ナビゲーションの改善や主要コレクションの売上向上に役立ちます。

注目のコレクションの例:

• メンズショップ / レディースショップ: 性別別の製品カテゴリ向け。
• サマーコレクション / ウィンターコレクション: 季節ごとのハイライトやプロモーション。
• ベストセラー/新着商品: 人気のあるアイテムや最近追加されたアイテムに注目を集めます。

これらのセクションは通常、顧客の注意を引くためにホームページの目立つ場所に配置されます。

ヒーローバナー要素を使用して注目のコレクションリストをデザインする方法

自分だけのオリジナル作品を作るためのベストな方法を探る 特集コレクションリスト GemPages Hero Banner 要素を使用します。

開始する前に、GemPages Editor v7 でターゲット ページを見つけていることを確認してください。

ステップ1: 3列の行を作成する

• エディターに入ったら、左側のサイドバーから「行」を検索します。
• 3 列の行要素をページ上の任意の位置にドラッグ アンド ドロップします。

このレイアウトでは、3 つの注目コレクションを並べて表示できます。

ステップ2: 最初の列にヒーローバナーを追加する

• 左側のサイドバーからヒーローバナー要素を見つけて、最初の列にドラッグ＆ドロップします。 行 要素。

• ヒーローバナー要素をクリックして設定を開きます。下にスクロールして 経歴 セクションとを見つけます 画像 オプションを選択します。

• 設定パネルを展開します。ギャラリーを閲覧したり、最初のコレクションを表す新しい画像をアップロードしたりできます。

• 下 文字スタイル セクションで、コレクションのタイトルと一致するようにテキストの編集を続けます。

• 有効にします ホバー効果 視覚的な魅力を高めるヒーローバナー設定の機能:

ステップ3: 他の列のヒーローバナーを複製する

• ヒーローバナーの設定から、右クリックして 親要素を選択 > 3行目列 行要素を開く 設定 タブには何も表示されないことに注意してください。

• 下にスクロールします 列管理 > 3列 設定パネルを開きます。次に、 コラム 1 > ヒット 複製 のアイコンをクリックします。

• 最初の列を複製した後、マウスオーバーして削除します 列4 & 列5.

• カスタマイズ 列2 & 列3 お好みに合わせて、各列の背景画像、テキスト、ボタンを置き換えて、異なるコレクションを表現しましょう。

注意： 統一感のある外観にするために、すべての列にわたってデザインの一貫性を保つようにします。

ステップ 4: モバイル向けに最適化する

• GemPages エディターでモバイル ビューに切り替えます。

• 小さい画面に合わせてレイアウトを調整します。画像、テキスト、ボタンのサイズを調整します。
• 設定を保存して パブリッシュ ボタンをクリックして変更を反映させます。