使用 Divi 以令人驚嘆的設計優雅地將您的副本隱藏在分區分隔線下方

Divi 的內置選項允許您將一種特定的設計設置用於多種用途，從而有助於激發創造力。 今天，我們將以一種獨特的方式使用分區分隔符來優雅地隱藏您網站的副本。 這是在不需要自定義代碼的情況下向頁面添加額外交互的好方法。 我們將從頭開始重新創建一個漂亮的示例，您也可以免費下載示例的 JSON 文件。

讓我們開始吧！

預覽

在我們深入學習教程之前，讓我們快速瀏覽一下不同屏幕尺寸的結果。

桌面

移動的

免費下載佈局

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

下載文件

免費下載

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

下載

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

讓我們開始重建吧！

添加第 1 節

您需要做的第一件事是向您正在處理的頁面添加一個新的常規部分。

添加新行

列結構

繼續使用以下列結構添加新行：

將文本模塊添加到列

添加 H2 內容

我們在這一行中需要的第一個模塊是帶有一些 H2 內容的文本模塊。

H2 文本設置

轉到設計選項卡並更改 H2 文本設置。

• 標題 2 字體：Playfair Display
• 標題 2 字體粗細：常規
• 標題 2 文本對齊：居中
• 標題 2 文字大小：70 像素（桌面）、40 像素（平板電腦）、30 像素（手機）

將分隔模塊添加到列

能見度

我們在這一行中需要的第二個也是最後一個模塊是分頻器模塊。 確保啟用了“顯示分隔線”選項。

• 顯示分隔線：是

線

我們還更改了設計選項卡中的線條顏色。

• 線條顏色：#000000

漿紗

繼續調整大小設置並應用以下設置：

• 分隔線重量：5px
• 寬度：27%
• 模塊對齊：居中

添加第 2 節

背景顏色

將第二個常規部分添加到您的頁面，打開部分設置並更改背景顏色。

• 背景顏色：#f7f7f7

溢出

確保在高級選項卡中也隱藏了部分溢出。 這將確保沒有超出部分容器的內容。

• 水平溢出：隱藏
• 垂直溢出：隱藏

過渡

在這篇文章的後面，我們將創建一個懸停過渡。 為確保此操作順利進行，我們將在高級選項卡中增加過渡持續時間。

• 轉換持續時間：800ms

添加新行

列結構

繼續使用以下列結構添加新行：

漿紗

在不添加任何模塊的情況下，打開行設置並通過應用以下設置允許行佔據部分容器的整個寬度：

• 使用自定義裝訂線寬度：是
• 天溝寬度：1
• 寬度：100%
• 最大寬度：100%

將文本模塊 #1 添加到列

添加H3內容

是時候開始添加模塊了，從文本模塊開始。 輸入您選擇的一些 H3 內容。

H3 文本設置

轉到設計選項卡並更改 H3 文本設置。

• 標題 3 字體：Playfair Display
• 標題 3 文本對齊：居中
• 標題 3 文本顏色：#000000
• 標題 3 文字大小：3vw（桌面）、6vw（平板電腦）、7vw（手機）

將分隔模塊添加到列

能見度

我們在這一行中需要的第二個模塊是分頻器模塊。 確保啟用了“顯示分隔線”選項。

• 顯示分隔線：是

線

還要更改分隔線的顏色。

• 線條顏色：#000000

間距

並添加一些自定義的頂部和底部邊距以創建空間。

• 最高利潤率：2vw
• 底邊距：2vw

將文本模塊添加到列

添加內容

我們需要的下一個模塊是另一個文本模塊。 添加一些您選擇的段落內容。

文字設置

移至設計選項卡並更改文本設置。

• 文字字體：Open Sans
• 文本對齊：居中
• 文字顏色：#777777
• 文字大小：0.8vw（桌面）、1.7vw（平板電腦）、2.2vw（手機）
• 文本行高：1.8em

間距

接下來添加一些自定義邊距值。

• 左邊距：3vw（桌面）、7vw（平板電腦）、10vw（手機）
• 右邊距：3vw（桌面），7vw（平板電腦和手機）

將按鈕模塊添加到列

添加副本

我們在這一行中需要的下一個也是最後一個模塊是按鈕模塊。 輸入您選擇的一些副本。

結盟

在設計選項卡中更改按鈕對齊方式。

• 按鈕對齊：居中

