Diviでカスタムフルスクリーンページレイアウトを設計する方法

公開: 2018-12-27

フルスクリーンのページレイアウトは、Webデザインの世界で非常に役立ちます。フルスクリーンページレイアウトの主な利点の1つは、可視性です。フルスクリーンページでは、すべてのページコンテンツがブラウザウィンドウ内に残ります。ユーザーがすばやくスクロールする世界では、最初からすべてのコンテンツをブラウザーのビューポートに含めることで、視聴者にとってリフレッシュでき、コンバージョンにも役立つ可能性があります。

Diviに精通している場合は、全画面機能が組み込まれている全幅ヘッダーモジュールについて既に知っている必要があります。これは、最小限のコンテンツで全画面ページを作成するための優れたソリューションです。しかし、複数の行とモジュールを持つ通常のセクションを使用してフルスクリーンのページレイアウトを構築することを利用したい場合は、これがあなたのための投稿です。ページのコンテンツ（ヘッダーとフッターバーも含む）がブラウザーウィンドウ内に収まり、さまざまなブラウザーサイズで適切にスケーリングされるようにするための、いくつかの簡単なトリックを紹介します。

始めましょう。

スニークピーク

これは、このチュートリアルで作成する最終的なフルスクリーンページレイアウトの概要です。

フルスクリーンページレイアウト

ページの高さがブラウザウィンドウの高さに合わせて調整され、すべてが所定の位置にとどまることに注目してください。

フルスクリーンページレイアウト

何が必要

このチュートリアルでは、本当に必要なのはDiviだけです。また、DiviBuilderからアクセスできるFitnessGymLayoutパックも使用します。

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

Diviでカスタムフルスクリーンページを作成する方法

このチュートリアルのメインデザインに入る前に、Diviでフルスクリーンページを作成する背後にある基本的な考え方を紹介したいと思いました。結局のところ、あなたはそれがいかに簡単であるかに驚くかもしれません。

基本的な考え方の説明

新しいページで、空白のページテンプレートを選択します。これにより、メインヘッダーと下部フッターバーがページに表示されなくなります（これらを含める方法については後で説明します）。
フルスクリーンページレイアウト

次に、Divi Builderをフロントエンドにデプロイして、ページを最初から作成します。次に、1列の行を持つ1つの通常のセクションを追加します。

次に、カウントダウンタイマーモジュール（または任意のモジュール）を1列の行に追加します。

フルスクリーンページレイアウト

見やすくするために、カウントダウンタイマーで背景色を取り出し、セクションに背景色を追加して、ページ上のセクションの高さをよりよく認識できるようにします。現在、セクションの高さは、セクションに含まれるコンテンツの高さを基準にしています。この場合、私たちが持っている唯一のコンテンツは、歌うモジュールを備えた単一の行です。

フルスクリーンページレイアウト

次に、セクション設定を開き、[詳細設定]タブに移動して、次のカスタムCSSをメイン要素に追加します。

min-height: 100vh;
display: flex;
flex-direction: column;

フルスクリーンページレイアウト

セクションの最小の高さを100vh（ビューポートの高さの100％）に設定すると、セクションがブラウザウィンドウ（またはビューポート）全体に広がるようになります。「display：flex」プロパティは、セクションのコンテンツを垂直方向に中央揃えにするためのすばやく簡単な方法です。

vhの長さの単位の詳細については、この役立つガイドを確認してください。

シークレットブラウザでライブページを表示して結果を確認します。WordPressにログインしている場合、上部の管理バーによってブラウザの高さがわずかにずれてしまうためです。

フルスクリーンページレイアウト

さて、あなたは行きます。これが、Diviでカスタムのフルスクリーンページレイアウトを作成する方法の基本的な考え方です。

フルスクリーンページにヘッダーとフッターを組み込む。

全画面ページにヘッダーと下部のフッターバーを含めたい場合は、1つの小さな調整を行う必要があります。まず、ページテンプレートをページエディタのバックエンドのデフォルトテンプレートに戻します。

