Astra主題教學：如何製作B2B企業獨立站

你是否沒有多少企業網站架設經驗、企業Soho初期經費有限、想找架設網站服務商又怕被坑、想要自學架設網站又不知道如何下手？

本教學一步步教你：如何使用Astra主題製作一個B2B企業獨立站，全篇19600+字，經過兩年多的讀者反饋與驗證，只要你肯花時間研究琢磨，照著步驟做，就能做出一個起步型的企業網站哦。

我們選用了Astra主題來架設網站，因為它受眾廣、速度快、質量有保證，配套的功能外掛也都是選擇了用戶多、評價好的外掛，對起步階段的企業Soho自架設網站很有幫助~

如果你缺少自學架設網站的時間，可查看我提供的企業網站架設服務。

架設網站要花多少錢？

• 網域費用：65元左右/年
• 主機費用：900元~1100元/年
• 主題費用：159CNY/終生/站，請聯繫我購買
• 外掛費用：0
• 教學費用：0

🎊🎊如果用astra主題架設網站，推薦用Cloudways主機，我在主機坑里摸爬了兩年留下的它，他不僅速度快、對新手來說非常易用，還提供了Astra Pro一年不限站點，別漏了我提供的特別福利。

202209更新視頻教學

更多視頻教學在福利中：https://wordpressmu-903551-3137813.cloudwaysapps.com/member/courses/astra-elementor/

選購網域和主機

註冊網域，建議在Namesilo購買，新用戶首購使用優惠券loyseo可以減1美元。

註冊Cloudways：點擊本站鏈接前往註冊，就能避開麻煩的身份認證。

別漏了：註冊填表時，點擊promo code文案，輸入loyseo可享有頭3個月7折優惠。

我製作了Cloudways文章教學、視頻教學合集（放在B站，請看下方視頻）、分章節的短視頻教學，請按需選擇。

3. 在網站完成以前，設置“建議搜索引擎不收錄”。

好啦~接下來我們便可以開始安裝Astra主題，開始搗鼓網頁啦~

安裝Astra主題

Astra主題是知名的輕量主題，也就是說它的體積小、網站打開會比較快。網站打開速度慢，用戶就都溜了溜了~

1.進入WordPress後台的Appearance 》themes頁面，點擊Add New按鈕

2.在添加主題頁面中，搜索Astra，找到對應主題後，點擊Install按鈕

3.安裝完astra後，點擊Activate激活主題，接下來我們導入網站模板

相關教學：如何安裝wordpress主題（3種方法）

Astra主題免費版與付費版的區別

Astra主題付費版=Astra主題+付費外掛，這個主題本身是免費的，通過幾個付費外掛來擴展付費的高級功能。

付費外掛如下，可聯繫我打包購買，159CNY/終生/站點，買3份即可不限站點。

1. Astra addon plugin ——增強Astra主題的外觀選項配置，譬如對顏色、背景、字體、博客、菜單、導航、返回頂部、商店的增強配置。
2. Astra premium sites ——提供付費網站模板
3. Ultimate elementor —— 這是Elementor的擴展元素，當安裝後，在使用elementor編輯頁面時，能在元素庫中找到更多元素塊使用，所以，這個外掛安裝後，界面上會提示你安裝Elementor外掛，你可以直接點擊提示按鈕安裝。
4. Astra portfolio —— 用於管理作品/案例的擴展功能，易用性比較弱，不是必要用的。

導入Astra的預製網站模板

Astra提供了大量的網站模板，每個模板裡都包含了多個頁面以及必要的內容（譬如產品、文章樣例）。 Astra主題提供了免費和付費兩類預製模板。

導入模板需要安裝外掛，免費和付費的模板的導入外掛有所不同，免費版的叫做：Starter Templates，付費版的叫做：Premium Starter Templates，他們倆的導入模板流程都一樣，下面將會詳細介紹。

如何導入網站模板

Astra免費版依舊提供了50+套免費的網站模板（真良心！）。

如果你購買了Astra付費版，請安裝Premium Starter Templates外掛，並綁定授權碼。你也可以同步將Astra其他幾個付費外掛一起安裝、激活、授權。

然後點擊菜單appearance – starter templates進入導模板功能。

如果你決定使用免費版的，那麼請進入Appearance 》 Astra option頁面，找到右側的install importer plugin，點它安裝免費的導入模板的外掛。

導入模板外掛安裝完成後，我們將看到如下界面，點擊按鈕繼續。

這裡，讓我們選擇網站模板的頁面編輯器，這裡我們選擇Elementor，因為它是時下最熱門最好用的Wordpress page builder（頁面編輯器）。

接下來我們看到了模板列表，篩選出免費的模板列表（沒標記premium的就是免費模板），請根據你的喜好選擇模板，我們以下圖中的organic store為講解示例，這是一個電商的網站模板，我們會將它改造為B2B企業網站。

