為 Divi 下載 5 個免費邊框圖像

在為自己或客戶構建新網站時，擁有可以使用的額外資源總是很棒的。 這就是為什麼我們要確保您每週都會收到新的佈局包。 但是還有其他資源也可能派上用場，例如“邊框圖像”或您可以沿著 Divi 設計元素的一側或另一側使用的圖像，以增加風格的蓬勃發展。 使用 Divi 的內置選項以及這些邊框圖像可以帶來驚人的效果。 在這篇文章中，我們為您提供了 5 種不同的邊框圖片，您可以在下方免費下載。 我們將解釋如何充分利用這些邊框圖像並創建令人驚嘆的最終結果。

讓我們開始吧！

預覽

讓我們來看看您可以在本文下方進一步下載的不同邊框圖像。 對於每個形狀，您會發現 4 個版本：頂部、底部、左側和右側。 這些圖像將使您獲得與以下前四張圖像完全相同的結果：

免費下載圖像文件

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

下載文件

免費下載

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

下載

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

方法

• 下載並解壓包含所有 5 個邊框圖像的文件夾後，您將找到 4 個子文件夾：上邊框、下邊框、左邊框和右邊框
• 這意味著共有 20 個圖像文件可供您使用
• 在這篇文章的後面，您將找到與每個邊框邊相匹配的隨附設置
• 最重要的是，您可以將邊框圖像與漸變疊加相結合
• 這些顏色疊加將幫助您使圖像看起來像您想要的那樣充滿活力或微妙
• 您可以不受任何限制地自由使用這些邊框圖像，即使用於商業目的

創建整體設計

添加新部分

間距

讓我們從創建用於展示邊框圖像的整體設計開始。 打開一個新的或現有的頁面，添加一個新的常規部分並添加一些自定義填充：

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

添加新行

列結構

繼續使用以下列結構向您的部分添加新行：

漿紗

尚未添加任何模塊，打開行設置，轉到大小設置並使行全寬。

• 使這一行全寬：是

將標題文本模塊添加到第 1 列

添加 H2 內容框

讓我們開始添加一些模塊吧！ 需要的第一個模塊是文本模塊。 將一個添加到第一列並將您選擇的 H2 副本添加到內容框中。

標題文字設置

然後，對“設計”選項卡中的 H2 文本設置進行一些更改。

• 標題 2 字體：Abril Fatface
• 標題 2 文字大小：80 像素（桌面）、70 像素（平板電腦）、50 像素（手機）

間距

繼續在此文本模塊的頂部添加一些邊距。

• 上邊距：150px

將鏈接文本模塊添加到第 1 列

將鏈接添加到內容框

在您剛剛添加的標題文本模塊的正下方，繼續添加一個新的文本模塊。 我們將此文本模塊用作按鈕，因此請確保添加指向 CTA 的鏈接。

鏈接文字設置

接下來，更改“設計”選項卡中的鏈接文本設置。

• 鏈接字體粗細：超粗
• 鏈接字體樣式：大寫
• 鏈接文字顏色：#000000
• 鏈接文字大小：21px

間距

添加一些頂部邊距以在此文本模塊和前一個文本模塊之間留出空間。

• 上邊距：100px

邊界

最後，為鏈接文本模塊添加一個微妙的底部邊框。

• 底部邊框寬度：1px
• 底部邊框顏色：#333333

將描述文本模塊添加到第 2 列

文字設置

第二列只需要描述文本模塊。 將內容添加到內容框後，應用以下文本設置：

• 文字大小：22px（桌面）、20px（平板電腦）、18px（手機）
• 文本行高：2.6em
• 文本方向：對齊

漿紗

使 Sizing 設置也匹配不同的屏幕尺寸：

• 寬度：82%（桌面），100%（平板電腦和手機）

間距

最後，添加一些頂部和底部邊距。

• 上邊距：100px
• 下邊距：100px

添加邊框形狀

左邊框背景設置

現在我們已經完成了整體設計，我們可以開始添加邊框圖像了！ 我們將從左邊框開始。 在“左邊框”文件夾中找到您選擇的邊框圖像並將其上傳為部分背景圖像。 然後，應用以下背景圖像設置：

• 背景圖片尺寸：實際尺寸
• 背景圖像位置：左中
• 背景圖像重複：不重複

右邊框背景設置

或者，您可以在“右邊框”文件夾中找到您選擇的邊框圖像，並使用以下設置將其添加為部分背景：

• 背景圖片尺寸：實際尺寸
• 背景圖片位置：中右
• 背景圖像重複：不重複

頂部邊框背景設置

頂部邊框圖像也是如此，但使用以下背景設置：

• 背景圖片尺寸：實際尺寸
• 背景圖片位置：頂部中心
• 背景圖像重複：不重複

底部邊框背景設置

或者，最後但並非最不重要的一點是，您可以在“底部邊框”文件夾中找到底部邊框圖像，並將其與這些部分背景設置相結合：

• 背景圖片尺寸：實際尺寸
• 背景圖像位置：底部中心
• 背景圖像重複：不重複

使用半透明疊加混合顏色

對於每個包含的邊框形狀，您還可以決定添加顏色疊加。 此疊加可幫助您使邊框圖像看起來更微妙。 要添加疊加層，請轉到您的部分設置並在邊框背景圖像的頂部添加漸變背景。

• 顏色 1：#ffffff
• 顏色 2：rgba(255,255,255,0.36)
• 梯度方向：141deg
• 將漸變放在背景圖像上方：是

預覽

現在我們已經完成了所有步驟，讓我們最後看看使用這些免費邊框圖像可以實現的一些潛在設計。

最後的想法

在這篇文章中，我們分享了 5 張不同的邊框圖片，您可以免費下載。 您可以將這些邊框圖像用於您正在處理的任何網站，而不受任何限制。 我們鼓勵您嘗試所有這些並創造出令人驚嘆的設計。 如果您有任何問題或建議，請務必在下方評論區留言！