フルスクリーンページレイアウト

ヘッダーと下部フッターを含めると、ブラウザーのビューポートに高さが追加されるため、セクションが以前のように完全にフィットしなくなります。これは、ページがビューポートの高さの100％に、ヘッダーと下部のフッターバーの高さを加えたセクションの高さで構成されているためです。それは多すぎます。これを修正するには、セクションのカスタムCSSを次のように調整する必要があります。

min-height: calc(100vh - 133px);
display: flex;
flex-direction: column;

唯一の違いは、最小の高さの値です。これで、ヘッダーと下部フッターバーの追加の高さ（ピクセル単位）をまとめて考慮する計算があります。

132pxは、ヘッダーのデフォルトの高さ（80px）と下部のフッターバーのデフォルトの高さ（53px）の合計に基づいています。

フルスクリーンページレイアウト

Diviでカスタムフルスクリーンページを作成する方法の基本を理解したので、より複雑なデザインに飛び込みましょう。

完全なフルスクリーンページデザインの構築

このデザインを開始するには、新しいページを作成し、ページにタイトルを付けて、DiviBuilderをデプロイします。 [既成のレイアウトを選択する]オプションを選択し、[ライブラリポップアップからロード]から[フィットネスジムのレイアウト]ページを選択します。次に、クリックして価格設定ページを使用します。

フルスクリーンページレイアウト

レイアウトがビルダーにロードされたら、ボタンをクリックしてフロントエンド（ビジュアルビルダー）でビルドし、開始する準備が整います。

新しいセクションの作成

事前に作成されたレイアウトは、設計を開始するのに役立ちます。途中でこれらのレイアウトデザイン要素を使用し、終了後に残りのレイアウトを削除します。フルスクリーンレイアウトのメインセクションを作成するには、先に進んで新しい通常のセクションを作成し、ページの最上部にドラッグします。次に、4分の1、4分の1、2分の1の列構造を行に追加します。これがフルスクリーンページの基盤になります。

フルスクリーンページレイアウト

列へのモジュールの追加

複数選択（Ctrl / cmdを押しながらクリック）を使用して、レイアウトの最初のセクションの最初の2行にあるすべてのモジュールを選択し、ページ上部の新しいセクションの最初の列にドラッグします。

フルスクリーンページレイアウト

次に、multiselectを使用して、レイアウトの同じ最初のセクションの3行目にあるすべてのモジュールをコピーし、ページ上部の新しいセクションの2番目の列に貼り付けます。

フルスクリーンページレイアウト

背景が白いためテキストは非表示になりますが、後で背景色を変更します。

3番目の列に、スライダーモジュールを追加します。このスライダーは最終的に画面の高さ全体に広がりますが、今のところはコンテンツを設定するだけです。スライダーの設定で、デフォルトで存在する2つのデフォルトのスライドの1つを削除し、クリックして1つのスライドの設定を開きます。

フルスクリーンページレイアウト

スライドの設定で、背景画像を追加して、ブラウザの高さ全体に広がるのに十分な大きさであることを確認します。

フルスクリーンページレイアウト

これで、今のところ必要なすべてのモジュールが処理されます。後でデザイン設定を再検討しますが、とりあえず、行をカスタマイズしましょう。

行設定のカスタマイズ

行設定を開き、列2に背景色を追加することから始めます。

列2の背景色：＃2a2e40

フルスクリーンページレイアウト

[デザイン]タブにジャンプして、以下を更新します。

この行を全幅にする：はい
側溝幅：1
列の高さを等しくする：はい
カスタムパディング：0px上、0px下

フルスクリーンページレイアウト

セクション設定のカスタマイズ

この時点でセクション設定に必要なのは、デフォルトのパディングを削除することだけですが、最初の列の上部を囲むセクション仕切りを追加するとよいと思いました。セクション設定を開き、以下を更新します。

トップディバイダースタイル：スクリーンショットを参照
トップディバイダーカラー：＃2a2e40
トップディバイダーの高さ：8vw
トップディバイダー水平リピート：0.8x
トップディバイダーフリップ：垂直および水平

