如何在 Divi 中使用獨特的切換創建全分屏佈局

分屏佈局是為您的 Divi 網站添加精美平衡和非傳統設計的好方法。 借助 Divi 的新位置選項，我們可以使用兩個相鄰的 Divi 部分創建分屏佈局設計。 這為使用 Divi Builder 構建更獨特的分屏佈局打開了大門。 在本教程中，我們將探索一些獨特的設計功能，同時在 Divi 中創建具有獨特切換的完整分屏佈局。

讓我們開始吧。

搶先看

這是我們將在本教程中構建的設計的快速瀏覽。

切換打開

切換關閉

移動的

免費下載佈局

要了解本教程中的設計，您首先需要使用下面的按鈕下載它。 要訪問下載，您需要使用下面的表格訂閱我們的 Divi Daily 電子郵件列表。 作為新訂戶，您每週一將收到更多的 Divi 善良和免費的 Divi 佈局包！ 如果您已經在列表中，只需在下面輸入您的電子郵件地址，然後單擊下載。 您不會被“重新訂閱”或收到額外的電子郵件。

下載文件

免費下載

加入 Divi 時事通訊，我們將通過電子郵件向您發送一份最終的 Divi 登陸頁面佈局包，以及大量其他令人驚嘆的免費 Divi 資源、提示和技巧。 跟隨，您將很快成為 Divi 大師。 如果您已經訂閱，只需在下面輸入您的電子郵件地址，然後單擊下載即可訪問佈局包。

下載

您已成功訂閱。 請檢查您的電子郵件地址以確認您的訂閱並獲得免費的每週 Divi 佈局包！

要將佈局導入您的頁面，只需提取 zip 文件並將 JSON 文件拖到 Divi Builder 中。

讓我們進入教程，好嗎？

你需要什麼開始

首先，您需要執行以下操作：

1. 如果您還沒有安裝並激活 Divi 主題。
2. 在WordPress中新建一個頁面，在前端使用Divi Builder編輯頁面（visual builder）。
3. 選擇“從頭開始構建”選項。

之後，您將有一個空白畫布開始在 Divi 中進行設計。

第 1 部分：創建具有兩個部分的分屏佈局

對於此設計，我們將引入一種新技術，將兩個 Divi 部分彼此相鄰放置以創建分屏設計。 首先，向默認部分添加一列行。 這將開始我們第一部分的設計。

第 1 節設置

對於兩部分中的第一部分，讓我們首先添加以下設計設置：

背景

• 添加背景圖片
• 漸變背景左顏色：#ffffff
• 漸變背景左顏色：rgba(255,255,255,0.45)

尺寸和間距

然後更新大小和間距，使該部分佔據瀏覽器寬度的 50% 和瀏覽器高度的 100%。

• 寬度：50%（桌面），100%（平板電腦和手機）
• 最小高度：900px（桌面），無（平板電腦和手機）
• 高度：100vh（台式機），自動（平板電腦和手機）
• 填充：0px 頂部，0px 底部

頂部分隔線

• 頂部分隔線樣式：見截圖
• 頂部分隔線顏色：#333333
• 頂部分隔線高度：50vh（台式機），10vh（平板電腦和手機）
• 頂部分隔線水平重複：0.5x（台式機），1x（平板電腦和手機）
• 頂部分隔線排列：下方部分內容

底部分隔線

• 底部分隔線樣式：見截圖
• 底部分隔線顏色：#02c39a
• 底部分隔線高度：50vh（台式機）、30vh（平板電腦和手機）
• 底部分隔線水平重複：0.5x（台式機），1x（平板電腦和手機）
• 底部分隔線排列：下方部分內容

第 2 節

複製第 1 節

要創建將佔據分屏佈局右側的相鄰部分，請複制部分 1。

然後按如下方式更新設置：

位置

• 位置：絕對（桌面），相對（平板和手機）
• 位置：右上角
• Z指數：10

背景

• 背景顏色：無/白色

頂部分隔線更新

• 頂部分隔線樣式：見截圖
• 頂部分隔線顏色：#02c39a
• 頂部分隔線水平重複：1x
• 頂部分隔線翻轉：垂直

分隔線應與第 1 部分中相鄰的頂部集管完美對齊。

底部分隔線

• 底部分隔線樣式：見截圖
• 底部分隔線顏色：#f0f3bd
• 底部分隔線水平重複：1x
• 底部分隔線翻轉：垂直

第 2 部分：第 1 部分標題和菜單

現在兩部分佈局已準備就緒，我們可以開始向每個部分添加內容。

創建標題

首先，我們將在左側部分創建一個大標題。

行設置

在添加文本模塊之前，我們需要更新第 1 部分中行的行設置，如下所示：

• 天溝寬度：1
• 寬度：100%
• 最大寬度：100%
• 填充：頂部 0px，底部 0px，右側 10%
• 位置：絕對（桌面），相對（平板和手機）
• 位置：左中

文本模塊

行設置到位後，該行應在該部分內垂直對齊。 接下來，向該行添加一個新的文本模塊。

文字內容

打開文本模塊的設置並更新以下內容：

<h1>Divi <br />Web <br />Design</h1>

文字設計

然後更新文字設計設置如下：

• 標題字體： Poppins
• 標題字體粗細：粗體
• 標題文本對齊方式：右
• 標題文字大小：10vw
• 標題線高度：1.2em
• 填充：左 5%

創建菜單

對於此佈局，由於我們有兩個相鄰的部分，我們有機會向其中一個或兩個部分添加 6 列佈局。 這非常適合在該部分的底部創建一個漂亮的圖標菜單。

