如何將滑入式產品信息添加到您的 Divi 產品頁面

您設計產品頁面的方式在很大程度上說明了您的商店。 您的產品頁面的設計是購買體驗的重要組成部分，因此多走一步通常是值得的。 如果您想創建一個更具交互性的產品頁面，您會喜歡這篇文章。 在本教程中，我們將向您展示如何在精美構建的產品頁面佈局中添加滑入式產品信息。 我們還將將此佈局轉換為產品頁面模板，您將可以免費下載 JSON 文件！

讓我們開始吧。

預覽

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

桌面

移動的

免費下載滑入式產品頁面模板

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

下載文件

免費下載

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

下載

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

1. 添加/打開 WooCommerce 產品

產品詳情

從創建新產品或打開現有產品開始。 要在設計中實現完全相同的結果，您需要將以下詳細信息添加到您的產品中：

• 姓名
• 描述
• 透明背景的產品圖片
• 價錢
• 類別

啟用 Divi Builder 並修改產品頁面設置

啟用 Divi Builder 並更改右上角的頁面佈局。

• 頁面佈局：全角

切換到 Visual Builder

更改頁面佈局後，您可以通過單擊“在前端構建”來切換到 Divi 的 Visual Builder。

2. 創建滑入式產品信息產品頁面佈局

刪除頁面上的多行

在產品頁面編輯器中，您會注意到與您的產品相關的各種元素。 我們只需要第二行的元素，所以繼續刪除該部分中的第一行和最後一行。

修改部分設置

背景顏色

是時候開始修改不同的元素來創建我們的滑入式產品信息佈局了！ 打開部分設置並更改背景顏色。

• 背景顏色：#ffe4a5

漿紗

還要為尺寸設置添加一個最小高度。 此步驟將允許該部分佔據瀏覽器的整個高度。

• 最小高度：100vh

間距

然後，轉到間距設置並刪除所有默認的頂部和底部填充。

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

能見度

也隱藏該部分的溢出。 這將有助於確保在發生動畫時不會出現水平條。

• 水平溢出：隱藏
• 垂直溢出：隱藏

修改行設置

漿紗

接下來，打開行設置並修改不同屏幕尺寸的大小設置。

• 使用自定義裝訂線寬度：是
• 天溝寬度：1
• 寬度：100%
• 最大寬度：100%（桌面），90%（平板電腦和手機）

間距

也刪除該行的默認頂部和底部填充。

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

位置

然後，轉到位置設置並通過相應地修改設置來確保該行保留在該部分的底部：

• 位置：絕對（桌面），默認（平板電腦和手機）
• 位置：底部中心

修改第 2 列設置

背景顏色

接下來，我們將對第二列進行一些更改。 使用白色背景色。

• 背景顏色：#FFFFFF

間距

然後，將一些自定義填充值添加到間距設置中。

• 頂部填充：10vw
• 底部填充：10vw
• 左填充：8vw
• 右填充：8vw

默認過濾器

轉到列的過濾器設置，並確保亮度、反轉和棕褐色過濾器在正常狀態下保持其默認值。

• 亮度：100%
• 反轉：0%
• 棕褐色：0%

懸停過濾器

但是，在懸停時，我們將相應地更改值：

• 亮度：49%
• 反轉：100%
• 棕褐色：100%

位置

我們還通過應用以下位置設置確保將列放置在行容器的右下角：

• 位置：絕對（桌面），默認（平板電腦和手機）
• 位置：右下角

修改第 2 列中的 Woo 標題模塊

標題文字設置

是時候開始定制第 2 列中的不同模塊了！ 打開 Woo Title Module 並更改 H1 文本設置，如下所示：

• 標題字體：Playfair Display
• 標題文字顏色：#000000
• 標題文字大小：3vw（桌面）、5vw（平板電腦）、7vw（手機）

修改第 2 列中的 Woo 價格模塊

價格文本設置

接下來打開 Woo 價格模塊設置並更改價格文本設置。

• 價格字體： Poppins
• 價格文字顏色：#e5bc87
• 價格文字大小：1.4vw（桌面）、3vw（平板電腦）、4vw（手機）

間距

在不同的屏幕尺寸上添加一些自定義的頂部和底部邊距。

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

修改第 2 列中的 Woo 描述模塊

文字設置

進入 Woo 描述模塊。 相應地修改模塊的文本設置：

• 文字字體： Poppins
• 文字字體粗細：輕
• 文字大小：0.8vw（桌面）、1.8vw（平板電腦）、2.7vw（手機）
• 文本行高：2.1em

間距

也添加一些響應式底部邊距。

• 下邊距：3vw（台式機），5vw（平板電腦和手機）

