Astra Theme 教學:WordPress 輕量多功能主題(功能詳解)

Astra Theme 教學:WordPress 輕量多功能主題(功能詳解)

這是一篇「 Astra Theme 主題教學 」,分享有關 Astra 主題如何使用。

Astra 主題是這幾年成長快速的 WordPress 主題,它是輕量級且有多種可變選項,可做出完全不同類型的網站,打造自己或公司品牌官網。

這篇文章會著重於 Astra 免費版教學,把功能頗析並和大家分享,讓任何對它有興趣的人,都能免費入手套用。

如果你對 Astra 進階版有興趣,也可參考 Astra 進階指南:)

本文的目的,就是讓喜歡 Astra 主題的 WordPress 站長們,都能快速上手這款優質主題,章節如下:

我們開始學習囉:)


1. Astra 主題是什麼?

wordpress佈景主題 :Astra 教學推薦
wordpress佈景主題 :Astra 教學推薦

Astra 是 Brainstorm Force 開發的主題,你無需會任何編碼,就可完美的 WordPress 網站製作,有免費版&進階版可使用。

它是多功能的 WordPress 主題,不論是 Blog 建立企業形象網站電商購物網站 等 .. ,或是其他常見類型, Astra Theme 幾乎都能幫助你完成。

許多用戶在使用主題時,常會擔心是不是會和其他人版型很像,沒有差異化。

Astra Theme 內建多種主題樣板

Astra 有提供 Starter Templates 外掛,裡面有 70 多種樣板風格,一鍵安裝就能快速架站,非常的方便。免費版也有 30 多種可使用。

Astra 的 Starter Templates 外掛,提供多種樣板安裝
Astra 的 Starter Templates 外掛,提供多種樣板安裝

Astra 會如此流行的原因,其中一點是它對主流的 WordPress 視覺化編輯器,有著完美的兼容。

像是 ElementorBeaver Builder、Gutenberg 等 .. ,可用這些頁面編輯器搭配 Astra 主題,完整製作個人或公司品牌網站。

Astra 主題速度評測

有關於主題速度表現,輕量的佈景主題、禁用 Jquery、優質的程式編碼,都是 Astra 速度優於其他主題原因。

這讓 Astra 在多個速度評測軟體上,都獲得了優異的表現。

Astra 主題,多種速度軟評測,優異速度
Astra 主題,多種速度軟評測,優異速度

Astra 多種佈局調整功能

Astra 有多種自定義選項,可充分設定網頁佈局,讓你的網站更像是客製化的效果。

有提供網站頁首 / 頁尾修改、主視覺顏色調整、字體字型調整、選單佈局調整、各頁面版面配置等 ..,輕量但精悍。

Astra 多種主題設定調整
Astra 多種主題設定調整

這意味著,你可以做大方向的調整,把網站設計成喜愛的樣子。

Astra 也支援電腦、平板、手機的即時預覽模式,加上有視覺化編輯效果,編輯起來更快速。

簡單來說,Astra 是多功能輕量級主題,支援主流頁面編輯器,絕對是值得使用的一款優質主題。


2. 免費版方案安裝+啟用

Astra Theme 有提供免費版和進階版,建議新手可從免費版開始體驗,覺得不錯用再升級進階版即可。

有關 Astra 免費版可從 WordPress 後台 > 外掛 > 安裝外掛,搜尋 Astra 主題就可安裝(不知道怎麼安裝的,也可參考 如何安裝 WordPress 主題)。

安裝完成後請記得 啟用,才會真正套用主題唷。

建立Blog :wordpress 佈景主題安裝
wordpress 佈景主題安裝

Astra 順利安裝完成,就能開始本文的學習囉。


3. Astra 主題教學範例

Astra Theme 是輕量多功能主題,主題速度快且客製化程度高,對於任何人都很容易上手。

裡面有內建多種風格樣板(需安裝 Astra 相關外掛),可一鍵套用再從中修改,很快就能打造個人網站。

對此我寫了幾篇教學,用 Astra 免費版就能達成,像是 建立 Blog企業形象網站購物網站架設

如果是打算架設購物網站,可參考 WooCommerce 教學 加上 金物流教學,會學習的更完整。

以上範例再配上 優質外掛推薦,就能做出功能齊全的網站。參考 WordPress 後台教學,也可學習更多操作。

除此之外,Astra 對主流的 頁面編輯器 都有良好支援,像是 Elementor、Beaver Builder 等 ..。

至於網站架設完成後,可 提交網站到 Google Search Console 加速被收錄速度,還有 安裝 GA 追蹤碼,方便掌握訪客資訊。

當然,Astra 還能製作多種類的網站,這邊僅部分範例。


風格模板套用

