WP主題教程, WordPress教程

Astra Pro主題建站教程:入門到專家(完整指南)

Astra Pro係一款功能強大嘅WordPress主題,適用於各種類型嘅網站。Astra Pro使用教程將指導你完成Astra Pro嘅安裝、配置以及使用一些重要功能嘅過程。Astra Pro係Astra主題嘅付費版本。如果你需要使用付費版本,需要先在官網購買。抑或先使用免費版本嘅,需要升級再購買。

Astra同Astra Pro嘅區別

Astra主題嘅付費版包括Astra主題同幾個付費插件,而Astra主題本身係免費嘅。呢啲付費插件可以擴展Astra主題嘅高級功能。Astra付費版本有三個套餐,分別係Astra Pro、Essential Bundle同Growth Bundle。Growth Bundle嘅功能係最嘅晒,大家可以根據需要購買。

Astra Addon插件(Astra Pro套餐):增強咗Astra主題嘅外觀選項配置,包括顏色、背景、字體、博客、餐牌、導航、返回頂部同舖頭嘅增強配置。

Premium Starter Templates插件(Essential Bundle套餐):提供咗付費嘅網站糢闆,可以幫助用戶快速建立具有專業外觀同功能嘅網站。

Ultimate Addons for Elementor插件(Growth Bundle套餐):係Elementor嘅擴展元素,安裝後可以喺Elementor編輯頁面時搵到更多嘅元素塊,增強咗編輯器嘅功能。安裝此插件後,界面上會提示安裝Elementor插件,你可以直接點擊提示按鈕安裝。

Astra Pro 優勢

Astra Pro係一款流行嘅WordPress主題,它由Brainstorm Force開發。該主題旨在為用戶提供一個靈活嘅、易於使用嘅平台,用于創建具有專業外觀同功能嘅網站。Astra Pro主題具有許多優點,其中包括:

快速加載速度:Astra Pro主題係一個輕量級主題,因此加載速度非常快,有助於提高用戶體驗同SEO排名。

設計靈活性:Astra Pro主題提供了多種設計選項,可以輕鬆自定義網站嘅外觀同感覺,包括顏色、布局、字體等。

廣泛嘅集成:Astra Pro主題與許多流行的WordPress插件兼容,包括WooCommerce、Elementor、Beaver Builder等,呢啲插件可以幫助用戶增強網站嘅功能同特性。

響應式設計:Astra Pro主題係響應式設計嘅,可以自適應各種設備尺寸,包括桌面、平板電腦和移動設備。

SEO友好:Astra Pro主題使用標準嘅HTML同CSS代碼,有助於提高網站嘅SEO排名。

總的來說,Astra Pro主題係一個功能齊全、易於使用、具有靈活性的WordPress主題,適合各種類型嘅網站,包括商務、博客、電子商務等。

安裝Astra Pro

首先,你需要喺WordPress上安裝Astra主題同Astra Pro插件。請按照以下步驟操作:

1、登錄您的WordPress後台。

2、轉到外觀 > 主題,然後點擊添加新。

3、搜索“Astra”,搵到Astra主題並點擊安裝,然後點擊啟用。

October 16, 2023 Astra Pro使用教程-打造专业级WordPress网站 实用教程

4、登錄購買Astra Pro嘅賬號後台,下載Astra Pro Addon Plugin,轉到杵插件徜徉》添加插件》上傳插件,安裝然後點擊啟用。

October 16, 2023 Astra Pro使用教程-打造专业级WordPress网站 实用教程

5、喺Astra Pro插件嘅設置頁面,輸入您的許可證密鑰以激活插件。

October 16, 2023 Astra Pro使用教程-打造专业级WordPress网站 实用教程

導入預製網站

Astra Pro提供咗好多預製嘅網站糢闆,可以幫助您快速搭建網站。要導入預製網站,請按照以下步驟操作:

1、登錄購買Astra Pro嘅賬號後台,下載Premium Starter Templates,轉到杵插件徜徉》添加插件》上傳插件,安裝然後點擊啟用。

October 16, 2023 Astra Pro使用教程-打造专业级WordPress网站 实用教程

或者喺插件中心搜索“starter templates”安裝免費版本嘅,認準作者係Brainstorm Force。免費版本就冇付費嘅主題選擇。

