如何在 Divi 中設計自定義全屏頁面佈局

已發表: 2018-12-27

全屏頁面佈局在網頁設計世界中真的可以派上用場。全屏頁面佈局的一個主要好處是可見性。對於全屏頁面，所有頁面內容都保留在瀏覽器窗口中。在用戶快速滾動的世界中，從一開始就將您的所有內容都包含在瀏覽器視口中可以讓查看者耳目一新，還可以幫助轉換。

如果您熟悉 Divi，您應該已經知道內置全屏功能的 fullwidth header 模塊。這是創建具有最少內容的全屏頁面的絕佳解決方案。但是，如果您想利用具有多行和模塊的常規部分來構建全屏頁面佈局，那麼這篇文章就是為您準備的。我將向您展示一些簡單的技巧，以確保您的頁面內容（甚至頁眉和頁腳欄）適合您的瀏覽器窗口，然後在不同的瀏覽器尺寸上很好地縮放。

讓我們開始吧。

搶先看

這是我們將在本教程中創建的最終全屏頁面佈局的先睹為快。

全屏頁面佈局

請注意頁面高度如何調整到瀏覽器窗口的高度，以便一切都保持原位。

全屏頁面佈局

你需要什麼

對於本教程，您真正需要的只是 Divi。我還將使用可從 Divi Builder 訪問的 Fitness Gym Layout 包。

訂閱我們的 YouTube 頻道

如何在 Divi 中製作自定義全屏頁面

在進入本教程的主要設計之前，我想我會向您展示在 Divi 中創建全屏頁面背後的基本思想。畢竟，您可能會對它的簡單性感到驚訝。

基本思想解釋

在新頁面中，選擇空白頁面模板。這將阻止主頁眉和底部頁腳欄顯示在頁面上（稍後我將向您展示如何包含它們）。
全屏頁面佈局

現在在前端部署 Divi Builder 以從頭開始構建您的頁面。然後添加一個具有一列行的常規部分。

接下來，將倒數計時器模塊（或任何模塊）添加到一列行。

全屏頁面佈局

為了使事情更容易看，在倒數計時器中取出背景顏色並為該部分添加背景顏色，以便我們可以更好地識別頁面上該部分的高度。當前部分的高度是相對於它包含的內容的高度。在這種情況下，我們擁有的唯一內容是帶有 sing 模塊的單行。

全屏頁面佈局

現在打開部分設置並轉到高級選項卡並將以下自定義 CSS 添加到主元素：

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

全屏頁面佈局

將部分的最小高度設置為 100vh（視口高度的 100%）將確保您的部分跨越整個瀏覽器窗口（或視口）。 “display:flex”屬性是一種快速簡便的方法，可以讓您的部分內容垂直居中。

查看此有用指南，了解有關 vh 長度單位的更多信息。

在隱身瀏覽器中查看您的實時頁面以查看結果，因為如果您登錄到 WordPress，頂部管理欄會稍微偏離瀏覽器高度。

全屏頁面佈局

那麼你去。這就是如何在 Divi 中創建自定義全屏頁面佈局的基本思想。

將頁眉和頁腳合併到您的全屏頁面中。

如果您想在全屏頁面中包含頁眉和底部頁腳欄，您需要進行一個小的調整。首先，將頁面模板改回頁面編輯器後端的默認模板。

全屏頁面佈局

包括頁眉和底部頁腳將為您的瀏覽器視口增加額外的高度，因此該部分將不再像以前那樣完美地適合。這是因為您的頁面現在由一個部分高度組成，該部分高度是視口高度的 100% 加上頁眉和底部頁腳欄的高度。這太多了。為了解決這個問題，我們需要將我們部分中的自定義 CSS 調整為以下內容：

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

唯一的區別是最小高度值。現在有一個計算，用於說明頁眉和底部頁腳欄的附加高度（以像素為單位）。

132px 是基於頁眉默認高度 (80px) 和底部頁腳欄默認高度 (53px) 的總和。

全屏頁面佈局

現在我們對如何在 Divi 中創建自定義全屏頁面有了基本的了解，讓我們深入研究一個更複雜的設計。

構建完整的全屏頁面設計

為了開始這個設計，創建一個新頁面，給你的頁面一個標題，然後部署 Divi Builder。選擇“選擇預製佈局”選項，然後從“從庫中加載”彈出窗口中選擇“健身房佈局”頁面。然後單擊以使用定價頁面。

全屏頁面佈局

一旦佈局加載到構建器中，單擊按鈕在前端（可視化構建器）上構建，您就可以開始了。

創建新部分

預製佈局有助於啟動設計。我們將沿途使用這些佈局設計元素，並在完成後刪除其餘的佈局。要為我們的全屏佈局創建主要部分，請繼續創建一個新的常規部分並將其拖到頁面的最頂部。然後在行中添加四分之一四分之一二分之一列結構。這將是我們全屏頁面的基礎。

全屏頁面佈局

將模塊添加到您的列

使用多選（按住 ctrl/cmd 並單擊），選擇佈局第一部分前兩行中的所有模塊，並將它們拖到頁面頂部新部分的第一列中。

全屏頁面佈局

接下來，使用多選複製佈局相同第一部分第三行中的所有模塊，並將它們粘貼到頁面頂部新部分的第二列中。

全屏頁面佈局

由於白色背景，文本將被隱藏，但我們稍後將更改背景顏色。

在第三列中，添加一個滑塊模塊。這個滑塊最終將跨越屏幕的整個高度，但現在讓我們只設置內容。在滑塊設置中，刪除默認存在的兩個默認幻燈片之一，然後單擊打開單個幻燈片的設置。

全屏頁面佈局

在幻燈片設置中，添加一個背景圖像，確保它足夠大以跨越瀏覽器的整個高度。

全屏頁面佈局

這會處理我們現在需要的所有模塊。我們稍後將重新審視設計設置，但現在，讓我們自定義我們的行。

自定義行設置

打開行設置並開始向第 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”的 CSS ID。記住這兩個 CSS ID 很重要，因為我們需要將它們添加到我們的部分和滑塊中。一旦我們這樣做了，css“height: calce(100vh – 133px)”將被應用，使它們都全屏（跨越瀏覽器窗口的整個高度）。

第二個代碼段將 display flex 屬性應用於該部分，使所有部分內容垂直居中。有關這方面的更多信息，請查看我們關於如何在 Divi 中垂直對齊內容的帖子。

第三個片段是完全可選的。這只是使底部頁腳欄全寬以更好地適應設計，並匹配我們將添加的全寬頁眉樣式。

現在您已經有了外部 CSS，我們可以將 CSS ID 添加到我們的部分和滑塊中。轉到部分設置並添加以下 CSS ID：

CSS ID：全文

全屏頁面佈局