【Astra 教學】WordPress 架站佈景主題首選 Astra Pro,輕鬆打造特色個人品牌網站!

Astra 使用教學

最後更新時間: 2024 年 08 月 02 日

嗨嗨 ~ 我是小呆!2023 年我剛架設好我自己的個人網站,當時真的是跟著老 K 的網站架設教學影片,從網域購買、虛擬主機架設,到挑選佈景主題,一步一步慢慢搭建完成。

當初還沒開始架網站前,我也做了很多功課,到處研究各種佈景主題有什麼差異,以及哪種佈景主題最適合我,多方比較後,我最後就選擇了最多人都在用的「Astra 佈景主題」!

這篇文章我會簡單介紹 Astra 佈景主題的特色與優缺點,並幫大家比較 Astra 免費版與付費版有什麼樣的差異,現在就跟著我一起來看看吧!

Astra 是什麼?

Astra theme

Astra 是一個專為 WordPress 打造的高效佈景主題,於 2009 年由 Brainstorm Force 團隊研發,目前全球有 200 萬以上的網站,都是使用 Astra 佈景主題搭建而成。

主打無需任何程式背景,也能輕鬆建構出高質感的網站樣式,提供豐富多樣的商業樣版,從個人品牌、部落格,到企業官網、電商平台,甚至現在流行的線上課程平台、預約訂位網站,通通都難不倒 Astra!

Astra 的特色優勢

不須具備程式背景

Astra 不需要程式設計背景

不會寫程式也能夠自己做網站嗎?當然可以!Astra 提供相當直觀且簡單的操作介面,不需要具備任何程式設計基礎,只要點擊或拖曳頁面元素,就能輕鬆變動及更改網站的樣式模板,快速打造出專屬於你個人風格的網站哦!

主題樣式豐富多樣

Astra 主題樣式豐富多元

Astra Pro 付費版本提供 250+ 豐富多樣的主題套版,免費版也有提供約 30+ 的樣板選擇,Astra 的版面樣式都屬於簡約、質感風格,即便本身沒有太多美學設計基礎也沒關係,直接選擇自己喜歡的樣式模板,就可以快速做出一個好看的網站囉!

彈性客製化自由調整

Astra 可彈性客製化設計

Astra 不僅提供很多樣化的主題套版,還提供相當彈性的客製化調整功能,從頁面佈局、標題樣式、顏色排版等,都可以根據你自己的喜好自由調整!即便使用 Astra 內建的主題,也能自己調整設計出專屬於你的風格哦!

最輕量的高效能主題

Astra 主題輕量高效

專為高效、高速而生的 Astra,是目前市面上最輕量的主題包,多數 WordPress 主題都至少需要 300 KB,但 Astra 只需要耗費不到 50 KB 的資源,平均載入網站時間只需要 0.5 秒!完全不用擔心網站速度會因為更換主題佈景而變慢!

Astra 的優缺點

優點

  • 不須任何程式設計背景,也能輕鬆設計網站
  • 主題風格相當有質感,選擇也非常豐富
  • 可客製化自由調整版面樣式,更凸顯個人風格
  • 與 WordPress、Elementor 有高度相容性
  • 主題樣式輕量、高效,載入網站速度相當快

缺點

  • 免費版的主題樣式、功能設計選擇較有限
  • 客製化設計功能較複雜,需要一些時間熟悉
  • 須對 WordPress 架構有基礎了解,使用起來會更上手

Astra 價格方案

Astra 主題樣式提供免費版付費版兩種版本。

網站經營新手或對網站風格要求沒那麼高的人,可以先使用 Astra 免費版;若想要使用更進階且豐富的設計功能,再考慮購買 Astra Pro 付費版

Astra 免費版

Astra 之所以可以廣受好評,最重要的其中一個原因就是「免費」,Astra 免費版本提供架設網站過程必備的所有功能,但這些功能或多或少會有些限制,比如說可以更換字體樣式、大小,但不能變更頁面背景樣式等,以下就用表格簡單幫大家比較一下 Astra Free 和 Astra Pro 的差異:

