為 Divi 的推薦模塊設計風格的 5 種奇妙方式

訪問者總是在網站上尋找的一件事是推薦。 它們代表可信度並影響潛在客戶訪問您的網站時的決策過程。 除了確保您有強有力的推薦書可以分享，使它們具有視覺吸引力也很重要。 在這篇文章中，我們將向您展示 5 種奇妙的方式，您可以在僅使用內置選項的情況下設置 Divi 推薦模塊的樣式。

讓我們開始吧！

預覽

在我們深入學習本教程之前，讓我們先看看不同屏幕尺寸的最終結果。

桌面

移動的

重新創建示例 #1

訂閱我們的 YouTube 頻道

添加新部分

讓我們從第一個例子開始！ 創建一個新頁面並添加一個常規部分。

添加新行

列結構

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

漿紗

在不添加任何模塊的情況下，打開行設置並對 Sizing 設置進行一些更改。

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

將圖像模塊添加到第 1 列

上傳圖片

是時候開始添加模塊了！ 我們需要的第一個模塊是第 1 列中的圖像模塊。繼續上傳所選的方形圖像。

過濾器

然後，轉到過濾器設置並嘗試不同的效果。

• 飽和度：40%
• 對比度：126%

將按鈕模塊添加到第 1 列

添加副本

我們在第 1 列中需要的第二個也是最後一個模塊是按鈕模塊。 添加一些選擇副本。

按鈕設置

然後，轉到按鈕設置並對按鈕的外觀進行一些更改。

• 為按鈕使用自定義樣式：是
• 按鈕文字大小：14px
• 顏色 1：#5400ff
• 顏色 2：#00fff6
• 梯度方向：100deg
• 按鈕邊框寬度：0px
• 字體粗細：超粗
• 字體樣式：大寫

間距

添加一些自定義間距值。

• 頂部填充：10px
• 底部填充：10px
• 左填充：30px
• 右填充：30px

盒子陰影

並以微妙的方框陰影結束。

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

將推薦模塊添加到第 2 列

添加內容

在第二列中，我們唯一需要的模塊是推薦模塊。 向不同的字段和內容框添加一些內容。

背景顏色

接下來，添加一個稍微透明的背景顏色。

• 背景顏色：rgba(255,255,255,0.96)

報價圖標設置

還要更改報價圖標設置。

• 報價圖標顏色：#0c0c0c
• 報價圖標背景顏色：rgba(245,245,245,0)

正文設置

然後，修改正文設置。

• 正文字體：Verdana
• 車身線高：1.7em

間距

繼續在間距設置中添加不同的自定義邊距和填充值。

• 上邊距：15vw（台式機和平板電腦），0vw（手機）
• 下邊距：50px（平板電腦和手機）
• 左邊距：-10vw（桌面和平板電腦），0vw（手機）
• 右邊距：5vw
• 頂部填充：70px
• 底部填充：70px
• 左填充：50px
• 右填充：50px

邊界

也添加左邊框。

• 左邊框寬度：7px
• 左邊框顏色：#5400ff

盒子陰影

最後，添加一個微妙的框陰影來塑造推薦模塊。

• 框陰影模糊強度：80px
• 框陰影傳播強度：-10px
• 陰影顏色：rgba(0,0,0,0.49)

克隆兩個模塊並在第 3 列和第 4 列中放置重複項

修改完第 1 列和第 2 列中的模塊後，您可以克隆這些模塊並將重複項放置在剩餘的兩列中。

更改圖像

不要忘記更改您的第二個推薦的圖像。

更改按鈕漸變背景

還要更改按鈕漸變背景。

• 顏色 1：#ff001d
• 顏色 2：#3700ff
• 梯度方向：100deg

更改推薦邊框顏色

並將邊框顏色與新的按鈕漸變背景相匹配。

• 左邊框顏色：#ff001d

重新創建示例 #2

添加新部分

進入第二個例子！ 向您的頁面添加一個新的常規部分。

添加新行

列結構

在不對該部分進行任何更改的情況下，使用以下列結構添加一個新行：

漿紗

繼續打開行設置並對大小設置進行一些更改。

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

間距

接下來，向行和列添加一些自定義填充值。

• 左內邊距：200 像素（桌面）、30 像素（平板電腦）、25 像素（手機）
• 右內邊距：200 像素（桌面）、30 像素（平板電腦）、25 像素（手機）
• 第 1 列左填充：5px（桌面）、0px（平板電腦和手機）
• 第 1 列右內邊距：2.5px（桌面），0px（平板電腦和手機）
• 第 2 列左填充：2.5px（桌面），0px（平板電腦和手機）
• 第 2 列右內邊距：2.5px（桌面），0px（平板電腦和手機）
• 第 3 列左填充：2.5px（桌面），0px（平板電腦和手機）
• 第 3 列右內邊距：5px（桌面）、0px（平板電腦和手機）

