コレクションバナー要素

コレクションバナー要素とは何ですか?

その コレクションバナー要素 GemPagesには、 コレクションページの上部にカスタムバナーを表示します.

ページにコレクションバナーを追加するにはどうすればいいですか?

重要： コレクション バナー要素はコレクション ページでのみ使用できます。

ページにニュースレター要素を追加するには、次の手順に従います。

ステップ1： アクセス GemPagesダッシュボード > ページ > 収集をクリックし、対象のコレクション ページをクリックしてエディターを見つけます。

ステップ2： 左側のサイドバーから、 「コレクションバナー　 ページ上の希望の位置にドラッグ アンド ドロップします。

Shopify の設定に基づいて画像が自動的に表示されます。

ステップ3： 要素をクリックすると設定が開き、さらにカスタマイズできます。

設定タブを構成する

その コレクションバナー要素 コレクション ページに最適なバナーをデザインするのに役立ついくつかのカスタマイズ オプションが用意されています。

レイアウト

バナー上のコンテンツのレイアウト スタイルを選択します。 

列幅

コレクションバナー内のコンテンツの配置を制御します。 列幅 セクション：

• 変化率: 一貫性を保つために特定の列比率を設定します。
• コンテンツに合わせる: コンテンツに基づいて列の幅を自動的に調整します。

列管理

このセクションで列の数を管理します。ここから、 複製 現在の列、 削除 1つ、または 組み替​​えます 列の位置。

列間隔

特定の数値を入力するか、スライダーをドラッグして、列間の間隔を調整します。

コレクション画像

イメージ：

バナー画像は Shopifyのコレクション設定から直接取得バナー画像を変更する場合は、Shopify内で更新する必要があります。

ただし、GemPages エディター内でコレクション イメージの設定を変更できます。

• 規模: どちらかを選択できます カバー （画像がバナー領域全体を覆う場合）または 含む (画像が引き伸ばされることなく完全に表示されるようにするため)。
• 役職: バナー内の画像の位置を調整できます。
• 繰り返す: 画像を背景全体で繰り返すかどうかを決定します。
• アタッチメント: 画像の動作を制御します: スクロール ページとともに移動する、 一定 静止したまま、 コミュニティ コンテナ内でスクロールします。

オーバーレイ：

コレクションバナー画像の上に半透明レイヤーを追加すると、テキストの読みやすさが向上したり、特定の視覚的雰囲気を演出したりできます。これは、バナーに明るい部分と暗い部分が混在し、重ねたテキストが見えにくくなる場合に特に便利です。

• 色圏: オーバーレイの色を選択して、バナーに視覚効果を追加できます。
• 不透明度: デザインの好みに応じて、オーバーレイの不透明度を調整して、より繊細にしたり、より大胆にしたりします。

サイズ

• コンテンツの高さに合わせる = はい: バナーの高さは、バナー内のコンテンツに基づいて自動的に調整されます。
• コンテンツの高さに合わせる = いいえ: バナー内のコンテンツに関係なく、固定のバナーの高さ（ピクセル単位）を手動で設定できます。

効果

ホバー効果: コレクションバナーにホバー効果を適用できます。オプションには以下が含まれます。 なし or Zoom.

ズーム効果を選択した場合は、さらにカスタマイズできます。

• ズーム値: ホバー時のズームのレベルを制御します。
• ズームタイム: ズーム効果の持続時間を設定します。

列を揃える

要素の垂直方向の配置を設定します。

• 上揃え
• 中央揃え
• 整列ボタン
• 垂直間隔を均等にする

詳細タブを設定する

より高度なカスタマイズについては、「詳細設定」タブに移動し、 この記事.

コレクションバナーを変更するには?

コレクションバナーを変更するには、Shopify 内で更新する必要があります。 

クイックガイドは次のとおりです。

ステップ 1: Shopify管理画面で、 製品 > コレクション.

ステップ 2: バナーを更新するコレクションを選択します。

ステップ 3：へ行く 画像、クリック 編集 > 画像を変更する バナー画像を変更するには、 Save.

ステップ4： GemPagesエディタに戻り、上部のバーで コレクション割り当て ボタンをクリックしてダイアログを開きます。

詳しくはこちら 再度同期、コレクションバナーが更新されます。