Diviのテーマビルダーでスクロールするときにグローバルヘッダーのサイズを縮小する方法

公開: 2019-11-19

固定のグローバルヘッダーを設計する場合、訪問者がスクロールしているときにヘッダーの高さを縮小することをお勧めします。これは、グローバルヘッダーが訪問者のビューポートの高さで占めるスペースを削減するのに役立ちます。このチュートリアルでは、そのプロセスについて説明します。まずメニューを作成し、次にJQueryとCSSコードを追加して効果をトリガーします。 JSONファイルも無料でダウンロードできます！

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

プレビュー

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

デスクトップ

グローバルヘッダーの高さを縮小する

モバイル

グローバルヘッダーの高さを縮小する

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

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

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

無料でダウンロード

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

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

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

1. Diviテーマビルダーに移動し、新しいテンプレートを追加します

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

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

グローバルヘッダーの高さを縮小する

グローバルヘッダーの作成を開始します

次に、[グローバルヘッダーの作成]をクリックし、[グローバルヘッダーの作成]を選択します。

グローバルヘッダーの高さを縮小する

2.グローバルヘッダーの作成を開始します

セクション設定

背景色

テンプレートエディタに入ると、セクションが表示されます。セクションを開き、背景色を白に変更します。

背景色：#FFFFFF

グローバルヘッダーの高さを縮小する

サイジング

モジュールのデザインタブに移動し、幅を変更します。

幅：100％

グローバルヘッダーの高さを縮小する

間隔

セクションの上部と下部のパディングも変更します。

トップパディング：2vw
ボトムパディング：2vw

グローバルヘッダーの高さを縮小する

ボックスシャドウ

そして、次のセクションに微妙なボックスシャドウを追加して、ページコンテンツをグローバルヘッダーから分離します。

ボックスシャドウブラー強度：50px
影の色：rgba（0,0,0,0.13）

グローバルヘッダーの高さを縮小する

CSS ID

次に、CSSIDをセクションに追加します。チュートリアルの後半では、このCSS IDを使用して、スクロール時に縮小するグローバルヘッダー効果を作成します。

CSS ID：セクションパディング

グローバルヘッダーの高さを縮小する

主な要素

[詳細設定]タブに移動し、[カスタムCSS設定]に移動して、セクションのメイン要素に2行のCSSコードを追加してセクションを修正します。

position: fixed;
top: 0;

グローバルヘッダーの高さを縮小する

Zインデックス

セクションがすべてのページと投稿コンテンツの上部に表示されるように、セクションのzインデックスも増やします。

Zインデックス：99999

グローバルヘッダーの高さを縮小する

新しい行を追加

カラム構造

列の設定が完了したら、次の列構造を使用して新しい行を追加して続行します。

グローバルヘッダーの高さを縮小する

サイジング

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

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

グローバルヘッダーの高さを縮小する

間隔

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

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

グローバルヘッダーの高さを縮小する

CSS ID

次に、[詳細設定]タブに移動し、CSSIDを行に追加します。縮小効果を機能させるには、チュートリアルの後半でこのCSSIDが必要になります。

CSS ID：行幅

グローバルヘッダーの高さを縮小する

主な要素

大事なことを言い忘れましたが、すべての列が小さい画面サイズで隣り合っていることを確認し、すべての列のコンテンツを中央に配置するために、2行のCSSコードを行のメイン要素に追加します。

display: flex;
align-items: center;

グローバルヘッダーの高さを縮小する

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

ロゴをアップロード

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

グローバルヘッダーの高さを縮小する

サイジング

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

幅：5vw（デスクトップ）、9vw（タブレット）、13vw（電話）

グローバルヘッダーの高さを縮小する

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

メニューを選択

2番目の列に移動し、メニューモジュールを挿入します。お好みのメニューを選択してください。

グローバルヘッダーの高さを縮小する

背景色を削除する

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

グローバルヘッダーの高さを縮小する

レイアウト

モジュールの[デザイン]タブに移動し、レイアウトも変更します。

スタイル：中央揃え
ドロップダウンメニューの方向：下向き

グローバルヘッダーの高さを縮小する

メニューテキスト

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

メニューフォント：ルービック
メニューテキストの色：＃000000
メニューテキストサイズ：0.9vw（デスクトップ）、2vw（タブレット）、3vw（電話）

グローバルヘッダーの高さを縮小する

ドロップダウンメニュー

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

ドロップダウンメニューの背景色：#ffffff
ドロップダウンメニューの線の色：＃2970fa

グローバルヘッダーの高さを縮小する

アイコン

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

ハンバーガーメニューアイコンの色：＃2970fa

