Diviヘッダー内のプライマリメニューバーとセカンダリメニューバーにロゴを交差させる方法

ヘッダーの作成に関しては、可能性は無限大です。 Divi Theme Builderを使用する場合は、Diviヘッダー内に想像できるあらゆるものを含めることができます。 本日、リソースのリストに、要望の多かった別のヘッダーデザインチュートリアルを追加します。 ロゴをヘッダー内のプライマリメニューバーとセカンダリメニューバーに交差させる方法を説明します。 JSONファイルも無料でダウンロードできます！

それを手に入れましょう。

プレビュー

チュートリアルに入る前に、さまざまな画面サイズでの結果を簡単に見てみましょう。

デスクトップ

モバイル

グローバルヘッダーテンプレートを無料でダウンロード

無料のグローバルヘッダーテンプレートを入手するには、まず下のボタンを使用してダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。

ファイルをダウンロードする

無料でダウンロード

Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。

ダウンロード

正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。

1.新しいグローバルヘッダーテンプレートを作成します

Diviテーマビルダーに移動します

WordPressWebサイトのバックエンドにあるDiviThemeBuilderにアクセスすることから始めます。 そこで、「グローバルヘッダーの追加」をクリックします。

新しいグローバルヘッダーを追加する

ドロップダウンメニューが表示されます。 ゼロからビルドを開始するには、「グローバルヘッダーのビルド」を選択して続行します。

2.ヘッダーデザインを作成する

専門セクションを追加

このデザインを構築するために、専門セクションを使用します。

カラム構造

これは、専門セクションに使用している列構造です。

列1の背景色

専門セクションを追加したら、その設定を開き、列1の背景色を適用します。

• 列1の背景色：rgba（255,191,0,0.27）

サイジング

[デザイン]タブに移動し、次のようにサイズ設定を変更します。

• 列の高さを等しくする：はい
• カスタムガター幅を使用：はい
• 側溝幅：1
• 内幅：100％
• 内側の最大幅：2580px

間隔

間隔の設定も変更します。

• トップパディング：0px
• ボトムパディング：0px
• 列1の上部パディング：0px
• 列1の下部パディング：0px
• 列2のトップパディング：0px
• 列2の下部パディング：0px

列CSSID

次に、[詳細設定]タブに移動し、カスタムCSSIDを両方の列に適用します。

• 列1のCSSID：ヘッダー-最初の列
• 列2CSS ID：ヘッダー-秒-列

列1に画像モジュールを追加

画像をアップロード

列1の画像モジュールから始めて、モジュールを追加します。ロゴをアップロードします。

配置

次に、[デザイン]タブに移動し、画像の配置を変更します。

• 画像の配置：中央

サイジング

サイズ設定にも最大幅を適用します。

• 最大幅：100px

可視性

また、小さい画面サイズではモジュールを非表示にします。

行＃1を列2に追加します

カラム構造

専門セクションの列2では、次の列構造を使用して最初の行を追加します。

背景色

行設定を開き、次の背景色を使用します。

• 背景色：＃a163ff

間隔

行のデザインタブに移動し、次のように間隔設定を変更します。

• トップパディング：10px
• ボトムパディング：10px
• 左パディング：5％
• 右パディング：5％

国境

次に、次の境界設定を適用します。

• 下の境界線の幅：3px
• 左ボーダー幅：
  • デスクトップ：3px
  • タブレットと電話：0px
• ボーダーカラー：＃6c2eb9

主な要素CSS

そして、行のメイン要素内で次のCSSコード行を使用します。

display: flex;
justify-content: center;
align-items: center;

小さい画面サイズでは列1と2を非表示にします

小さい画面サイズでのデザインを簡素化するために、列1と2の設定を開き、タブレットと電話で両方を非表示にします。

ソーシャルメディアフォローモジュールを列1に追加

ソーシャルネットワークを追加する

1列目のソーシャルメディアフォローモジュールから始めて、モジュールを追加します。選択したソーシャルネットワークを追加します。

個々のソーシャルネットワークの背景色

各ソーシャルネットワークの背景色を個別に変更します。

• 背景色：#ffeeba

アイコン設定

一般的なモジュール設定に戻り、アイコンの色を変更します。

• アイコンの色：＃6c2eb9

国境

境界線の設定にもいくつかの丸い角を追加します。

• すべてのコーナー：100px