選中模板後，你可以上傳logo和設置它的展示寬度，如果沒有logo的話，可以以後再傳，我們點擊按鈕繼續。

然後，我們可以選擇配色方案與字體，如果現在還拿不定主意，以後也可以再改的，點擊按鈕繼續。

如下圖所示，在導入設置中，會讓你填一些信息，譬如名字、郵箱等等，都可以不填。

下圖中，默認勾選了4個選項：導入網站的外觀樣式設置（customizer setting）、導入widgets（小工具，通常用於側邊欄）、導入content（內容，譬如文章、產品），分享非敏感信息給主題官方，但對新手而言，我的建議是保持默認設置，點擊按鈕提交。

若是你以後想更換模板，為了不引起內容混亂，再次導入時，圖中會提供一個選項：delete previously imported site（即刪除當前模板），你也可以勾選它，以便刪除已有模板的內容和設置。

接下來我們靜靜等待網站導入，不要關閉網頁哦。

導入完成後將看到成功提示。

若是導入的進度條卡主不動，可重新再導入操作一次。

若是導入失敗，系統會給與原因提示及解決辦法。

若是導入成功，但網站依舊不是模板的樣子，那麼請二次導入試一試。

此外，部分服務器（譬如WPXhosting）因為安全策略原因，不允許做導入動作，或是導入完成後，依舊還是導入前的老樣子，此時，你就需要聯繫主機商的客服來解決了。

導入完成後，我們查看一下網站，大功告成。

由於過多的外掛會影響網站的速度和安全，所以用不上的外掛，就請前往plugins/外掛的列表中進行禁用並刪除。

• CartFlows外掛是隨模板安裝的B2C所需的外掛，如果你是製作B2B企業獨立站，可以將他們禁用後刪除。
• Starter Templates是導入網站模板時用到的，如果你不需要再導入模板了，也將它禁用並刪除。

設置網站Logo、Icon、名稱

網站模板導入完成後，我們開始設置網站的logo、icon（顯示在瀏覽器頁卡中的小圖標）、網站名稱（site title）及標語（tagline）。

如下圖所示，在appearance 》 astra option頁面中，點擊upload logo進入

相關教學：WordPress安裝後必須要做的11件事

修改菜單

相關教學：如何在WordPress中製作菜單（7個功能點），你可以按照這個片教學給菜單內容進行增加、修改、刪除、排序。

