如何在 Divi 中創建背景圖像邊框設計

在構建網站時，邊框和背景圖像仍然是流行的設計資產。 使用正確的背景圖像可以為您的網站增添個性和風格，而無需在自定義圖形上花費時間和金錢。 邊框有助於為您的內容添加結構。

今天，我們將通過將背景圖像設計為邊框來將這兩種資產結合在一起。 Divi 有一組有用的選項可用於自定義背景圖像，這使得為獨特的邊框設計設計背景圖像變得容易。 這使我們能夠以各種創造性的方式組合顏色、漸變、框陰影和混合模式。

讓我們開始吧。

搶先看

這是我們將一起構建的背景圖像邊框設計。

免費下載佈局

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

下載文件

免費下載

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

下載

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

訂閱我們的 YouTube 頻道

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

讓我們進入教程好嗎？

你需要什麼開始

首先，您需要具備以下條件：

1. 已安裝並激活 Divi 主題
2. 在前端從頭開始構建的新頁面（可視化構建器）
3. 用於模擬內容的圖像

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

創建背景圖像邊框設計的一般提示

在我們開始構建之前，這裡有一些在創建背景圖像邊框設計時要記住的一般提示。

#1 選擇具有大量紋理的圖像

大多數情況下，您會希望邊界更窄。 這意味著您將無法看到大部分圖像。 因此，使用具有大量紋理的圖像會有所幫助。 例如，您可以使用風景照片、一束鮮花或城市高層建築的照片。 這是我在本教程中使用的一些圖像。

#2 對背景圖像邊框使用漸變和透明度

背景圖像有時可以獨立作為您內容的絕佳邊框。 但大多數時候，您會想要為背景圖像添加一些疊加層以獲得某種顏色，或者使背景更暗或更亮。 背景漸變是為背景圖像添加疊加層並創建獨特邊框設計的好方法。

#3 使用混合模式

在背景圖像上使用混合模式可以為邊框設計實現獨特的顏色和紋理。 您需要做的就是在背景圖像中添加背景顏色或漸變，然後為背景圖像選擇混合模式。 一些很棒的背景圖像邊框混合模式是顏色、亮度、乘法和屏幕。

對獨特形狀使用圓角選項

並非所有邊框都需要有直邊。 稍微攪拌一下！ Divi 的圓角選項允許您以創造性的方式塑造這些角。

使用視差背景圖像作為邊框

視差的偉大之處在於它使設計充滿活力。 另外，如果您在邊框設計中使用具有視差的背景圖像，您可以創建突出的微妙運動並使您的內容流行。

在 Divi 中設計背景圖像邊框

現在我們了解了創建背景圖像邊框設計背後的一般思想，讓我們一起設計一些。 我們將構建 4 種不同的設計。 每個都有一個基本的簡介模塊作為模擬內容。 我們將使用列設置為模塊添加背景圖像邊框。

讓我們從我們的第一個設計開始。

背景圖像邊框設計 #1

第一個設計具有窄背景圖像邊框，帶有框陰影，使其看起來更像是內容的框架。

這是設計它的方法。

首先，將兩列行添加到常規部分。

添加模糊模塊

然後在左欄中添加一個模糊模塊。

設置好背景信息後，打開背景信息設置並取出默認圖像，以便只有標題和正文內容可見。

接下來，給你的宣傳語一個白色的背景顏色。

然後更新簡介設計設置如下：

• 標題字體：Oswald
• 正文字體：Lato
• 邊距頂部 5%，底部 5%，左側 5%，右側 5%
• 填充：頂部 7%，底部 7%，左側 10%，右側 10%
• 圓角：右上20px，左下20px
• 盒子陰影：見截圖

將背景圖像添加到列

這照顧我們的模糊模塊。 現在讓我們添加我們的背景圖像邊框。 為此，我們將向包含模糊模塊的列添加背景圖像。 打開行設置，然後打開第 1 列的設置並添加以下背景：

• 背景圖片：[上傳您選擇的圖片]
• 背景顏色：#303a7a
• 背景圖像混合：亮度

然後更新圓角和框陰影如下：

