Diviのテーマビルダーを使用してカスタムフルスクリーングローバルヘッダーを作成する方法

公開: 2019-11-10

スペースをあまりとらないWebサイトのグローバルヘッダーを作成する方法を探している場合は、このチュートリアルを気に入るはずです。 Diviのテーマビルダーを使用してフルスクリーンのグローバルヘッダーを作成する方法を紹介します。 ページを下にスクロールしているときに、投稿/ページに追加で気付くのは、1）左上隅にあるクリック可能なハンバーガーアイコンと2）右上隅にあるロゴだけです。 これらの2つのアイテムは、ナビゲーションプロセス全体を通じて訪問者をフォローし、ハンバーガーアイコンをクリックすると、カスタムのフルスクリーンメニューが開き、訪問者がWebサイトの他のページに移動できるようになります。 この設計の結果は非常に応答性が高く、JSONファイルを無料でダウンロードすることもできます。

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

プレビュー

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

デスクトップ

フルスクリーングローバルヘッダー

モバイル

フルスクリーングローバルヘッダー

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

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

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

無料でダウンロード

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

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

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

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

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

フルスクリーングローバルヘッダー

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

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

フルスクリーングローバルヘッダー

2.セクション＃1をフルスクリーンナビゲーション専用にします

セクション設定

背景色

作成を開始する時が来ました！ テンプレートエディタ内で気付くセクションの設定を開き、背景色を完全に透明な色に変更します。

  • 背景色：rgba（255,255,255,0）

フルスクリーングローバルヘッダー

間隔

次に、セクションのデフォルトの上部と下部のパディングを削除します。

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

フルスクリーングローバルヘッダー

CSSクラス

セクションにCSSクラスを追加して続行します。 この投稿の後半で、メニューを全画面表示にするには、このCSSクラスが必要になります。

  • CSSクラス：セクション変換

フルスクリーングローバルヘッダー

デフォルトの可視性

次に、可視性の設定に移動し、オーバーフローを非表示にします。 セクションのzインデックスも必ず増やしてください。これにより、セクションがすべてのページと投稿コンテンツの上部に表示されたままになります。

  • 水平オーバーフロー：非表示
  • 垂直オーバーフロー：非表示
  • Zインデックス：999999

フルスクリーングローバルヘッダー

ホバーの可視性

zインデックスを追加したら、ホバーオプションを有効にして、同じzインデックスがそこにも適用されていることを確認します。

  • Zインデックス：999999

フルスクリーングローバルヘッダー

行＃1を追加

カラム構造

次の列構造を使用して、セクションに最初の行を追加して続行します。

フルスクリーングローバルヘッダー

サイジング

モジュールをまだ追加せずに、行の設定を開き、行が画面の幅全体を占めるようにします。

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

フルスクリーングローバルヘッダー

間隔

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

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

フルスクリーングローバルヘッダー

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

コンテンツを追加する

この行に必要なモジュールはテキストモジュールだけです。 選択したメニュー記号をコンテンツボックスに追加します。 このチュートリアルでは、「≡」を使用しています。

フルスクリーングローバルヘッダー

テキスト設定

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

  • テキストフォント：Abril Fatface
  • テキストの色：＃000000
  • テキストサイズ：3vw（デスクトップ）、5vw（タブレット）、7vw（電話）
  • テキスト行の高さ：1em

フルスクリーングローバルヘッダー

間隔

次に、さまざまな画面サイズで間隔の値を変更します。

  • トップパディング：2vw（デスクトップ）、3.5vw（タブレット）、5vw（電話）
  • ボトムパディング：2vw（デスクトップ）、3.5vw（タブレット）、5vw（電話）
  • 左パディング：3vw（デスクトップ）、4vw（タブレット）、7vw（電話）
  • 右パディング：3vw（デスクトップ）、4vw（タブレット）、7vw（電話）

フルスクリーングローバルヘッダー

CSS ID

このテキストモジュールは、フルスクリーンメニューのトリガーとして機能します。 そのため、テキストモジュールにCSSIDを割り当てる必要があります。 チュートリアルの後半では、コードでCSSIDを使用します。

  • CSS ID：メニュー-開く

フルスクリーングローバルヘッダー

行＃2を追加

カラム構造

次の列構造を使用して、セクションに2番目の行を追加して続行します。

フルスクリーングローバルヘッダー

サイジング

行設定を開き、次のようにサイズ設定を変更します。

  • 幅：100％
  • 最大幅：100％