這是如何做到這一點......

添加新行

要創建底部菜單，請在第 1 部分中的行下方添加一個新的單列行。我們最初添加單列佈局，因為稍後我們將復制該列以創建所有六列。

行設置

然後更新以下行設置：

• 天溝寬度：1
• 寬度：100%
• 最大寬度：100%
• 填充：0px 頂部，0px 底部
• 位置：絕對（桌面）、相對（平板電腦和手機）
• 位置：左下角
• Z指數：3

模糊模塊

接下來，向新行添加一個模糊模塊。

模糊內容

然後更新blurb內容如下：

• 標題：商業
• 圖標：建築物

模糊樣式

然後更新設計設置如下：

• 圖標顏色：#333333
• 圖標字體大小：40px
• 文本對齊：居中
• 標題文字大小：12px

然後將以下自定義 CSS 添加到 Blurb Image

margin-bottom: 10px;

重複列

現在我們在第一列中設計了我們的圖標，我們可以通過將整個列複製 5 次來加快其他 5 個圖標的創建和設計。

更新 Blurbs 的內容

創建所有 6 個列/圖標後，返回並更新每個簡介的標題、圖標和 URL。

第 3 部分第 2 部分切換

現在第 1 部分已完成，我們可以開始將切換添加到分屏佈局的右側部分。 總共會有三個切換，對應於左側每個標題中的大字。 每個開關都將在桌面上獲得一個自定義的絕對位置，以保持它們的位置。

行設置

在開始添加切換模塊之前，我們需要優化行的大小和間距。 打開右側部分行的行設置並更新以下內容：

• 天溝寬度：1
• 寬度：100%
• 最大寬度：100%（桌面），無（平板電腦和手機）
• 高度：100%

列高

現在行的高度等於節的高度，我們需要對列做同樣的事情。 為此，請將以下自定義 CSS 添加到列的主要元素：

height: 100%;

頂部切換模塊

列高就位後，讓我們將第一個切換模塊添加到行中。

切換內容

然後使用標題“Divi”更新切換內容並粘貼以下正文內容：

Your content goes here. Edit or remove this text inline or in the module Content settings. Your content goes here.

<a href="#">| Learn More ></a>

切換設計

更新切換設計如下：

• 圖標顏色：#333333
• 圖標字體大小：40px
• 打開切換背景顏色：透明
• 關閉切換背景顏色：透明
• 打開標題文本顏色：#333333
• 標題文字顏色：#333333
• 標題字體: Poppins
• 標題字體粗細：超輕
• 標題文字大小：40px
• 正文顏色：#333333
• 鏈接字體粗細：#333333
• 鏈接字體粗細：粗體
• 鏈接字體樣式：TT
• 鏈接文字顏色：#333333
• 鏈接字母間距：3px（桌面），5px（懸停）

切換大小和位置

• 寬度：50%（桌面），80%（平板電腦和手機）
• 最大寬度：400px
• 邊框寬度：0px
• 切換圖標自定義 CSS：

  left:-60px;

• 位置：絕對（桌面）、相對（平板電腦和手機）
• 垂直偏移：22%
• 水平偏移：50%
• Z指數：2

添加到切換模塊的自定義 CSS 將切換圖標放置在切換的左側。 並且位置設置使用百分比長度單位將開關置於絕對位置，該單位將隨瀏覽器寬度縮放。

底部切換模塊

重複頂部切換

要創建底部切換，請複制剛剛創建的切換。

更新位置

然後使用圖層框打開重複切換設置並更新位置偏移，如下所示：

• 垂直偏移：70%

中間切換模塊

重複底部切換

要創建中間切換，請複制底部切換。

更新位置

然後更新以下內容：

• 位置：左中
• 水平偏移：19px

更新大小

• 寬度：95%
• 最大寬度：500px

自定義 CSS

對於可選的設計功能，我們可以向主元素添加自定義 CSS 片段以對齊標題右側的文本。

為此，請將以下 CSS 粘貼到主元素中：

display:flex;
align-items:center;

分隔線

現在我們的切換已經到位，我們可以添加一些分隔線來將頂部和底部切換與左側部分中的相應單詞連接起來。

頂部分隔模塊

要創建頂部分隔線，請在頂部切換下添加一個新的分隔模塊。

分隔線設計

然後按如下方式更新分隔線設計設置：

• 線條顏色：#333333
• 線位置：垂直居中
• 分隔線重量：2px
• 寬度：50%
• 變換平移 Y 軸：29px
• 變換平移 X 軸：-12px
• 動畫風格：幻燈片
• 動畫方向：右
• 動畫持續時間：2000ms
• 動畫強度：10%
• 動畫開始不透明度：100%

分隔線的可見性和位置

現在，我們需要做的就是隱藏移動設備上的分隔線並將其定位，使其與頂部切換對齊。

• 禁用：手機和桌面
• 位置：絕對
• 垂直偏移：22%
• Z指數：1

底部分隔器模塊

複製頂部分隔器模塊

要創建底部分隔線，請複制頂部分隔線模塊。

更新位置

然後更新位置偏移以與底部切換對齊：

• 垂直偏移：70%

最後結果

完成後，在實時頁面上查看最終結果。

切換打開

切換關閉

移動的

最後的想法

這種完整的分屏佈局具有一些獨特的設計技術，這些技術將在未來的許多設計中派上用場。 雙節提供了無數的列組合和節分隔器設計。 並且能夠放置切換絕對會派上用場，以精確放置重要信息。 我希望它有幫助！

我期待在評論中收到您的來信。

乾杯!