如何將粘性產品圖像添加到您的 Divi 產品頁面模板

在網上購買產品時，出色的產品圖片對於完成銷售至關重要。 這就是為什麼大多數產品頁面在頁面頂部都有這些產品圖片，所以這是買家看到的第一件事。 然而，當用戶向下滾動頁面以查看有關產品的更多信息（描述、評論等）時，主產品圖像不再可見。 保持這些產品圖像可見的一種方法是添加粘性產品圖像，當潛在買家瀏覽您的產品信息時，該圖像保持可見。

在本教程中，我們將向您展示如何將粘性產品圖片添加到您的 Divi 產品頁面模板。 為此，我們可以優化 Divi 的 WooCommerce 產品圖像模塊，以在原始產品圖像滾動出視圖時顯示並粘貼在頁面頂部。

讓我們開始吧！

搶先看

這是我們將在本教程中構建的設計的快速瀏覽。

免費下載佈局

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

下載文件

免費下載

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

下載

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

https://youtu.be/vwfPFqyVaNM

訂閱我們的 YouTube 頻道

如何上傳模板

轉到 Divi 主題生成器

要上傳模板，請導航到 WordPress 網站後端的 Divi Theme Builder。

上傳網站模板

然後，在右上角，您會看到一個帶有兩個箭頭的圖標。 單擊該圖標。

導航到導入選項卡，上傳您可以在本文中下載的 JSON 文件，然後單擊“導入 Divi 主題生成器模板”。

保存 Divi 主題生成器更改

上傳文件後，您會注意到一個新模板，其中包含已分配給所有帖子的新正文區域。 一旦您希望激活模板，請立即保存 Divi Theme Builder 更改。

讓我們進入教程，這樣我們就可以學習從頭開始構建這個東西，好嗎？

如何將粘性產品圖像添加到您的 Divi 產品頁面模板

上傳 Theme Builder Pack 5 產品頁面模板

首先，我們將通過添加我們的預製產品頁面模板之一來快速啟動設計。 要將模板導入 Theme Builder，您需要執行以下操作：

1. 導航到 Divi 主題生成器
2. 單擊頁面右上角的便攜性圖標。
3. 在可移植性彈出窗口中選擇導入選項卡。
4. 下載並導入 Divi Divi Theme Builder 5 產品模板文件。 在此處下載包後，解壓縮文件，您將找到需要導入的“divi-theme-builder-pack-5-product-page-template.json”文件。
5. 單擊導入按鈕
6. 導入模板後，單擊模板自定義正文區域上的編輯圖標以編輯模板佈局。

添加新行

我們希望在用戶滾動到已經包含產品圖像的頂部部分後顯示產品圖像（無需在那裡顯示）。 因此，我們將把它添加到佈局頂部下的一個新部分。

繼續並在頂部部分下添加一個新的常規部分。

打開新部分的設置並更新填充：

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

轉到高級選項卡並更新 z 索引：

• Z指數：13

這樣圖像（此部分的子元素）將在滾動時保持在頁面上其他部分/元素的上方。

添加行

接下來，在該部分中添加一列行。

打開行設置並調整行對齊和填充：

• 行對齊：右
• 填充：0px 頂部，0px 底部

添加產品圖片

現在我們準備添加最終會在滾動時粘在頁面頂部的產品圖像。 要添加產品圖片，請複制頂部部分中現有的產品圖片模塊，並將其粘貼到我們的新行中。

Woo 圖像設置

打開新woo圖片模塊的設置，調整內容如下：

• 顯示圖庫圖片：關閉
• 顯示銷售徽章：關閉

（注意：如果需要，您可以保留圖庫圖像。注意不要佔用太多空間，因為此圖像模塊將懸停在頁面上的其他元素上。）

在設計選項卡下，將強制全角選項更新為“是”。

然後更新以下內容：

• 最大寬度：300px（桌面），200px（手機）
• 模塊對齊：右

調整填充：

• 填充：頂部 10 像素，右側 10 像素

在高級選項卡下，更新以下內容：

• Z指數：1
• 粘滯位置：粘在頂部

一旦用戶滾動過該圖像，這將導致圖像粘在頁面頂部。

一旦粘性位置到位，返回設計選項卡並使用粘性選項更新不透明度過濾器，以便它隱藏圖像直到它變得粘性。 您可以通過將鼠標懸停在設置上並單擊縮略圖圖標來部署粘性樣式選項。

• 不透明度：0%（桌面），100%（粘性）

刪除節、行和列的間距

現在，我們有一些不需要的間距，新產品圖像在我們的佈局流程中使用了這些間距。 要刪除該間距，我們需要做的就是為列提供一個自定義高度值，該值要么是“0”，要么是非常低的值。 即使產品圖像有一列沒有任何實際高度，它仍會顯示/溢出。

打開列設置並將以下自定義 CSS 添加到主元素：

height: 15px;

就是這樣！ 我們都完成了。

最後結果

通過查看您網站上的實時帖子來查看最終結果。

最後的想法

在 Divi 中將粘性產品圖片添加到您的產品頁面模板是一種快速簡便的方法，可以在訪問者瀏覽您的產品時讓您的產品保持可見。 而且，您還可以選擇使用相同的技術將添加到購物車按鈕放在它旁邊。 無論如何，希望這對您的下一個項目有所幫助。

我期待在評論中收到您的來信。

乾杯!