Astra Theme 有多種風格模板可一鍵套用,再從現有的樣板修改,架站速度會很快。但使用 Astra 風格模板之前,需安裝相關外掛。

前往 WordPress 外觀 > Astra Options,點 Install Importer Plugin,會自動安裝 Astra 模板外掛。

安裝 Astra 起始樣板外掛
安裝 Astra 起始樣板外掛

或是可在 WordPress 外掛 > 安裝外掛,搜尋 Astra 找到下圖的外掛並安裝,都是一樣的。(兩個方法 2 選 1 就好)

安裝 Astra 起始模板外掛
安裝 Astra 起始模板外掛

安裝完成後,模板外掛會詢問常用的頁面編輯器是哪個,這邊選擇 Elementor 作為教學範例。

備註:上面如果是用第二種方法安裝,需自行前往外掛設定項,才會有下圖流程。

選擇頁面編輯器相關的模板
選擇頁面編輯器相關的模板

接著就會看到非常多種 Astra 使用 Elementor 編輯器做的起始模板。

找到喜歡的模板點入,可進行全站安裝 or 單一頁面安裝,就看自己的需求囉。

備註:右上角有標註 Agency 是 Astra 進階版才能使用,可參考 Premium Starter Templates 教學

Astra 多種起始模板,可供挑選
Astra 多種起始模板,可供挑選

以上是使用 Astra 風格模板外掛教學,善加使用就不用從零開始架站,網站建置流程會加快許多。


Astra 功能列表總覽

前往網站前台的任一頁面,點擊上方的 自訂,就能進行 Astra 設定。

前往 Astra 自訂選項
前往 Astra 自訂選項

Astra 容易上手的原因是,它把整個頁面分成簡單幾個區塊,想要改什麼,就直接去那個區塊裡面調整就好。

下圖我列出 Astra 區塊設定的大項目,大項目裡面又有小項目可調整,會放在下面章節慢慢教學。

Astra 主要的設定項目
Astra 主要的設定項目
  • Global 全站設定:Typography 文字設定、Colors 風格顏色、Container 容器設定、Buttons 按鈕設定。
  • Header 頁首設定:Site Identity 網站身份、Primary Header 主頁首設定、Primary Menu 主選單設定、Transparent Header 透明頁首設定。
  • Breadcrumb 麵包屑設定:路徑出現位置。
  • Blog 部落格設定:Blog / Archive 文章列表設定、Single Post 單一文章設定。
  • Sidebar 側邊欄設定:各頁面是否顯示側邊欄、側邊欄寬度調整。
  • Footer 頁尾設定:Footer Widgets 頁尾小套件、Footer Bar 頁尾欄。

Global 全網站設定

Global 全網站設定,顧名思義就是改了會影響整個網站,像是網站文字、風格顏色、佈局設定等 .. 。主要分成幾大項能做設定,如下。

  • Typography 文字設定
  • Colors 顏色設定
  • Container 網站佈局設定
  • Buttons 按鈕設定

前往 Global 選項,我挑選其中一些做介紹。

Base Typography 基本文字設定

前往 Typography > Base Typography,調整基本文字,更改完記得點 發佈

可針對不同裝置調整字體大小。可瀏覽不同裝置的呈現畫面。

Astra 文字相關設定
Astra 文字相關設定

Headings 網站標題文字設定

前往 Typography > Headings,可調整標題文字(包括文章、頁面標題之類的)。

網站標題以 HTML 程式碼的標籤是 H1 ~ H6,數字越小字體預設越大,設定時也遵守這個概念就好。

下圖是套用在所有標題的預設值。

Astra 標題文字設定
Astra 標題文字設定

至於,如果想各別調整標題文字大小,當前設定頁面往下滑,就可針對不同 H1 ~ H6 標籤進行設定。

Base Colors 基本顏色設定

前往 Color > Base Colors,可以調整網站文字顏色、主視覺顏色、連結顏色、標題顏色、背景顏色(也可用圖片當背景)等 .. 。

Astra 網站基礎顏色設定
Astra 網站基礎顏色設定

Container 網站佈局設定

前往 Container,可調整網站寬度、全站佈局樣式、網站各頁面佈局樣式。

Astra 佈局容器設定
Astra 佈局容器設定

Buttons 按鈕設定

前往 Buttons,可調整按鈕相關設定,像是按鈕顏色、文字顏色、內距調整等。

點內距調整的小圖示,可對不同裝置設定內距。

Astra教學 :按鈕相關設定
Astra教學 :按鈕相關設定

Header 頁首設定

Header 網站頁首設定,有這幾大項可以調整,我挑選其中幾個功能做介紹。

  • Site Identity 網站身份
  • Primary Header 主頁首設定
  • Primary Menu 主選單設定
  • Transparent Header 透明頁首設定

