如何使用 Divi 的 Theme Builder 創建 404 頁面模板

Divi 的主題生成器和內置設計選項打開了大量新門。 您現在比以往任何時候都能夠自定義客戶登陸的每個頁面。 這包括設置 404 頁面。 在本教程中，我們將向您展示如何創建漂亮的 404 頁面模板並將其立即應用於您的網站。 我們將只使用 Divi 的內置選項，您也可以免費下載模板 JSON 文件。 我們希望本教程能激發您在下一個 404 頁面設計中發揮創意。

讓我們開始吧！

預覽

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

桌面

移動的

免費下載 404 頁面模板

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

下載文件

免費下載

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

下載

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

訂閱我們的 YouTube 頻道

1.轉到Divi Theme Builder並創建新模板

轉到 Divi 主題生成器

要開始創建 404 頁面模板，請轉到 Divi 設置中的 Divi Theme Builder。

創建新模板

單擊“添加新模板”並為您的 404 頁面設置新模板。

• 使用於：404 頁面

隱藏頁眉和頁腳區域

單擊眼睛圖標，繼續隱藏 404 頁面的自定義頁眉和頁腳。

構建全局體

完成所有前面的步驟後，您可以通過選擇“構建自定義正文”開始構建 404 頁面正文。

2.開始構建404頁面正文

添加新部分

背景顏色

進入模板編輯器後，您會注意到頁面上的一個部分。 打開此部分並添加白色背景色。

• 背景顏色：#FFFFFF

底部分隔線

移至該部分的設計選項卡並添加底部分隔線：

• 分隔線樣式：在列表中查找
• 分隔線顏色：#ffee00
• 分隔線高度：25vw（台式機）、77vw（平板電腦）、90vw（手機）
• 分隔線翻轉：垂直
• 分隔線安排：在部分內容下方

間距

接下來在不同的屏幕尺寸中添加一些自定義填充值。

• 頂部填充：4.6vw（台式機）、23vw（平板電腦）、25vw（手機）
• 底部填充：4.6vw（台式機）、13vw（平板電腦）、11vw（手機）

添加第 1 行

列結構

完成部分設置後，您可以添加第一行。 選擇以下列結構：

漿紗

還沒有添加任何模塊，打開行設置並允許行佔據屏幕的整個寬度。

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

間距

接下來修改行的頂部和底部填充值。

• 頂部填充：2vw
• 底部填充：2vw

將文本模塊 1 添加到列

添加內容

是時候開始添加模塊了！ 我們需要的第一個模塊是文本模塊。 插入一些您選擇的段落內容。

文字設置

轉到模塊的設計選項卡並按如下方式更改文本設置：

• 文字字體：單調
• 文字顏色：#000000
• 文字大小：24vw（桌面），35vw（平板電腦和手機）
• 文本行高：1em
• 文本對齊：居中

將文本模塊 #2 添加到列

添加內容

進入下一個模塊，這是另一個文本模塊。 添加一些您選擇的內容。

文字設置

相應地更改模塊的文本設置：

• 文字字體：蒙特塞拉特
• 文字顏色：#000000
• 文字大小：1.2vw（桌面）、2.6vw（平板電腦）、3vw（手機）
• 文本行高：1.8em
• 文本對齊：居中

間距

通過添加一些自定義頂部和底部邊距來完成模塊的設置。

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

添加第 2 行

列結構

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

漿紗

打開行設置並調整大小設置如下：

• 寬度：32vw（桌面），50vw（平板電腦和手機）
• 最大寬度：100%

間距

也修改間距設置。

• 上邊距：7vw（桌面）、22vw（平板電腦）、59vw（手機）
• 頂部填充：0vw
• 底部填充：0vw

第 1 列和第 2 列設置

默認背景顏色

完成常規行設置後，您可以單獨打開每一列並進行一些更改，從背景顏色開始。

• 背景顏色：#FFFFFF

懸停背景顏色

修改懸停時的背景顏色。

• 背景顏色：#fffa00

邊界

也添加一些圓角。

• 圓角：20px（所有角）

默認框陰影

轉到框陰影設置並應用以下更改：

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

懸停框陰影

修改懸停時的陰影顏色。

• 陰影顏色：rgba(0,0,0,0.12)

默認變換比例

然後，轉到變換比例設置並確保默認值保持為“100%”。

• 正確：100%
• 底部：100%

懸停變換比例

在懸停時更改變換比例值：

• 正確：110%
• 底部：110%

將文本模塊添加到第 1 列

添加內容

完成行和列設置後，將文本模塊添加到第 1 列，其中包含您選擇的一些段落內容。

添加鏈接

接下來添加模塊的鏈接。

• 模塊鏈接網址：#
• 模塊鏈接目標：在同一窗口中

文字設置

轉到模塊的設計選項卡並按如下方式更改文本設置：

• 文字字體：蒙特塞拉特
• 文字字體粗細：粗體
• 文本字體樣式：大寫
• 文字顏色：#000000
• 文字大小：0.8vw（桌面）、2vw（平板電腦）、3vw（手機）
• 文字字母間距：1px
• 文本行高：1.8em
• 文本對齊：居中

間距

然後，轉到間距設置並在不同的屏幕尺寸上應用一些自定義的頂部和底部填充值。

• 頂部填充：2vw（桌面）、3vw（平板電腦）、4vw（手機）
• 底部填充：2vw（桌面）、3vw（平板電腦）、4vw（手機）

克隆文本模塊並在第 2 列中放置重複項

完成文本模塊及其所有設置後，您可以克隆整個模塊並將副本放在第 2 列中。

更改內容

確保更改重複模塊的內容。

更改鏈接

也換個鏈接。

3. 保存主題生成器更改

設計完成後，您可以保存所有模板的設置。 就是這樣！

預覽

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

桌面

移動的

最後的想法

在這篇文章中，我們向您展示瞭如何設置和創建 404 頁面模板。 Divi 的主題構建器和內置設計選項允許您使用自定義模板觸摸網站的每個頁面。 我們希望您喜歡所有 Divi Theme Builder 教程！ 如果您有任何問題或建議，請隨時在下面的評論部分發表評論。

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