如何在令人驚嘆的 Divi 網站英雄部分突出顯示產品類別

如果您熟悉電子商務網站，那麼您無疑也熟悉產品類別。 產品類別可以是您網站上一些最強大的頁面。 這就是為什麼讓它們易於查找並以簡單而優雅的方式突出顯示它們很重要的原因。 借助 Divi 的內置選項，您可以在多個方向上進行設計。 在本教程中，我們將向您展示如何在您的英雄部分突出顯示產品類別。 我們將從頭開始創建設計示例，希望它也能激發您以自己的創意方式突出產品類別！

讓我們開始吧。

預覽

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

讓我們開始創作吧！

訂閱我們的 YouTube 頻道

添加新部分

漸變背景

首先向您的頁面添加一個新部分。 打開此部分的設置，並為其添加漸變背景。

• 顏色 1：#ffffff
• 顏色 2：#757f1e
• 漸變類型：線性
• 梯度方向：90度
• 起始位置：50%
• 結束位置：50%

間距

然後，轉到設計選項卡並向該部分添加一些自定義的頂部和底部填充。

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

添加第 1 行

列結構

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

第 1 列背景顏色

尚未添加任何模塊，打開行設置並為第一列添加背景顏色。

• 第 1 列背景顏色：rgba(0,0,0,0.19)

第 1 列背景圖像

向第一列添加背景圖像以及混合模式。

• 第 1 列背景圖像位置：底部中心
• 第 1 列背景圖像重複：無重複
• 第 1 列背景圖像混合：相乘

第 2 列背景顏色

第二列只需要白色背景色。

• 第 2 列背景顏色：#ffffff

漿紗

繼續轉到行設置的設計選項卡並更改大小設置。

• 使用自定義寬度：是
• 單位：PX
• 自定義寬度：2000px
• 使用自定義裝訂線寬度：是
• 天溝寬度：1
• 均衡柱高：是

間距

也刪除該行的所有默認自定義填充。

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

盒子陰影

並添加一個微妙的框陰影。

• 框陰影模糊強度：80px

將文本模塊添加到第 2 列

添加內容

是時候開始添加模塊了！ 在第二列中我們需要的第一個模塊是標題文本模塊。 添加一些選擇的內容。

標題文字設置

接下來，轉到標題文本設置並進行一些更改。

• 標題字體粗細：超粗
• 標題文字大小：60px（桌面和平板電腦），50px（手機）
• 標題字母間距：-4px
• 標題線高度：0.8em

間距

添加一些自定義邊距和填充值。

• 最高利潤率：17vw
• 左填充：2vw（桌面）、4vw（平板電腦）、5vw（手機）

將分隔模塊添加到第 2 列

能見度

第二列中需要的第二個也是最後一個模塊是分頻器模塊。 確保啟用了顯示分隔線選項。

• 顯示分隔線：是

顏色

接下來更改分隔線的顏色。

• 顏色：#757f1e

樣式

也在樣式設置中修改分隔線樣式。

• 分隔線樣式：雙

漿紗

並在模塊的大小設置中增加 Divider Weight。

• 分隔線重量：6px

間距

最後，向分隔模塊添加一些自定義的頂部和底部邊距。

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

添加第 2 行

列結構

到第二排！ 為其選擇以下列結構：

第 1 列背景顏色

打開行設置並向第一列添加背景顏色。

• 第 1 列背景顏色：#212121

漿紗

接下來，轉到設計選項卡並調整行的大小。

• 使用自定義寬度：是
• 單位：PX
• 自定義寬度：2000px
• 使用自定義裝訂線寬度：是
• 天溝寬度：1

間距

通過將“0px”添加到頂部和底部填充，刪除該行的所有自定義填充。

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

盒子陰影

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

• 框陰影模糊強度：80px

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

添加內容

我們需要的第一個模塊是文本模塊。 將一個添加到第一列，並選擇一些內容。

文字設置

繼續轉到設計選項卡並更改文本設置。

• 文字字體粗細：輕
• 文字顏色：#ffffff
• 文字大小：18px（桌面）、15px（平板電腦）、12px（手機）
• 文本行高：1em
• 文本方向：左
• 文字顏色：淺

標題文字設置

還要修改標題文本設置。

• 標題 3 文本顏色：#ffffff
• 標題 3 文字大小：25 像素（桌面）、20 像素（平板電腦）、18 像素（手機）
• 標題 3 字母間距：-1px

間距

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

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

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

添加內容

繼續向第二列添加另一個文本模塊。 添加一些選擇內容並在鏈接設置中鏈接產品類別頁面。

默認背景顏色

然後，轉到背景設置並添加背景顏色。

• 背景顏色：#eaeaea

懸停背景顏色

在懸停時更改此背景顏色。

• 背景顏色：#ffbb00

默認文本設置

接下來在設計選項卡中更改文本設置。

• 文字字體粗細：超粗
• 文本字體樣式：大寫
• 文字顏色：#333333
• 文字大小：16px
• 文字字母間距：-1px
• 文字方向：居中

懸停文本設置

並在懸停時修改這些設置。

• 文字顏色：#ffffff
• 文字大小：20px

默認間距

我們還應用了一些默認間距值。

• 頂部填充：45px
• 底部填充：45px
• 左填充：5px
• 右填充：5px

懸停間距

我們將在懸停時更改。

• 上邊距：-50px
• 左邊距：-20px
• 頂部填充：70px
• 底部填充：70px
• 左填充：5px
• 右填充：5px

默認框陰影

繼續打開框陰影設置並添加一個完全透明的框陰影。

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

懸停框陰影

更改懸停時完全透明的框陰影顏色以使其顯示。

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

克隆文本模塊 #2 兩次並放置在剩餘的列中

修改完第 2 列中的文本模塊後，您可以繼續克隆該模塊兩次，並將重複項放置在該行的其餘兩列中。

更改第一個副本

更改內容

打開第三列中的第一個副本並更改產品類別的內容和鏈接。

更改背景顏色

也更改此模塊的背景顏色。

• 背景顏色：#dddddd

更改第二個副本

更改內容

也更改第 4 列中第二個副本的內容。

更改背景顏色

與背景顏色一起。

• 背景顏色：#c6c6c6

將用於較小屏幕尺寸的圖像模塊添加到第 1 行的第 2 列

上傳圖片

最後但並非最不重要的一點是，我們還將向第一行的第二列添加一個圖像模塊，以針對較小的屏幕尺寸優化所有內容。

能見度

通過將其隱藏在模塊的高級選項卡中的桌面上，確保此模塊僅出現在較小的屏幕尺寸上。

預覽

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

最後的想法

在這篇文章中，我們重新創建了一個令人驚嘆的設計示例，它將您網站的主要產品類別置於聚光燈下。 我們希望本教程也能激發您創建自己的設計類型。 如果您有任何問題或建議，請務必在下方評論區留言！