Site Identity 網站身份

前往 Site Identity,可設定網站 Logo、Retina Logo(Retina 螢幕)、Mobile Logo(手機)。

我自己目前都只設定網站 Logo 而已。

Retina Logo、Mobile Logo 有需求再設定就好,有設定的話 Different Logo For XXX 的文字,記得要打勾。

Astra教學 :網站品牌圖示設定
Astra教學 :網站品牌圖示設定

如果網站 Logo 本身就含有文字,可把 Display Site Title 取消,不然畫面呈現會有點怪。

如果要顯示網站標語,可把 Display Site Tagline 打勾,我自己是沒有勾選。

Primary Header 主頁首設定

可更換網站頁首佈局、手機頁首佈局、邊線寬度&顏色。

Astra教學 :頁首相關設定
Astra教學 :頁首相關設定

Primary Menu 主選單設定

設定有關主選單的地方,通常指的是頁首選單。下面會針對一些內容做補充。

做選單設定時,可善用 Astra 視覺編輯器的裝置切換瀏覽,就可預先看到手機版的面貌。

Astra教學 :網站主選單設定
Astra教學 :網站主選單設定

Last Item in Menu 選單尾項類型

有分成 None(正常)、Search(搜尋欄)、Button(按鈕)、Text / HTML(文字 or 程式碼)、Widget(小工具) 幾種類型。

Button、Search 這兩個類型,算是除了 None 類型,比較多人在用。

如果選擇 Button 類型,需設定按鈕文字、連結、樣式等 .. 。

Container Animation 動態顯示

子選單動態顯示方法,有 Default 預設 、Fade 淡入、Slide Up / Down 向上下滑入,這幾種方式。

Menu Breakpoint 手機斷點

可設定多少寬度會改為手機選單模式。

Transparent Header 透明頁首設定

Astra 可製作透明頁首,點 Enable on Complete Website 可應用在全站。

Astra教學 : 網站透明頁首設定
網站透明頁首設定

Enable On 可選應用在哪個裝置,Desktop+Mobile 是電腦和手機設備。

Different Logo for Transparent Header 是指在透明頁首的情況,是否使用不同 Logo。

除此之外,也可對透明頁首的不同區塊設定顏色。


Breadcrumb 麵包屑設定,從網頁設計的角度來說,指的是「 網站路徑 」。

前往 Breadcrumb 就能設定,這通常比較少人調整,所以就簡單介紹。

Astra 網站麵包屑設定
Astra 網站麵包屑設定

Position 指的是網站路徑出現位置,有 None 不顯示、Inside Header 頁首中、After Header 頁首後、Before Title 標題前,這幾種。

可自行切換,看看喜歡哪種。


Blog 部落格頁面設定

Blog 部落格頁面設定,有這兩大項可以調整,我挑選其中幾個功能做介紹。

  • Blog / Archieve 文章列表
  • Single Post 單一文章頁面

Blog / Archieve 文章列表

主要是調整文章列表相關的(可前往網站的文章列表頁,方便查看變化)。

Astra 文章列表,相關設定
Astra 文章列表,相關設定
  • Content Width 內容寬度:可調整頁面寬度。
  • Post Structure / Meta 文章結構&描述:有多種可顯示的區塊,點擊眼睛 icon 可顯示或關閉,欄位可拖放排順序。
  • Post Content 內容顯示方式:有 Excerpt 摘要、Full Content 完整內容,這兩種內文顯示方式。建議選 Excerpt,預防頁面過長問題。
  • Post Title 文章列表標題:可調整文章列表頁中的文章標題大小,也可針對不同裝置調整大小。

Single Post 單一文章頁面

跟上面可調整的功能差不多,只是應用在單一文章頁面,所以就不多加敘述。


Sidebar 側邊欄設定,可調整網站各頁面的側邊欄佈局。前往 Sidebar 選項,下面會做介紹。

Astra 主題側邊欄設定
Astra 主題側邊欄設定

有幾種側邊欄佈局可選擇,分別是 Default 預設、No Sidebar 不顯示、Left Sidebar 左側邊欄、Right Sidebar 右側邊欄。

這邊分享我自己的設定(可依照你需求更改)。

  • Default Layout 預設側邊欄佈局:我是選 Right Sidebar ,就是全站頁面都會出現右側邊欄(如果有指定頁面不想顯示,我會再各別到文章 or 頁面改為 No Sidebar)。
  • Pages 網站頁面:WordPress 頁面類型。我是選 No Sidebar,因為頁面設計通常比較多變化,頁面會需比較寬一點。
  • Blog Posts 單一文章:我是用 Default,因為我在 Default Layout 已經選 Right Sidebar,所以這裡選 Default 就會套用設定。
  • Archives 文章列表:我是用 Default,因為我在 Default Layout 已經選 Right Sidebar,所以這裡選 Default 就會套用設定。

