スクロールでDiviヘッダーを別のヘッダーに交換する方法

公開: 2020-03-13

あなたのヘッダーは必然的にあなたのウェブサイトの最も重要な要素の1つのままです。 それはあなたの訪問者のナビゲーションプロセスに影響を与え、彼らがハートビートで探しているものを見つけることを可能にします。 さて、スクロールのDiviヘッダーを別のヘッダーと交換する方法を探しているなら、この投稿を楽しんでください。 Diviのテーマビルダー、組み込み要素、およびいくつかの追加コードを使用して、それを実現する方法を正確に説明します。 また、ページ上部のヘッダー用に自動生成されたプレースホルダースペースがあることを確認しています。 JSONファイルも無料でダウンロードできます！

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

プレビュー

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

デスクトップ

diviヘッダーを交換します

モバイル

diviヘッダーを交換します

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

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

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

無料でダウンロード

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

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

1. Divi Theme Builderに移動し、グローバルヘッダーの作成を開始します

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

WordPressWebサイトのバックエンドにあるDiviTheme Builderに移動し、[グローバルヘッダーの追加]をクリックすることから始めます。

diviヘッダーを交換します

グローバルヘッダーを作成する

次に、[グローバルヘッダーの作成]をクリックして、テンプレートエディターにリダイレクトします。

diviヘッダーを交換します

2.同じセクションに両方のヘッダーを作成します

セクションの変更

サイジング

テンプレートエディタに入ると、セクションが表示されます。 セクション設定を開き、セクション幅が「100％」であることを確認します。

  • 幅：100％

diviヘッダーを交換します

間隔

次に、間隔設定に移動し、デフォルトの上下のパディングをすべて削除します。

  • トップパディング：0px
  • ボトムパディング：0px

diviヘッダーを交換します

ボックスシャドウ

微妙なボックスシャドウも使用しています。

  • ボックスシャドウの垂直位置：15px
  • 影の色：rgba（0,0,0,0.06）

diviヘッダーを交換します

ポジション

最後になりましたが、[詳細設定]タブの位置設定を使用して、セクションをページの上部中央に固定します。

  • 位置：固定
  • 場所：トップセンター

diviヘッダーを交換します

行ヘッダー＃1を追加

カラム構造

作成する両方のヘッダーは、同じセクションの一部になります。 ヘッダーごとに個別の行を使用します。 次の列構造を使用して、最初の行ヘッダーを追加します。

diviヘッダーを交換します

背景色

モジュールをまだ追加せずに、行の設定を開き、背景色を変更します。

  • 背景色：＃000000

diviヘッダーを交換します

サイジング

サイズ設定も変更します。

  • カスタムガター幅を使用：はい
  • 側溝幅：1
  • 幅：100％
  • 最大幅：100％

diviヘッダーを交換します

間隔

次に、間隔設定に移動し、デフォルトの上下のパディングをすべて削除します。

  • トップパディング：0px
  • ボトムパディング：0px

diviヘッダーを交換します

主な要素

行のメイン要素に2行のCSSコードを追加して、行の設定を完了します。 このCSSコードは、すべての列コンテンツを整列させるのに役立ちます。 

display: flex;
align-items: center;

diviヘッダーを交換します

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

画像をアップロード

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

diviヘッダーを交換します

配置

次に、モジュールの配置を変更します。

  • 画像の配置：中央

diviヘッダーを交換します

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

メニューを選択

2番目の列では、必要なモジュールはメニューモジュールのみです。 お好みのメニューを選択してください。

diviヘッダーを交換します

背景色を削除する

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

diviヘッダーを交換します

レイアウト

[デザイン]タブに移動し、それに応じてレイアウトを変更します。

  • スタイル：中央揃え

diviヘッダーを交換します

メニューテキスト設定

次に、メニューのテキスト設定にいくつかの変更を加えます。

  • メニューフォント：Roboto
  • メニューフォントの太さ：太字
  • メニューテキストの色：#ffffff（デスクトップ）、＃000000（タブレットと電話）
  • メニューテキストサイズ：18px

diviヘッダーを交換します

ドロップダウンメニューのテキスト設定

次に、ドロップダウンメニューのテキスト設定でドロップダウンメニューの線の色を変更します。

  • ドロップダウンメニューの線の色：＃000000

diviヘッダーを交換します

アイコン設定

ハンバーガーメニューのアイコンの色も変更します。

  • ハンバーガーメニューアイコンの色：#ffffff

diviヘッダーを交換します

間隔

小さい画面サイズにカスタムの左右のパディングを追加して、モジュール設定を完了します。

  • 左パディング：30px（タブレットと電話のみ）
  • 右パディング：30px（タブレットと電話のみ）

diviヘッダーを交換します

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

選択したソーシャルネットワークを追加する

最後の列で必要なモジュールは、ソーシャルメディアフォローモジュールだけです。 選択したソーシャルネットワークを追加します。

diviヘッダーを交換します

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

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

  • 背景色：#FFFFFF

diviヘッダーを交換します

diviヘッダーを交換します

配置

モジュールの一般設定に戻り、モジュールの配置を変更します。

  • モジュールの配置：中央

diviヘッダーを交換します

アイコン設定

アイコンの色も変更します。

  • アイコンの色：＃0042c9

diviヘッダーを交換します

国境

そして、いくつかの境界半径を追加して、モジュール設定を完了します。

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

diviヘッダーを交換します

行ヘッダー＃2を追加

カラム構造

2番目のヘッダーに！ 次の列構造を使用して、新しい行を追加します。

diviヘッダーを交換します

