Diviで目を見張るようなヒーローセクションを作成する方法

公開: 2017-11-03

ヒーローセクション; それらはあらゆる種類の目的を果たします。これらは、訪問者がWebサイトにアクセスしたときに最初に目にするものであり、Webサイトのスタイルを即座に示し、訪問者がサイトで感じたり行動したりする方法に影響を与えます。私たちはすでにあらゆる種類のヒーローセクションに慣れていますが、それらのほとんどにはヒーロー画像、タグライン、行動の呼びかけが含まれています。ただし、他の可能性もあります。この投稿では、ヒーローセクションに関する別のアプローチを紹介し、Diviを使用して再現できる例をフォローアップします。

例

Diviで再作成する方法を示す例は、デスクトップで次のようになります。

ヒーローセクション

そして、モバイルでこのように：

ヒーローセクション

ヒーローセクションを目立たせる方法

例を再現する方法を示す前に、このヒーローセクションを他のセクションと区別するいくつかの要因を見てみましょう。

1.大きく、説明的で一元化されたロゴ

この例で最初に使用するのは、ヒーローセクションを目立たせるために、デフォルトではなく中央揃えのヘッダー形式です。それに加えて、メニュー項目をヒーローセクションのデザインと重ね合わせるのに役立つ透明なメニューも使用しています。透明な背景を使用すると、ヒーローセクション内の区分が1つ少なくなるため、ロゴ、メニュー、およびWebサイト間のリンクがより明確になります。

2.書かれたコンテンツを集中する

ヒーローセクションを目立たせるためにできるもう1つのことは、書いたコンテンツを集中させることです。そうすることで、訪問者の注意を画面上の1つの場所に引き付け、訪問者がそれを読む機会を増やすことができます。一方、ヒーローセクション全体で書かれたコンテンツを分割している場合、変更は、伝えようとしているメッセージの一部を見逃してしまう可能性が高くなります。

3.独自の販売提案を強調する

通常、ヒーローセクションには、製品または会社のタグラインを共有する通常のテキストモジュールが含まれます。ただし、ヒーローセクション内で宣伝文句モジュールを使用することもできます。これらの宣伝文句モジュールは、製品またはサービスの独自の販売提案をすぐに共有したい場合に最適です。さらに、すぐに召喚状を含めるかどうかを選択することもできます。この例では、これらのアクションの呼び出しは、宣伝文句モジュール自体に組み込まれています。