如何在您的 Divi 登陸頁面上創造性地展示熱門產品

在著陸頁上展示熱門產品時，不僅選擇合適的產品很重要，而且展示它們的吸引力也很重要。 借助 Divi 的新 WooCommerce 模塊，無數新的設計可能性已經落入我們的懷抱。 為了幫助您獲得靈感，我們將重新設計美觀優雅的流行產品設計，您可以將其用於下一個 Divi 登陸頁面。 您也可以免費下載 JSON 文件！

讓我們開始吧。

預覽

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

桌面

靜止的

徘徊

移動的

免費下載熱門產品佈局

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

下載文件

免費下載

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

下載

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

讓我們開始重建吧！

添加新部分

間距

首先將常規部分添加到新頁面或現有頁面。 打開部分設置並相應地調整頂部和底部填充值：

• 頂部填充：8vw
• 底部填充：8vw

添加新行

列結構

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

漿紗

在不添加任何模塊的情況下，打開行設置並修改行的大小設置。

• 使用自定義裝訂線寬度：是
• 天溝寬度：1
• 寬度：85vw
• 最大寬度：100%

將 Woo 圖像模塊添加到列

動態內容

是時候開始添加模塊了！ 我們需要的第一個模塊是 Woo Image Module。 選擇您要展示的產品。

圖片

轉到設計選項卡並更改圖像設置。

• 圖像圓角：20px（所有角）

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

將 Woo 標題模塊添加到列

動態內容

我們需要的下一個模塊是 Woo 標題模塊。 選擇您選擇的產品。

標題文字設置

修改模塊的標題文本設置如下：

• 標題標題級別：H3
• 標題字體：普拉塔
• 標題文字大小：3vw（桌面）、5vw（平板電腦）、7vw（手機）

間距

通過在不同屏幕尺寸之間添加一些自定義邊距值來完成模塊的設置。

• 最高邊距：7vw（台式機），14vw（平板電腦和手機）
• 下邊距：2vw（台式機），4vw（平板電腦和手機）
• 左邊距：2vw（桌面），5vw（平板電腦和手機）
• 右邊距：2vw（桌面），5vw（平板電腦和手機）

將 Woo 描述模塊添加到列

動態內容

進入下一個模塊，即 Woo 描述模塊。 選擇您選擇的產品。

文字設置

轉到模塊的設計選項卡並按如下方式更改文本設置：

• 文字字體：蒙特塞拉特
• 文字大小：0.8vw（桌面）、1.6vw（平板電腦）、2vw（手機）
• 文本行高：1.8em

間距

還可以在不同的屏幕尺寸上使用自定義邊距值。

• 最高邊距：2vw（台式機），4vw（平板電腦和手機）
• 下邊距：2vw（台式機），4vw（平板電腦和手機）
• 左邊距：2vw（桌面），5vw（平板電腦和手機）
• 右邊距：2vw（桌面），5vw（平板電腦和手機）

將 Woo 添加到購物車模塊添加到列

動態內容

在 Woo 描述模塊的正下方，我們將添加一個 Woo 添加到購物車模塊。 選擇您選擇的產品。

默認字段設置

轉到模塊的設計選項卡並按如下方式更改字段設置：

• 字段背景顏色：#ffffff
• 字段文本顏色：#3d3d3d
• 字段字體：蒙特塞拉特

• 字段邊框寬度：0px
• 字段邊框顏色：#3d3d3d

懸停字段設置

修改懸停時的邊框寬度。

• 字段邊框寬度：1px

默認按鈕設置

接下來打開按鈕設置並設置按鈕樣式。

• 為按鈕使用自定義樣式：是
• 按鈕文字大小：1vw（桌面）、3vw（平板電腦）、4vw（手機）
• 按鈕文字顏色：#3d3d3d
• 按鈕背景顏色：#FFFFFF
• 按鈕邊框寬度：0px
• 按鈕邊框顏色：#3d3d3d

• 按鈕字體：Prata

• 頂部填充：0.5vw
• 底部填充：0.5vw
• 左填充：2vw
• 右填充：2vw

懸停按鈕設置

在懸停時更改按鈕邊框寬度。

• 按鈕邊框寬度：1px

間距

然後，轉到間距並在不同的屏幕尺寸上添加一些自定義邊距值。

• 下邊距：7vw（台式機），14vw（平板電腦和手機）
• 左邊距：2vw（桌面），5vw（平板電腦和手機）
• 右邊距：2vw（桌面），5vw（平板電腦和手機）

默認邊框設置

也修改模塊的邊框設置。

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

懸停邊框設置

並刪除懸停時的邊框寬度。