October 16, 2023 Astra Pro使用教程-打造专业级WordPress网站 实用教程

2、外觀》Starter Templates

October 16, 2023 Astra Pro使用教程-打造专业级WordPress网站 实用教程

3、點擊“Build Your Website Now”

October 16, 2023 Astra Pro使用教程-打造专业级WordPress网站 实用教程

2、選擇您鍾意嘅網站構建器,例如Elementor、Beaver Builder或Blocker Editor。建議使用Elementor,Elementor係目前最熱門的網站構建器之一。你都可以查看關於Elementor嘅教程

October 16, 2023 Astra Pro使用教程-打造专业级WordPress网站 实用教程

3、瀏覽預製網站庫,選擇一個糢闆並點擊預覽。右上角標有PREMIUM嘅,是需要安裝Premium Starter Templates插件才能使用。

October 16, 2023 Astra Pro使用教程-打造专业级WordPress网站 实用教程

4、在預覽頁面,點擊導入網站,然後等待導入過程完成。選中糢闆之後,你可以上傳logo同設置它的展示寬度,如果冇logo嘅話,可以以後再傳,我哋點擊掣繼續。

October 16, 2023 Astra Pro使用教程-打造专业级WordPress网站 实用教程

然之後,我哋可以選擇配色方案與字體,如果而家仲攞唔定主意,以後都可以再改嘅,點擊按鈕繼續。

October 16, 2023 Astra Pro使用教程-打造专业级WordPress网站 实用教程

下圖中,默認勾選了4个選項:導入網站嘅外觀款式設置( customizer setting )、導入widgets (小工具,通常用于側邊欄)、導入content(內容,譬如文章、產品),分享非敏感信息畀主題官方,但對新手而言,我嘅建議係保持默認設置,點擊按鈕提交。

October 16, 2023 Astra Pro使用教程-打造专业级WordPress网站 实用教程

接下來我哋靜靜等待網站導入,唔好關閉網頁哦。

October 16, 2023 Astra Pro使用教程-打造专业级WordPress网站 实用教程

睇到呢個界面就安裝成功咗。

October 16, 2023 Astra Pro使用教程-打造专业级WordPress网站 实用教程

最後一刻,喺WordPress後台嘅插件欄,禁用刪除一些和外貿建站唔相關嘅插件。

astra删除插件

糢闆導入後,一個歐美風格、內容豐富、功能強大嘅網站雛形已現,但它仲唔算係一個真正意義上嘅外貿網站。接下來,我哋會喺糢闆嘅基礎上對網站進行自定義,進一步完善外貿建站。

自定義Header同Footer

自定義Header

頁眉( Header )是第一個需要自定義的地方,它位於網站嘅最上方,管理住網站Logo,網站導航,按鈕等等,自定義方法如下。

1、轉到外觀 > 自定義。

October 16, 2023 Astra Pro使用教程-打造专业级WordPress网站 实用教程

2、點擊“Site Identity”,然後點擊桎梏網站標題同LOGO設置桎梏。可以更改網站嘅LOGO同站點標題。

October 16, 2023 Astra Pro使用教程-打造专业级WordPress网站 实用教程

往下滑動,我哋仲可以睇到設置副標題同站點圖標嘅地方。站點圖標會顯示喺瀏覽器標籤頁度。

October 16, 2023 Astra Pro使用教程-打造专业级WordPress网站 实用教程

3、使用左側嘅餐牌欄,瀏覽各個設置選項,例如布局、顏色、字體、背景等。根據您的需求調整呢啲設置,並實時預覽更改。当你滿意設置時,點擊發佈以保存更改。

設置頂部固定導航方法

在網頁設計中,固定導航係一種非常常見嘅做法,將導航餐牌固定到網頁頂部,唔理訪客碌到哪一屏,都可以輕鬆點擊到餐牌上嘅連結,接下來說下如何在Astra主題中設置固定頭部導航欄

打開外觀–Astra選項,開啟固定頁頭糢塊

Astra Pro主题建站教程:入门到专家(完整指南)

然後打開自定義選項,依次進入頁頭–Sticky Header

自定義Footer

頁腳係第二個需要修改嘅地方,它位於成個網站嘅最底部,管理住網站連結,版權信息等埋。

footer页脚

