Diviでナビゲーションホームページを作成する方法

ホームページに適用できるアプローチはたくさんありますが、Webサイトに少しだけ追加したい場合は、ホームページとしてナビゲーションページを選択することをお勧めします。 あなたはそれをそれほど頻繁に見ることはなく、それはあなたの訪問者に彼らがあなたのウェブサイトから何を期待できるかについての明確な見方を与えます。 その上、それはまたあなたの訪問者があなたが提供する素晴らしいコンテンツでいっぱいの異なるページを視覚的にナビゲートするのを助けます。

Diviでそれをスタイリッシュかつエレガントに行う方法を示すために、この投稿で再現する方法を示すデザインを作成しました。 2つのバージョンがあります。 デスクトップ版とタブレットや電話に適したもの。 チュートリアルに入る前に、最終結果を見てみましょう。

デスクトップでの結果

再作成する結果は、デスクトップでは次のようになります。

モバイルでの結果

モバイルでの結果はわずかに異なり、次のようになります。

Diviでナビゲーションホームページを作成する方法

私たちのYoutubeチャンネルを購読する

デスクトップバージョンを再作成

ナビゲーションページの2つのバージョンを作成します。 デスクトップ版とタブレットと電話用のバージョン。 そうすれば、ナビゲーションページがすべてのデバイスで見栄えがすることを確認できます。 いつものように、デスクトップバージョンを作成することから始めます。

新しいセクションを追加

新しいページを作成し、それに通常のセクションを追加することから始めます。 このチュートリアルでは、必要なコンテンツを含むすべての行を含む1つのセクションのみを使用します（デスクトップバージョンとモバイルバージョンの両方）。 ただし、デスクトップバージョンとモバイルバージョンを2つのセクションに分けることもできます。

最初のナビゲーション行を再作成する

上記の結果プレビューでわかるように、ナビゲーションアイテムのそれぞれは、多少異なる詳細を備えたほぼ同じデザインを持っています。 作成する各ナビゲーション項目の設定のほとんどは同じです。 そのため、最初の行を詳細に作成する方法を示し、次に、ページに追加する他のナビゲーション項目にも変更を加える方法を示します。

カラム構造

まず、追加した行の全幅列を選択します。 モジュールを追加する前に、行の設定が適切に行われていることを確認するので、先に進んで行の設定を開きます。

背景画像

[コンテンツ]タブを表示しているときに、最初に行うことは、行に背景画像を追加することです。 最良の結果が得られるため、幅が「1400px」、高さが「934px」の画像を使用することをお勧めします。 また、画像を「繰り返しなし」に配置してください。

配置

次に、[デザイン]タブに移動し、行に正しい配置を追加します。 これにより、画面の左側に説明とリンクを追加するのに十分なスペースが作成されます。

サイジング

次に、[サイズ設定]サブカテゴリを開き、[カスタム幅を使用]オプションを有効にして、[100％]のパーセンテージ幅を使用します。

間隔

次に、各ナビゲーションアイテムの間に少し空白を追加したいので、行に「5px」の上下の余白を追加します。

可視性

最後になりましたが、この投稿の後半でタブレットと電話に一致する別の行を作成するため、電話とタブレットでこの行を無効にします。

ページ説明用のテキストモジュール

テキスト設定

行の設定が完了したら、最初のテキストモジュールを行の列に追加し、[デザイン]タブの[テキスト]サブカテゴリに次の設定を使用できます。

• テキストフォント：Andika
• テキストフォントの太さ：通常
• テキストサイズ：13px
• テキストの色：＃000000
• テキスト行の高さ：1.1em
• テキストの向き：左

サイジング

下にスクロールして、[サイズ設定]サブカテゴリを開き、「18％」の幅を追加します。 この幅により、テキストモジュールに負の左マージンを追加すると、テキストモジュールが行の背景画像と交差しないようになります。

間隔

前の手順で説明したように、テキストモジュールを行の背景と重ならないように行の左側に配置する必要があります。 また、行の画像の上部とテキストモジュールの先頭の間にスペースを確保する必要があるため、上部マージンも使用しています。