如果你想製作超級菜單(Mega menu）：如下圖所示，將鼠標懸停在Products上，下拉菜單裡出現了豐富的圖文內容，那麼你需要購買Astra付費版。

去掉菜單中的無用頁面

去掉我們用不上的頁面，譬如下圖中的Account、My account、Cart。

去掉購物車圖標，增加搜索圖標

針對最新版本的Astra：進入Appearance 》Customize 》Header Builder中，刪除cart，然後加入search圖標。

針對舊版本的Astra：進入Appearance 》Customize 》 Header 》 Primary menu頁面中，將last item in menu從woocommerce（購物圖標）設置為search（搜索圖標）。

在主導航上方添加頂部導航

接下來講解如何實現上圖所示的頂部導航，我們將添加一個聯繫郵箱和一組社交媒體圖標。

從後台的appearance》astra options頁面中，點擊header builder進入。

然後如下圖所示，添加social到第一行header的右側

再在第一行左側點擊加號添加HTML

接下來，點擊HTML1，在左側的編輯框裡，切換到Text模式，輸入：

Email:

接下來我們去配置Social，點擊之前添加的Social，在左側能看到已經添加了3個示例，你可以在下圖①處選擇其他社交媒體，然後點擊按鈕添加，也可以點擊已有的圖標譬如facebook，在url中填入你的Facebook主頁地址。如果你需要更換圖標，在下圖③處點擊即可展開圖標面板。

當添加完圖標後，你還可以設計它們的樣式，如下圖所示，切換到design標籤，然後你可以配置圖標的大小、圖標之間的間距、圖標與背景之間的間隙、圖標的圓角弧度、圖標和背景的顏色&鼠標懸停色。

此外，在上圖的右下角，我們能看到三個圖標：電腦、平板、手機，請點擊平板或手機，在平板和手機上的header是獨立製作的，請自行製作一下哦。

安裝必要的外掛

此時網站還是缺少不少功能的，譬如詢盤表單、詢盤郵件通知等等，請在WordPress後台直接安裝下面這些免費外掛，相關教學：如何安裝wordpress外掛（3種方法），安裝完成後記得active激活他們。

• Essential Addons for Elementor：Elementor的元素擴展包，包含了產品、文章、Ninjaforms表單等元素塊，Astra免費版和Elementor免費版都不提供這類元素塊，並且astra的網站模板裡是使用Woocommerce簡碼實現的產品展示，不利於我們設置。
• Elementor – Header, Footer & Blocks：用它能用Elementor免費版製作網站的頁頭、頁腳，現在Astra的模板基本都用上文說過的、主題自帶的header和footer builder，如果你覺得主題自帶的不夠用，可以用這款外掛來製作。
• Ninja forms：實現詢盤表單，如果你使用的是Elementor Pro，就不需要安裝它，直接用Elementor Pro的Form元素來製作詢盤表單，同時，在Elementor的後台菜單裡，有一個submissions菜單可用於查詢詢盤。
• Post SMTP：實現詢盤郵件通知
• Custom Product Tabs for WooCommerce：實現產品頁面詢盤表單標籤頁
• Code snippets：可安裝功能短代碼，譬如：安裝google analytics跟踪代碼、更換站點管理員地址
• Wordfence：實現網站安全防護
• WPS Hide Login：自定義網站登錄地址，這個外掛裝完並激活後，後台的登錄地址會默認從/網域/wp-admin改為/網域/login

部分外掛此處未提及，在下文中介紹到對應功能，再安裝即可。下文我們會逐一介紹這些外掛的使用教學以及用處。

網站安全防護

外掛安裝完成後，按如下兩篇教學給網站增加安全防護。

• WordPress網站安全防護：Wordfence Security外掛下載與教學
• 修改Wordpress登錄地址：WPS Hide Login外掛下載與教學

修改聯繫我們頁面

本教學選的模板中缺少了聯繫表單，我們要將它補充完整，請按下面的教學逐步完成操作。

1. 用Ninjaforms添加聯繫表單
2. 創建免費的企業郵箱
3. 用Post SMTP配置詢盤通知郵件和記錄郵件發送記錄

接下來，我們將表單放入到聯繫我們頁面中

在網站all pages頁面中，找到contact頁面，點擊edit with elementor。如果你的頁面下方找不到edit with elementor，那麼請直接點擊edit，進入後，點擊按鈕edit with elementor。

在頁面左側的工具欄中，輸入ninja搜索，將圖中標記有EA的ninja forms元素塊，左鍵按住拖拽到右側頁面中的目標位置。 （如果你沒安裝Essential Addons for Elementor外掛，是看不到這個元素塊的，如果你安裝了還看不到元素塊，那麼，請繼續往下看）

在wordpress後台找到essential addons菜單，來到elements菜單下，通過ctrl+f的頁面搜索技能，輸入ninja找到ninja form的元素，點擊它右邊的開關按鈕，然後回到頁面頂部點擊保存按鈕，這個元素就能在編輯頁面時找到了。通常這個功能的作用是為了提升頁面速度，因為用不到的元素，如果還擺在頁面的css、js中，無疑會增加頁面的體積，這也是速度優化的一項工作，部分優秀的外掛，能夠提供這個能力，當然，我也發現有些外掛提供了“表面上”的這個能力，雖然有開關，但是css並未做元素分離，也就是不論你開關與否，css的體積都不會受到影響。

然後在左側選擇之前製作的表單，Ninja forms元素塊在Elementor中編輯時會出現一直在加載的情況，我目前也還沒找到解決方案，但實際他在前台是能夠正常顯示的，所以此問題暫時擱置。

我們點擊頁面左下角的update的發布頁面，並預覽它，如下圖所示，表單已經成功顯示。

我們接下要修改表單的樣式，譬如：隱藏表單標題，修改字段標題的粗細，修改輸入框內部的顏色、修改提交按鈕的樣式。

表單樣式修改完之後是下圖所示效果，接下來我們逐一操作。

隱藏Ninjaforms表格標題

我們依舊還在Elementor編輯聯繫我們頁面中，左鍵點選剛才在頁面中添加的ninja froms表單，如下圖所示，在左側的工具欄中，將Title開關關閉，保存一下頁面去預覽一下標題是否隱藏成功，如果失敗，那麼繼續下一步。

去編輯這個Ninja forms，在Advanced – display settings中，將display form title關閉，保存表單後，再去預覽聯繫我們頁面，標題會成功隱藏。

隱藏Ninjaforms表單的標*字段必填的提示文案

在表單標題的下方有一段話：“Fields marked with an * are required”，這個可以說是常識了，無需贅述，所以我們將這段話隱藏，需要用到自定義CSS功能。

1.進入appearance 》 customize頁面

2.點擊底部的additional css

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

.nf-form-fields-required { display: none; }

調整Ninjaforms字段輸入框的填充顏色

接著用Elementor編輯聯繫我們頁面的Ninja forms元素，在左側工具欄的Style中，找到input & textarea，將background color設置為白色#ffffff，這樣輸入框內的填充顏色就變成了白色。

調整Ninjaforms字段標題的粗細

調整Ninjaforms提交按鈕的樣式

繼續，在Style標籤頁中，找到submit button按鈕，開始設置

繼續選擇hover標籤，設置鼠標懸停於按鈕時的文本顏色（text color）與按鈕背景顏色（background color）

此時，樣式修改已完成，我們預覽一下頁面，由於預覽時是在管理員已登錄狀態下查看到的樣子，並不是用戶真正看到的樣子，我們還需要更換一個瀏覽器或無痕狀態下去查看網頁是否如意，結果我便發現按鈕的異常，在管理員預覽模式下是正常的，而換個瀏覽器時，按鈕就變成了圓角，並且不是全寬。 （如下圖所示）

於是，我又重新修改了一下按鈕的設置，如下圖所示，改完後保存、換個未登陸後台的瀏覽器查看，一切正常了。

添加博客頁面

這套網站模板缺少了博客頁面，博客頁面可以用於發布產品相關的知識文章、公司動態等，如果不想寫博客，emm，那網站收穫詢盤的可能性就低了許多，你看我們平常買一些大件，也會多方看評測、知識型文章，而這些文章就在潛移默化中決定著我們的購買意願。

接下來進入具體操作，提供兩種解決方案，一種是用Elementor製作博客頁面，這種方法複雜一些，不過能學到元素的使用方法；另一種是用主題自帶的博客列表模板，這種方法簡單，這兩種方法你都看一下，因為在第二種方法裡介紹了博客詳情頁的顯示項與側邊欄的配置。

用Elementor製作博客頁面

這個製作方法沒有側邊欄，如果你需要展示側邊欄，請用下文的第二種方法。

1. 在後台，找到菜單pages》add new，點擊進入
2. 輸入頁面標題Blog，點擊Edit with elementor

為了保持設計的一致性，我們從about us頁面複製標題模塊到Blog中

請使用Elementor編輯about us頁面，如下圖所示，右鍵點選模塊，再點擊copy複製標題模塊

然後回到Elementor編輯的博客頁面，右鍵粘貼（paste）這個模塊

粘貼完成後，我們發現跟about頁面不一樣，用elementor編輯about頁面時，頂部未顯示導航，因為about頁面設置的是透明導航，我們也將blog頁面同樣設置一下。

進入後台的all pages頁面，找到blog，點擊Edit。

在右下角找到transparent header設置，選擇Enabled，然後update頁面即可。

接下來繼續用Elementor編輯Blog頁面，你可以保存後刷新一下頁面，頂部的導航將消失，這表示透明導航生效了。

先修改一下標題，改為Blog，左鍵點選元素後，在左側工具欄中將出現這個元素的設置項，如下圖所示。

然後我們向頁面中添加文章元素塊，在左側元素欄中，點擊右上方的九宮格就能回到元素選擇面板，輸入post搜索，找到標記有EA的post grid元素，左鍵點選並拖拽它到右側頁面中。

如下圖所示，目前只能看到一篇博客文章，這是因為咱們還沒添加文章呢，你可以按照教學《如何在WordPress中發布和管理文章？》去添加一篇測試用的示例文章，文章要包含封面圖片、摘要、分類、標籤、正文，然後在文章列表中用EA Duplicator快速復制幾篇文章。

在上圖中箭頭指向位置，是每頁文章數量，默認是4，有點少，可以改為8。

下圖是我快速復制製作的9篇文章。

然後我們繼續用Elementor編輯Blog頁面，刷新一下頁面獲取這9篇文章數據。

如下圖所示，這個文章元素有很多的配置項，我在下圖中用數字標註了常用配置項的對應關係。

如果你要改文章日期的格式，你要在WordPress後台設置。

我把作者頭像與名字都隱藏起來了，然後將日期挪到了標題下方，同時顯示了文章的分類（在鼠標懸停於圖片時才會顯示分類），如下圖所示。

你可以嘗試一下每個配置的功能，其中若看到配置項名稱右側顯示了電腦圖標，說明它可以在不同設備上選擇不同的設置，這是為了讓網站能夠靈活的適應電腦、平板、手機設備，也就是響應式設計。

最後我們調整一下文章元素塊的上下間距，在元素的advanced標籤頁設置margin top和bottom的數值，如下圖所示，記得鎖鏈圖標要解鎖，不然margin的每個值都是同一數值。

最終，你會得到下圖這樣的博客頁面。

相關教學：

• 如何在Elementor中修改文本的字體、大小、顏色、樣式
• Elementor的Advanced高級設置教學（18個功能點）
• Elementor的全局樣式與設置
• Elementor主題樣式設置詳解

用Astra默認的博客頁面

免費版的Astra也提供了基礎的博客頁面設置功能的

1. 在後台，找到菜單pages》add new，點擊進入
2. 輸入頁面標題Blog，然後直接發布保存
3. 進入Setting》reading頁面，設置posts page為剛才添加的blog頁面（如下圖所示），然後保存即可。

接下來我們去設置一下博客頁面，請進入appearance》astra options頁面

首先我們確認已經激活了Astra pro的授權

然後，激活所有astra pro的外觀配置。

當激活astra pro外掛後，你可能會發現，在頁面的兩側有空隙，請進入appearance-customize-global-container頁面中，如下圖所示設置space outside body的left和right中的數值為0.

接下來，在astra options中找到blog layouts進入

進入後，我們能看到兩個選項，1.用於設置博客頁面和文章歸檔頁面的；2.用於設置博客詳情頁面。

免費版和付費版的Astra的Blog配置功能不一樣，我們依次講解。

如果你使用的是免費版，將看到如下配置界面。

如果你用的是付費版Astra，你將能看到更多的配置選項，下面提供一個配置示例。

設置完blog後，我們點擊左上角的箭頭，退回選擇single post進行設置單篇文章詳情

設置過程中，記得隨時點擊頂部的publish按鈕保存。

接下來我們再去設置一下博客頁面和博客詳情頁面的側邊欄，側邊欄一般放博客的分類、搜索框、最新博客文章等等，方便用戶使用。

我們依舊在appearance》customize頁面，找到sidebar，點擊進入，在Blog posts和archives欄，都選擇Right sidebar，這表示側邊欄將展示在頁面右側。然後點擊publish保存。

然後我們去設置sidebar的內容，進入appearance》widgets中，在wordpres 5.8版本之後， widgets的模樣發生了變化，不再是下圖的樣子，如果你跟我一樣不習慣新的樣子，那就安裝一個外掛：classic widgets，安裝後便可以變成下圖所示的界面了。找到main sidebar，如下圖所示，我們能看到裡頭有search（搜索）、recent post（最新文章）等內容了，你可以點擊內容右側的三角箭頭展開查看，對不必要的內容進行delete刪除。

譬如Meta通常是不必要的，裡頭會放置網站的登錄地址等功能入口。一般情況下，要保留的內容是搜索、分類、最新文章，是否保留最新評論，看你的需求，譬如你的網站沒開放評論，那麼也就不必要放這個模塊了。

你還可以對側邊欄的內容進行拖拽排序。

我們還需要設置一下博客頁面的麵包屑，這是SEO的基礎技術之一。

還是在appearance》customize頁面，找到breadcrumb，點擊進入，如下圖所示設置麵包屑的位置和不需要展示麵包屑的頁面。 （下圖中的after header視同after）

針對Astra Pro，我們查看Blog頁面時，會發現內容上方的空隙高度有異，如下圖所示。

我們按下圖所示調整，進入appearance-customize-global-container，進入design標籤頁，設置outside-container-spacing的top和bottom的數值為4，單位為EM，注意設置之前，點擊小鎖鏈解鎖。

此外，還在這個設置頁面中，將inside container spacing也要設置一下

然後我們來看下博客頁面和博客詳情頁的樣子，我們做了免費版和付費版的對比。

最後，記得將博客頁面添加到網站菜單中哦~

修改產品頁面

給產品頁面添加側邊欄

這個模板本身已經提供了產品列表和產品詳情頁，我們先參照博客側邊欄的配置方法，給產品列表頁與產品詳情頁添加右側側邊欄。

我們依舊在appearance》customize頁面，找到sidebar，點擊進入，如下圖所示，將woocommerce和single product設置right sidebar，點擊右上角publish保存。

然後我們去設置sidebar的內容，如下圖所示，在appearance》widget中找到woocommerce sidebar和product sidebar，目前能看到裡頭沒有任何內容

我們在頁面左側的available widgets中找到產品相關的小工具（widget），將它添加進去就可以了。如下圖所示，點擊小工具的右側三角箭頭，在下拉選項中找到woocommerce sidebar或product sidebar，點選中它，然後點擊add widget，即可將這個小工具添加到對應的側邊欄中。

下圖是我加完小工具的側邊欄，分別是產品搜索、產品類目、產品標籤。

如果你想給產品頁面添加：點擊按鈕後從側邊滑入的側邊欄（如下圖所示，很適合小屏幕，譬如手機），那麼你需要購買Astra付費版。

然後在astra option配置中開啟off canvas sidebar即可。

隱藏產品的價格和加入購物車按鈕

作為B2B企業獨立站，是不需要展示價格和加入購物車按鈕的，我們只需要在發布產品時不填寫價格即可，這樣加入購物車按鈕也不會出現。

給產品頁面添加詢盤表單標籤頁

目前產品頁面沒有詢盤聯繫表單，我們需要藉助外掛Custom Product Tabs for WooCommerce，先用它添加一個標籤頁，放入之前在Ninja forms製作的聯繫表單的短代碼（shortcode），然後在添加產品時加入這個標籤頁即可，具體操作步驟如下：

1.在網站後台找到custom product tabs菜單，進入後點擊add tab

如下圖所示，依次輸入標題、名稱，然後切換內容框到text模式，從ninja forms的dashboard頁面獲取表單的shortcode，黏貼到tab content中，最後點擊save tab即可。

然後我們去編輯一個示例的產品，給它添加這個詢盤標籤頁。

進入網站後台，在all products頁面任意選一個產品，點擊edit按鈕進入編輯

在編輯產品頁面時，滾動頁面到下圖所示位置，進入custom tabs標籤頁，點擊add a saved tab

然後選擇剛才添加的標籤頁即可。

如下圖所示，標籤頁已經成功加到這個產品裡了，我們在頁面右上方找到update按鈕，點它發布產品。

然後我們查看一下這個產品，能看到Enquiry詢盤標籤頁已經成功加入了。

如何修改詢盤提交按鈕的配色

你需要添加自定義CSS

1.進入appearance 》 customize頁面

2.點擊底部的additional css

3.在源代碼中找到按鈕的id，如下圖所示，我用的chrome瀏覽器，將鼠標放在按鈕上，右鍵鼠標後，在右鍵菜單裡找到inspect或檢查，點擊它可查看到按鈕的代碼。 <input id=”xxxx”，請將其中的xxxx記錄下來，譬如下圖中的是nf-field-4

請按如下規則組織代碼，代碼中/**/部分是註釋給你看的，你可以刪除它；將代碼添加到additional css中後，點擊右上角的publish按鈕即可。

#nf-field-4{ background:#333333;/*將#333333換成你需要的常態按鈕背景色*/ color: #ffffff;/*將#ffffff換成你需要的常態按鈕文字顏色*/ } #nf-field-4:hover{ background:#444444;/*將#444444換成你需要的按鈕懸停背景色*/ color: #ffffff;/*將#ffffff換成你需要的按鈕懸停文字顏色*/ }

emm(｡•ˇ‸ˇ•｡)這個外掛的免費版只能一個個給產品添加詢盤標籤頁，但咱們可以用複制產品功能省點力氣，所以不買付費版也是可以的，既然走免費這條路子，那就貫徹到底吧，如果想便利一些，那不如買個Elementor Pro，能夠自定義產品頁模板，靈活度更高。

去掉產品列表頁面的多餘麵包屑

由於上文中開啟了astra主題的麵包屑功能，但是它不能配置產品列表頁面是否展示麵包屑，如下圖所示，出現了兩個麵包屑，如果是Astra付費版的用戶，可以直接在appearance-customize-woocommerce-product catalog中將display breadcrumb關閉即可隱藏麵包屑。

如果使用Astra免費版的用戶，可以用短代碼的方式，將woocommerce自帶的麵包屑去掉；

此時我們要用到code snippets外掛，請先學習一下如何添加短代碼，然後添加一個新的短代碼去掉woocommerce產品列表頁自帶的麵包屑，代碼內容如下：

/** * Remove the breadcrumbs */ add_action( 'init', 'woo_remove_wc_breadcrumbs' ); function woo_remove_wc_breadcrumbs() { remove_action( 'woocommerce_before_main_content', 'woocommerce_breadcrumb', 20, 0 ); }

去掉產品詳情頁面的多餘麵包屑

產品詳情頁也多了一個麵包屑，但這個可以在後台配置，不需要添加短代碼。

進入後台appearance 》customize，然後按照下圖所示操作，進入woocommerce》 single product，選中disable breadcrumb，點擊publish保存即可。

修改產品首頁的標題和Slug

上文提到的隱藏問題：產品首頁的頁面標題和菜單裡的標題不一樣，那是因為在設置菜單時，是可以修改標題的；但頁面實際名稱還是Shop。

我們進入all pages頁面，找到shop頁面，點擊其下方的quick edit，可以快速修改頁面的標題以及slug，都改為Products吧，保持一致。注：slug，你可以當做是url。

至此，一個滿足常規使用的產品頁面就完工啦，包括產品列表頁、產品詳情頁。

細心的你可能發現我的頁面上是有product tags，而你那兒可能沒有，那你去修改一下幾個產品，在快速編輯或者編輯產品頁面的右側都能找到標籤，自己按需給產品添加標籤吧，但注意哦，不要跟分類重複了。

添加、編輯產品等產品管理功能

添加產品功能與添加博客文章的功能是類似的，我就不寫圖文教學了，附一個視頻教學吧，視頻在國外，請科學上網查看。

修改頁面內容

請進入後台的all pages頁面，如下圖所示的情況，帶有elementor標記的，都可以用elementor編輯頁面，也就是能夠可視化編輯頁面內容。

用Elementor編輯頁面的方法：點選要修改的內容，然後在左側工具欄中設置內容、樣式以及高級配置。我們依舊用一個視頻來講解頁面內容編輯功能，視頻中的模板與本文中的模板不一樣，但方法是一樣的。

你還可以看下方的Elementor編輯器的教學，了解更多細緻的操作。

• 如何在Elementor中修改文本的字體、大小、顏色、樣式
• Elementor的Advanced高級設置教學（18個功能點）
• Elementor的全局樣式與設置
• Elementor主題樣式設置詳解

查看更多Elementor教學，其中有部分教學是針對Elementor Pro的，若是在使用免費版的Elementor時提示你升級Pro或未顯示視頻中的操作的功能，就表示是Elementor Pro的功能，需要付費購買。

編輯頁腳

Astra的這套模板的頁腳是用外掛Elementor – Header, Footer & Blocks製作的，頁頭是用的Astra本身自帶的功能。頁腳的編輯方法與頁面編輯方法無差異，詳見下方視頻。

給網站添加返回頂部按鈕

在免費版的Astra裡是不提供頁面上的返回頂部按鈕的，如果你購買了付費版，安裝Astra Pro外掛後，進入appearance》astra options界面，點擊圖中的activate all按鈕激活所有高級模塊就能啟用返回頂部按鈕了。

如果決定只用免費版Astra，那有如下兩種方法：

1. 用Elementor製作WordPress網站的返回頂部按鈕（3分鐘解決），這個方法比下面的方法複雜一些， 但可以少裝一個外掛。
2. 安裝外掛：WPFront Scroll Top，然後如下圖所示enabled啟用即可，你還可以自行配置按鈕的樣式。

給網站添加側邊懸浮聯繫按鈕（付費）

這是我自製的付費模板，能夠在全站右側添加懸浮的4個聯繫按鈕（按鈕你可以自行增減），詳細介紹請查看：網站右側邊懸浮聯繫按鈕。

Astra主題設置常見功能介紹

在上文中我們已經介紹過主題設置的一部分功能，譬如側邊欄、麵包屑。接下來我們講解一些常用的Astra主題設置功能。

如何修改網站顏色？譬如正文顏色、按鈕顏色

在appearance》astra option頁面，點擊set colors進入

進入頁面後，點選base colors菜單進入配置頁面。

在base colors頁面，可以設置如下顏色：

• text color：文本顏色，作用於網站的正文內容
• theme color：主題顏色，一般影響網站按鈕、選定文本時的背景顏色等等，如果按鈕有單獨設置配色，則不會受主題顏色影響
• link color：鏈接顏色，通常作用於頁面中的文字鏈接，產品評價五星圖標、產品標籤頁切換、產品分類與標籤鏈接，對按鈕無影響，按鈕有單獨的設置
• link hover color：鼠標懸停鏈接時的顏色
• heading color（h1-h6）：標題顏色
• background color：網站背景顏色，可以響應式設置
• background image：網站背景圖片，顏色會疊加圖片之上，如果同時選擇了顏色和圖片，那麼請將顏色設置一些透明效果，針對圖片，點擊more settings還可以設置圖片的佈局、重複、尺寸、位置。

如何設置文本的排版，譬如字體、字號、行距

使用Astra的全局文本排版設置，可以對全站的文本樣式進行自定義。需要注意的是，如果你在Elementor中設置了某些元素的文本樣式，那它將不會取用Astra主題中設置的文本樣式。

功能入口：請點擊菜單WordPress後台菜單：appearance》customize，進入後點擊global》typography。在Astra免費版中，提供瞭如下圖所示的兩項配置：基礎排版設置、標題設置。付費版Astra的配置功能更多一些。

Base Typography 基礎排版

基礎排版設置可以影響到全站的文本默認樣式，當文本沒有設置自己的樣式時，就會取用默認設置。通常文章、產品詳情正文就使用這個默認樣式。

當你在設置文本字體、字號、粗細等樣式時，右側界面中可及時預覽頁面效果，你還可以直接在頁麵點選需要預覽的頁面。

譬如下圖所示，我框選了兩處正文文本，也可以理解為基礎文本，他們會取用此處的基礎排版樣式。而另外兩處較大較粗的字體，是標題文本，標題文本通常比較突出，通常用在頁面標題以及頁面主要欄目標題。

Heading 標題排版

上文中提到的標題文本（heading），在WordPress中分為6種——H1-H6，數值越大，標題層級越深，H1通常是頁面的大標題。

Astra主題如何設置頁面內容佈局

功能入口：請點擊菜單WordPress後台菜單：appearance》customize，進入後點擊global》container。

• width 寬度，可以設置網頁正文區的寬度，通常保持默認1200px。
• layout 佈局，可以設置網頁的佈局，佈局分為四種類型（下文有圖解）：
  • boxed：網頁內容和側邊欄都在白盒子中，白盒子周圍是背景色
  • content boxed：只有內容在白盒子中
  • full width / contained：頁面全寬，背景被覆蓋，但內容和側邊欄依舊在盒子中
  • full width / stretched ：頁面和正文全部被拉伸鋪滿，背景被覆蓋

Astra主題如何設置按鈕樣式

功能入口：請點擊菜單WordPress後台菜單：appearance》customize，進入後點擊global》button。此處可以設置按鈕的：

• color 顏色（常規背景色、常規文字顏色；懸停背景色、懸停文字顏色），
• border 邊框顏色、粗細、半徑；
• button text 按鈕上的文字的排版（大小、行高、粗細等）；
• padding 按鈕內間距：即文字與邊框的距離。

Astra主題如何修改頁頭的樣式

功能入口：請點擊菜單WordPress後台菜單：appearance》customize，進入後點擊Header》Primary Header。

如下圖所示，我將頁頭佈局改為了上logo+下菜單佈局，一共有三種佈局，請按需調整。同時，還可以調整頁頭的寬度（width），它提供了content width（與內容寬度保持一致）和full width（全寬）選項。也能給頁頭添加底部邊框，設置粗細（bottom border size）以及顏色（bottom border color）。

此處的設置依舊是左側修改後，右側即時預覽，你可以逐一調整測試，不點擊右上角的Publish按鈕都不會生效。你也可以點擊publish按鈕旁邊的齒輪，它還提供保存草稿和定時發布的功能。

在左側頁面底部，還有設備圖標按鈕，點擊不同的圖標，在右側可以預覽不同設備上的網頁效果。

如何給導航中添加按鈕

在導入模板後，我們能看到導航的右側有一個購物圖標，你也可以將它更換為搜索圖標或按鈕。

功能入口：請點擊菜單WordPress後台菜單：appearance》customize，進入後點擊Header》Primary Menu。如下圖所示，可以在last item in menu中設置。

在last item in menu下方，還有兩個選項，你需要點擊左下角切換到平板或手機模式，然後試用它們，用於控制這個元素的顯示狀態與顯示位置。譬如下圖，我便將搜索按鈕收在了菜單內。

依舊在這個配置頁面，你還能找到子菜單樣式設置、移動端菜單按鈕的樣式設置。

網站內容髮布要點

至此，頁面修改就差不多告一段落了，接下來就是往網站上發產品、發博客，這些內容的發布有一些注意事項，我在另一篇基於Elementor Pro的架設網站教學中有詳細的描述，請點擊《架設B2B企業網站教學》前往查看。

站內SEO

請按照如下教學逐步操作

1. 給網站安裝Google Analytics跟踪代碼
2. 給網站開通Google Search Console
3. 將Google Analytics關聯Google Search Console（GA4目前不能關聯，就先不關聯了）
4. Rank Math SEO設置教學
5. 你的網頁如何在Rank Math SEO的測試中得到100分

站點速度優化

我們需要用工具Gtmetrix測試站點的速度，並進行速度優化，盡量優化到加載時間在3S以內，優化教學請按如下子教學逐一實施

1. 優化圖片，在上文中已經介紹了圖片的優化辦法，此教學中做了一些補充擴展
2. 針對使用Siteground架設網站的情況，可以使用SG Optimizer加速網站，我實測後，發現效果不理想（優化前後差距很小），我覺著最好用易用的還是付費使用WP Rocket加速網站。
3. 刪除谷歌字體（2種簡單方法）
4. 使用Flying Pages預加載網頁
5. 實施CDN，每個主機的CDN不盡相同，大多用的是免費的Cloudflare。
   1. 如果在Siteground架設網站，請看：在Siteground給網站啟用Cloudflare CDN
   2. 如果使用Cloudways主機，請開通cloudflare cdn。

開放收錄，站點上線

完成上述內容後，站點可上線，開放收錄吧、

進入設置》閱讀（setting》reading），將建議搜索引擎不索引本站點去掉勾選，保存更改

然後進入Google Search Console，提交站點地圖地址以助於加快收錄。

站點地圖地址可在Rank Math SEO中獲取

最後，如果你有難以解決的疑問，也可以留言或加我微信諮詢，若是教學中未包含的知識，我會根據讀者的反饋不斷補充~

常見問題答疑

根據讀者的諮詢，我將一些細節問題及答案補充如下

1.進入appearance 》 customize頁面

2.點擊底部的additional css

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

.woocommerce-ordering{display:none}

之前我們安裝的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站而言，不涉及銷售，也就用不上這三個選項了。

安裝並激活外掛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周圍的白色縫隙。