Diviの全幅メニューモジュールと通常のメニューモジュールの使用

見過ごされがちですが、Webサイトの重要な部分は、ナビゲーションメニューです。 ナビゲーションは、快適なユーザーエクスペリエンスを作成する上で重要な要素です。 メニューを正しく実行すると、ユーザーエクスペリエンスが大幅に向上し、訪問者がWebサイトを簡単にナビゲートできるようになります。

Diviには2種類のナビゲーションモジュールが付属しています。 全幅メニューと通常メニュー。 この記事では、Diviの全幅メニューモジュールと通常のメニューモジュールの違いのいくつかについて説明し、デモンストレーションします。 Webサイトにどのモジュールを使用するか疑問に思ったことがある場合は、この記事がこれらのモジュールの主な違いと使用例を理解するのに役立つことを願っています。 また、全幅メニューと通常のメニューモジュールのデザインをカスタマイズするためのステップバイステップの説明も提供します。

始めましょう！

スニークピーク

デスクトップ：全幅メニューモジュール

デスクトップ：通常のメニューモジュール

モバイル：全幅メニューモジュール

モバイル：通常のメニューモジュール

Diviの全幅メニューモジュールと通常のメニューモジュールの主な違い

全幅メニューモジュールと通常のメニューモジュールの主な違いの概要は次のとおりです。

通常のセクションコンテナと全幅セクションコンテナ

全幅メニューモジュールには、Diviの全幅セクションが必要です。 セクションは全幅であるため、追加するモジュールはページの全幅を占めます。 通常のメニューセクションとは異なり、複数のモジュールを並べて配置することはできません。 全幅メニューモジュールは、メニューをページの幅にまたがらせ、その横に追加のモジュールを必要としない場合に最適です。

通常のメニューモジュールには、Diviの通常のセクションが必要です。 通常のセクションにはさまざまな行レイアウトがあり、通常のメニューモジュールで任意のレイアウトを使用できます。 これにより、他の行を使用してメニューと一緒に追加のコンテンツを含めて、より複雑なメニューバーを作成できます。 Diviの多くの行オプションのおかげで、通常のメニューモジュールを使用してメニューバーの独自のレイアウトを簡単に作成できます。

組み込みの幅設定と行コンテナの編集

通常メニューと全幅メニューのもう1つの重要な違いは、モジュールの幅と間隔を編集する方法が異なることです。

全幅メニューモジュールには、幅を編集するためのいくつかの組み込み設定が付属しています。 「メニューリンクを全幅にする」オプションを使用して、メニューテキストを全幅にすることができます。 これにより、全幅メニューモジュールがデフォルトのコンテンツ幅を超えて拡張されます。

通常のメニューモジュールで同様の外観を実現するには、代わりに、含まれている行の設定を編集する必要があります。 たとえば、通常のメニューを含む行の幅、最大幅、および配置を編集して、通常のメニューモジュールをデフォルトのコンテンツ幅を超えて拡張します。

Diviの全幅メニューモジュールと通常のメニューモジュールの使用

始めるために必要なもの

このチュートリアルを実行する場合は、Diviテーマをインストールしてアクティブ化し、WebサイトにDiviの最新バージョンがあることを確認してください。

これで、開始する準備が整いました。

全幅メニューモジュールの設計

Webサイトに新しいページを追加してタイトルを付け、DiviBuilderを使用するオプションを選択します。

このチュートリアルでは、デザインを最初から作成するため、[作成を開始]オプションを選択します。

空白のページを最初に作成すると、通常のセクションがプリロードされます。 まず、通常のセクションの下に全幅セクションを追加します。

次に、ページから通常のセクションを削除します。

全幅メニューモジュールを全幅行に追加します。

全幅メニューに背景色を追加します。

• 背景：＃4e7560

全幅メニューにロゴを追加します。

次に、[デザイン]タブの[メニューテキスト]オプションに移動します。

• メニューフォント：ポピンズ
• メニューテキストの色：#FFFFFF
• メニューテキストサイズ：20px

次に、ドロップダウンメニュー設定に移動します。

• ドロップダウンメニューの背景色：#FFFFFF
• ドロップダウンメニューの線の色：＃7EAD70
• ドロップダウンメニューのテキストの色：＃000000

モバイルメニューの背景とテキストの色を設定します。

• モバイルメニューの背景色：#FFFFFF
• モバイルメニューのテキストの色：＃000000

次に、ハンバーガーメニューの設定を変更します。

• ハンバーガーメニューアイコンの色：#FFFFFF
• ハンバーガーメニューアイコンフォントサイズ：40px

