使用 Divi 創建大膽多彩網站的 7 種技巧

為您的網站使用大膽而多彩的設計風格是讓您的網站流行起來的好方法。 它將幫助您為您的網站帶來積極的氛圍，儘管它不適合任何類型的網站，但它絕對適合其中的許多網站。

在這篇文章中，我們將向您展示 7 種不同的 Divi 技術，了解如何僅使用 Divi 的內置選項來創建大膽而多彩的網頁設計。 首先，我們將了解不同的技術，然後我們將重新創建一個與描述相匹配的示例。

這是該系列文章的最後一篇文章，我們已經處理了 4 種不同的網站樣式以及如何使用 Divi 實現它們：

1. 乾淨抽象
2. 最小
3. 平坦的
4. 大膽多彩

讓我們開始吧！

訂閱我們的 YouTube 頻道

1. 將行“變成”帶有列的部分

您可以用來創建大膽而多彩的網頁設計的第一種技術是將行變成部分。 通過刪除部分和行之間的所有默認填充，您將不會在兩者之間留下明顯差異。 這與刪除裝訂線寬度相結合，允許您將兩列壓在一起。

2.漸變+背景紋理

在您的網站上使用漸變背景可以提供驚人的結果。 但是，幫助您賦予這些顏色更多的功能是將它們與帶紋理的背景相結合。 為了保持平衡，請將此組合僅用於一列。 保持第二列的清潔和輕便，以獲得現代感。

3.半透明漸變色+下部分分隔線

將一行變成一個部分後，您還可以將部分分隔線添加到您的列背景中。 為了確保分隔線顯示出來，而不重疊內容，請為您的列使用略微透明的漸變顏色。

4. 模塊的橫列重疊

您經常看到網站使用垂直重疊。 另一方面，水平重疊雖然可以帶來絕對驚人的效果，但使用頻率較低。 要獲得這種結果，重要的是要知道右列中的元素比左列中的元素具有層次優勢。 如果將元素放在左列中，則無法獲得相同的結果。

5. 拆分副本以實現完美對齊

沒有什麼比完美對齊更令人滿意的了。 這是區分好設計和壞設計的主要設計原則之一。 為了確保在重疊兩列時這種對齊是完美的，請嘗試將您的副本拆分為不同的文本模塊。 這將允許您通過使負左邊距特別匹配該單詞或句子來創建完美對齊。

6. 結合黑色和半透明文本顏色

要將粗體添加到您的網站，請為您共享的副本使用大字體大小以及超粗體文本字體粗細。 為了平衡粗體，您可以在使用黑色文本顏色和半透明文本顏色之間切換。 這將幫助您在網站上創建足夠的深度和變化。

7. 避免在頂部或底部使用框陰影來統一部分

通過使用框陰影選項，您可以輕鬆地將頁面上的兩個部分聯合起來。 首先，使用一個非常微妙的盒子陰影。 這意味著使用足夠的模糊強度、負擴散強度和非常淺的陰影顏色。 創建微妙的框陰影后，請使用垂直位置。 對於頁面上的第一部分，請確保移動垂直位置，直到框陰影不會出現在您的部分底部。 同樣適用於最後一部分，但請確保它不會出現在頂部。

預覽

現在我們已經了解了所有不同的技術，是時候將事情付諸實踐了。 我們將重新創建以下設計：

讓我們開始創建：添加標準部分 #1

部分設置

頂部分隔線

添加帶有標準部分的新頁面並立即打開部分設置。 我們需要的第一件事是頂部分隔線：

• 分隔線樣式：在列表中查找
• 分隔線顏色：rgba(0,0,0,0.13)
• 分隔線高度：900px
• 分隔線翻轉：垂直
• 分隔線安排：在部分內容下方

底部分隔線

繼續添加一個類似的底部分隔線。

• 分隔線樣式：在列表中查找
• 分隔線顏色：rgba(0,0,0,0.13)
• 分隔線高度：900px
• 分隔線安排：在部分內容下方

