使用低 Z 索引模塊邊框作為 Divi 的背景

當您嘗試為您的網站創建獨特的設計時，跳出框框思考可以幫助您實現目標。 在過去的教程中，我們經常為其內置選項使用設計元素。 它不僅可以幫助您實時查看您創建的設計，還可以幫助您使其在不同屏幕尺寸上的外觀完全符合您的要求。 在今天的 Divi 教程中，我們將向您展示如何使用模塊的低 z 索引邊框來創建可用於多種用途的令人驚嘆的設計。 您也可以免費下載 JSON 文件！

讓我們開始吧。

預覽

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

桌面

移動的

免費下載低 Z 索引模塊邊框佈局

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

下載文件

免費下載

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

下載

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

訂閱我們的 YouTube 頻道

讓我們開始重建吧！

添加新部分

間距

首先向您正在處理的頁面添加一個新部分。 打開部分設置並刪除默認的頂部和底部填充。

• 頂部填充：0px
• 底部填充：0px

溢出

轉到高級選項卡並更改溢出。

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

添加新行

列結構

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

背景顏色

尚未添加任何模塊，打開行設置並更改背景顏色。

• 背景顏色：#f3f3e6

漿紗

轉到設計選項卡並相應地更改尺寸設置：

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

間距

刪除下一行的默認頂部和底部填充。

• 頂部填充：0px
• 底部填充：0px

第 1 列設置

完成行設置後，您可以打開第一列的設置並進行一些更改。

漸變背景

使用以下設置添加漸變背景：

• 顏色 1：RGBA(0,0,0,0)
• 顏色 2：#2e2d3c
• 梯度方向：90度
• 起始位置：54%
• 結束位置：54%

盒子陰影

也添加一個框陰影。

• 框陰影模糊強度：80px
• 陰影顏色：rgba(0,0,0,0.3)

將文本模塊 #1 添加到第 1 列

將內容框留空

是時候開始添加模塊了！ 在第一列中插入一個文本模塊，並將內容框留空。 我們將僅將此模塊用於其內置設置。 由於其位置（第一列中的第一個模塊），該模塊的 z 索引較低，並且會出現在其後的所有其他模塊下方。

漿紗

在設計選項卡上移動並更改不同屏幕尺寸的寬度。

• 寬度：24vw（桌面），50vw（平板電腦和手機）

間距

接下來轉到間距設置並按如下方式更改值：

• 最高利潤率：15vw
• 左邊距：12vw（桌面），30vw（平板電腦和手機）
• 頂部填充：32vw（桌面）、67vw（平板電腦）、60vw（手機）

邊界

通過添加邊框完成模塊設計。

• 邊框寬度：2vw（桌面）、4vw（平板電腦）、5vw（手機）
• 邊框顏色：#00ffb2

將文本模塊 #2 添加到第 1 列

添加內容

將另一個文本模塊添加到第 1 列並輸入您選擇的一些內容。

背景顏色

將背景顏色與列的第二個漸變顏色相匹配。

• 背景顏色：#2e2d3c

文字設置

轉到設計選項卡並相應地更改文本設置：

• 文字字體：蒙特塞拉特
• 文字字體粗細：粗體
• 文本字體樣式：大寫
• 文本對齊：居中
• 文字顏色：#f3f3e6
• 文字大小：4vw
• 文字字母間距：-0.2vw

漿紗

也改變寬度。

• 寬度：27vw

間距

然後，轉到間距設置並使用不同屏幕尺寸的值。

• 最高邊距：-23.2vw（台式機），-46vw（平板電腦和手機）
• 左邊距：21.5vw（桌面）、64.5vw（平板電腦）、64vw（手機）
• 頂部填充：4vw
• 底部填充：4vw
• 左填充：2vw
• 右填充：2vw

變換旋轉

通過在轉換設置中旋轉模塊來完成模塊的設置。

• 左：270度

將圖像模塊添加到列

上傳圖片

我們在第 1 列中需要的下一個也是最後一個模塊是圖像模塊。 上傳您選擇的半透明圖像。

漿紗

轉到設計選項卡並啟用“強制全角”選項。 這將幫助我們使圖像在不同的屏幕尺寸上具有響應性。

• 強制全角：是

間距

接下來打開間距設置並按如下方式更改值：

• 在圖像下方顯示空間：否
• 上邊距：-6vw
• 左邊距：3vw
• 右填充：22vw（桌面），47vw（平板電腦和手機）

過濾器

我們還在過濾器設置中降低圖像的飽和度。

• 飽和度：43%

將文本模塊 #2 添加到第 2 列

添加內容

進入下一欄！ 輸入您選擇的一些內容。

文字設置

移至設計選項卡並按如下方式更改文本設置：

• 文字字體：蒙特塞拉特
• 文本對齊：對齊
• 文字顏色：#2e2d3c
• 文字大小：0.9vw（桌面）、2.2vw（平板電腦）、2.5vw（手機）
• 文本行高：2.5em

間距

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

• 上邊距：10vw（台式機），15vw（平板電腦和手機）
• 左填充：8vw
• 右填充：8vw

克隆文本模塊

完成文本模塊後，將其克隆一次。

刪除頂部邊距

刪除重複的頂部邊距。

在第 2 列的兩個文本模塊之間放置新的文本模塊

添加內容

在列中的兩個現有文本模塊之間添加另一個文本模塊，然後輸入您選擇的一些內容。

文字設置

更改文本設置如下：

• 文字字體：蒙特塞拉特
• 文字字體粗細：半粗體
• 文字顏色：#2e2d3c
• 文字大小：2vw（桌面），5vw（平板電腦和手機）
• 文本行高：1.4em

間距

也更改填充值。

• 頂部填充：4vw（桌面）、8vw（平板電腦）、10vw（手機）
• 底部填充：4vw（桌面）、8vw（平板電腦）、10vw（手機）
• 左填充：4vw
• 右填充：4vw

將按鈕模塊添加到第 2 列

添加副本

進入下一個也是最後一個按鈕模塊。 插入一些您選擇的副本。

按鈕設置

轉到設計選項卡並更改按鈕設置。

• 為按鈕使用自定義樣式：是
• 按鈕文字大小：0.9vw（桌面）、2.5vw（平板電腦）、3vw（手機）
• 按鈕文字顏色：#f3f3e6
• 按鈕背景顏色：#2e2d3c
• 按鈕邊框寬度：0px
• 按鈕邊框半徑：0px
• 按鈕字體：蒙特塞拉特

間距

通過添加一些自定義間距值來完成按鈕模塊設計，您就大功告成了！

• 上邊距：2vw（台式機），8vw（平板電腦和手機）
• 下邊距：10vw（台式機），15vw（平板電腦和手機）
• 左邊距：8vw
• 頂部填充：1.5vw（桌面）、2.5vw（平板電腦）、3vw（手機）
• 底部填充：1.5vw（台式機）、2.5vw（平板電腦）、3vw（手機）
• 左填充：4vw（桌面）、8vw（平板電腦）、10vw（手機）
• 右填充：4vw（桌面）、8vw（平板電腦）、10vw（手機）

預覽

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

桌面

移動的

最後的想法

在這篇文章中，我們向您展示瞭如何創造性地使用空模塊的低 z 索引邊框設置來創建令人驚嘆的結果。 我們還在我們的設計中包含了一些旋轉的副本。 本教程將展示 Divi 的內置選項的多功能性，以及如何調整每個元素的設置以使其與不同的屏幕尺寸相匹配。 如果您有任何問題或建議，請務必在下方評論區留言！

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