• 底部邊框寬度：0px

將 Woo 價格模塊添加到列

動態內容

我們在列中需要的最後一個模塊是 Woo Price 模塊。 選擇您選擇的產品。

標題文字設置

轉到模塊的設計選項卡並相應地更改價格文本設置：

• 價格文本字體：蒙特塞拉特
• 價格文本字體重量：輕
• 價格文字顏色：#333333
• 價格文字大小：2vw（桌面）、4vw（平板電腦）、6vw（手機）
• 價格線高度：1.8em

間距

也修改邊距值。

• 底邊距：5vw
• 左邊距：2vw（桌面），5vw（平板電腦和手機）
• 右邊距：2vw（桌面），5vw（平板電腦和手機）

克隆列兩次

完成列及其中的所有模塊後，您可以克隆整個列兩次。

更改行列結構

接下來更改行的列結構。

更改所有動態內容

繼續將第 2 列和第 3 列中的所有動態內容更改為您選擇的其他產品。

更改第 2 列模塊間距

Woo 標題模塊

第二列中的模塊需要一些額外的間距更改。 從 Woo 標題模塊開始。

• 左邊距：5vw（所有設備）
• 右邊距：5vw（所有設備）

Woo 描述模塊

接下來更改 Woo 描述模塊的間距設置。

• 最高邊距：4vw（所有設備）
• 下邊距：4vw（所有設備）
• 左邊距：5vw（所有設備）
• 右邊距：5vw（所有設備

Woo 添加到購物車模塊

轉到 Woo 添加到購物車模塊的間距設置。

• 左邊距：5vw（所有設備）
• 右邊距：5vw（所有設備）

Woo 價格模塊

並通過修改 Woo Price 模塊的間距設置來完成第 2 列模塊。

• 左邊距：5vw（所有設備）
• 右邊距：5vw（所有設備）

列樣式

所有列

背景顏色

現在我們已經準備好了所有的模塊，我們可以開始設置列的樣式。 每一列都需要一個白色的背景色。

• 背景顏色：#ffffff

邊界

您也可以在每列的角上添加“20px”。

• 圓角：20px（所有角）

第 1 和第 3 欄

默認框陰影

繼續向第 1 列和第 3 列添加默認框陰影。

• 框陰影垂直位置：22px
• 框陰影陰影模糊強度：150px
• 陰影顏色：rgba(0,0,0,0)（桌面），rgba(0,0,0,0.1)（平板電腦和手機）

懸停框陰影

在懸停時更改懸停陰影顏色。

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

默認過濾器

然後，轉到過濾器設置並為第 1 列和第 3 列添加一些模糊效果。

• 模糊：4px（桌面），0px（平板電腦和手機）

懸停過濾器

消除懸停時的模糊。

• 模糊：0px

默認 Z 索引

為接下來的列分配相同的默認 z 索引值。

• Z指數：9

懸停 Z 索引

並在懸停時增加相同的 z 索引。

• Z指數：12

僅第 1 列

轉換 翻譯

繼續使用轉換轉換選項更改第 1 列的位置。

• 右：7vw（台式機）、0vw（平板電腦和手機）
• 底部：2vw（台式機），0vw（平板電腦和手機）

僅第 3 列

轉換 翻譯

接下來打開第 3 列轉換設置並應用以下設置：

• 右：7vw（台式機）、0vw（平板電腦和手機）
• 底部：-2vw（台式機），0vw（平板電腦和手機）

僅第 2 列

盒子陰影

移至第 2 列設置並應用微妙的框陰影。

• 框陰影垂直位置：22px
• 框陰影模糊強度：150px
• 陰影顏色：rgba(0,0,0,0.27)（桌面），rgba(0,0,0,0.1)（平板電腦和手機）

Z索引

最後但並非最不重要的一點是，更改第二列的 z 索引就大功告成了！

• Z指數：11

預覽

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

桌面

靜止的

徘徊

移動的

最後的想法

在這篇文章中，我們向您展示瞭如何在 Divi 登錄頁面上優雅地展示流行產品。 我們已經逐步向您展示瞭如何僅使用 Divi 的內置選項來創建美麗的結果。 這個設計示例展示了 Divi 的新 WooCommerce 模塊的多功能性，以及您如何立即創建令人驚嘆的電子商務網頁設計。 如果您有任何問題或建議，請隨時在下面的評論部分發表評論！

如果您渴望了解有關 Divi 的更多信息並獲得更多 Divi 免費贈品，請確保訂閱我們的電子郵件時事通訊和 YouTube 頻道，這樣您將永遠是第一批了解此免費內容並從中受益的人之一。