這是一篇「 Astra Theme 主題教學 」，分享有關 Astra 主題如何使用。
Astra 主題是這幾年成長快速的 WordPress 主題，輕量級且有多種可變選項，可做出多種不同類型的網站，打造自己或公司品牌官網，也很適合新手使用。
這篇文章會著重於 Astra 免費版教學，把功能頗析分享給大家，讓任何對它有興趣的人，都能免費入手套用。
如果你對 Astra 進階版有興趣，也可參考 Astra 進階指南：）
本文的目的，就是讓喜歡 Astra 主題的 WordPress 站長們，都能快速上手這款優質主題，章節如下：
1. Astra 主題是什麼？
Astra 是 Brainstorm Force 開發的主題，你無需會任何編碼，就可完美的 WordPress 網站製作，有免費版＆進階版可使用。更多 Astra 主題教學。
它是多功能的 WordPress 主題，不論是 Blog 建立、企業形象網站、電商購物網站、線上課程網站、預約網站 等 .. ，或是其他常見類型， Astra Theme 幾乎都能幫助你完成。
Astra Theme 內建多種主題樣板
Astra 有提供 Starter Templates 外掛，裡面有 70 多種樣板風格，一鍵安裝就能快速架站，非常的方便。免費版也有 30 多種可使用。
Astra 會如此流行的原因，其中一點是它對主流的 WordPress 視覺化編輯器，有著完美的兼容。
像是 Elementor、Beaver Builder、Gutenberg 等 .. ，可用這些頁面編輯器搭配 Astra 主題，完整製作個人或公司品牌網站。更多 Elementor 教學。
Astra 主題速度評測
有關於主題速度表現，輕量的佈景主題、禁用 Jquery、優質的程式編碼，都是 Astra 速度優於其他主題原因。
這讓 Astra 在多個速度評測軟體上，都獲得了優異的表現。
Astra 多種佈局調整功能
Astra 有多種自定義選項，可充分設定網頁佈局，讓你的網站更像是客製化的效果。
有提供網站頁首 / 頁尾修改、主視覺顏色調整、字體字型調整、選單佈局調整、各頁面版面配置等 ..，輕量但精悍。
這意味著，你可以做大方向的調整，把網站設計成喜愛的樣子。
Astra 也支援電腦、平板、手機的即時預覽模式，加上有視覺化編輯效果，編輯起來更快速。
簡單來說，Astra 是多功能輕量級主題，支援主流頁面編輯器，絕對是值得使用的一款優質主題！
2. 免費版方案安裝＋啟用
Astra Theme 有提供免費版和進階版，建議新手可從免費版開始體驗，覺得不錯用再升級進階版即可。
Astra 免費版，可從 WordPress 後台 > 外觀 > 安裝佈景主題，搜尋 Astra 主題就可安裝（不知道怎麼安裝的，也可參考 如何安裝 WordPress 主題）。
安裝完成後請記得 啟用，才會真正套用主題唷。
Astra 順利安裝完成，接著我們來繼續安裝子主題，以開始本文的學習！
Astra Child Theme 子主題安裝
前往 Astra Child Theme 生成頁面，下載子主題，可任意命名子主題名稱，也可參考我的命名。
點擊 Generate 按鈕下載。
使用子主題好處：
因為主題都會進行升級＆維護，如果有些程式碼改在原主題上，就可能會被還原掉。
所以有些人會使用子主題方式，保持住自己設定的程式碼（或功能設定），而不用再重新做一次。
跟上面安裝主題流程一樣，前往 WordPress 後台，把子主題上傳安裝，只是這次需點 啟用。
到此步驟，應該會看到有兩個 Astra 主題，分別是 Astra 主題＆ Astra 子主題，而 Astra 子主題也有正常啟用，這是完成圖。
備註：原主題＆子主題只能擇一啟用，上面示範的是啟用子主題。
3. Astra 主題，網站類型範例
Astra Theme 是輕量多功能主題，主題速度快且客製化程度高，對於任何人都很容易上手。
裡面有內建多種風格樣板（需安裝 Astra 相關外掛），可一鍵套用再從中修改，很快就能打造個人網站。
對此我寫了幾篇教學，用 Astra 免費版就能達成，像是 建立 Blog、企業形象網站、購物網站架設。
如果是打算架設購物網站，可參考 WooCommerce 教學 加上 金物流教學，會學習的更完整。
以上範例再配上 優質外掛推薦，就能做出功能齊全的網站。參考 WordPress 後台教學，也可學習更多操作。
除此之外，Astra 對主流的 頁面編輯器 都有良好支援，像是 Elementor、Beaver Builder 等 ..。
至於網站架設完成後，可再優化網站 SEO，進行網路行銷，最後 提交網站到 Google Search Console 加速被收錄速度，安裝 GA 追蹤碼，方便掌握訪客資訊。
當然，Astra 還能製作多種類的網站，這邊僅簡單陳述部分範例。
4. 風格模板套用
Astra Theme 有多種風格模板可一鍵套用，再從現有的樣板修改，架站速度會很快。但使用 Astra 風格模板之前，需安裝相關外掛。
點選左側 Astra > 最右側 Useful Plugins > Starter Templates，點 Install，就會自動安裝 Astra 模板外掛。
或是可在 WordPress 外掛 > 安裝外掛，搜尋 Astra 找到下圖的外掛並安裝，都是一樣的。（兩個方法 2 選 1 就好）
安裝完成後，進入初始設定頁面，模板外掛會詢問常用的頁面編輯器是哪個，這邊選擇 Elementor 作為教學範例。更多 Elementor 基礎教學。
備註：上面如果是用第二種方法安裝，需自行前往外掛設定項，才會有下圖流程。
接著就會看到非常多種 Astra 使用 Elementor 編輯器做的起始模板。
找到喜歡的模板點入，可進行全站安裝 or 單一頁面安裝，就看自己的需求囉。
備註：右上角有標註 Agency 是 Astra 進階版才能使用，可參考 Premium Starter Templates 教學。
以上是使用 Astra 風格模板外掛教學，善加使用就不用從零開始架站，網站建置流程會加快許多。
5. Astra 功能列表總覽
前往網站前台的任一頁面，點擊上方的 自訂，就能進行 Astra 設定。
Astra 容易上手的原因是，它把整個頁面分成簡單幾個區塊，想要改什麼，就直接去那個區塊裡面調整就好。
下圖我列出 Astra 區塊設定的大項目，大項目裡面又有小項目可調整，會放在下面章節慢慢教學。
- 全域：可以設定排版樣式、色彩、內容容器版面配置、按鈕、返回頂端功能、區塊編輯器 .. 等。
- 頁首編輯器：有關網站 Logo、網站選單、佈局成列、顏色調整、是否為透明頁首 .. 等。
- 導覽標記：以往的 Breadcrumb 路徑設定，決定頁首位置位於內部、下方或標題上方。
- 網站文章：決定網站文章和資訊欄的容器版面配置、文章寬度、文章結構 .. 等。
- 頁面：可以選擇頁面的版面配置，像是區塊式版面、全幅寬度 .. 等多種設計。
- 資訊欄：設定資訊欄的寬度與版面位置。
- 頁尾編輯器：上 / 中 / 下層頁尾調整，可自由設定頁尾工具、頁尾佈局、頁尾樣式等 .. 等。
- WooCommerce：設定電商相關頁面，有開啟 WooCommerce 功能才有，像是產品目錄、單項商品頁面、購物車、結帳頁面、商品圖案 .. 等設定。
- Site Identity：設定網站圖示、網站標題及標誌設定。
- 選單：設定選單的位置和名稱、選單項目標籤、自訂選單連結 .. 等。
- 小工具：可以進行區塊設定，像是編輯頁首、頁尾、側邊欄的內容、自訂 HTML … 等功能。
- 頁首設定：可以選取網站首頁要顯示的的內容。
- 附加的 CSS：加入網站專屬的 CSS 程式碼，可以自訂網站的外觀和版面配置。
全域設定
全域設定，顧名思義就是改了會影響整個網站，像是網站文字、風格顏色、佈局設定等 .. 。主要分成幾大項能做設定，如下：
備註：如果在網站前台，有看到部分地方顯示為英文，可使用 Loco Translate 外掛 翻譯成中文唷：）
前往 Global 選項，我挑選其中一些做介紹。
排版樣式＋標題文字設定
前往「 排版樣式 」選項，可以調整基本字型、標題字型、段落下邊界 ..等設定，更改完記得點 發佈。
可針對不同裝置調整字體大小，也可瀏覽不同裝置的呈現畫面。最上面的預設集可以一次設定網站字體，如下圖。
在排版樣式區塊繼續往下滑，可以設定基本自行，包含內文自行和標題字型。
網站標題以 HTML 程式碼的標籤是 H1 ~ H6，數字越小字體預設越大（SEO 權重也比較大），設定時也遵守這個概念就好。
下圖的「 字型系列 」可選擇 Other System Fonts 其他系統字型、Google 系列字型，如果想要沿用上一個字型設定，選擇「 繼承上層元素 」就好了。
至於，如果想各別調整標題文字大小，當前設定頁面往下滑，就可針對不同 H1 ~ H6 標籤進行設定。
色彩設定
前往色彩，可以調整網站文字顏色、主視覺顏色、連結顏色、標題顏色、背景顏色等 .. 。
你可以隨意調整色彩，如果想要恢復原本設定，點選 ⟲ 的按鈕即可（如下圖）。
內容容器設定網站佈局
前往內容容器，也就是以往的 Container 設定，透過基本的設定來置中內容，可以調整容器版面配置，像是僅內文套用區塊式版面、全幅寬度完整置於區域內 .. 等多樣選擇，也能手動調整內容容器的佈局寬度。
按鈕設定
前往按鈕，可調整按鈕相關設定，像是點選按鈕前後的色彩反差、字型、按鈕邊框間距、框線圓角半徑 .. 等。
可以直接點選「 按鈕預設集 」快速設計好按鈕外觀，右邊畫面會立即出現效果。
頁首編輯器
Astra 頁首編輯器功能，讓站長直覺操作就能自行客製化網站頁首，下圖是頁首編輯器的主要功能一覽。
- 上方 / 主要 / 下方頁首：主要分為 3 層頁首項目，點擊齒輪 ICON 可進行編輯。
- OFF CANVAS：側邊滑動式設定，這是針對行動版裝置的導覽列設定，需要在左下方切換成平板或手機的檢視模式，才會顯示出這項功能設定。
- ＋：滑鼠移至指定區塊上，即可新增不同的網站小工具，小工具也可拖曳排序。
- Elements 當前功能：根據點擊的項目，會進行可設定項的切換。
- Design 樣式設計：編輯樣式的地方，像是顏色、內距離、外距離 .. 等。
- 透明頁首：Astra 有分為「 一般頁首 」和「 透明頁首 」兩種，而 Astra 有些風格樣板會用到透明頁首（如果發現編輯樣式時，畫面沒有反應，那可能就是用透明頁首，就需點擊進入編輯）。
接下來分 3 個小步驟，實戰示範網站頁首的調整，從實際操作中應該會更能掌握。
Step1：編輯網站 LOGO
首先，先把滑鼠移至 Logo 上點擊筆 Icon，就會自動切換到 Logo 設定欄位。
P.S 或是點選 頁首編輯器 > 網站標題及標誌。
上傳 Logo 後可調整大小（點擊電腦圖示，可針對不同裝置設定大小），你可以輸入網站標題、網站說明，並設定每個裝置的能見度，如果考慮行動版裝置的版面較小，可以限定平板或手機不要出現網站標題或網站說明。
Step2：編輯網站選單
點選 選單 > Main Menu > 新增選單項目。
可以調整導覽選單的項目名稱，並根據自己的需求增加選單項目。長按就能拖曳選單的位置，拖曳的位置會決定選單是主要項目，或是旗下的子項目。
Astra 的電腦版選單（Primary Menu）和手機版選單（Mobile Menu），這 2 個選單需要「 切換裝置模式 」才能進行設置。
首先，介紹電腦版選單設定，模式切換到電腦裝置以後，可以在頁首區域新增想要的工具，最左側 ELEMENTS 區域就會顯示出目前有哪些工具項目，可以點選做進一步設定。
DESIGN 則會根據你現在點選的工具項目，跳出不一樣的設定選項。
再來，介紹手機版選單，我們先切換到手機版視窗，會自動跳出 OFF CANVAS，這是專門設定行動版裝置的選單區域（電腦版沒有），可以新增工具，還能長按工具進行拖曳排列，畫面呈現會按照這個順序排列。
Step3：設計上方頁首
上方頁首可以新增小工具，我們以 Social 社群工具作為示範。
先在上方首頁的區域新增 Social 工具，並在右上角點擊筆，左側 GENERAL 就會自動跳出「 社交網路服務圖示 」的設定。DESIGN 則可以設定社群圖示的尺寸、間距、圓角半徑、色彩類型 .. 等。
如此一來，我們的網站頁首就變得更加美觀了！以上就是 Astra 的頁首編輯器的操作介紹。
額外提醒：透明頁首設定
Astra 有些風格樣板是使用「 透明頁首 」進行設計，確認是不是的方法很簡單，只要看一下當前頁面的頁首，是否是透明的就大概可知道。
而透明頁首的樣式調整是在不同地方，記得要到對的位置更改唷：）
- Enable on Complete Website：是否把透明頁首應用在全網站。
- Enable On：可選應用在哪個裝置。
- Different Logo for Transparent Header：是指在透明頁首的情況，是否使用不同 Logo。
導覽標記設定
導覽標記可以設定 Breadcrumb 路徑，Breadcrumb 就是「 網站當前路徑 」的意思，也有人用比較可愛的說法「 網站麵包屑 」，也就是網頁上方的導航條、導航列。
前往「 導覽標記 」就可以設定，這通常比較少人調整，所以就簡單介紹。
網站路徑顯示位置，是用 Header 頁首做為基準點，提供無、內部、下方、標題上方的選項。
但我自己是用「 無 」不顯示，可看個人的需求，適用較為複雜的網站路徑，讓讀者一眼明白網站的當前位置。
網站文章設定
網站文章設定，主要分成兩大項可以調整：
- 網站文章 / 彙整
- 單篇文章
網站文章 / 彙整
主要是調整文章列表相關的（可前往網站的文章列表頁，方便查看變化）。
- Blog Title：設定 Banner Layout 橫幅佈局、改變 3 種裝置（電腦、平板、手機）的水平對齊方式、內部元素間距、容器背景、Blog 的字型與色彩設定…等。
- 版面配置：GENERAL 主要調整容器與資訊欄的版面配置、DESIGN 則是設定文章標題字型大小。
- 文章結構：設定文章內的相關資料，像是封面呈現的精選圖片、內容摘要 .. 等。
單篇文章
單篇文章跟上述的功能差不多，只是應用在單一文章頁面，差別在於多了啟用「 相關文章 」，類似自動設定延伸閱讀。
你可以在「 文章查詢條件 」設定相關文章的關聯依據，像是根據相同的分類或標籤。排序依據則可以根據發佈日期、文章順序、留言數量 .. 等。
資訊欄設定
Astra 改版後的資訊欄設定，就是以往的 Sidebar 側邊欄，可以調整網站各頁面的側邊欄佈局。
點選 網站文章 > 網站文章 / 彙整 > 資訊欄版面配置。
資訊欄版面配置可以選擇 3 種配置：無資訊欄、左側資訊欄、右側資訊欄。只要點選筆就能快速編輯，左側會自動跳出相關設定。
上圖示範右側資訊欄，代表全站頁面都會出現右側邊欄。如果想要在指定的頁面設定不同的版面配置，可以直接點選各別的文章或頁面進行設定。
在 WordPress 系統中，文章和頁面是不同的，可參考 兩者差異。
網站側邊欄裡，可以放置許多有用的小工具，像是搜尋框、最新文章、電子報訂閱 .. 等，相關設定可參考 WordPress 教學。
本機託管網頁字型
本機託管 Google Fonts 網頁字型，意思是先下載 Google Fonts 字型，並放在本地主機託管，目的是降低向遠端請求資源的數量，可以優化網站字型的讀取速度、提升網站速度。更多 WordPress 本機託管手動操作。
點選 Astra > 設定 > 效能，就可以設定本機託管網頁字型的開關。
如果你有在使用 Divi 軟體，想知道如何上傳自訂字型，或是字體格式轉換，可以參考這篇 Divi 上傳自訂字體教學。
頁尾編輯器
頁尾編輯器（Footer Builder）跟頁首編輯器的操作方法大同小異，也是能讓你客製化網站的好幫手。
頁尾編輯器有分為上方、主要、下方頁尾，點擊要修改的齒輪，就能調整欄位數量、寬度、高度、垂直對齊方式，還可以針對不同的裝置（電腦、平板、手機）設定版面配置和可見度。
當然你也能自行新增許多小工具，豐富你的網站頁尾。至於要修改樣式，一樣切換到 Design 分頁即可。
頁尾編輯器設定 Copyright
下圖實際示範如何編輯 Copyright，也就是設定網站的著作權聲明。
在設定頁尾區域依序點選 ＋ > Copyright > 來到 ELEMENTS 區域點選 Copyright，點選後即可開始編輯。
GENERAL 編輯區內是 Astra 系統動態文字，會自動帶入你的目前年份、網站名稱，可以依照需求刪掉或增加內容。DESIGN 則是可以編輯文字色彩、字型大小、間距的邊界設定。
以上就是 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 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 視覺化頁面編輯器，有著完美的兼容。
像是 Elementor、Beaver Builder、Gutenberg 等 .. ，可用這些頁面編輯器搭配 Astra 主題，完整製作個人或公司品牌網站。
聯絡犬哥網站
在網站架設＋網路行銷的過程中，或許會遇到一些解決不了問題，可以在下方留言給我，我會盡力協助解答！
接下來，額外分享 2 個實用資源，可有效幫助大家解決問題。
資源一：犬哥網站（專業 WordPress 網頁設計＆SEO 行銷公司）
如果你沒時間自己架站，或是遇到網站沒有流量、Google 網站排名不理想。歡迎洽詢 犬哥網站（WordPress 網頁設計＆SEO 行銷公司），請專家協助你會更容易！
我們有多年網頁設計、SEO 網站排名經驗，加上上百個高質感作品、SEO 實戰案例，絕對能滿足您的需求！
資源二：WordPress 高手架站課＋SEO 排名飆升課（線上課程）
如果想學習更深入的 WordPress 架站技巧，或是想透過 SEO 關鍵字提升網站流量？
可以參考犬哥近期推出的這兩門課程，課程非常的扎實，都是犬哥自己實戰出來的經驗分享，不打高空只教你做出成績！
- WordPress 高手架站課：
從網頁設計觀念、WordPress / WooCommerce 後台操作、熱門主題.外掛教學、品牌網站 / 部落格 / 電商網站，3 大類型網站建置方法等豐富內容，一次教會你。
課程內容非常的紮實（長度超過 20 小時）。如果你剛學習自架網站，這門課程可以讓你用最快的速度，就學會這項技能！ - SEO 排名飆升課：
教你掌握關鍵字策略、SEO 文章撰寫、多種實戰 SEO 技巧、透視對手 SEO 策略、SEO 必備軟體教學、最新 AI SEO 應用等，大幅提升行銷能力。
帶你衝上 Google 排名第一頁，大量提升網站營收和訂單！