サイジング

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

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

diviヘッダーを交換します

間隔

次に、デフォルトの上下のパディングをすべて削除します。

  • トップパディング：0px
  • ボトムパディング：0px

diviヘッダーを交換します

主な要素

次に、行のメイン要素で2行のCSSコードを使用して、すべての列のコンテンツを整列します。 

display: flex;
align-items: center;

diviヘッダーを交換します

列3の背景色

そして、列3の設定を開き、背景色を使用して、行の設定を完了します。

  • 背景色：＃0042c9

diviヘッダーを交換します

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

画像をアップロード

列1で必要なモジュールは、画像モジュールだけです。 お好みのロゴをアップロードしてください。

diviヘッダーを交換します

配置

次に、モジュールの画像配置を変更します。

  • 画像の配置：中央

diviヘッダーを交換します

メニューモジュールのクローンを作成し、行ヘッダー＃2の列2に配置します

前の行で使用されたメニューモジュールのクローンを作成し、複製を2番目の行の中央の列に配置します。

diviヘッダーを交換します

メニューテキスト設定の変更

複製したメニューモジュールを開き、メニューテキストの色を変更します。

  • メニューテキストの色：＃0042c9

diviヘッダーを交換します

ドロップダウンメニューのテキスト設定を変更する

ドロップダウンメニューのテキスト設定も変更します。

  • ドロップダウンメニューの線の色：＃ffc21d

diviヘッダーを交換します

アイコン設定の変更

ハンバーガーメニューアイコンの色を変更して、メニューモジュールの設定を完了します。

  • ハンバーガーメニューアイコンの色：＃0042c9

diviヘッダーを交換します

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

コピーを追加

行の最後の列で必要なモジュールは、ボタンモジュールだけです。 お好みのコピーを入力してください。

diviヘッダーを交換します

配置

次にボタンの配置を変更します。

  • ボタンの配置：中央

diviヘッダーを交換します

ボタンの設定

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

  • ボタンにカスタムスタイルを使用する：はい
  • ボタンのテキストサイズ：20px（デスクトップ）、18px（タブレット）、15px（電話）
  • ボタンのテキストの色：#ffffff
  • ボタンの境界線の幅：0px

diviヘッダーを交換します

  • ボタンフォント：Roboto
  • ボタンのフォントの太さ：太字

diviヘッダーを交換します

間隔

そして、さまざまな画面サイズにカスタムパディングを追加して、モジュール設定を完了します。

  • トップパディング：33px（デスクトップ）、35px（タブレット）、38px（電話）
  • 下部のパディング：33px（デスクトップ）、35px（タブレット）、38px（電話）

diviヘッダーを交換します

2.CSSクラスを追加します

セクション

すべてのモジュールを追加してスタイルを設定したら、JQueryコード内で使用するCSSクラスを追加します。 まず、セクション設定を開き、次のCSSクラスを使用します。

  • CSSクラス：ヘッダーセクション

diviヘッダーを交換します

行ヘッダー＃1

次に、最初の行ヘッダーを開き、次のCSSクラスを使用します。

  • CSSクラス：header-1

diviヘッダーを交換します

行ヘッダー＃2

2行目も開きます。 次のCSSクラスを使用します。

  • CSSクラス：header-2

diviヘッダーを交換します

3.JQueryとCSSコードを追加します

最初の行の3番目の列にコードモジュールを追加します

すべてのCSSクラスが配置されたら、コードを追加します。 セクション内の好きな場所に新しいコードモジュールを追加します。 最初の行の3番目の列に配置します。

diviヘッダーを交換します

JQueryコードの追加（スクリプトタグ間）

次に、以下の印刷画面に表示されているように、スクリプトタグの間に次のCSSコード行を追加します。 

jQuery(function($){
    
var firstHeader = $('.header-1');
var secondHeader = $('.header-2');
var headerSection = $('.header-section');
  
headerSection.wrap('<div class="header-placeholder"></div>');
var headerWrap = $('.header-placeholder');
  
var headerHeight = firstHeader.outerHeight();
headerWrap.css('height', headerHeight);  

  
secondHeader.hide();
 
$(window).scroll(function() {
  
    var topPosition = $(window).scrollTop();
  
    if (topPosition >= 400) {
          firstHeader.slideUp();
          secondHeader.slideDown();
    }
  
    if (topPosition == 0) {
          secondHeader.slideUp();
          firstHeader.slideDown();
    }
  
});      
});

diviヘッダーを交換します

CSSコードの追加（スタイルタグ間）

スタイルタグの間に次のCSSコードも追加します。 

.et_mobile_menu {
margin-top: 20px;
width: 300%;
margin-left: -100%;
}

diviヘッダーを交換します

4.テーマビルダーの変更を保存して結果を表示する

この時点で、あとはすべてのテーマビルダーの変更を保存し、Webサイトで結果を表示するだけです。

diviヘッダーを交換します

diviヘッダーを交換します

プレビュー

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

デスクトップ

diviヘッダーを交換します

モバイル

diviヘッダーを交換します

最終的な考え

この投稿では、Diviのテーマビルダー、Divi要素、およびいくつかの追加のJQueryおよびCSSコードを使用して、スクロール時にDiviヘッダーを別のヘッダーに交換する方法を示しました。 また、固定ヘッダーがページコンテンツと重ならないように、ページコンテナの上部にスペースを自動生成しました。 スワップDiviヘッダーテンプレートJSONファイルも無料でダウンロードできました！ ご質問やご提案がございましたら、下のコメント欄にコメントを残してください。

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