グローバルヘッダーの高さを縮小する

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

コピーを追加

次の最後の列に進みます。選択したコピーを含むボタンモジュールを追加します。

グローバルヘッダーの高さを縮小する

配置

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

ボタンの配置：右

グローバルヘッダーの高さを縮小する

ボタンの設定

それに応じてボタンのスタイルを設定します。

ボタンにカスタムスタイルを使用する：はい
ボタンのテキストサイズ：0.8vw（デスクトップ）、1.5vw（タブレット）、2vw（電話）
ボタンのテキストの色：#ffffff
ボタンの背景色：＃2970fa
ボタンの境界線の幅：0px

グローバルヘッダーの高さを縮小する

ボタンの境界線半径：0px
ボタンの文字間隔：1px
ボタンフォント：ルービック
ボタンのフォントスタイル：大文字

グローバルヘッダーの高さを縮小する

間隔

また、さまざまな画面サイズにカスタムパディング値を追加します。

トップパディング：0.8vw（デスクトップ）、1.8vw（タブレット）、2.5vw（電話）
ボトムパディング：0.8vw（デスクトップ）、1.8vw（タブレット）、2.5vw（電話）
左パディング：1.5vw（デスクトップ）、3vw（タブレット）、4vw（電話）
右パディング：1.5vw（デスクトップ）、3vw（タブレット）、4vw（電話）

グローバルヘッダーの高さを縮小する

ボックスシャドウ

微妙なボックスシャドウを追加して、モジュールの設定を完了します。

ボックスシャドウの垂直位置：20px
ボックスシャドウブラー強度：30px
影の色：rgba（41,112,250,0.2）

グローバルヘッダーの高さを縮小する

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

JQueryとCSSコードを挿入する

このチュートリアルの次の最後の部分では、セクションと行に割り当てた2つのCSS IDを使用して、縮小効果を処理します。次のJQueryおよびCSSコード行を使用して、コードモジュールを列2に追加します。 スクリプトタグの間にJQueryコードを配置し、スタイルタグの間にCSSコードを配置してください。

jQuery(function($){
  $(window).scroll(function() {
      if ($(document).scrollTop() > 50) {
        $('#section-padding').addClass('reduce-section-padding');
        $('#row-width').addClass('increase-row-width');
    } else {
       $('#section-padding').removeClass('reduce-section-padding');
       $('#section-padding').addClass('slow-transition');
       $('#row-width').removeClass('increase-row-width');
       $('#row-width').addClass('slow-transition');
    }
  });
});

.reduce-section-padding {
transition: all 0.9s ease-out 0s;
padding-top: 0px !important;
padding-bottom: 0px !important;
}

.increase-row-width {
transition: all 0.9s ease-out 0s;
width: 100% !important;
}

.slow-transition {
transition: all 0.9s ease-out 0s;
}

#main-content {
margin-top: 5vw;
}

グローバルヘッダーの高さを縮小する

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

コードを追加したら、グローバルヘッダーに加えたすべての変更を保存して、Webサイトで結果を表示できます。

グローバルヘッダーの高さを縮小する

プレビュー

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

デスクトップ

グローバルヘッダーの高さを縮小する

モバイル

グローバルヘッダーの高さを縮小する

最終的な考え

この投稿では、Diviのテーマビルダーを使用して縮小するグローバルヘッダーを作成する方法を示しました。ヘッダーの縮小は、訪問者のビューポートの高さのスペースを節約するための優れた方法です。デザインを最初から再作成し、縮小効果をトリガーするカスタムカスタムコードをいくつか追加しました。 JSONファイルも無料でダウンロードできました！ご質問やご提案がございましたら、下のコメント欄にコメントを残してください！

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

Diviのテーマビルダーでスクロールするときにグローバルヘッダーのサイズを縮小する方法

プレビュー

デスクトップ

モバイル

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

無料でダウンロード

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

1. Diviテーマビルダーに移動し、新しいテンプレートを追加します

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

グローバルヘッダーの作成を開始します

2.グローバルヘッダーの作成を開始します

セクション設定

背景色

サイジング

間隔

ボックスシャドウ

CSS ID

主な要素

Zインデックス

新しい行を追加

カラム構造

サイジング

間隔

CSS ID

主な要素

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

ロゴをアップロード

サイジング

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

メニューを選択

背景色を削除する

レイアウト

メニューテキスト

ドロップダウンメニュー

アイコン

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

コピーを追加

配置

ボタンの設定

間隔

ボックスシャドウ

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

JQueryとCSSコードを挿入する

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

プレビュー

デスクトップ

モバイル

最終的な考え

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