フルスクリーングローバルヘッダー

間隔

間隔の値も変更します。

  • トップマージン：2vw（デスクトップ）、4vw（タブレット）、6vw（電話）
  • 下マージン：2vw（デスクトップ）、4vw（タブレット）、6vw（電話）
  • 左パディング：19vw
  • 右パディング：19vw

フルスクリーングローバルヘッダー

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

コンテンツを追加する

次に、新しいテキストモジュールを列に追加します。 このテキストモジュールは、最初のメニュー項目を表します。

フルスクリーングローバルヘッダー

リンクを追加

次に、モジュールに適切なリンクを追加してください。

  • モジュールリンクURL：＃

フルスクリーングローバルヘッダー

テキスト設定

モジュールの[デザイン]タブに移動し、それに応じてテキスト設定を変更します。

  • テキストフォント：ポピンズ
  • テキストフォントの太さ：半太字
  • テキストの色：＃000000
  • テキストサイズ：3vw（デスクトップ）、7vw（タブレット）、8vw（電話）
  • テキスト文字の間隔：-0.1vw
  • テキスト行の高さ：1em

フルスクリーングローバルヘッダー

間隔

次に、モジュールの間隔設定を変更します。

  • トップマージン：1vw
  • ボトムパディング：2vw
  • 左パディング：3vw

フルスクリーングローバルヘッダー

国境

下の境界線も追加します。

  • 下の境界線の幅：1px
  • 下の境界線の色：＃333333

フルスクリーングローバルヘッダー

CSSクラス

そして、カスタムCSSクラスを追加して、モジュールの設定を完了します。 このCSSクラスを、セクションに配置するすべてのメニュー項目に追加する必要があります。

フルスクリーングローバルヘッダー

テキストモジュールを3回複製する

最初のテキストモジュールを完了したら、必要な回数だけクローンを作成できます（メニューに表示するメニュー項目によって異なります）。 ただし、モジュールが画面の高さを超えないようにしてください。

フルスクリーングローバルヘッダー

各複製のコンテンツとリンクを変更する

各複製のコンテンツとリンクを変更する必要があります。

フルスクリーングローバルヘッダー

ソーシャルメディアフォローモジュールを追加する

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

この行で必要な次の最後のモジュールは、ソーシャルメディアフォローモジュールです。 表示したいすべてのソーシャルネットワークを追加します。

フルスクリーングローバルヘッダー

個々のソーシャルネットワークスタイルをリセットする

各ソーシャルネットワークのスタイルを個別にリセットして続行します。

フルスクリーングローバルヘッダー

アイコン設定

次に、モジュールの[デザイン]タブに移動し、アイコン設定を次のように変更します。

  • アイコンの色：＃000000
  • カスタムアイコンサイズを使用：はい
  • アイコンのフォントサイズ：1vw（デスクトップ）、2vw（タブレット）、3vw（電話）

フルスクリーングローバルヘッダー

間隔

左のパディングも追加します。

  • 左パディング：3vw

フルスクリーングローバルヘッダー

CSSクラス

CSSクラスを追加して、モジュールの設定を完了します。

フルスクリーングローバルヘッダー

行＃3を追加

カラム構造

このセクションで必要な最後の行には、次の列構造が含まれています。

フルスクリーングローバルヘッダー

間隔

デフォルトの上下のパディングをすべて削除して、この行が占めるスペースを制限します。

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

フルスクリーングローバルヘッダー

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

JQueryとCSSコードを挿入する

次に、コードモジュールを追加し、CSSおよびJQueryコードを挿入して、フルスクリーンメニュー機能を作成します。 以下の印刷画面でわかるように、スクリプトタグの間にJQueryコードを、スタイルタグの間にCSSコードを手動で配置してください。 

jQuery(function($){
$('#menu-open').click(function() {
$('.section-transform').toggleClass('section-transform-active');
});
$('.menu-item-click').click(function() {
$('.section-transform').removeClass('section-transform-active');
});
});

.section-transform{
cursor: pointer;    
}
.section-transform-active {
height: 100% !important;
width: 100% !important;
z-index: 99999 !important;
background-color: #FFFFFF !important; 
}   
.section-transform {
-webkit-transition: all 0.5s ease !important;
-moz-transition: all 0.5s ease !important;
-o-transition: all 0.5s ease !important;
-ms-transition: all 0.5s ease !important;
transition: all 0.5s ease !important;
}

フルスクリーングローバルヘッダー

