Diviページデザインにプライマリメニューバーを含める方法

公開: 2018-08-26

ナビゲーションは、Webサイトのユーザーエクスペリエンスの重要な部分です。 美学に妥協することなく、訪問者がWebサイトをシームレスにナビゲートできるようにすることが重要です。 デフォルトでは、WordPressのプライマリメニューバーはすべてのページの上部に配置され、選択したページデザインとは別のものと見なされます。 ただし、多くの場合、ページデザイン全体にメニューを含めると、すばらしい結果が得られます。 それはあなたのウェブサイトにより一貫したルックアンドフィールを与えます。

この投稿では、Diviページのデザインにプライマリメニューバーを含める方法を紹介します。 これは、プライマリメニューの通常の表示方法に対する単純ですが動的な変更であり、Diviプロジェクトに独自の外観をもたらします。

それを手に入れよう！

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

プレビュー

さまざまな画面サイズでの最終結果を見てみましょう。

プライマリメニューバー

テーマカスタマイザ設定

テーマカスタマイザに移動します

デザインの作成を開始する前に、テーマカスタマイザーの変更から始めましょう。 WordPressダッシュボード>外観>カスタマイズに移動します。

背景画像を保存する

プライマリメニューバーを上部から切り離すので、通常占めるスペースをカバーするために何かが必要になります。 次の背景画像を使用するので、先に進んでコンピューターに保存します。

with-border

背景画像を一般設定にアップロードする

次に、 [一般設定]> [背景]に移動し、画像をWebサイトの背景にアップロードします。

  • ストレッチ背景画像：有効
  • 背景位置：固定

プライマリメニューバーの設定

また、プライマリメニューバーの準備ができた状態でDiviデザインとマージします。 そのためには、最初にプライマリメニューバーの設定を変更する必要があります。 [ヘッダーとナビゲーション]> [プライマリメニューバー]に移動し、次の設定を使用します。

  • ロゴの最大高さ：100
  • テキストサイズ：18
  • 文字間隔：-1
  • フォント：ポピンズ
  • テキストの色：＃333333
  • アクティブリンクの色：＃f55c83
  • 背景色：rgba（255,255,255,0）
  • ドロップダウンメニューの背景色：#FFFFFF

新しいページを追加する

ページカスタムCSS

プライマリメニューバーをページデザインとオーバーラップさせるには、CSSコードが少し必要になります。 オーバーラップをWebサイト全体に適用するか、特定のページのみに適用するかを選択できます。 1ページのみに追加する場合は、次のCSSコードをページ設定に追加してください。 

#main-header {
margin-top: 140px;
}

新しいセクションを追加

背景色

デザインを始めましょう！ 新しいページを追加し、Visual Builderに切り替えて、最初のセクションを追加します。 次にセクション設定を開き、背景色として「rgba（255,255,255,0.81）」を追加します。 これにより、当社のWebサイトの背景画像が透けて見えるようになります。

間隔

続けて[間隔]設定に移動し、次のカスタムマージンとパディングを追加します。

  • 上マージンと下マージン：100px
  • 左右のマージン：60px
  • トップパディング：135px
  • ボトムパディング：0px

丸い角

セクションの各コーナーにも「30px」を追加します。

国境

次に、セクションに上部の境界線を追加します。

  • 上枠幅：35px
  • 上枠の色：＃333333

ボックスシャドウ

最後に、非常に微妙なボックスシャドウを追加します。

  • ボックスシャドウブラー強度：61px
  • ボックスシャドウスプレッド強度：-13px

行＃1を追加

カラム構造

行とモジュールの追加を開始する時が来ました！ 2つの同じサイズの列を使用して最初の行を追加します。

サイジング

モジュールをまだ追加せずに、行設定を開き、サイズ設定を変更します。

  • この行を全幅にする：はい
  • 列の高さを等しくする：はい

間隔

次に、カスタムパディングを追加します。

  • トップパディング：250px（デスクトップ）、50px（タブレットと電話）
  • 下部のパディング：200px（デスクトップ）、100px（タブレット）、50px（電話）
  • 列1の左パディング：50px（デスクトップ）、0px（タブレットと電話）

タイトルテキストモジュールを列1に追加

H1テキスト設定

これで、モジュールの追加を開始できます。 最初の列から、新しいタイトルのテキストモジュールを追加します。

  • 見出しフォント：ポピン
  • 見出しフォントの太さ：中
  • 見出しのテキストサイズ：120px（デスクトップ）、80px（タブレット）、58px（電話）

コピーの一部に異なる色を追加する

[テキスト]タブに切り替え、スパンタグを使用して選択した単語に色を追加することで、タイトル内の単語の色を簡単に変更できます。

説明テキストモジュールを列1に追加

テキスト設定

前のテキストモジュールのすぐ下で、次のテキスト設定を使用して説明テキストモジュールを追加します。

  • テキストフォント：ポピンズ
  • テキストフォントの太さ：通常
  • テキストサイズ：20px（デスクトップ）、15px（タブレットと電話）
  • テキスト行の高さ：2em

間隔

このテキストモジュールには、追加のマージンが必要です。

  • 上マージンと下マージン：50px

ボタンモジュールを列1に追加

ボタンの設定