• 圓角：右上20px，左下20px
• 盒子陰影：見截圖

最後結果

現在看看最終的設計。

背景圖像邊框設計 #2

下一個設計強調了使用具有大量紋理的圖像如何真正製作出漂亮的邊框，尤其是當您將它們與圖像混合模式結合使用時。

這是設計它的方法。

添加模糊模塊

為了創建設計，我們將把簡介添加到包含設計 #1 的同一行的第 2 列。 繼續複製設計#1 中的blurb 模塊並將其粘貼到第2 列中。然後更新blurb 模塊設置如下：

• 圓角：恢復默認
• 邊距：頂部 10%，底部 10%，左側 10%，右側 10%
• 填充：頂部 15%，底部 15%，左側 10%，右側 10%
• 邊框寬度：1px
• 邊框顏色：#ffffff

將背景圖像添加到列

使用我們的模塊，打開行設置並向第 2 列添加背景漸變。

• 背景漸變左顏色：#f7e0a5
• 背景漸變右顏色：rgba(237,240,0,0.79)
• 梯度方向：90度
• 起始位置：50%
• 結束位置：0%

然後添加具有漂亮顏色混合效果的背景圖像。

• 背景圖片：【上傳圖片】
• 背景圖像混合：顏色

如您所見，顏色混合模式保留了圖像後面兩種漸變顏色的亮度，以創建具有柔和色彩的精美圖像邊框設計。

最後結果

查看設計的最終結果。

背景圖像邊框設計 #3

下一個設計重點介紹了在邊框設計中使用視差圖像。 我們還將使用框陰影技巧為視差圖像創建顏色疊加。

這是設計它的方法。

對於初學者，在第一行下方添加一個新的兩列行，然後從頂行第 1 列的模糊中復制模糊模塊並將其粘貼到新行的第 1 列中。

然後更新blurb模塊如下。

• 背景顏色：#333344
• 文字顏色：淺
• 邊距：頂部 10%，底部 10%，左側 10%，右側 10%
• 填充：頂部 10%，底部 10%
• 圓角：20px
• 盒子陰影：無

當模糊就位時，打開行設置並更新第 1 列的設置，如下所示：

• 背景圖片：【上傳圖片】
• 使用視差效果：是
• 視差法：真視差
• 圓角：20px
• 盒子陰影：見截圖

現在，默認情況下，帶有視差的背景圖像邊框有點霸道，可能會分散內容的注意力。

為了使具有視差的背景圖像更亮，我們可以在模糊中添加一個框陰影，作為燈光疊加。

再次打開模糊設置並添加以下內容：

• 盒子陰影：見截圖
• 框陰影模糊強度：0px
• 框陰影傳播強度：200px
• 陰影顏色：#ffffff

最終設計

現在讓我們看看最終的設計。

背景圖像邊框設計 #4

對於下一個設計，我們將結合背景圖像和漸變作為模糊內容的頂部和底部邊框。

添加模糊模塊

首先，複製頂行第 2 列中的模糊模塊並將其粘貼到第二行的第 2 列中。

完成後，更新模糊模塊設置如下：

• 邊框：[通過恢復邊框默認值取出邊框]
• 盒子陰影：無
• 邊距：頂部 5%，底部 5%，左側 0%，右側 0%

添加背景圖像邊框

要為此設計添加背景圖像邊框，請打開行設置並更新第 2 列的設置，如下所示：

• 背景圖片：【上傳圖片】
• 背景漸變左顏色：#141777
• 背景漸變右顏色：#ffb7eb
• 梯度方向：90度
• 起始位置：50%
• 結束位置：0%

• 背景圖片：【上傳圖片】
• 背景圖像混合：亮度

最終設計

查看最終設計。

最後的想法

使用 Divi 創建背景圖像邊框是一種為您的設計增添美感和個性的簡單方法。 本教程中的設計旨在展示 Divi 中用於製作獨特邊框設計的關鍵選項。 但是，由於有所有不同的顏色組合和混合模式可用，您唯一的限制就是您的想像力。 所以，抓住一些你自己的圖像，為你的下一個項目探索新的和令人興奮的邊框設計。

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

乾杯!