カスタムパディング：0px上、0px下

フルスクリーンページレイアウト

仕切りはセクションコンテンツの下に表示されるように設定されているため、列3のスライダーの後ろに隠れ、列の背景の色と一致するため、列2には表示されません。これにより、列1の優れたフレーミングデザイン要素が作成されます。

事前に作成されたレイアウトの残りを削除します

この時点で、上部のセクションには全画面ページレイアウトのすべてが整っているので、事前に作成されたレイアウトに付属していた残りのセクションをすべて削除できます。これはあなたのページがこれまでにどのように見えるべきかです。

フルスクリーンページレイアウト

これで、ページをカスタマイズして全画面表示にする準備が整いました。

カスタムCSSを追加してページをフルスクリーンにする

この記事の冒頭の基本的な例では、カスタムcssをセクションに直接追加しました。ただし、フルスクリーン機能がデスクトップにのみ適用されるようにするため（およびモバイルではデフォルトのスタイルに頼る）、ページ設定の下のCSSに追加します。これにより、このページにのみ適用される外部CSSを追加できますが、スタイルをデスクトップのみに制限するメディアクエリを追加するオプションも提供されます。

フロントエンドビルダーの下部にある設定メニューから、ページ設定を開きます。 [詳細設定]タブで、次のカスタムCSSを入力します。

@media (min-width: 980px){

/*If CSS IDs are added, this makes the element the same height as the browser window taking into account the header and the bottom footer bar*/
  #fullsection, #fullslide .et_pb_slide {
    height: calc(100vh - 133px);
  }
/*This centers the content of the section when the CSS ID is applied*/
  #fullsection { 
    display: flex;
    flex-direction:column;
    overflow: hidden;
  }
/*This makes the bottom footer bar fullwidth to match the fullwidth header if applied*/
  #footer-bottom .container {
    width: 100%;
    max-width: 100%;
    padding-right: 30px;
    padding-left: 30px;
  }
}

CSSに慣れていない方は、ブラウザの幅が980ピクセル以上の場合に、スタイルを適用するメディアクエリでコードがラップされていることに注意してください。角かっこを使用すると、最初のスニペットには「fullsection」という名前のCSS IDが含まれ、その後に「fullslide」という名前のCSSIDが続きます。これらの2つのCSSIDは、セクションとスライダーに追加する必要があるため、覚えておくことが重要です。これを行うと、css「height：calce（100vh – 133px）」が適用され、両方が全画面表示になります（ブラウザウィンドウの全高にまたがります）。

2番目のスニペットは、display flexプロパティをセクションに適用し、すべてのセクションコンテンツを垂直方向の中央に配置します。詳細については、Diviでコンテンツを垂直方向に配置する方法に関する投稿をご覧ください。

3番目のスニペットは完全にオプションです。これにより、下部のフッターバーが全幅になり、デザインに少しフィットし、追加する全幅のヘッダースタイルにも一致します。

これで外部CSSが配置されたので、CSSIDをセクションとスライダーに追加できます。セクション設定に移動し、次のCSSIDを追加します。

CSS ID：フルセクション

フルスクリーンページレイアウト

次に、列3のスライダーのスライダーモジュール設定を開き、次のCSSIDを追加します。

CSS ID：フルスライド

フルスクリーンページレイアウト

最後の仕上げ

この時点で、全画面ページの機能が整っており、機能しているはずです。シークレットブラウザで確認できます。残っているのは、いくつかの最後の仕上げです。

列に間隔を追加します

次のように、行設定を開いて、列1と列2の上部にパディングを追加します。

列1のカスタムパディング：上12vh、左1vw、右1vw
列2のカスタムパディング：上12vh、左1vw、右1vw

フルスクリーンページレイアウト

上部のパディング値にvhの長さの単位を使用したことに注意してください。これにより、パディングはビューポートの高さに合わせて拡大縮小され、ブラウザウィンドウが高くなるとパディングが増え、ブラウザが短くなるとパディングが少なくなります。左右のパディング値にvw（ビューポート幅）の長さの単位を使用して、パディングがブラウザーの幅に応じて拡大縮小されるようにしました。