首先,透過“Customize”進入自定義編輯頁面,搵到頁腳生成器嘅編輯框。

自定义页脚
页脚生成器
页脚生成器编辑框

接下來,將頁腳版權信息替換成自己嘅,正確的格式及寫法如下。

页脚版权

然之後,點擊頁腳入面嘅Widget小工具,依次替換入面嘅內容,可以係文字說明,都係網站連結。

页脚小工具

配置布局和顏色選項

Astra Pro提供咗豐富嘅布局同顏色選項。要配置呢啲選項,請按照以下步驟操作:

1、轉到外觀 > 自定義 > 大局。

2、選擇你想要配置嘅全局部分,例如字體款式、顏色、容器、按鈕等設置。

3、根據您的需求調整設置。

October 16, 2023 Astra Pro使用教程-打造专业级WordPress网站 实用教程

設置導航餐牌

要設置導航餐牌,請按照以下步驟操作:

1、轉到外觀 > 餐牌。

October 16, 2023 Astra Pro使用教程-打造专业级WordPress网站 实用教程

2、點擊創建新餐牌,為餐牌命名,然後點擊創建餐牌。

3、使用左側嘅餐牌項選擇器,將頁面、分類等添加到餐牌中。

4、拖動菜單項以調整順序和層次結構。

5、在餐牌設置區域中,選擇要顯示餐牌嘅位置(如主導航、頁眉或頁腳)。

6、點擊保存餐牌以保存更改。

October 16, 2023 Astra Pro使用教程-打造专业级WordPress网站 实用教程

自定義Product產品頁面

產品頁面會用到WooCommerce同Astra嘅一些自定義選項。首先,搵到Store頁面,透過快速編輯選項,將佢嘅名替換成Products。

store页面
products页面

然之後,更改固定連接名稱,常用設置選文章名,產品固定連接選Shop base,保存修改。

文章固定链接
产品固定链接

接下來,透過“Customize”進入自定義選項,搵到WooCommerce嘅產品目錄,關閉價格和評級的顯示選項。

woocommerce自定义
产品目录
关闭价格和评级显示

到這,網站主導航入面嘅Products頁面就編輯完了。接下來,我哋編輯單個產品頁面。首先,搵到WordPress後台餐牌嘅產品欄,是但搵一個產品進行編輯。

编辑单个产品页面

然之後,修改產品嘅標題,URL和詳細描述。描述可以使用Elementor修改,能添加好多不同嘅元素入去,比如表格,圖片,圖表等可視化元素。

产品标题URL描述

刪除產品糢闆入面嘅價錢,產品頁面對應嘅add to cart都會自動刪除。

删除产品价格

修改產品頁面嘅簡短描述,同時仲可以喺最下面添加一個詢盤表單。

添加询盘表单

刪除產品屬性,因為詳細描述入面可以更好嘅描述產品。

删除产品属性

設置產品類別,確認無誤後,點擊更新按鈕,發佈產品頁面。

产品类别

最後一刻,喺WooCommerce餐牌搵到設置產品,唔允許產品評價,保存修改。

woocommerce产品设置
不允许产品评价

自定義Home、About同Contact頁面

網站首頁睇落好複雜,其實有一個捷徑可走,就係拼接Astra嘅糢闆。首先,打開首頁編輯頁面,點擊Elementor編輯按鈕。

首页编辑
使用 Elementor

然之後,將頁面拉到最下方,使用Astra嘅糢闆功能,導入Local Business呢個糢闆嘅首頁。

Local Business模板
导入首页
点击导入

接下來,搵到Elmentor頁面編輯嘅導航,將第一個糢闆入面嘅糢塊刪除後Update。

页面导航
删除多余模块

最後一刻,將新糢闆入面嘅文字同圖替換成你自己嘅。因為Elementor係一個可視化頁面編輯器,操作好簡單,我就不在這逐一演示,如果遇到唔會嘅,可以留言。

網站首頁編輯完,其他頁面(比如about同contact )都可以用我介紹嘅呢個糢闆拼接方法嚟編輯,建站嘅速度非常之快。

唯一要注意嘅係,聯繫頁面會用到表單插件WPForms。它的使用方法是找到預建好的表單,進入後點擊Settings同Notification,將通知郵箱修改成自己嘅,然後保存。

wpforms表单
wpforms通知邮箱