列2にテキストモジュールを追加します

コンテンツを追加する

次に、選択したコンテンツを含むテキストモジュールを列2に追加します。

テキスト設定

モジュール設定を次のように変更します。

• テキストフォント：ポピンズ
• テキストの配置：中央

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

コピーを追加

3列目では、必要なモジュールはボタンモジュールのみです。 選択したコピーをいくつか追加します。

ボタンの配置

モジュールの[デザイン]タブに移動し、さまざまな画面サイズでボタンの配置を変更します。

• ボタンの配置：
  • デスクトップ：右
  • タブレットと電話：センター

ボタンの設定

次にボタンのスタイルを設定します。

• ボタンにカスタムスタイルを使用する：はい
• ボタンのテキストサイズ：14px
• ボタンのテキストの色：＃6c2eb9
• ボタンの背景色：#ffeeba
• ボタンフォント：ポピン
• ボタンのフォントの太さ：太字
• ボタンのフォントスタイル：大文字

• ボタンアイコンを表示：はい
• ボタンアイコンの配置：左

間隔

そして、次のパディング値を適用します。

• トップパディング：10px
• ボトムパディング：10px
• 左パディング：50px
• 右パディング：30px

行＃2を列2に追加します

カラム構造

セクションの2番目の列に必要な次の最後の行は、次の列構造を使用します。

背景色

行設定を開き、次の背景色を使用します。

• 背景色：rgba（161,99,255,0.1）

間隔

次に、行の間隔設定を変更します。

• トップパディング：20px
• ボトムパディング：20px
• 左パディング：5％
• 右パディング：5％

国境

次に、次の境界設定を適用します。

• 左ボーダー幅：
  • デスクトップ：3px
  • タブレットと電話：0px
• 左ボーダーの色：＃6c2eb9

メニューモジュールを列に追加

メニューを選択

この行で必要なモジュールはメニューモジュールだけです。 お好みのメニューを選択してください。

タブレットと携帯電話にロゴをアップロード

次に、タブレットと電話にのみロゴをアップロードします。

背景色を削除する

次に、モジュールの背景色を削除します。

メニューテキスト設定

モジュールの[デザイン]タブに移動し、メニューテキストの設定を次のように変更します。

• メニューフォント：ポピンズ
• メニューテキストの色：＃6c2eb9
• メニューテキストサイズ：16px

ドロップダウンメニューの設定

次に、次のドロップダウンメニューの線の色を適用します。

• ドロップダウンメニューの線の色：rgba（0,0,0,0）

アイコン設定

次に、アイコンの設定を変更します。

• ショッピングカートのアイコンの色：＃6c2eb9
• 検索アイコンの色：＃6c2eb9
• ハンバーガーメニューアイコンの色：＃6c2eb9

サイジング

タブレットと携帯電話にロゴの最大幅を適用します。

• ロゴの最大幅：
  • タブレット：70px
  • 電話番号：50px

列1にコードモジュールを追加する

ヘッダーデザインの比率を変更するために、CSSを少し変更します。 コードを含めるには、列1のイメージモジュールの下にコードモジュールを追加します。

スタイルタグを追加する

コードボックス内にいくつかのスタイルタグを配置します。

スタイルタグの間にCSSコードを挿入する

そして、スタイルタグの間に次のCSSコード行を配置します。

@media all and (min-width: 980px) {
#header-first-column {
width: 10% !important;
display: flex;
justify-content: center;
align-items: center;
}

#header-second-column {
width: 90% !important;
}
}

@media all and (max-width: 980px) {
#header-first-column {
display: none;
}
}

4.Diviテーマビルダーの変更を保存します

すべてが整ったので、あとはDivi Theme Builderの変更をすべて保存して、結果を表示するだけです。

プレビュー

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

デスクトップ

モバイル

最終的な考え

この投稿では、Diviヘッダーを使用してクリエイティブにする方法を紹介しました。 具体的には、ヘッダー内のプライマリメニューバーとセカンダリメニューバーにロゴを交差させる方法を示しました。 JSONファイルも無料でダウンロードできました！ ご質問やご提案がございましたら、下のコメント欄にコメントを残してください。

Diviの詳細を知り、Diviの景品をさらに入手したい場合は、メールマガジンとYouTubeチャンネルに登録して、この無料コンテンツを最初に知って利益を得ることができるようにしてください。