大きなテキストにvhの長さの単位を追加して、表示スペースを最大化します

ご覧のとおり、ブラウザウィンドウにまったく比例しない、非常に大きなテキストを含むモジュールがいくつかあります。これを修正するために、テキストサイズをvh長さの単位に設定できます。これにより、短いブラウザ画面でテキストを縮小できます。

列1の上部にあるテキストモジュールの設定を開き、h1ヘッダーのテキストサイズを7vh（vwではなく）に更新します。

フルスクリーンページレイアウト

次に、列2の上部にあるテキストモジュールの設定を開き、見出し2のテキストサイズを6vhに更新します。

フルスクリーンページレイアウト

スライダーのデザインを更新する

デザインを完成させるには、2列目のボタンのボタンデザインをコピーして、スライダーのボタンスタイルに貼り付けます。これを行うには、列2のボタンのボタン設定を開き、ボタンオプションカテゴリを右クリックして、[ボタンスタイルのコピー]をクリックします。

フルスクリーンページレイアウト

その後、スライダーの設定を開き、ボタンのスタイルをスライダーのボタンオプションカテゴリに貼り付けます。

フルスクリーンページレイアウト

個々のスライドに背景オーバーレイを追加することもできます。

フルスクリーンページレイアウト

ヘッダーとボトムフッターバーの調整

フッターを全幅に拡張するカスタムCSSの小さなスニペットをすでに追加したことを覚えているかもしれません。これは、メインメニューバーも全幅にすることを期待していたものです。プライマリメニューバーを全幅にするには、WordPressダッシュボードに移動し、[Divi]> [テーマカスタマイザー]> [ヘッダーとナビゲーション]> [プライマリメニューバー]に移動します。次に、[全幅にする]オプションをオンにします。

フルスクリーンページに下部フッターバーを表示しているので、デザインに合わせて下部バーの背景色を更新できます。テーマカスタマイザーにとどまり、[フッター]> [ボトムバー]に移動します。次に、背景色を＃2a2e40に設定します。

次に、変更を公開します。

フルスクリーンページレイアウト

最終結果

これが最終的なデザインです。すべてがブラウザウィンドウ内にうまく収まっていることに注目してください。

フルスクリーンページレイアウト

また、ブラウザをさまざまなサイズに調整したときの外観を確認してください。

フルスクリーンページレイアウト

また、カスタムCSSを980pxを超えるブラウザー幅にのみ適用したため、モバイルデバイスではデザインが通常にフォールバックすることを忘れないでください。

こちらはタブレットとスマートフォンです。

フルスクリーンページレイアウト

最終的な考え

いくつかのCSSスニペットを使用してセクションの高さをブラウザーの高さに適切に調整する方法を理解すれば、Diviでカスタムのフルスクリーンページレイアウトを作成することはそれほど圧倒的ではありません。しかし、それができたら、DiviBuilder内で無数のフルスクリーンページデザインを作成できます。ブラウザウィンドウ内にすべてを表示したままにする場合は、コンテンツを最小限に抑えるように注意してください。

このタイプのデザインは、個人のサイト、プロモーションオファー、およびあらゆる種類のランディングページに適しています。また、コンテンツがほとんどなく、下部のフッターバーがページの途中に表示されないようにする場合にも最適なソリューションです。

また、Diviの全幅ヘッダーモジュールを使用するオプションを忘れないでください。この投稿で使用されている方法と同じ柔軟性はありませんが、コンテンツが最小限のページには最適です。

フルスクリーンページをテーマにした投稿をさらにいくつかご紹介します。

Diviで上と下のスクロールリンクを使用してフルスクリーンセクションを作成する方法
アニメーションスクロールボタンを使用して、独自のフルスクリーンDiviレイアウトを設計する
もっと

以下のコメントであなたからの連絡を楽しみにしています。

乾杯！