この列の最後のモジュールはボタンモジュールです。 CTAコピーを追加したら、ボタンのスタイルを変更します。

  • ボタンにカスタムスタイルを使用する：はい
  • ボタンのテキストの色：#FFFFFF
  • グラデーションカラー1：＃f45085
  • グラデーションカラー2：＃f88c7e
  • 勾配方向：137度
  • ボタンの境界線の幅：0px
  • ボタンの境界線半径：40px
  • ボタンフォント：ポピン
  • ボタンのフォントの太さ：通常
  • フォントスタイル：大文字

間隔

次に[間隔]設定を開き、ボタンにマージンとパディングを追加します。

  • 下マージン：100px（デスクトップ）、20px（タブレットと電話）
  • トップ＆ボトムパディング：15px
  • 左右のパディング：50px

ボックスシャドウ

最後になりましたが、非常に微妙なボックスシャドウを使用して、ページの奥行きを増やします。

  • ボックスシャドウブラー強度：55px
  • ボックスシャドウスプレッド強度：-4px
  • 影の色：rgba（84,84,84,0.25）

列2に画像モジュールを追加します

画像の保存とアップロード

2番目の列には、イメージモジュールのみが含まれています。 Diviのデジタルマーケティングレイアウトパックの一部であるモックアップを使用しています。 下の画像をコンピュータに保存してください。 その後、2番目の列のイメージモジュールに追加します。

行＃2を追加

カラム構造

2行目を追加する時が来ました！ 次の列構造を選択してください。

列1の背景色

次に、行の設定を開き、列1の背景色として「#FFFFFF」を追加します。

ボタンのグラデーションの背景をコピー

時間を節約し、ボタンモジュールにすでに使用したグラデーションをコピーします。 これを行うには、ボタンモジュールを開き、ボタン設定に移動し、グラデーションの背景を右クリックしてコピーします。

列2にグラデーションの背景を貼り付けます

次に、行の設定に戻り、グラデーションの背景を2番目の列に貼り付けます。

列3の背景色

3番目の列には、「＃FFFFFF」の背景色を使用しています。

サイジング

次にサイズ設定に移動し、設定を変更します。

  • カスタム幅を使用：はい
  • カスタム幅：2600px
  • カスタムガター幅を使用：はい
  • 側溝幅：1

間隔

追加のパディングも必要になります。

  • トップ＆ボトムパディング：0px
  • 列の上部と下部のパディング：30px

ボックスシャドウ

最後になりましたが、微妙なボックスシャドウを使用します。

  • ボックスシャドウブラー強度：61px
  • ボックスシャドウスプレッド強度：-20px

宣伝文モジュール＃1を追加する

アイコンを選択

合計で3つの宣伝文モジュールが必要になります。 時間を節約するために、1つから始めて、後でクローンを作成します。 先に進み、最初の列に新しい宣伝文句モジュールを追加します。 コンテンツを追加したら、選択したアイコンを選択します。

アイコン設定

それに応じてアイコンの設定を変更します。

  • アイコンの色：＃f55c83
  • アイコンの配置：左
  • アイコンのフォントサイズを使用：はい
  • アイコンのフォントサイズ：88px（デスクトップとタブレット）、50px（電話）

タイトルテキスト設定

次にタイトルテキスト設定を開き、いくつかの変更を加えます。

  • タイトルフォント：ポピンズ
  • タイトルフォントの太さ：中
  • タイトルテキストサイズ：34px（デスクトップとタブレット）、23px（電話）

本文の設定

本文も変更する必要があります。

  • ボディフォント：ポピンズ
  • ボディフォントの太さ：通常
  • 本文のサイズ：16px（デスクトップ）、14px（タブレットと電話）
  • ボディラインの高さ：2em

間隔

そして、より美的に魅力的なデザインを作成するには、いくつかのパディングを追加します。

  • トップパディングとボトムパディング：100px
  • 左右のパディング：50px（デスクトップとタブレット）、10px（電話）

宣伝文句モジュールを2回クローンし、残りの列に配置します

先に進み、Blurbモジュールのクローンを2回作成します。 その後、残りの列に配置します。

列2の宣伝文句モジュールを変更します

アイコンの色を変更する

3番目の宣伝文句モジュールは変更を必要としませんが、2番目の宣伝文句は変更を必要とします。 アイコンの色を白に変更することから始めます。

テキストの色を変更する

次にテキスト設定を開き、テキストの色を「ライト」に変更します。

固定ナビゲーションを無効にする

プライマリメニューバーがデザイン内でその位置を維持するようにするには、固定ナビゲーションバーも無効にする必要があります。 これを行うには、 WordPressダッシュボード> Divi>テーマオプション> [固定ナビゲーションバー]オプションを無効にして、設定を保存します。

プレビュー

すべての手順を完了したので、さまざまな画面サイズでの結果を最後に見てみましょう。

プライマリメニューバー

最終的な考え

この投稿では、Diviページの全体的なデザインにプライマリメニューバーをクリエイティブに含める方法を紹介しました。 このアプローチは、Webサイトでより一貫性のあるルックアンドフィールを作成するのに役立ちます。 例も最初から作成しました。 ご質問やご提案がございましたら、下のコメント欄にコメントを残してください！