按鈕設置

繼續設置按鈕設置的樣式。

• 為按鈕使用自定義樣式：是
• 按鈕文字大小：1vw（桌面）、2vw（平板電腦）、3vw（手機）
• 按鈕文字顏色：#000000
• 按鈕邊框寬度：1px
• 按鈕邊框半徑：0px
• 按鈕字體：Playfair Display

間距

並添加一些自定義間距值。

• 最高利潤率：2vw
• 頂部填充：1vw
• 底部填充：1vw
• 左填充：3vw（桌面）、6vw（平板電腦）、8vw（手機）
• 右填充：3vw（桌面）、6vw（平板電腦）、8vw（手機）

附加部分設置

默認頂部分隔線

完成將所有模塊添加到該部分後，是時候進行一些其他部分設置了。 打開部分設置，轉到設計選項卡並添加以下頂部分隔線：

• 分隔線樣式：在列表中查找
• 分隔線顏色：#e8e8e8
• 分隔線高度：7000px
• 分隔線翻轉：垂直
• 分隔線安排：在部分內容的頂部

懸停頂部分隔線

在懸停時更改分隔線高度。

• 分隔線高度：0px

底部分隔線

還要添加一個底部分隔線。

• 分隔線樣式：在列表中查找
• 分隔線顏色：#5c26ff
• 分隔線高度：600px
• 分隔線安排：在部分內容的頂部

懸停底部分隔線

並在懸停時移除分隔線高度。

• 分隔線高度：0px

間距

正如您在這篇文章的預覽中所注意到的，我們將這一部分轉了一圈。 為此，我們首先需要在不同的屏幕尺寸上添加一些自定義邊距和填充值：

• 左邊距：10vw（桌面）、11vw（平板電腦）、0vw（手機）
• 右邊距：47vw（桌面）、11vw（平板電腦）、0vw（手機）
• 頂部填充：8vw（桌面）、15vw（平板電腦）、16vw（手機）
• 底部填充：8vw（桌面）、15vw（平板電腦）、16vw（手機）

邊界

繼續在每個角上添加“50vw”，將截面變成圓形。 我們還使用以下設置添加邊框：

• 邊框寬度：1px
• 邊框顏色：rgba(255,255,255,0)

懸停邊框

更改懸停時的邊框顏色。

• 邊框顏色：#000000

克隆部分兩次

完成所有部分設置後，您可以繼續克隆該部分兩次。

修改重複 #1

更改頂部分隔線顏色

我們將修改兩個部分的副本，從第一個開始。 打開部分設置並更改頂部分隔線顏色。

• 分隔線顏色：#5c26ff

更改底部分隔線顏色

還要修改底部分隔線顏色。

• 分隔線顏色：#ff3a5e

更改間距

然後，轉到間距設置並確保以下值適用：

• 上邊距：-20vw（台式機），0vw（平板電腦和手機）
• 左邊距：47vw（桌面）、11vw（平板電腦）、0vw（手機）
• 右邊距：10vw（桌面）、11vw（平板電腦）、0vw（手機）

修改重複 #2

更改頂部分隔線顏色

打開第二個副本的設置並更改頂部分隔線顏色。

• 分隔線顏色：#ff3a5e

更改底部分隔線顏色

還要更改底部分隔線顏色。

• 分隔線顏色：#e8e8e8

更改間距

並在這裡修改間距值。

• 上邊距：-20vw（台式機），0vw（平板電腦和手機）
• 底邊距：7vw
• 左邊距：10vw（桌面）、11vw（平板電腦）、0vw（手機）
• 右邊距：47vw（桌面）、11vw（平板電腦）、0vw（手機）

預覽

現在我們已經完成了所有步驟，讓我們最後看看不同屏幕尺寸的結果。

桌面

移動的

最後的想法

在這篇文章中，我們向您展示瞭如何優雅地將您的副本隱藏在分區分隔線下方。 這是一種以不同於您習慣的方式使用某些 Divi 直觀內置選項的好方法。 我們希望本教程也能激發您使用此技術創建自己的替代設計。 如果您有任何問題或建議，請務必在下方評論區留言！

如果您渴望了解有關 Divi 的更多信息並獲得更多 Divi 免費贈品，請確保訂閱我們的電子郵件時事通訊和 YouTube 頻道，這樣您將永遠是第一批了解此免費內容並從中受益的人之一。