• トップマージン：150px
• 左マージン：-20px
• トップパディング：10px
• ボトムパディング：10px

仕切りモジュール

可視性

次に、先に進み、テキストモジュールのすぐ下にDividerモジュールを追加します。 Visibilityサブカテゴリ内で、[ShowDivider]オプションを有効にします。

色

次に、[デザイン]タブに移動し、仕切りの色として「#FFFFFF」を追加します。

スタイル

次に、ディバイダースタイルとして「ソリッド」を選択し、ディバイダー位置として「トップ」を選択します。

サイジング

最後に、次の設定をサイズ設定サブカテゴリに適用します。

• 仕切りの重量：5px
• 高さ：23px
• 幅：47％
• モジュールの配置：左

メニュー項目のテキストモジュール

コンテンツボックス内のテキストをリンクする

Divider Moduleの使用が終了したら、先に進んで、そのすぐ下に別のテキストモジュールを追加します。 このテキストモジュールがナビゲーションアイテムになります。 設定を開き、テキストを入力して、それにリンクを追加します。

グラデーションの背景色

[コンテンツ]タブを表示したまま、次のグラデーションの背景設定を使用します。

• 最初の色：#FFFFFF
• 2番目の色：rgba（12,113,195,0.62）
• グラデーションタイプ：線形
• グラデーション方向：108度
• 開始位置：31％
• 終了位置：21％

リンクテキスト設定

次に、[デザイン]タブに移動し、次の設定を[テキストサブカテゴリ]の[リンク]タブに適用します。

• リンクフォント：Andika
• リンクフォントの太さ：太字
• リンクフォントスタイル：大文字と下線
• リンクの下線スタイル：実線
• リンクテキストサイズ：100px
• リンクテキストの色：＃000000
• リンクラインの高さ：1em

間隔

このテキストモジュールは画面の左側にも表示する必要があるため、左マージンを追加します。 また、ディバイダーモジュールとこのテキストモジュールの間のスペースを小さくする必要があります。これは、負の上部マージンが入る場所です。 その中央の水平方向の配置を作成するために、下マージンも追加します。 最後に、グラデーションの背景を大きくしたいので、上部と下部のパディングを使用しています。

• 上マージン：-33px
• 下マージン：250px
• 左マージン：-20px
• トップパディング：80px
• ボトムパディング：80px

最初のナビゲーション行を必要な回数だけ複製します

ナビゲーションページのさまざまなナビゲーションアイテムは、多かれ少なかれ同じ設定になります。 そのため、必要な回数だけ行のクローンを作成し、後で詳細を変更することをお勧めします。 変更する必要があるものが3つあります。見てみましょう。

行の背景を変更する

最初に行う必要があるのは、行の複製の背景画像を変更することです。 繰り返しになりますが、最良の結果を得るには、幅が「1400px」、高さが「943px」の画像を使用してください。

メニュー項目のテキストモジュールを変更する

リンクを変更

次に、ナビゲーションアイテムのテキストモジュールを開き、リンクとともにテキストを変更します。

テキストの長さに応じてグラデーションの背景を変更する

最後に、このテキストモジュールのグラデーションの背景も変更する必要があります。 2番目のグラデーションの色を「rgba（224,43,32,0.62）」に変更し、新しいナビゲーションアイテムの長さに応じて開始位置の値を変更します。 非常に長いナビゲーションアイテムがある場合は、所定の位置に収まるまで、開始位置のパーセンテージをより高い値に変更することをお勧めします。

モバイル版を再作成

デスクトップバージョンを作成したので、タブレットバージョンとモバイルバージョンも作成します。 さまざまなモジュールのスタイルはデスクトップバージョンとほとんど同じですが、舞台裏では、行の構造が完全に異なります。 モジュールを複製する場合は、各モジュールに多くの変更を加える必要があるため、デスクトップバージョンからモジュールを複製せずに、モジュールを最初から作成する方法を簡単に説明します。

最初のナビゲーション行を再作成する

この投稿の冒頭で作成したセクションに別の行を追加することから始めます。

カラム構造