間距

接下來，為該部分留出一些邊距並刪除默認填充。

• 上下邊距：50px
• 左右邊距：50px
• 頂部和底部填充：0px
• 左右填充：0px

圓角

然後，打開邊框設置並添加一些圓角。

• 左上角：20px
• 右上角：20px

盒子陰影

通過進行以下調整，我們在部分頂部使用了一個微妙的框陰影：

• 框陰影垂直位置：-23px
• 框陰影模糊強度：37px
• 框陰影擴散強度：-29px
• 陰影顏色：rgba(0,0,0,0.22)
• 框陰影位置：外陰影

添加新行

列結構

並不是說我們已經完成了對部分設置的修改，我們可以繼續添加一個包含兩列的行。

第 1 列漸變背景

尚未添加任何模塊，我們將打開行設置。 我們需要做的第一件事是為我們的第一列添加漸變背景。

• 顏色 1：RGBA(255,191,0,0.76)
• 顏色 2：RGBA(153,0,255,0.87)

第 1 列紋理背景圖像

我們將把這個漸變背景與帶紋理的背景結合起來。 我使用的圖像是 Divi 的 Meetup Layout Pack 的一部分。 通過右鍵單擊並保存以下圖像，將其保存到桌面（它是一個帶有白色紋理的 png 文件，除非您在計算機上打開它和/或在您的網站上使用它，否則您將無法看到它的外觀） )：

將圖像上傳到媒體庫後，請確保選擇“適合”作為第 1 列背景圖像大小。

第 2 列背景顏色

接下來，為您的第二列設置“#F7F7F7”背景色。

漿紗

我們將通過使其占據該部分的整個寬度來將我們的行“變成”一個部分。

• 使這一行全寬：是
• 使用自定義裝訂線寬度：是
• 天溝寬度：1
• 均衡柱高：是

間距

除了使行佔據部分的整個寬度外，我們還需要刪除部分的頂部和底部填充。

• 頂部和底部填充：0px

將分頻器模塊添加到第 1 列

隱藏分隔線

讓我們開始添加模塊吧！ 我們需要的第一件事是第一列中的分頻器模塊。 我們僅使用此模塊在第一列中創建所需的空間。 我們實際上並不希望它出現。 添加模塊後，請確保禁用“顯示分隔符”選項。

間距

接下來轉到間距設置並將以下自定義填充添加到分隔符：

• 頂部填充：200 像素（桌面和平板電腦），150 像素（手機）
• 底部填充：200px（桌面和平板電腦），150px（手機）

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

添加副本

我們現在可以轉到第二列。 在這裡，我們將刪除三個不同的文本模塊並使它們與兩列重疊。 如果你想讓一個模塊與兩列或更多列重疊，你總是需要把它放在右邊的列中。 這就是層次結構的工作原理。 添加您的第一個文本模塊並添加一些副本。

文字設置

接下來打開文本設置並應用以下更改：

• 文字字體粗細：超粗
• 文本字體樣式：大寫
• 文字顏色：#000000
• 文字大小：250 像素（桌面）、200 像素（平板電腦）、100 像素（手機）
• 文本行高：0.75em

間距

我們還需要一些保證金。 我們使用的負左邊距與我們選擇的副本相匹配。 如果您還想讓它與其他文本一起使用，則需要使用此值。 更改它，直到您看到字符的開頭與列的過渡對齊。

• 上邊距：200px（桌面）、-250px（平板）、-120px（手機）
• 左邊距：-279px（桌面），5%（平板和手機）

克隆文本模塊兩次

克隆 #1

更改文本

我們已經創建了我們的第一個文本模塊，為了節省一些時間，我們將克隆它兩次並進行一些更改。 關於第二個文本模塊，您需要更改的第一件事是副本。

更改間距

我們在這裡使用的副本是不同的，所以這意味著我們需要更改左邊距。 請注意我們還如何使用十進制數字使文本模塊完美對齊。 擺脫上邊距。

