ヒーローバナー要素を使用してヒーローセクションをデザインする

ヒーローセクションとは何ですか?

その ヒーローセクション ウェブページの上部にある目立つ領域で、通常は印象的な画像やビデオの背景にインパクトのあるテキストが添えられています。ユーザーの注目をすぐに引き付けるように設計されています。

ヒーローセクションが重要な理由

ヒーローセクションは、以下の点で重要な役割を果たします。

• 注目を集める: 訪問者がページにアクセスするとすぐに興味を持ちます。
• 重要なメッセージの伝達: 重要な情報やブランドメッセージを伝えます。
• コンバージョンの促進: ユーザーを特定のアクションに誘導することで、クリックスルー率とコンバージョン率が向上します。

GemPages では、ユーザーは 2 つの方法でヒーロー セクションを作成できます。

• 事前に設計されたセクションの使用: プロセスを簡素化する事前に作成されたテンプレートから選択します。 
• ヒーローバナー要素の使用: よりパーソナライズされたデザインを実現するには、Hero Banner 要素を活用します。 

この記事では、この 2 番目のオプションに焦点を当て、Hero Banner Elements を使用してカスタマイズされた Hero Section を作成するための手順を段階的に説明します。

ヒーローセクションの内訳

適切に構成されたヒーロー セクションには通常、次の要素が含まれます。

• 背景画像またはビデオ: 視覚的なトーンとコンテキストを設定します。
• 見出し： メッセージの本質を捉えたメインステートメント。
• テキストブロック: 見出しを強化する補足情報を提供します。
• 行動喚起（CTA）ボタン: 訪問者が希望する次のステップに進むように促します。

ヒーローバナー要素を使用してヒーローセクションをデザインする方法

自分だけのオリジナルデザインを作るためのベストな方法を見ていきましょう ヒーローセクション GemPages Editor v7 を使用します。

ステップ1: ページに要素を追加する

• アクセス GemPagesダッシュボード > ページ.
• 対象のページをクリックしてエディタを開くか、 ゼロから始めます 新しいページを作成します。
• 左側のサイドバーで「ヒーローバナー」をクリックし、要件に一致するものをドラッグ アンド ドロップします。

各スタイルには、画像の背景、見出し、テキスト ブロック、CTA ボタンがすでに含まれています。

ステップ2: 要素をカスタマイズする

要素をクリックすると設定が開きます。 設定 タブでは、次の設定を行うことができます。

• レイアウト
• 経歴
• サイズ
• コンテンツ
• 形状
• 効果
• リンク
• SEO
• 整列

詳細については、以下を参照してください。 この記事 自分だけのデザインを始めましょう ヒーローバナー のセクションから無料でダウンロードできます。

ステップ3: 追加要素を追加する

ヒーロー セクションをさらに強化するには、次の要素を追加することを検討してください。

• ブランド： プロモーションやニュースを強調表示できるスクロール テキスト効果。

• イメージ： 視覚的な体験を豊かにするために補足的な画像を含めます。

• カウントダウンタイマー： 緊急感を与えるので、期間限定オファーに最適です。