本文是LOYSEO的外貿網站建設教程内容之一，我将逐漸介紹如何使用Elementor Pro制作woocommerce産品清單模闆，下面進入正題。
原文首發于：https://loyseo.com/creating-a-woocommerce-archive-template-with-elementor-pro/
進入“ 模闆”>“添加新模闆”，選擇類型為 “Product archive”，為其命名，然後單擊“ 建立模闆”
然後，在彈出的模闆庫頁面上，可以選擇一個模闆，點選insert按鈕導入
導入後，頁面上隻有兩個元素，一個是archive title（清單标題）、一個是archive products（産品清單），請點選他們後右鍵删除，模闆裡的元素塊都不好用，設定受限，我們會換兩個發揮空間更大的元素；然後按照下圖所示，将标題的context選項關閉，關閉後就不會在标題前顯示文案“Archives:”了。
接下來按下圖所示，我們在左側元素庫中搜尋Heading元素，并将它拖拽到右側的畫布中，按照下圖設定，點選title右側的
按鈕，并選擇archive title，并在setting中将标題的include context選項關閉，關閉後就不會在标題前顯示文案“Archives:”了；此外，将HTML tag從H2改為H1，表示目前标題為整個頁面的大标題。
然後，我們在左側元素庫中搜尋POST元素，并将它拖拽到右側的畫布中，然後按左側圖檔所示，設定這個POST元素的Query，将source選為current query，因為預設post元素是展示Posts（文章）的，設定為current query，就可以根據頁面的用途來選取展示的内容，這裡我們做的是産品清單，那麼就會取産品展示，譬如打開某個産品分類頁面時，就會取該分類下的産品展示。
再次，我們可以按需調整一下産品的皮膚，見下圖，有三種模式：classic、cards、full content，我比較喜歡第二種card，也是下圖中所示的效果。
接下來我們進行細節調整，下圖是調整後的效果：
colunms：預設為3，表示一行展示3個産品，點選旁邊的電腦圖示，可以切換到平闆、手機裝置模式，這樣可以配置在不同裝置上一行能展示的産品數量
Posts per page：預設為6，表示一頁展示6個産品，你也可以設定為-1，那就是一頁展示所有産品。
Show image：預設為YES，表示展示産品圖檔，若選擇NO，那就不展示圖檔啦
Masonry：預設是關閉的，關閉時，不論産品簡介内容長短，每一行的産品都是等高的，如果一行中産品簡介又長又短，那麼短的下方會留有空白；若開啟masonry時，那産品就像砌牆一樣，不會留有空白，而是錯落有緻。（說了這麼多不如你自己點一下按鈕試試看了~）
Image size：調整圖檔的尺寸，預設是300×300px，一般也不用改
Image ratio：用于設定圖檔比例，通常保持預設的0.66即可
Title：預設為開啟，滑動開關可以選擇顯示或隐藏标題
Title html tag：預設是H3，由于頁面的标題是H1，如果頁面沒有其他H2的話，此處我建議改為H2
Excerpt：預設為開啟，選擇顯示或隐藏産品簡介（又叫産品簡短描述）
Excerpt length：設定簡介的文字長度，預設為25，按需增減吧
Meta data：預設是data、comments，還有author、time兩個選項，可以多選，但作為産品清單頁，我們将他們都去掉，去掉就不再顯示在産品中了
Separator between：預設是·，用于間隔不同的mata data
Read more：預設是開啟，滑動開關可以選擇顯示或隐藏檢視更多按鈕
Read more Text：在這裡設定按鈕的文案，預設是read more
open in new windows：預設是關閉，滑動開關可以選擇是否需要開啟在新視窗打開産品
Badge：徽章，顯示在圖檔上，滑動開關可以選擇顯示或隐藏徽章
Badge taxonomy：此處選擇徽章上顯示的内容，如果是産品清單頁，此處要改為product category
Avatar：滑動開關可以選擇顯示或隐藏發表目前産品或文章的使用者頭像，預設是開啟，此案例中我将它關閉
最後，我們點選左下角的update，并将conditon設定為all product archive，儲存後，産品清單模闆頁面就完成了，我們就可以去找到任一産品分類，打開它的的頁面檢視一下了。
相關教程：對模闆進行樣式調整、添加自定義的産品字段
檢視更多Elementor教程
本文原文由LOYSEO 釋出，LOYSEO專注于WordPress外貿網站建設教程、Elementor教程。