最後に、上下のパディングを追加します。

• パディング-トップ：10px
• パディング-下：10px

これで、全幅メニューモジュールが完成しました。

通常のメニューモジュールの設計

Webサイトに新しいページを追加してタイトルを付け、DiviBuilderを使用するオプションを選択します。

ゼロから構築するには、[構築の開始]を選択します。

ページには、空の通常のセクションがプリロードされています。 このセクションに、背景色を追加します。

• 背景：＃4e7560

次に、上部と下部のパディングを取り外します。

• パディング-トップ：0px
• パディング-下：0px

以下に示すレイアウトで新しい行を追加します。

行設定で、列の高さを等しくします。

• 列の高さを等しくする：はい

[詳細設定]タブの[メイン要素のCSS設定]で、次のカスタムCSSを追加します。

 align-items:center; 

左端の列にテキストモジュールを追加します。 ロゴをアップロードする代わりに、これを使用してWebサイト名を表示します。 これは、他のモジュールと一緒に使用してメニューバーに要素を追加できるため、通常のメニューモジュールの独自の利点です。

• H1テキスト：「Diviブログ」

デスクトップのテキスト配置を左に設定します。

• テキストの配置-デスクトップ：左

タブレットとモバイルを中心にテキストの配置を設定します。

• テキストの配置-タブレット：中央
• テキストの配置-モバイル：センター

次に、見出しのテキスト設定に移動します。

• 見出しフォント：ポピン
• 見出しフォントの太さ：太字
• 見出しのテキストの色：#FFFFFF
• 見出しのテキストサイズ：40px

「DiviBlog」のタイトルが完成したので、通常のメニューモジュールを中央の列に追加しましょう。

背景色を削除します。

• 背景：なし

次に、[デザイン]タブに移動します。 [レイアウト]で、スタイルを[中央揃え]に変更します。

• スタイル：中央揃え

これで、メニューのテキストスタイルを変更できます。

• メニューフォント：ポピンズ
• メニューテキストの色：#FFFFFF
• メニューテキストサイズ：20px

ドロップダウンメニューのスタイルも変更します。

• ドロップダウンメニューの線の色：＃7EAD70
• ドロップダウンメニューのテキストの色：＃000000

次に、モバイルメニューの設定を変更します。

• モバイルメニューの背景色：#FFFFFF
• モバイルメニューのテキストの色：＃000000

最後に、ハンバーガーメニューの設定を変更します。

• ハンバーガーメニューアイコンの色：#FFFFFF
• ハンバーガーメニューアイコンフォントサイズ：40px

これで、通常のメニューモジュールのスタイリングが完了しました。 メニューのデザインを完成させるために、右側の列に召喚ボタンを追加しましょう。 まず、ボタンモジュールを追加します。

ボタンのテキストを変更します。

• ボタン：「30日間の無料トライアル」

ボタンの配置を中央に設定します。

• ボタンの配置：中央

「ボタンにカスタムスタイルを使用する」を「はい」に設定し、テキストの色を変更します。

• ボタンにカスタムスタイルを使用する：はい
• ボタンのテキストの色：#FFFFFF

ボタンの背景を設定します。

• ボタンの背景：＃7EAD70

ホバーのボタンの背景をオレンジ色に設定します。

• ホバーのボタンの背景：＃D19929

次に、ボタンの境界線の幅、半径、フォントを設定します。

• ボタンの境界線の幅：0px
• ボタンの境界線の半径：40px
• ボタンフォント：ポピン

最後に、左右のパディングを設定します。

• パディング-左：30px
• パディング-右：30px

最終結果

次に、メニューモジュールの最終結果を見てみましょう。

デスクトップ：全幅メニューモジュール

デスクトップ：通常のメニューモジュール

モバイル：全幅メニューモジュール

モバイル：通常のメニューモジュール

最終的な考え

この記事が、Diviの全幅メニューモジュールと通常のメニューモジュールの主な違いのいくつかを理解するのに役立つことを願っています。 どちらも非常に簡単にカスタマイズして、Webサイトの見栄えの良いメニューを作成できます。 全幅メニューモジュールはページの幅を占有し、幅を変更および微調整するための組み込みオプションが付属しています。 一方、通常のメニューモジュールは他のモジュールと一緒に使用でき、行内に含まれ、幅や他のサイズ設定オプションを微調整できます。 Webサイトで全幅メニューモジュールまたは通常のメニューモジュールを使用していますか？ コメントであなたから聞いてみたいです！