在 WordPress 系統中,文章和頁面是不同的,可參考 兩者差異

網站側邊欄裡,可以放置許多有用的小工具,像是搜尋框、最新文章、電子報訂閱等 ..,相關設定可參考 WordPress 教學


Footer 網站頁尾設定,有這兩大項可以調整。

  • Footer Widgets 頁尾小工具
  • Footer Bar 頁面底端

Footer Widgets 頁尾小工具

可設定是否開啟頁尾佈局,有開啟就能在頁尾放一些小工具,像是網站標語、網站選單、文章內容等等 .. 。

這個跟側邊欄的小工具設定是一樣的,可參考 WordPress 教學 學習。

Astra 頁尾相關設定
Astra 頁尾相關設定

有關頁尾背景、內容的顏色,也是在這裡設定。

Footer Bar 頁面底端

可設定底端欄佈局。區塊類型建議選 Text(文字),區塊文字可照下面範例的輸入,系統會自動帶入年份&網站標題。

也可設定底端欄背景、內容顏色等 .. 。

Astra 底端欄位,相關設定
Astra 底端欄位,相關設定

以上就是 Astra 免費版的教學囉,相信大家一定都收穫滿滿吧:)


Astra 進階版方案,更多教學?

有關於 Astra 進階版,我寫了多篇使用教學,方便你認識和上手 Astra 進階功能。

下面文章應該會有效的幫助到你。

  • Astra Pro:Astra 進階版方案,強化功能詳細教學,可參考 Astra 進階教學
  • Astra Pro WooCommerce:WooCommerce 電商功能強化,可參考 Astra Pro WooCommerce 教學
  • WP Portfolio:製作網站作品集、展示頁面、服務案例等 .. 專用外掛,可參考 WP Portfolio 教學
  • Ultimate Addons for Elementor:在 Elementor 上新增 40+ 個元素功能、100+ 網站模板、200+ 區塊模板,可參考 UAE 教學
  • Premium Starter Templates:有更多 Astra 進階模板可使用,可參考 Premium Starter Templates 教學

至於如何購買 Astra 進階版方案,還有要選擇哪種方案比較好?

可參考 Astra 進階教學,裡面有完整方案分析和購買流程,也有完整的進階功能解說,希望會幫助到你唷:)


常見問題

Astra Theme 主題是什麼?


Astra 是 Brainstorm Force 開發的主題,你無需會任何編碼,就可完美的 WordPress 網站製作,有免費版&進階版可使用。

它是多功能的 WordPress 主題,不論是 Blog 建立企業形象網站電商購物網站 等 .. ,或是其他常見類型, Astra Theme 幾乎都能幫助你完成。

Astra 有模板可直接套用嗎?


Astra 有提供 Astra Starter Sites 外掛,裡面有 70 多種樣板風格,一鍵安裝就能快速架站,非常的方便。免費版也有 30 多種可使用。

Astra 主題速度快嗎?


有關於主題速度表現,輕量的佈景主題、禁用 Jquery、優質的程式編碼,都是 Astra 速度優於其他主題原因。

這讓 Astra 在多個速度評測軟體上,都獲得了優異的表現。

Astra 進階版要如何選?


如果是第一次嘗試 Astra 主題的人,可先從 Astra Pro 方案開始,因為費用最便宜。

如果有客製化作品集 or 服務案例的頁面需求,或是本身是 Elementor or Beaver Builder 頁面編輯器的使用者,可選擇 Mini Agency Bundle 方案。

Astra 有支援主流的頁面編輯器嗎?


Astra 會如此流行的原因,其中一點是它對主流的 WordPress 視覺化編輯器,有著完美的兼容。

像是 ElementorBeaver Builder、Gutenberg 等 .. ,可用這些頁面編輯器搭配 Astra 主題,完整製作個人或公司品牌網站。


WordPress 學習資源

學習 WordPress 網站架設流程中,或許會遇到一些解決不了問題,你可以在下方留言給我,我會盡力協助解答。

或是給我一些鼓勵也可以,讓我更有動力提供學習資源給大家,我會非常感謝:)

當然,如果怕問題描述不清楚,可以加入 WordPress 教學時光屋 – 小犬網站 ,我同步也會在社團中幫忙。

小犬網站:wordpress教學社團
小犬網站:wordpress教學社團

希望這對你有所幫助,祝架站順利啦。

2 thoughts on “Astra Theme 教學:WordPress 輕量多功能主題(功能詳解)”

發表迴響

Scroll to Top