如何在 Divi 產品頁面模板中垂直堆疊 Woo Gallery 圖片
已發表: 2020-07-01默認情況下，只要您將圖庫圖片添加到 WooCommerce 產品中，它們就會水平顯示在產品頁面設計前端的產品特色圖片下方。 在某些特定設計中，垂直堆疊這些 woo 畫廊圖像可能更方便，例如在全屏產品頁面設計中。 如果您正在尋找一種在使用 Divi 的 Theme Builder 創建的產品頁面模板中垂直堆疊 woo 畫廊圖像的快速方法，您會喜歡本教程。 我們將逐步向您展示如何到達那裡。 我們將為這種方法提供最小的產品頁面模板，您也可以免費下載！ 本教程最適用於使用 1:1 比例圖像的產品頁面。
讓我們開始吧。
預覽
在我們深入學習教程之前，讓我們快速瀏覽一下不同屏幕尺寸的結果。
桌面
移動的
免費下載產品頁面模板
要使用免費的產品頁面模板，您首先需要使用下面的按鈕下載它。 要訪問下載，您需要使用下面的表格訂閱我們的 Divi Daily 電子郵件列表。 作為新訂戶，您每週一將收到更多的 Divi 善良和免費的 Divi 佈局包！ 如果您已經在列表中，只需在下面輸入您的電子郵件地址，然後單擊下載。 您不會被“重新訂閱”或收到額外的電子郵件。
免費下載
加入 Divi 時事通訊，我們將通過電子郵件向您發送一份最終的 Divi 登陸頁面佈局包，以及大量其他令人驚嘆的免費 Divi 資源、提示和技巧。 跟隨，您將很快成為 Divi 大師。 如果您已經訂閱，只需在下面輸入您的電子郵件地址，然後單擊下載即可訪問佈局包。
您已成功訂閱。 請檢查您的電子郵件地址以確認您的訂閱並獲得免費的每週 Divi 佈局包！
在 Divi Theme Builder 中構建產品頁面模板
轉到 Divi 主題生成器並添加新模板
首先轉到Divi Theme Builder，然後單擊“添加新模板”。
在所有產品上使用模板
我們將在所有產品上使用此模板，但您可以隨意修改條件。
進入模板的正文模板編輯器
創建模板後，單擊“添加自定義正文”並繼續選擇“構建自定義正文”以重定向到模板編輯器。
開始構建類別頁面模板正文
修改第 1 節
背景顏色
在模板編輯器中，您會注意到一個部分。 打開該部分並添加白色背景色。
- 背景顏色：#ffffff
間距
轉到設計選項卡，然後刪除所有默認的頂部和底部填充。
- 頂部填充：0px
- 底部填充：0px
添加新行
列結構
繼續使用以下列結構添加新行：
漿紗
尚未添加任何模塊，打開行設置，轉到設計選項卡並相應地更改大小設置：
- 使用自定義裝訂線寬度：是
- 天溝寬度：1
- 均衡柱高：是
- 寬度：95%
- 最大寬度：2560px
- 行對齊：居中
間距
我們也會在較小的屏幕尺寸上使用一些自定義的頂部和底部填充。
- 頂部填充：100px（僅限平板電腦和手機）
- 底部填充：100px（僅限平板電腦和手機）
主要元素 CSS
為了在桌面上對齊列內容，我們將在行的主要元素中使用兩行 CSS 代碼。 我們將在平板電腦和手機上恢復顯示屬性。
桌面：
display: flex; align-items: center;
平板電腦和手機：
display: block;
第 2 列漸變背景
完成常規行設置後，打開第二列的設置並應用徑向漸變背景。
- 顏色 1：#f7f2ef
- 顏色 2：rgba(255,255,255,0)
- 漸變類型：徑向
- 徑向：中心
- 起始位置：20%
- 結束位置：20%
第 2 列間距
轉到列的設計選項卡並更改不同屏幕尺寸的自定義填充值。
- 頂部填充：30%（桌面），10%（平板電腦和手機）
- 底部填充：10%
- 左填充：5%
- 右填充：5%
將 Woo 圖像模塊添加到第 1 列
動態內容
是時候添加模塊了！ 我們在第 1 列中需要的第一個模塊是 Woo Images 模塊。 如果您使用比例為 1:1 的精選圖片和圖庫圖片，則本教程效果最佳。 這樣，我們就可以在接下來的步驟中將圖像變成圓圈。 添加 Woo 圖像模塊後，請確保將動態內容設置為“此產品”。
- 產品：本產品
將代碼模塊添加到第 1 列
添加 CSS 代碼
在 Woo 圖像模塊的正下方，我們將添加一個代碼模塊。 我們在此代碼模塊中插入的 CSS 代碼將幫助我們在列的左側垂直堆疊 woo 畫廊圖像。
<style>
.single-product div.product .woocommerce-product-gallery .flex-viewport{
width: 80% !important;
float: right;
border-radius: 100vw;
}
.woocommerce-product-gallery__image.flex-active-slide {
width: 12.5% !important;
}
.single-product div.product .woocommerce-product-gallery .flex-viewport img {
width: 100%;
}
.et_pb_wc_images div.images ol.flex-control-thumbs.flex-control-nav {
width: 15% !important;
float: left;
}
.et_pb_wc_images div.images ol.flex-control-thumbs.flex-control-nav li {
width: 100%;
float: none;
}
.et_pb_wc_images div.images ol.flex-control-thumbs.flex-control-nav li img {
border-radius: 100vw;
}
</style>
將 Woo 標題模塊添加到第 2 列
動態內容
進入下一欄。 在那裡，我們需要的第一個模塊是 Woo 標題模塊。
- 產品：本產品
標題文字設置
轉到模塊的設計選項卡並按如下方式更改標題文本設置：
- 標題字體：PT Sans
- 標題字體粗細：粗體
- 標題文字顏色：#000000
- 標題文字大小：84 像素（桌面）、60 像素（平板電腦）、45 像素（手機）
將 Woo 描述模塊添加到第 2 列
動態內容
進入下一個模塊，即 Woo 描述模塊。
- 產品：本產品
- 描述類型：簡短描述
文字設置
相應地修改模塊的文本設置：
- 文字字體：Karla
- 文字大小：17px（桌面和平板電腦），15px（手機）
- 文本行高：1.9em
間距
通過添加一些頂部和底部邊距來完成模塊設置。
- 最高利潤率：5%
- 底邊距：5%
將 Woo 價格模塊添加到第 2 列
動態內容
在 Woo 描述模塊正下方添加 Woo 價格模塊。
- 產品：本產品
價格文本設置
轉到模塊的設計選項卡並按如下方式修改價格文本設置：
- 價格字體：PT Sans
- 價格字體粗細：粗體
- 價格文字顏色：#ce8654
- 價格文字大小：27px
將 Woo 添加到購物車模塊添加到第 2 列
動態內容
我們需要完成本教程的下一個也是最後一個模塊是 Woo 添加到購物車模塊。
- 產品：本產品
字段設置
轉到設計選項卡並按如下方式更改字段設置：
- 字段背景顏色：#ffffff
- 字段文本顏色：#000000
- 字段字體：Open Sans
- 所有角：0px
- 字段底部邊框寬度：1px
- 字段底部邊框顏色：#ce8654
按鈕設置
然後，在按鈕設置中設置按鈕樣式。
- 為按鈕使用自定義樣式：是
- 按鈕文字顏色：#ffffff
- 按鈕背景顏色：#0a0201
- 按鈕邊框寬度：0px
- 按鈕邊框半徑：100px
- 按鈕字體：PT Sans
- 按鈕字體粗細：粗體
- 按鈕頂部填充：20px
- 按鈕底部填充：20px
- 按鈕左填充：50px
- 按鈕右側填充：50px
間距
並通過向 Woo 添加到購物車模塊添加一些頂部邊距來完成模塊設置和本教程。 完成修改產品頁面模板後，請確保在查看產品頁面上的結果之前保存所有主題生成器更改！
- 最高利潤率：5%
預覽
現在我們已經完成了所有步驟，讓我們最後看看不同屏幕尺寸的結果。
桌面
移動的
最後的想法
在這篇文章中，我們向您展示瞭如何通過使用 Divi 的主題生成器和 WooCommerce 模塊構建的產品頁面獲得創意。 更具體地說，我們向您展示瞭如何垂直堆疊 woo 畫廊圖像。 這種方法適用於全屏產品頁面設計，但對於您構建的任何類型的產品頁面模板都可以派上用場。 您也可以免費下載 JSON 文件！ 如果您有任何問題或建議，請隨時在下面的評論部分發表評論。
如果您渴望了解有關 Divi 的更多信息並獲得更多 Divi 免費贈品，請確保訂閱我們的電子郵件時事通訊和 YouTube 頻道，這樣您將永遠是第一批了解此免費內容並從中受益的人之一。