画像の上にテキストを配置する

GemPages v7では、画像の上にテキストを配置することができます。 ヒーローバナー 要素または 行 要素。

方法1: ヒーローバナー要素を使用する

ヒーロー バナー要素は、インパクトのあるヒーロー バナーや、コレクション ページにリンクするコレクション バナーなどを作成するために設計されています。

デフォルトでは、背景を設定したり、背景画像上のテキストを編集したりできるプリセットが用意されています。これにより、画像の上にテキストを配置する必要がある場合に最適なソリューションになります。

ステップ1: GemPagesエディタに入る

GemPagesダッシュボードから、 ページ、対象のページをクリックして開きます エディタ.

左側のサイドバーで、 ヒーローバナー 要素の下 メディアの方 セクションを作成し、ページ上の任意の位置にドラッグ アンド ドロップします。

ステップ2: 画像をアップロードして変更する

• 要素をクリックすると、 設定 パネルを下にスクロールします 経歴 セクションを開き、 画像 フィールド。

• 下 ソースサンプル画像の上にマウスを移動してクリックします 画像をアップロード 画像をアップロードします。Shopifyのファイルにアップロードした場合は、 ライブラリを閲覧する.

• お好みに応じて画像の設定を変更します。 この記事 ヒーローバナーで画像の背景を設定する方法の詳細については、こちらをご覧ください。

読みやすさを向上させるには、オーバーレイを適用できます。

• 背景セクションで、 Show more を見つけて、 オーバーレイ オプションを選択します。
• 暗い色（黒や濃い灰色など）を選択します。
• テキストが背景に対してはっきりと目立つようになるまで、不透明度スライダーを調整します。

これにより、画像の上に微妙な暗いレイヤーが作成され、背景の視覚的な魅力を保ちながらテキストが読みやすくなります。

ステップ3: テキストブロックをカスタマイズする

テキストブロック要素をクリックすると設定が表示されます。設定パネルからテキストのフォント、サイズ、色をカスタマイズし、画像に対して目立たせることができます。

ヒーローバナーの設定に関する完全なガイドについては、 この記事.

方法2: 行要素を使用する

ステップ 1: エディタでドラッグアンドドロップして、 行 左側のサイドバーからページに要素を追加します。

行要素を深く理解するには、 この記事.

ステップ 2: 設定パネルで下にスクロールして 経歴 セクションをクリックして 画像 フィールド。

ステップ3： 行全体の背景となる画像を設定します。Shopifyファイル（ライブラリを閲覧する）または upload 新しいもの。

次に、を調整します 階段 の三脚と 位置画像の 繰り返しタイプ の三脚と 添付ファイル、および有効/無効にする プリロード LCP を最適化する機能。

ステップ 3: ドラッグアンドドロップ テキストブロック この行内の要素を使用して、画像の上にテキストを作成します。

ステップ4： お好みに応じてテキストを変更します。

ヒーローバナー対ロー

どちらのオプションも効果的にニーズに対応できますが、ヒーローバナー要素を使用する方が一般的にはより迅速かつ簡単です。 行 要素は、特定のユースケースに対してより柔軟性を提供します。

ベストプラクティス

• コントラストを維持する: テキストの色は常に背景画像と強いコントラストになるようにしてください。
• オーバーレイを使用する: 明るい画像に暗いオーバーレイを適用して、テキストの読みやすさを向上させます。
• モバイルテスト: 小さい画面でデザインをプレビューし、テキストが明瞭に表示されていることを確認します。
• テキストは簡潔にしてください: 読みやすさを向上させるために、画像上のテキストの量を制限します。