將視頻模塊添加到第 1 列

視頻鏈接

在第 1 列中我們需要的第一個模塊是視頻模塊。 將此視頻鏈接到您的推薦視頻。

圖像疊加

添加圖像疊加。

將推薦模塊添加到第 1 列

添加內容

第 1 列中所需的第二個也是最後一個模塊是推薦模塊。 首先添加推薦詳細信息。

禁用報價圖標

然後，在元素設置中禁用引號圖標。

• 顯示報價圖標：否

背景顏色

接下來添加白色背景。

• 背景顏色：#ffffff

正文設置

還要修改正文設置。

• 正文顏色：#000000
• 正文字母間距：-0.5px
• 車身線高：1.7em

間距

並在間距設置中添加一些自定義邊距和填充值。

• 下邊距：30px（平板電腦和手機）
• 頂部填充：50px
• 底部填充：50px
• 左填充：80px
• 右填充：80px

邊界

我們還為模塊的左下角和右下角設置了“30px”。

盒子陰影

最後，為了創造一些深度，我們給了推薦模塊一個微妙的盒子陰影。

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

克隆模塊三次並在剩餘列中放置重複項

修改完第 1 列中的兩個模塊後，將它們克隆兩次並將重複項放置在剩餘的兩列中。

更改視頻鏈接、內容和圖像疊加

不要忘記更改新推薦的視頻鏈接、內容和圖像疊加。

重新創建示例 #3

添加新部分

繼續第三個例子！ 向您的頁面添加一個新的常規部分。

添加新行

列結構

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

第 1 列背景顏色

然後，轉到背景設置並為第一列添加背景顏色。

• 第 1 列背景顏色：#f9f9f9

第 2 列背景顏色

第二列需要白色背景色。

• 第 2 列背景顏色：#ffffff

漿紗

然後，轉到尺寸設置並刪除裝訂線寬度。

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

間距

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

• 頂部填充：0px
• 底部填充：0px
• 左填充：0px
• 右填充：0px
• 第 1 列頂部填充：100px
• 第 1 列底部填充：100px
• 第 1 列左填充：50px
• 第 1 列右填充：50px
• 第 2 列頂部填充：100px
• 第 2 列底部填充：100px
• 第 2 列左填充：50px
• 第 2 列右填充：50px

邊界

並為每個邊框設置“20px”。

盒子陰影

最後但並非最不重要的一點是，給你的行一個方框陰影。

• 框陰影模糊強度：80px

將推薦模塊添加到第 1 列

添加內容

是時候開始添加模塊了！ 我們在第 1 列中需要的第一個模塊是推薦模塊。 添加內容。

上傳圖片

繼續在圖像設置中上傳圖像。

禁用報價圖標

接下來，禁用報價圖標。

• 顯示報價圖標：否

禁用背景顏色

也禁用背景顏色。

• 使用背景顏色：否

正文設置

繼續轉到設計選項卡並對正文文本設置進行一些更改。

• 正文字體：Abril Fatface
• 正文顏色：#000000
• 正文文字大小：20px

將文本模塊添加到第 1 列

添加內容

我們在第 1 列中需要的第二個模塊是文本模塊。 將推薦副本添加到內容框中。

間距

然後，轉到設計選項卡並添加一些自定義的頂部和底部邊距。

• 上邊距：50px
• 下邊距：50px

將圖像模塊添加到第 1 列

上傳公司標誌

我們在第一列中需要的第三個也是最後一個模塊是圖像模塊。 您可以使用此模塊添加與推薦相關的公司徽標。

克隆所有模塊並在第 2 列中放置重複項

修改完第 1 列中的所有模塊後，您可以繼續克隆它們。 完成後，將重複項放在第二列中。

更改推薦圖片和副本

確保隨圖片一起更改推薦書的內容。

重新創建示例 #4

添加新部分

繼續第四個例子！ 向您的頁面添加一個新部分。

添加新行

列結構

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

第 1 列背景圖像

打開行設置並將背景圖像添加到第一列。

• 第 1 列背景圖像重複：無重複

第 3 列背景圖像

對第三列執行相同操作。

• 第 3 列背景圖像重複：無重複

漿紗

然後，轉到大小設置並進行一些更改。

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

間距

接下來刪除默認的頂部和底部填充。

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