Astra FreeAstra Pro
回應式網站
字型變更
頁面背景樣式
側邊欄設計樣式
網站佈局調整
頁首、頁尾設計
自訂頁首、頁尾
固定頁首功能
回到頂端按鈕
文章版面調整
變更文章樣式
電子商務功能
產品頁設計樣式
24 小時客服
了解更詳細的功能差異:Astra Free v.s. Astra Pro

簡單來說,如果你是剛開始接觸網站經營,我會推薦你使用免費版的,客製化選項雖然或多或少會受到限制,但也絕對足夠你架設出一個功能完善的網站!等到未來真的有需要時,再升級成付費版就可以了。

Astra 付費版

Astra Pro 付費方案

如果你覺得 Astra 免費版的客製化功能還不夠用,或是你希望擁有更多豐富的樣式主題,就可以考慮付費升級成 Astra Pro、Essential Bundle 或 Growth Bundle 方案!

如果你單純只想要解鎖 Astra 付費版功能,只要購買 Astra Pro 方案就可以了!Essential 和 Growth Bundle 則比較偏向 Astra Pro 多合一組合包,會再額外提供多個 WordPress 專業外掛工具,可以讓網站做得更精緻、更華麗,但如果你只是個人使用,我覺得買 Astra Pro 就夠囉!

Astra 付費版分為年訂閱及終身買斷,這邊簡單幫大家比較這三個方案的差異:

Astra ProEssential BundleGrowth Bundle
年訂閱價格US $59 / 年US $169 / 年US $249 / 年
終身買斷價格US $229US $849US $1249
Astra Pro
WP Portfolio
Ultimate Addons for Elementor
Schema Pro
Convert Pro
SkillJet Academy
免費主題樣版
進階主題樣版

Astra 免費版安裝教學

這邊是以已經架設好 WordPress.org 網站為前提示範,如果還沒架設過網站,也歡迎參考我們過去的文章,先架設好網站之後,再回來看這邊的教學哦!

「 WordPress 架站教學系列文章」
1. Cloudways 教學:WordPress 架站推薦主機,每月 400 台幣即可擁有超高網站效能!
2. 【NameCheap 教學】老字號網域商,10 分鐘快速完成網域購買!完整教學
3. 【 WordPress 架站教學#3】在 Cloudways 中設定 WordPress 網域、網站 SSL 憑證!讓你的網站更安全!

step 1

進入 WordPress 後台,點選「外觀 > 佈景主題」

進入 WordPress 後台,點選「外觀 > 佈景主題」

step 2

點選上方的「安裝佈景主題」按鈕

點選上方的「安裝佈景主題」按鈕

step 3

在右側搜尋框輸入「Astra」

在右側搜尋框輸入「Astra

step 4

找到 Astra 佈景主題後,點選「安裝」

找到 Astra 佈景主題後,點選「安裝」

step 5

等待安裝完成後,記得點選「啟用」,這麼一來 Astra 免費版就安裝好囉!

等待安裝完成後,記得點選「啟用」,這麼一來 Astra 免費版就安裝好囉!

Astra 付費版購買&安裝教學

特別提醒!在購買及安裝 Astra 付費版前,需先安裝好 Astra 免費版主題套版,才能再繼續安裝 Astra Pro 的外掛插件哦!如果還沒安裝,可以點擊回到 Astra 免費版安裝教學,跟著我們的步驟完成安裝後,再回來這裡繼續完成後續購買方案的步驟哦!

step 1

進入 Astra 官網,點選黃色按鈕「DOWNLOAD NOW」

進入 Astra 官網,點選黃色按鈕「DOWNLOAD NOW」

step 2

選擇要購買的方案,這邊以購買 Astra Pro 為例,點選「Buy Now」

選擇要購買的方案,這邊以購買 Astra Pro 為例,點選「Buy Now」

step 3

輸入電子郵件、密碼及姓名

輸入電子郵件、密碼及姓名

step 4

輸入付款資訊,這邊以信用卡付款為例,輸入完成後點選「Checkout with Card」,這樣就購買完成了!

輸入付款資訊,這邊以信用卡付款為例,輸入完成後點選「Checkout with Card」,這樣就購買完成了!