3.セクション＃2を右上隅のロゴ専用にします

セクション設定

背景色

次のセクションに進みましょう！ このセクションには、右上隅にロゴが含まれます。 セクション設定を開き、背景色を完全に透明な色に変更します。

  • 背景色：rgba（0,0,0,0）

フルスクリーングローバルヘッダー

間隔

次に、セクションのデフォルトの上部と下部のパディングを削除します。

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

フルスクリーングローバルヘッダー

デフォルトの可視性

セクションのzインデックスも増やします。

  • Zインデックス：99999

フルスクリーングローバルヘッダー

ホバーの可視性

zインデックスでホバーオプションを有効にし、同じ値がホバーにも適用されることを確認します。

  • Zインデックス：99999

フルスクリーングローバルヘッダー

新しい行を追加

カラム構造

次の列構造を使用して、セクションに新しい行を追加して続行します。

フルスクリーングローバルヘッダー

サイジング

行設定を開き、次のようにサイズ設定を変更します。

  • 幅：100％
  • 最大幅：100％

フルスクリーングローバルヘッダー

間隔

行のデフォルトの上下のパディングも削除します。

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

フルスクリーングローバルヘッダー

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

PNGロゴ画像をアップロードする

この行とセクションで必要な唯一のモジュールは画像モジュールです。 半透明のロゴ画像ファイルをアップロードします。

フルスクリーングローバルヘッダー

サイジング

モジュールのサイズ設定に移動し、全幅を強制します。

  • 全幅を強制：はい

フルスクリーングローバルヘッダー

間隔

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

  • トップパディング：2.5vw（デスクトップ）、3.5vw（タブレット）、5vw（電話）
  • ボトムパディング：2.5vw（デスクトップ）、3.5vw（タブレット）、5vw（電話）
  • 左パディング：3vw（デスクトップ）、4vw（タブレット）、7vw（電話）
  • 右パディング：3vw（デスクトップ）、4vw（タブレット）、7vw（電話）

フルスクリーングローバルヘッダー

4.追加のセクション設定

セクション＃1

サイジング

両方のセクションとその中のすべてのモジュールを完了したら、サイズを変更します。 最初のセクションを開き、次の幅と高さの値を適用します。

  • 幅：8vw（デスクトップ）、11vw（タブレット）、18vw（電話）
  • 高さ：7vw（デスクトップ）、11vw（タブレット）、18vw（電話）

フルスクリーングローバルヘッダー

デフォルトのメイン要素

次に、セクションの[詳細設定]タブに移動し、CSSコードの次の行を追加します。 

position: fixed;
top: 0;

フルスクリーングローバルヘッダー

メイン要素をホバーします

それらの同じCSSコード行がホバーに適用されることを確認してください。 

position: fixed;
top: 0;

フルスクリーングローバルヘッダー

第2節

サイジング

2番目のセクションの設定を開いて続行し、さまざまな画面サイズで幅を変更します。

  • 幅：13vw（デスクトップ）、21vw（タブレット）、30vw（電話）

フルスクリーングローバルヘッダー

デフォルトのメイン要素

次に、[詳細設定]タブに移動し、CSSコードの次の行を追加します。 

position: fixed;
right: 0;
top: 0;

フルスクリーングローバルヘッダー

メイン要素をホバーします

それらの同じCSSコード行がホバーに適用されることを確認してください。 

position: fixed;
right: 0;
top: 0;

フルスクリーングローバルヘッダー

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

上記のすべての手順を完了したら、グローバルヘッダーテンプレートを保存して、Webサイトで結果を表示できます。

フルスクリーングローバルヘッダー

フルスクリーングローバルヘッダー

プレビュー

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

デスクトップ

フルスクリーングローバルヘッダー

モバイル

フルスクリーングローバルヘッダー

最終的な考え

このチュートリアルでは、Diviのテーマビルダーを使用してフルスクリーンのグローバルヘッダーを作成する方法を示しました。 デザインに2つの固定要素を追加しました。 左上隅にハンバーガーアイコン、右上隅にロゴがあります。 クリックすると、ハンバーガーアイコンが表示され、Diviの組み込み要素を使用して作成されたフルスクリーンメニューが開きます。 Diviを使用して、このフルスクリーンメニューを自由にデザインできます。 このチュートリアルの開始時に、JSONファイルを無料でダウンロードすることもできました。 ご不明な点がございましたら、下のコメント欄にコメントを残してください。

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