• 左邊距：-360.7px（桌面），5%（平板和手機）

克隆 #2

更改文本

也更改您的第三個文本模塊的副本。

更改文本顏色

為了使設計更加突出，我們將這個模塊的文本顏色更改為“rgba(0,0,0,0.19)”。

更改間距

我們正在移除此模塊的頂部邊距並添加一些底部邊距。 負左邊距也不同。

• 下邊距：200px
• 左邊距：-410px（桌面），5%（平板和手機）

添加標準部分 #2

部分設置

間距

我們已經完成了第一部分，是時候進入下一部分了！ 添加新的標準部分後，打開間距設置並進行以下更改：

• 上下邊距：50px
• 左右邊距：50px
• 頂部和底部填充：0px
• 左右填充：0px

圓角

繼續添加一些底部圓角：

• 左下角：20px
• 右下角：20px

盒子陰影

也在該部分的底部添加一個框陰影。

• 框陰影垂直位置：47px
• 框陰影模糊強度：37px
• 框陰影擴散強度：-29px
• 陰影顏色：rgba(0,0,0,0.22)
• 框陰影位置：外陰影

添加新行

列結構

接下來，向新部分添加一行三列。

漿紗

我們也將這一行“轉換”為一個部分：

• 使這一行全寬：是
• 使用自定義裝訂線寬度：是
• 天溝寬度：1
• 均衡柱高：是

間距

我們將刪除默認的頂部和底部填充。

• 頂部和底部填充：0px

將 Blurb 模塊 #1 添加到第 1 列

選擇圖標

我們總共需要三個 Blurb 模塊。 每列一個。 我們首先在第一列中添加一個，完成後，我們將克隆它並將其放置在剩餘的列中。 這將幫助我們節省時間。 將內容添加到 Blurb 模塊後，在圖像和圖標設置中選擇一個圖標。

漸變背景

我們將通過使用漸變背景使圖標看起來像是重疊在 Blurb 模塊的頂部：

• 顏色 1：rgba(255,255,255,0)
• 顏色 2：#A21DF9
• 起始位置：20%
• 結束位置：20%

紋理背景圖像

我們將漸變背景與上一節中使用的相同紋理背景相結合。

圖標設置

接下來更改圖標設置：

• 圖標顏色：#000000
• 使用圖標字體大小：是
• 圖標字體大小：85px

文字設置

繼續修改文本設置。

• 文字方向：居中
• 文字顏色：淺

標題文字設置

然後，我們將使用以下設置來設計我們的簡介標題：

• 標題字體粗細：超粗
• 文本字體樣式：大寫
• 標題文字大小：46px

正文設置

以及正文的以下設置：

• 正文字體重量：輕
• 正文大小：18px

間距

最後但並非最不重要的一點是，我們將通過添加自定義填充為 Blurb 模塊提供一些呼吸空間：

• 頂部填充：50px
• 底部填充：100px
• 左右填充：50px

克隆 Blurb 模塊兩次並放置在剩餘的列中

克隆 #1

更改圖標

完成對 Blurb 模塊的修改後，將其克隆兩次。 執行此操作後，將重複項放在剩餘的列中。 然後，打開第二列中的 Blurb 模塊並更改正在使用的圖標。

更改漸變背景

繼續將第二個漸變背景顏色更改為“#D47A9A”。

克隆 #2

更改圖標

對最後一列中的 Blurb 模塊執行相同的操作。

更改漸變背景

對於此模塊，我們使用“#F3BF3E”作為第二個漸變背景色。

預覽

如果您已按照上述每一個步驟進行操作，您應該會在不同的屏幕尺寸上獲得以下結果：

最後的想法

在這篇文章中，我們向您展示瞭如何僅使用 Divi 的內置選項創建大膽而多彩的網站。 首先，我們已經學習了一些您可以解決的 Divi 技術，然後，我們從頭開始重新創建了一個匹配的示例。 如果您有任何問題或建議，請務必在下方評論區留言！