step 5

回到 Astra 官網,點選上方工具列「Login to Account」

回到 Astra 官網,點選上方工具列「Login to Account」

step 6

輸入你的電子信箱與密碼,點選「Log In」

 輸入你的電子信箱與密碼,點選「Log In」

step 7

點選上方工具列「Account > Downloads」

點選上方工具列「Account > Downloads」

step 8

點擊下載「Astra Pro Addon Plugin」安裝檔,檔案為 .zip 檔

點擊下載「Astra Pro Addon Plugin」安裝檔,檔案為 .zip 檔

step 9

回到 WordPress 後台,點選左側工具列「外掛 > 安裝外掛」

回到 WordPress 後台,點選左側工具列「外掛 > 安裝外掛」

step 10

點選「上傳外掛」

點選「上傳外掛」

step 11

上傳剛剛下載的 Astra Addon Plugin.zip 檔案後,點選「立即安裝」

上傳剛剛下載的 Astra Addon Plugin.zip 檔案後,點選「立即安裝」

step 12

安裝完成後,回到外掛頁面,找到 Astra Pro 並點選「啟用」

安裝完成後,回到外掛頁面,找到 Astra Pro 並點選「啟用」

step 13

回到 Astra 帳戶頁面,點選上方工具列「Account > License」

回到 Astra 帳戶頁面,點選上方工具列「Account > License」

step 14

找到 Astra Pro 的金鑰密碼後,複製到剪貼簿中

找到 Astra Pro 的金鑰密碼後,複製到剪貼簿中

step 15

回到 WordPress 後台外掛頁面,點選 Astra Pro 的「設定」

回到 WordPress 後台外掛頁面,點選 Astra Pro 的「設定」

step 16

往下滑到頁面最底部,在「Your License」貼上金鑰密碼,點選「Active」

往下滑到頁面最底部,在「Your License」貼上金鑰密碼,點選「Active

step 17

頁面右上方只要有顯示「Lisense activated」就代表 Astra Pro 安裝且啟用完成囉!

頁面右上方只要有顯示「Lisense activated」就代表 Astra Pro 安裝且啟用完成囉!

Astra 使用教學

以下的使用教學會以免費版、付費版都具備的功能做示範,因為 Astra 的功能真的非常多,如果把基本、進階功能全部混在一起,大家應該也會看的一頭霧水(笑),因此這一篇會先以「基本功能」為主,之後有時間也會再寫一篇 Astra Pro 付費版功能教學提供給大家哦!

如何套用 Astra 佈景主題 Starter Templates?

step 1

到 WordPress 後台,點選左側工具列「Astra > Dashboard」

到 WordPress 後台,點選左側工具列「Astra > Dashboard」

step 2

找到 Useful Plugins 區塊中的「Strat Templates」,點選「Install」

找到 Useful Plugins 區塊中的「Strat Templates」,點選「Install」

step 3

安裝完成後,回到 WordPress 後台,點選左側工具列「外觀 > Starter Templates」

【Astra 教學】WordPress 架站佈景主題首選 Astra Pro,輕鬆打造特色個人品牌網站! 1

step 4

一開始會有一個簡單的影片介紹,可以直接跳過,點選下方的「Build Your Website」

一開始會有一個簡單的影片介紹,可以直接跳過,點選下方的「Build Your Website」

step 5

選擇你目前正在使用的頁面編輯器,這邊以選擇「Elementor」為例

Elementor 是許多網站經營者很常使用的 WordPress 頁面編輯器,不需要程式設計背景,只要用拖曳的方式就能設計出一個簡單又精緻的頁面,很推薦大家可以下載 Elementor 作為 WordPress 主要的頁面編輯器!

如果還沒有打算下載其他的編輯器,也可以直接先選擇 WordPress 內建的「Block Editor」即可。

延伸閱讀:【 Elementor 完整教學】最推薦 WordPress 架站頁面編輯器!

選擇你目前正在使用的頁面編輯器,這邊以選擇「Elementor」為例

step 6

Starter Templates 提供非常多元的佈景主題,找到喜歡的樣式後,用滑鼠點選一下該佈景主題