自定義Blog文章頁面

博客頁面同上述幾個頁面嘅編輯不同,需要去頁面選項新建一個Blog頁面,完成後發佈。

新增blog页面
blog

然之後,返回WordPress餐牌入面嘅設置 – 閲讀,文頁選擇Blog,保存修改。

文章页设置

接下來,開始寫文章,發佈新文章,為後續嘅穀謌SEO優化排名做內容引流。

写文章
发文章

如何Mega Menu製作

1、激活糢塊Nav Menu

WordPress儀錶板 > Astra > Astra Pro糢塊 > 導航餐牌激活插件

Astra Pro主题建站教程:入门到专家(完整指南)

2、創建Mega Menu

如果你想創建超級餐牌,您需要為您想要將其子菜單項變成超級菜單的頂級菜單項啟用超級菜單功能。 

請按照以下步驟執行此操作:

第 1 步–由WordPress儀錶板導航至外觀 > 餐牌。

第 2 步–選擇要在其下添加大型餐牌嘅餐牌項。

步驟 3 –展開此餐牌項並單擊”Astra餐牌設置”按鈕。

导航菜单模块 [创建超级菜单]
  • 超級餐牌
    • 然之後,右側將打開一個滑入式彈出窗口。在此處啟用超級餐牌切換按鈕。將為父餐牌嘅所有子餐牌啟用大型餐牌選項。它提供頂級/父餐牌嘅選項。你可以把超級餐牌寬度設置為內容、餐牌容器或完整寬度。
Astra Pro主题建站教程:入门到专家(完整指南)

Mega Menu width含義

  • 內容–把餐牌寬度設置為您的內容寬度
  • 餐牌容器寬度——限制主菜單的寬度
  • 全寬–把大型餐牌嘅寬度設置為屏幕嘅寬度,但把餐牌內容限制為內容寬度。
  • Full Width Stretched –把大型餐牌嘅寬度設置為全寬,邊 到 邊。
  • 自定義寬度–以像素為單位設置自定義寬度值

背景顏色/圖像

背景顏色/圖像將設置為父餐牌嘅大型餐牌框。你可以使用背景重複、背景大小和背景位置等設置嚟調整背景圖像。

覆蓋此大型餐牌嘅色水?

你可以為父餐牌嘅大型餐牌框中嘅餐牌項設置顏色。可用選項有文本/連結顏色、文本/連結懸停顏色、列分隔線顏色。

突出顯示標籤

係出現喺餐牌項旁邊嘅文本。它突出顯示餐牌。標籤可以係免費、促銷、新品、精選等。你可以設置標籤文本同顏色。

spacing

你可以為餐牌項設置Margin同Padding。

3、Mega Menu嘅列設置

通常情況下,我哋喺一級餐牌目錄為某一個餐牌項目開始Mega Menu設置,對應本文嘅Products餐牌項目。

喺一級目錄項目下面添加嘅二級餐牌項目,對應本文嘅Product Categorie同Product Gallery自動成為Mega Menu嘅兩列。

而喺二級餐牌下面添加嘅三級餐牌項目則會自動成為Mega Menu對應列中嘅内容。

Astra Pro主题建站教程:入门到专家(完整指南)
Astra Pro主题建站教程:入门到专家(完整指南)

4、擴展:Mega Menu第二列嘅Galley係點樣實現嘅

第一步:添加一個自定義連結到Products餐牌項目嘅二級餐牌中

連結設置為#,也就昰空連結

Astra Pro主题建站教程:入门到专家(完整指南)

第二步:進入Astra Menu Settings設置內容來源

內容來源選擇小部件,並喺細部件中選擇gallery,並添加。

Astra Pro主题建站教程:入门到专家(完整指南)

添加之後為Gallery添加圖

Astra Pro主题建站教程:入门到专家(完整指南)

添加圖之後設置相冊

Link to:attachement Page代表連結到添加呢個圖嘅關聯頁面

Columns:設為2就代表設為2列

Random Order:勾選就代表相冊隨機排列,每次刷新排列嘅順序都唔一樣

Size:圖片尺寸,如果需要圖片清晰啲就用full size。

添加之後保存Gallery返抵Astra Menu設置,保存呢個Gallery設置,並保存Astra menu設置,喺退出到餐牌列表。

