Q: 如何製作首頁的輪播廣告（banner）

免費的Elementor不提供Slider功能，請安裝外掛程式 Premium Addons for Elementor ，它是Elementor的元素擴展外掛程式，使用它的 carousel widget 可以實現輪播廣告功能。 安裝並啟動外掛程式Premium Addons for Elementor之後，請先創建banner的內容，如下圖所示，在templates中add new，範本類型一般選擇setion。 進入頁面后，你將能看到Premium Addons for Elementor提供的範本入口（五角星），點擊它你可以查看一些現成的範本，免費的可以直接導入，標記pro的需要付費。 如下圖所示，我導入了一個banner 插入完成後，你可以按需修改內容素材，完成後點擊左下角的publish按鈕發佈。 接下來用相同的辦法創建第二個banner，你也可以不導入範本，自製一個banner，譬如最簡單的是直接用image圖片元素 記得將圖片尺寸設置為full，將link 設置為custom url，然後輸入圖片需要連結的頁面。 接下來用Elementor編輯需要添加banner 的頁面，總左側元素庫找到premium carousel，將它拖拽到右側頁面中 然後按下圖所示，選擇template為剛才製作的兩個banner。 上圖中我們能看到banner兩側有空白，我們如下圖所示，選擇banner所在的setion，然後在左側的style中，將content width從box設置為full，這下banner兩側就沒有空白了，但是四周還有細小的間隙，請繼續往下看。 如下圖所示操作，點選banner所在的column，然後在advanced標籤頁中，找到padding並設置為0，可以去掉banner周圍的白色縫隙。

Q: 為什麼我的產品首頁沒有展示產品呢？

大概率是的產品首頁未被設置為商店頁面。 請在woocommerce的設置》常規中，按下圖所示方式配置。

Question 1

如何隱藏產品列表頁的排序功能

Accepted Answer

通过添加自定义css.woocommerce-ordering{display:none}

1.進入appearance 》 customize頁面

2.點擊底部的additional css

3.添加如下代碼后，點擊右上角的publish按鈕即可。

.woocommerce-ordering{display:none}

Question 2

如何在首頁展示我想要的產品

Accepted Answer

如果你用的是免費版Astra，使用Elementor編輯首頁，將產品模塊替換成新的元素Product Grid（EA）。

之前我們安裝的Essential Addons for Elementor外掛程式中，提供了Product Grid（EA）元素，使用它替換首頁中已有的產品元素。

在Product Grid中，如下圖所示，在Product setting中，按你的需要調整Filter By，以及Order（排序）規則、並且可以指定產品所屬的目錄（product categories）

其中，作為B2B網站，只有Rencent Products和Featured Products我們能用上。 Rencent Products表示最新產品，Featured Products表示星標產品，在後台產品管理頁面，將產品的星星點一下變實心就表示星標了。

備註：Best selling products表示熱賣產品; sale products表示促銷產品; top rated products表示最高評價產品; 對於B2B站而言，不涉及銷售，也就用不上這三個選項了。

Question 3

如何製作首頁的輪播廣告（banner）

Accepted Answer

免費的Elementor不提供Slider功能，請安裝外掛程式Premium Addons for Elementor，它是Elementor的元素擴展外掛程式，使用它的carousel widget可以實現輪播廣告功能。

安裝並啟動外掛程式Premium Addons for Elementor之後，請先創建banner的內容，如下圖所示，在templates中add new，範本類型一般選擇setion。

進入頁面后，你將能看到Premium Addons for Elementor提供的範本入口（五角星），點擊它你可以查看一些現成的範本，免費的可以直接導入，標記pro的需要付費。

如下圖所示，我導入了一個banner

插入完成後，你可以按需修改內容素材，完成後點擊左下角的publish按鈕發佈。

接下來用相同的辦法創建第二個banner，你也可以不導入範本，自製一個banner，譬如最簡單的是直接用image圖片元素

記得將圖片尺寸設置為full，將link 設置為custom url，然後輸入圖片需要連結的頁面。

接下來用Elementor編輯需要添加banner 的頁面，總左側元素庫找到premium carousel，將它拖拽到右側頁面中

然後按下圖所示，選擇template為剛才製作的兩個banner。

上圖中我們能看到banner兩側有空白，我們如下圖所示，選擇banner所在的setion，然後在左側的style中，將content width從box設置為full，這下banner兩側就沒有空白了，但是四周還有細小的間隙，請繼續往下看。

如下圖所示操作，點選banner所在的column，然後在advanced標籤頁中，找到padding並設置為0，可以去掉banner周圍的白色縫隙。

Question 4

外掛程式要設置成自動更新嗎？

Accepted Answer

不建議設置為自動更新，因為外掛程式更新還是可能會出錯的，建議1~3個月手動更新一次，更新前記得備份網站，除了主機的備份以外，還可以用updraftplus備份，直接在wordpress後台備份，方便後續恢復，如果更新出錯，還可以用備份進行還原。

Question 5

為什麼產品首頁不能用Elementor編輯

Accepted Answer

當你用Elementor編輯SHOP或products頁面時，出現下方圖一的錯誤，那是因為這個頁面在Woocommerce的設置中被選為商店頁面（見下方圖二），並且在頁面管理中，也能看到它被標記為商店頁面（見下方圖三），此時，便不能用Elementor編輯，它是自動調用主題的範本的，如果你非要用Elementor編輯它，請先在Woocommerce的設置中，取消該頁面作為商店頁面。

圖一圖二圖三

Question 6

為什麼我修改了頁面標題，但在菜單中還是修改前的？

Accepted Answer

這很可能是因為：這個頁面在菜單中的標題被修改了，請前往appearance>menu中查看和修改，如果你想將菜單的頁面標題與頁面本身標題保持一致，請重新添加這個菜單項，不要人工添加自定義連結，直接選擇頁面並點擊添加到菜單按鈕。切記：如果你在菜單中修改了頁面的標題，那麼它將不會同步你在頁面管理中設置的標題。
推薦閱讀：如何在WordPress中製作菜單

Question 7

為什麼我的產品首頁沒有展示產品呢？

Accepted Answer

大概率是的產品首頁未被設置為商店頁面。請在woocommerce的設置》常規中，按下圖所示方式配置。

Question 8

菜單裡的購物車圖示沒對齊，怎麼辦？

Accepted Answer

原因是在設置菜單最後一項圖示時，選中了Take Last Item Outside Menu，如下圖所示，去掉勾選即可恢復。

獨立站建站教學

外貿獨立站架設網站教學（1）：零基礎用Astra主題做外貿獨立站