若佈景主題有標示「Premium」,代表須購買 Essential Bundle 或 Growth Bundle 才能使用哦!使用 Astra 免費版或 Astra Pro 只能使用沒有標示 Premium 的主題。

Starter Templates 提供非常多元的佈景主題,找到喜歡的樣式後,在該佈景主題點一下

step 7

接著就要設定網站基本資料,第一步是上傳網站 LOGO,完成後點選「Skip & Continue」

若還沒有做好 LOGO 沒關係,可以直接留空跳過,之後再補上傳即可。

接著要設定網站的基本資料,第一步是上傳網站 LOGO,若還沒有 LOGO 可以先跳過,完成後點選「Skip & Continue」

step 8

第二步是調整佈景主題配色和字型,可以根據自己的喜好自由調整,完成後點選「Continue」

第二步是調整佈景主題配色和字型,可以根據自己的喜好自由調整,完成後點選「Continue」

step 9

第三步就直接點選「Skip & Continue」

第三步就直接點選「Skip & Continue」

step 10

最後一步填寫基本資料,並依據需求勾選想同步安裝的進階功能,點選「Submit & Build My Website」

這邊我們實際測試過,基本資料不填寫也是可以直接點選下面的按鈕前進下一步的哦!

最後一步填寫基本資料,並依據需求勾選想同步安裝的進階功能,點選「Submit & Build My Website」

step 11

等候安裝完成

等候安裝完成

step 12

回到網站重新整理,這樣網站樣式就套用完成囉!

回到網站重新整理,這樣網站樣式就套用完成囉!

如何自訂 Astra 頁面樣式?

選擇完佈景主題後,下一步就可以來自己調整網站頁面的細節了!舉凡想要變更版面、工具列、頁首、頁尾,在 Astra 通通做得到哦!

step 1

到 WordPress 後台,點選左側工具列「Astra > 自訂」

到 WordPress 後台,點選左側工具列「Astra > 自訂」

step 2

左側工具列的所有樣式,都可以根據自己的喜好自由調整,並會立即顯示在右側的預覽畫面,現在就可以花點時間好好來玩一下 Astra 的自訂功能囉!

左側工具列的所有樣式,都可以根據自己的喜好自由調整,並會立即顯示在右側的預覽畫面

Astra 自訂樣式功能介紹

由於 Astra 可以自訂的樣式功能非常多樣,共有 13 種可以自由調整,每一種功能點進去,可以調整的細節也是非常多,以下我會用條列的方式,簡單介紹各個樣式項目的功能。

礙於篇幅的關係,每個功能可能不能講到太細節,但這些功能都非常直觀、好懂,只要多玩幾次,很快就會上手囉!

Astra 自訂樣式功能介紹

(1) 全域

調整網站中,除了文章頁面以外,所有的頁面樣式,包含:

  • 排版樣式:可調整標題字型、內文字形、段落邊界、超連結底線
  • 色彩:可調整佈景主題的背景、連結、標題、內文等色彩
  • 內容容器:可調整版面配置、版面寬度
  • 按鈕:可調整按鈕的形狀、框限、色彩、間距
  • 返回頂端:可設定是否要顯示返回頂端按鈕(此功能僅限 Astra Pro 使用)
  • 區塊編輯器:可設定區塊編輯器的區塊間距

(2) 頁首編輯器

調整網站頁首樣式,頁首指的是頁面最上方的那一條工具列,包含:

  • 網站標題及標誌:可調整網站標題、LOGO 的內容、樣式
  • 搜尋:可調整站內搜尋引擎的尺寸、樣式
  • 主要選單:可調整網站主要選單的內容、樣式
  • 透明頁首:可設定是否要啟用透明頁首的功能
  • 固定式頁首:可設定是否要將頁首固定於頁面上方

右側工作區的下方有 3 條頁首版位,可以根據個人喜好,自由拖曳調整頁首的排版,點擊空白版位就可以增加其他可使用的功能。

右側工作區的下方有 3 條頁首版位,可以根據個人喜好,自由拖曳調整頁首的排版,點擊空白版位就可以增加其他可使用的功能。