第三步:保存餐牌設置

保存之後刷新頁面驗證結果。

如何把Elementor糢闆添加到超級餐牌?

你可以使用Astra主題同Astra Pro插件創建超級餐牌。此外,您還可以使用大型菜單模板來代替或與文本菜單項(連結)結合使用。

本文檔將向你展示如何使用Elementor (免費)同Astra Pro導航餐牌糢塊將包含WooCommerce產品類別嘅糢闆添加到大型餐牌中。

注意:該解決方案用于把Elementor糢闆添加到Astra主題提供嘅默認標題中。請記住,僅適用於Astra嘅默認標題同Astra Pro導航餐牌糢塊。如果你改用Elementor標頭,則此解決方案將不適用。

請按照以下步驟操作:

步驟 1 –確保你已安裝Elementor插件同Astra Pro Addon並處於活動狀態。另外,請確保喺Astra設置中激活導航餐牌糢塊。

步驟 2 –導航到儀錶板 > 糢闆 > 添加新嘅

步驟 3 –在下拉餐牌中,選擇“部分”,命名您的模板(可以是任何名稱;我們使用“Mega Menu Item 1”),然後單擊“創建糢闆”。將創建新糢闆並打開Elementor編輯器。

Astra Pro主题建站教程:入门到专家(完整指南)

步驟 4 –喺Elementor編輯器中,添加“部分”和“短代碼”小部件。將以下WooCommerce代碼添加到短代碼小部件中:

連結建設服務 (30)

郵箱工具 (1)

賬號買賣 (5)

維基百科外鏈服務

社媒營銷服務

本地優化 (1)

新聞稿派服務 (6)

插件 (1)

展商名錄 (9)

其他工具 (4)

主題 (1)

Wordpress資源 (2)

Uncategorized

SEO工具 (6)

Guest Post外鏈服務 (24)

EDU外鏈服務 (5)

係WooCommerce短代碼。你可以在本文中搵到有關它的更多信息以及可能嘅變化。

Astra Pro主题建站教程:入门到专家(完整指南)

使用Elementor Pro,你可以使用Elementor“產品類別”細部件而唔係簡碼細部件。

單擊“發佈”保存您的糢闆。

第 5 步–現時,係時候創建一個大型餐牌了。為此,請導航至外觀 > 餐牌。單擊展開要在其下添加大型菜單的菜單項(我們將此項目命名為“商店”)。

步驟 6 –單擊”Astra餐牌設置”按鈕,然後啟用超級餐牌切換按鈕。將在該項目下創建一個大型餐牌。你仲可以在此步驟中設置大型餐牌嘅款式(寬度、填充等)

Astra Pro主题建站教程:入门到专家(完整指南)

步驟 7 –接下來,喺超級餐牌的添加一個新嘅餐牌項(我哋將其命名為“按類別購物”),然後單擊”Astra餐牌設置”按鈕。

步驟 8 –喺內容源下拉餐牌中,選擇“糢闆”選項。在糢闆字段中,輸入糢闆嘅名稱並由列表中選擇它。單擊“保存”將此糢闆添加到您的餐牌項中。

Astra Pro主题建站教程:入门到专家(完整指南)

係它在前端個樣。

Astra Pro主题建站教程:入门到专家(完整指南)

總結

Astra主題作為一個免費主題,入面嘅核心功能(糢闆)實在係太好用了,唔係付費,媲美付費。利用糢闆拼接大法,邊個都可以快速搭建一個專業嘅WordPress外貿網站。

另外,使用本文介紹嘅ChemiCloud 主機外貿建站,配合它贈送嘅LiteSpeed插件優化網站,穀謌測速非常快,特別適合想要透過穀謌推廣獲取流量同詢盘嘅同學使用。

需要了解更多,可以查看:ChemiCloud主機:選購注意事項、建站教程、速度測評

chemicloud谷歌测速

About 編輯部

kuajinggu嘅編輯人員係一支由WordPress專家組成嘅團隊,由Dylan領導,在WordPress、虛擬主機、電子商務、蒐索引擎優化和市場營銷方面擁有超過10年嘅經驗。kuajinggu創建于 2014 年,目前係業內最大嘅免費WordPress資源網站,經常被稱為WordPress嘅維基百科。

發佈留言