修改第 2 列中的 Woo 添加到購物車模塊

字段設置

接下來我們有 Woo 添加到購物車模塊。 更改模塊的字段設置。

• 字段背景顏色：rgba(255,255,255,0)
• 字段文本顏色：#000000
• 字段字體：Poppins
• 字段文本大小：0.9vw（桌面）、2vw（平板電腦）、3vw（手機）

• 所有角：0px
• 字段底部邊框寬度：1px
• 字段底部邊框顏色：#e5bc87

按鈕設置

轉到按鈕設置並相應地設置按鈕樣式：

• 為按鈕使用自定義樣式：是
• 按鈕文字大小：0.9vw（桌面）、2vw（平板電腦）、3vw（手機）
• 按鈕文字顏色：#ffffff
• 漸變色 1：#e5bd89
• 漸變色 2：#e5bc87
• 漸變類型：線性
• 梯度方向：153deg
• 按鈕邊框寬度：0px

• 按鈕邊框半徑：1px
• 按鈕字體： Poppins

• 頂部填充：1vw（桌面）、2vw（平板電腦）、3vw（手機）
• 底部填充：1vw（桌面）、2vw（平板電腦）、3vw（手機）
• 左填充：3vw（桌面）、6vw（平板電腦）、9vw（手機）
• 右填充：3vw（桌面）、6vw（平板電腦）、9vw（手機）

間距

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

• 下邊距：2vw（Destkop），4vw（平板電腦和手機）

修改第 2 列中的 Woo 元模塊

文字設置

繼續打開 Woo 元模塊並更改文本設置。

• 元字體： Poppins
• 元字體重量：輕
• 元文本大小：0.8vw（桌面）、1.8vw（平板電腦）、3vw（手機）

鏈接文字設置

也更改鏈接文本顏色。

• 鏈接文字顏色：#e5bc87

將代碼模塊添加到第 2 列

要更改 Woo 圖像模塊的縮放背景顏色，我們需要一點 CSS 代碼，我們將把它們放在第 2 列的新代碼模塊中。

添加 CSS 代碼以更改 Woo 圖像縮放背景顏色

將以下 CSS 代碼行添加到代碼模塊：

<style>
.zoomImg {
background-color: #FFE4A5 !important;
}
</style>

3. 為容器添加同步動畫設置

Woo 圖像模塊

現在我們已經為產品頁面上的不同元素設計了樣式，是時候實現產品信息滑入效果了！ 為此，我們將使用 Divi 的內置動畫設置。 打開第 1 列中的 Woo Image Module 並應用以下動畫：

• 動畫風格：幻燈片
• 動畫方向：向上
• 動畫開始不透明度：50%
• 動畫速度曲線：輕鬆

第 1 欄

接下來打開第 1 列設置並使用以下動畫設置：

• 動畫風格：幻燈片
• 動畫方向：左（桌面），上（平板和手機）
• 動畫延遲：950ms（桌面），0vw（平板和手機）
• 動畫強度：25%
• 動畫開始不透明度：100%
• 動畫速度曲線：漸入漸出

第 2 欄

最後，將以下動畫設置應用於第 2 列：

• 動畫風格：幻燈片
• 動畫方向：左（桌面），上（平板和手機）
• 動畫持續時間：1200ms
• 動畫延遲：800 毫秒（桌面），0 毫秒（平板電腦和手機）
• 動畫開始不透明度：100%
• 動畫速度曲線：漸入漸出

4.將產品頁面佈局變成模板

將佈局保存到 Divi 庫

完成整個產品頁面設計後，您可以將其保存到您的 Divi 庫中。 我們將使用這個保存的產品頁面佈局來創建一個新的產品頁面模板。

轉到 Divi 主題生成器並添加新模板

轉到 Divi Theme Builder 並添加一個新模板。

在所有產品上使用模板

在所有產品上使用新模板。

• 用於：所有產品

將佈局上傳到產品頁面模板的正文

然後，單擊“添加自定義正文”並單擊“從庫中添加”。

導航到“您保存的佈局”並選擇您上傳到 Divi 庫的產品頁面佈局。

5. 保存主題生成器更改並查看結果

將佈局上傳到新產品頁面模板後，唯一要做的就是保存所有主題生成器更改並在您的網站上查看結果！

預覽

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

桌面

移動的

最後的想法

在這篇文章中，我們通過向您展示如何設計滑入式產品信息佈局，向您展示瞭如何為您的產品頁面增添趣味。 這是向產品頁面添加一些額外交互的好方法。 您也可以免費下載 JSON 文件！ 如果您有任何問題或建議，請隨時在下面的評論部分發表評論。

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