(3) 導覽標記

導覽標記也就是俗稱的麵包屑導覽列(Breadcrumbs),指的是用來標註網站頁面位置的文字列,如下圖的「首頁 > 求學經歷」,在這邊可以自由設定是否要開啟導覽標記的功能,以及調整導覽標記的樣式。

為了維持網站頁面的簡潔,通常我都設定只會在「文章頁面」顯示導覽標記。

Astra 導覽標記

(4) 網站文章

調整「網站/文章彙整」和「單篇文章」頁面的版型與樣式,「網站/文章彙整」頁面指的是一次顯示多篇文章的分類頁,「單篇文章」頁面顧名思義就是顯示單一文章內文的頁面,在這裡可以調整的內容包含:

  • 版面配置:可調整文章內容、資訊欄的版面配置
  • 格狀版面配置:可以調整多篇文章的版面顯示方式
  • 文章結構:可調整是否要顯示圖片、標題、摘要、中繼資料、繼續閱讀按鈕等

(5) 頁面

調整網站頁面的版面配置樣式。

(6) 資訊欄

調整資訊欄的版面配置、寬度、字型。

(7) 頁尾編輯器

調整網站頁尾樣式,頁尾指的是頁面最下方的區塊,跟頁首一樣有 3 條頁尾版位,可以根據個人喜好,自由拖曳調整頁首的排版,點擊空白版位就可以增加其他可使用的功能。

Astra 頁尾編輯器

(8) Custom Post Types

WordPress 原先預設網站只有 Post(文章)和 Page(頁面)兩種類型,寫文章時就會用 Post,製作首頁、關於我、聯絡我頁面時就會用 Page。

當你的網站越做越大,內容越來越豐富時,Post 和 Page 這兩種頁面類型可能就不太夠用,這時候就要使用 Custom Post Types 來幫你自訂頁面,比如說你想要在網站內架設電商購物系統時,就需要使用到這個功能。

不過,若你只需要經營品牌形象網站、個人部落格而已,這個功能就不用太過著墨,基本上只需要有 Post 和 Page 就非常夠用囉!

(9) Site Identity

調整瀏覽器頁籤上網站會顯示的圖示標誌 LOGO,這邊建議盡量使用簡單、明顯的圖示,如果太過複雜反而不容易辨識。

Astra Site Identity

(10) 選單

選單指的是如首頁最上方頁面跳轉工具列,在這裡可以調整網站選單的內容、名稱、標籤、連結,也可自訂多個不同的選單。

(11) 小工具

小工具就是在編輯頁首、頁尾時,可以新增上去的「自訂功能組合」,若你覺得 Astra 內建的頁首、頁尾版位內容還不太夠用,就可以來小工具這個區塊,先自訂好你想要使用的內容小工具後,再回到頁首、頁尾編輯器插入這個小工具就可以囉!

Astra 小工具

(12) 首頁設定

調整網站首頁要顯示「最新文章」還是「靜態頁面」,兩者只能選其一。

(13) 附加的 CSS

由於 Astra 提供的樣式設計功能都偏簡約風,如果你有想要使用 Astra 沒有的外觀、樣式、版面配置,就可以使用 CSS 自訂程式碼,自己設定專屬的樣式風格哦!

結語

以上就是 Astra 佈景主題的基本介紹啦!Astra 光是免費版的功能就非常多樣,一篇文章真的很難全部講完,之後有機會再來寫一篇 Astra Pro 功能教學提供給大家做參考!

如果在使用上有遇到任何問題,都歡迎你在底下留言跟我說,我會盡快回復你的!那我們就下次見啦~

學習更多好用數位工具

領先時代 - 領先者國度社群
免費數位工具教學

⭐️ 全新領先時代網站,專屬交流社群

  1. 入群免費解鎖 20+ 種高效數位工具教學
  2. 再送 Notion 免費模版
  3. 還可參與未來所有免費課程、教學活動

🙌🏻 更多交流解鎖贈品(免費書籍、免費課程任選),等你領取!

馬上申請入群

請留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

本文目錄
返回頂端