この列も、デスクトップバージョンと同様に、1つの列のみが必要です。

サイジング

この行のサイズは次のとおりです。

• この行を全幅にする：はい
• カスタムガター幅を使用：はい
• 側溝幅：1

これらの設定により、行が画面の幅全体を占めるようになります。

可視性

最後に、代わりにデスクトップに表示される他の行があるため、デスクトップでこの行を無効にします。

ページ説明用のテキストモジュール

テキスト設定

先に進み、最初のテキストモジュールを行に追加します。 次の設定をテキストサブカテゴリに適用します。

• テキストフォント：Andika
• テキストフォントの太さ：通常
• テキストサイズ：13px
• テキストの色：＃000000
• テキスト行の高さ：1.1em
• テキストの向き：中央

サイジング

次に、[サイズ設定]サブカテゴリを開き、「71％」の幅と中央のモジュール配置を使用します。

間隔

最後に、このテキストモジュールには「10px」の上下のパディングが必要です。 お気づきのように、タブレット版とモバイル版では、代わりに中央揃えを選択しているため、マージン値は必要ありません。

メニュー項目のテキストモジュール

コンテンツボックス内のテキストをリンクする

モバイル版の場合、Divider Moduleは必要ないため、この手順はスキップします。 代わりに、作成した前のテキストモジュールのすぐ下にナビゲーションアイテムのテキストモジュールをすぐに追加します。 これを行ったら、[コンテンツ]タブの[コンテンツボックス]へのリンクを含むテキストを追加します。

グラデーションの背景色

このテキストモジュールに使用するグラデーションの背景は、デスクトップバージョンのものと同じです。

• 最初の色：#FFFFFF
• 2番目の色：rgba（12,113,195,0.62）
• グラデーションタイプ：線形
• グラデーション方向：108度
• 開始位置：31％
• 終了位置：21％

リンクテキスト設定

テキストサブカテゴリには、次の設定を使用します。

• リンクフォント：Andika
• リンクフォントの太さ：太字
• テキストサイズ：65px
• テキストの色：＃000000
• テキスト行の高さ：1em
• テキストの向き：左

間隔

デスクトップバージョンと同様に、このナビゲーションアイテムのテキストモジュールでは、グラデーションの背景を大きくするために、上下に「80px」のパディングが必要です。

画像モジュール

画像をアップロード

最後に、行の最後のモジュールとして画像モジュールを追加し、選択した画像をアップロードします。

最初のナビゲーション行を必要な回数だけ複製します

同じことがモバイル版にも当てはまります。 作成したばかりの行を必要な回数だけ複製して、他のナビゲーション項目を追加することもできます。 新しいナビゲーションアイテムを追加するたびに変更する必要があるものが3つあります。見てみましょう。

メニュー項目のテキストモジュールを変更する

リンクを変更

最初に変更する必要があるのは、ナビゲーションアイテムのテキストモジュールの[コンテンツ]タブの[コンテンツボックス]内のテキストとリンクです。

テキストの長さに応じてグラデーションの背景を変更する

次に、2番目のグラデーションの色を「rgba（224,43,32,0.62）」に変更し、テキストの長さに応じて開始位置の値を変更することもできます。

画像モジュールの変更

最後に、その行内のイメージモジュールのイメージを変更することもできます。

結果

デスクトップ版とモバイル版の両方を作成すると、デスクトップ、タブレット、電話で見栄えのする見事なナビゲーションページが表示されます。 結果を最後に見てみましょう。

デスクトップでの結果

モバイルでの結果

最終的な考え

あなたのホームページとしてナビゲーションページを作成することは間違いなくあなたの訪問者に痕跡を残すでしょう。 それはあなたの訪問者がより視覚的にナビゲートするのを助けるだけでなく、あなたのウェブサイトが提供しなければならないものについてより精巧なスニークピークを見ることができます。 ご質問やご提案がございましたら、下のコメント欄にコメントを残してください！

大きなお知らせ、役立つヒント、Diviの景品を見逃さないように、必ずメールマガジンとYouTubeチャンネルを購読してください。

LanKogal /shutterstock.comによる注目の画像