將推薦模塊添加到第 1 列

添加內容

繼續向第一列添加推薦模塊。 完成後，添加推薦詳細信息。

漸變背景

也給模塊一個漸變背景。

• 顏色 1：#8b32ff
• 顏色 2：#ff35ae
• 梯度方向：120度

報價圖標設置

然後，對圖標設置進行一些更改。

• 報價圖標顏色：#000000
• 引用圖標背景顏色：#ffffff

文字設置

並在文本設置中更改文本顏色。

• 文字顏色：淺

間距

為了給模塊一個方形，我們將在間距設置中添加一些自定義填充。

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

盒子陰影

您還需要使用微妙的框陰影為推薦添加一些深度。

• 框陰影模糊強度：80px
• 框陰影傳播強度：-10px
• 陰影顏色：#ff35ae

默認過濾器

這個推薦背後的想法是，一旦你懸停它，推薦就會消失，圖像就會出現。 為了達到這種效果，我們將在過濾器設置中使用不透明度過濾器。 確保默認不透明度為“100%”。

• 不透明度：100%

懸停過濾器

並在懸停時刪除所有不透明度。

• 不透明度：0%

將推薦模塊複製到第 3 列

修改完第 1 列中的推薦模塊後，克隆它並將副本放在第三列中。

更改漸變背景

接下來更改副本的漸變背景。

• 顏色 1：#32b0ff
• 顏色 2：#89009e
• 梯度方向：120度

克隆行

並克隆整行。

刪除推薦漸變背景並更改背景顏色

您需要做的下一件事是刪除推薦模塊的漸變背景並使用白色背景色。

• 背景顏色：#ffffff

更改推薦文本設置

刪除漸變背景後，您可以在文本設置中更改文本顏色。

• 文字顏色：深色

重新創建示例 #5

添加新部分

繼續本教程的下一個也是最後一個示例！ 向您的頁面添加一個新的常規部分。

背景顏色

更改部分的背景顏色。

• 背景顏色：#ededed

添加新行

列結構

然後，使用以下列結構添加新行：

漿紗

還要對大小設置進行一些更改。

• 使這一行全寬：是
• 使用自定義裝訂線寬度：是
• 天溝寬度：2

將文本模塊添加到第 1 列

添加內容

繼續向第一列添加文本模塊。 將推薦副本添加到內容框中。

背景顏色

並更改模塊的背景顏色。

• 背景顏色：#ffffff

文字設置

然後，轉到設計選項卡並在文本設置中更改文本方向。

• 文字方向：居中

間距

添加一些自定義邊距值。

• 左邊距：50px（桌面和平板電腦），20px（手機）
• 右邊距：50px（桌面和平板電腦），20px（手機）

將推薦模塊添加到第 1 列

添加內容

在文本模塊正下方，您可以繼續添加推薦模塊。 填寫作者姓名、職務和公司名稱字段。

上傳圖片

還要在圖像設置中上傳圖像。

漸變背景

並添加漸變背景。

• 顏色 1：#5b32ff
• 顏色 2：#32e5f2
• 梯度方向：100deg

報價圖標設置

繼續轉到設計選項卡並更改報價圖標設置。

• 報價圖標顏色：#000000
• 引用圖標背景顏色：#ffffff

文字設置

也可以在文本設置中更改文本方向。

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

正文設置

接下來，玩轉正文設置。

• 正文字體粗細：超粗體
• 正文字體樣式：大寫
• 正文文字大小：15px
• 正文字母間距：-0.5px
• 車身線高：2.1em

間距

添加一些負上邊距以創建此模塊和文本模塊之間的重疊。

• 上邊距：-25px

盒子陰影

並通過給推薦模塊一個微妙的框陰影來完成推薦設計。

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

克隆兩個模塊兩次並在剩餘列中放置重複項

完成修改第 1 列中的模塊後，您可以克隆它們兩次並將重複項放置在剩餘的兩列中。

更改推薦內容和圖像

確保更改模塊中使用的內容和圖像。

更改推薦漸變背景

隨著漸變背景。

• 顏色 1：#a632ff
• 顏色 2：#f7a131

• 顏色 1：#3281ff
• 顏色 2：#2cf483

預覽

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

桌面

移動的

最後的想法

在這篇文章中，我們向您展示了 5 種可以為 Divi 推薦模塊設計樣式的絕妙方法。 我們已逐步指導您完成本教程，並創建了推薦信，您基本上可以在您正在處理的任何網站上使用這些推薦書。 如果您有任何問題或建議，請務必在下面的評論部分留言。