文章最後更新於 2023 年 09 月 07 日
Astra Theme教學 將會介紹WordPress網站架設新手必知的Astra佈景主題各種功能、使用方法。
Erian的客戶包含許多產業,像是 電商零售、娛樂、運動健身、居家用品、線上課程平台等…,我們使用過各種WordPress佈景主題,Astra Theme佈景主題 使用者介面簡單,新手也可以快速上手、輕量兼具網站速度,並提供 一次購買,終身使用方案!
Astra Theme佈景主題簡介
- 是由Brainstorm Force開發的WordPress佈景主題
- 輕量兼具網站速度
- 採用Vanilla JavaScript / 禁用jQuery – 減少網站載入需求
- 價格方案-分為 年費方案/ 終生方案
- Astra佈景主題只需要50 KB 即可運作 – 其他WordPress佈景主題則需要300 KB以上
Astra 佈景主題 提供各種網站模板,WordPress新手可以一鍵套用,打造不同種類品牌網站,像是 品牌形象網站、電商購物平台、線上課程網站、作品集等。
此外,Astra Theme佈景主題 付費方案,還提供 WP Portfolio 作品集、Ultimate Addons for Elementor 頁面編輯器 等實用的WordPress外掛。
Erian將在本文將逐步介紹 Astra Theme佈景主題使用教學,協助WordPress網站架設新手快速掌握Astra佈景主題的各種功能,建立客製化的品牌網站。
Astra Pro 免費使用1年 x Cloudways主機 獨家優惠活動
Cloudways主機 與 Astra Theme佈景主題 合作,你只需要點擊「立即取得免費 Astra Pro」,並且 註冊/安裝 Cloudways主機 + Astra Theme佈景主題,就可以免費使用1年 Astra Pro 專業版!
如果你想了解更多Cloudways各種功能/使用教學,可以點擊兩篇文章 《Cloudways主機評價》、《Cloudways主機教學》。
立即取得免費 Astra Pro(免費使用1年 Astra Pro 專業版)
延伸閱讀:
Cloudways教學|用CP值最高主機架設WordPress網站(前三個月8折)
Astra Pro專業版教學 (建構中)
Astra Theme佈景主題 使用評價 (建構中)
WordPress 網站架設教學系列
【 WordPress 架站教學1 】WordPress 是什麼?WordPress 架設網站 8 項入門教學完整介紹
【 WordPress 架站教學2 】如何用 WordPress 架設網站-網域申請 / DNS/ 主機-完整設定教學
【 WordPress 架站教學3 】WordPress 後台教學|WordPress 新手必知 10 大功能完整操作指南
【 WordPress 架站教學4 】Astra Theme 教學|網站架設新手必知 WordPress佈景主題
Astra Theme佈景主題是什麼?
Astra Theme 是由 Brainstorm Force 開發的WordPress佈景主題,你不需要學習程式語言,就可以透過模板建立各種WordPress網站。
Astra佈景主題分為免費版、專業版,若你想要創建 品牌形象、電商購物、線上課程等類型網站,Astra Pro專業版功能完整,只要一鍵安裝模板,即可滿足各種網站外觀設計需求。
Astra Theme佈景主題-價格方案
- Astra 免費版
- Astra Pro – $49美金/年、$239美金/終身使用方案 (無網站使用數量限制)
- Essential Bundle – $169/年、$499/終身使用方案 (無網站使用數量限制)
- Growth Bundle: $249/年、$699/終身使用方案 (無網站使用數量限制)
(價格方案截至2022年8月 Astra官方網站)
不論你是購買哪一種方案,Astra Theme佈景主題 付費板 皆無網站使用數量限制。
Erian的客戶都是使用 Essential Bundle方案,產業包含 電商零售、娛樂、運動健身、居家用品、線上課程平台、公益團體等,這個方案提供 Ultimate Addons for Elementor頁面編輯器,即使是WordPress新手也能快速上手,套用模板/客製化你的網站,適用各種類型品牌網站。
免費試用 Astra
Astra Theme佈景主題-提供180多款網站模板
Astra提供的Starter Templates外掛,其中包含180多款網站模板,WordPress新手只需要一鍵就可以完成網站外觀設計。
Astra佈景主題整合多款知名WordPress視覺化頁面編輯器,如 Gutenberg、Elementor、Beaver Builder等,協助 品牌/電商/自媒體客製化網站外觀設計。
延伸閱讀:
Elementor頁面編輯器-使用教學 (建構中)
Astra Theme佈景主題網站速度測試
Astra提供輕量的佈景主題/ 禁用jQuery/ 只需要50 KB 即可運作,使安裝Astra外掛的網站速度更快!
Astra Theme佈景主題提供各種自訂功能-客製化網站外觀
Astra佈景主題提供多種自訂功能,品牌/電商/自媒體 可以依照自身需求,調整網站版面,客製化網站外觀,加深消費者的品牌印象。
你可以透過Astra佈景主題調整WordPress網站的 頁首/頁尾、主要品牌色、選單排序、字體、排版等,自訂功能相當完整。
此外,Astra佈景主題可以即時預覽 電腦/平板/手機 的排版畫面,WordPress新手不需要學習程式語言,就可以透過 Elementor頁面編輯器 直接在預覽畫面中,調整網站排版,滿足各種產業的網站架設需求!
免費試用 Astra
Astra Theme佈景主題安裝教學
Astra佈景主題分為免費版、專業版,若你想要創建 品牌形象、電商購物、線上課程等類型網站,WordPress架站新手可以先安裝免費版體驗。
如果你架設的WordPress網站為 品牌形象、電商、線上課程網站,可以選擇功能完整的 Astra Pro專業版,只要一鍵安裝模板,即可滿足各種網站外觀設計需求。
Astra Theme佈景主題安裝教學
step 1
step 2
step 3
品牌/電商/自媒體 可以選擇與自身品牌相關的篩選條件,挑選與品牌調性類似的WordPress佈景主題,打造官網的品牌風格,加深消費者的品牌印象。
step 4
step 5
step 6
Astra Child Theme子主題安裝教學
為什麼使用Astra Child Theme子主題?
不論你的WordPress網站使用的是什麼佈景主題,都需要升級最新功能,並維護網站狀態。
為了避免原本網站設定被修改,因此有些WordPress網站會創建 子主題,保留原本設定的 程式碼/功能,降低網站重新設定的時間成本。
step 1
step 2
step 3
step 4
不論你的WordPress網站是使用Astra佈景主題、Astra子主題,只能啟用一種佈景主題。
免費試用 Astra
Astra Theme佈景主題模板套用教學
Astra Theme佈景主題中的Starter Templates外掛-包含180多款網站模板,WordPress新手只需要一鍵套用,就可以快速完成網站外觀設計。
WordPress新手在套用Astra佈景主題模板前,必須先安裝Starter Templates外掛。
step 1
step 2
step 3
step 4
品牌/電商/自媒體 可以依照自身需求- 整個網站都安裝模板/單一網頁安裝模板。
如果看到模板右上角有標註PREMIUM,表示網站必須安裝Astra Pro專業版才可以使用。
免費試用 Astra
Astra Theme佈景主題功能選單教學
Astra Theme佈景主題安裝完成後,我們可以先了解Astra有什麼主要功能? 以下Erian將逐一介紹Astra的每項功能。
step 1
step 2
Astra佈景主題將網站每個區塊分類的非常明確,即使是WordPress網站架設新手也可以快速上手,品牌可以依照網站需求,調整網站的外觀、排版、文字等等……。
Astra Theme佈景主題功能選單
- Global 全站設定: Typography 文字設定、Colors 網站顏色設定、Container 容器設定、Buttons 按鈕設定 等
- Header Builder 頁首編輯器: 網站主選單設定、網站 Logo設定、網站主選單排版設定、頁首顏色設定、透明頁首設定 等
- Breadcrumb 網站路徑/麵包屑: 你可以設定 網站路徑出現的位置,像是 顯示在文章標題前方/後方 等
- Blog 部落格設定: Blog / Archive 文章列表設定、Single Post 單篇文章設定 等
- Sidebar 側邊欄設定: 你可以設定 網站側邊欄位置、隱藏網站側邊欄、調整網站側邊欄寬度 等
- Footer Builder 頁尾編輯器: Copyright © 版權宣告設定、頁尾 上層/中層/下層 設定、頁尾社群按鈕設定、頁尾排版設定 等
- Performance 字體託管: 你可以上傳字體至網站上、託管 Google Fonts字體,提升網站載入速度,增進消費者體驗
- WooCommerce 電商設定: 如果你想架設的是電商購物網站,推薦使用WooCommerce電商外掛,你可以設定產品目錄、產品頁面、購物車、結帳頁面 等
接著,Erian將會介紹Astra Theme每項主要功能的使用教學。
免費試用 Astra
Astra Theme佈景主題教學- Global 全網站設定
Astra Theme佈景主題- Global 全網站設定,就是你可以一次套用整個網站所有頁面的設定,如: 網站的顏色、圖片、文字、排版等等……。
Global 全網站設定的主要功能
- Typography 文字設定
- Colors 網站顏色設定
- Container 網站容器設定
- Buttons 網站按鈕設定
WordPress網站架設新手如果遇到網站前台,因為外掛顯示成英文,推薦你使用 Loco Translate外掛,這款外掛可以協助你將網站的英文一次翻譯為中文,我們有客戶也使用這款外掛,節省許多網站修改的時間成本!
Astra Theme佈景主題- Typography 文字設定
step 1
step 2
step 3
→ 在 Body Font 中,你可以修改網站的 內文字體、字體類型、字體大小、字體粗細、字體行高等
→ 你可以切換不同裝置預覽網站排版外觀,修改完成後,點擊最上方的 發布
step 4
→ 在 Headings Font 中,你可以修改網站的 標題字體、字體類型、字體粗細、字體行高等
→ 你可以切換不同裝置預覽網站字體設定,修改完成後,點擊最上方的 發布
網站標題的 HTML 程式碼標籤為 H1 ~ H6。其中,H1標題 的SEO權重最高;H2標題 的SEO權重第二高;H3 ~ H6 依此類推。
因此,你在設定網頁標題、文章標題時,權重越高的標題,就越需要置入產品的核心關鍵字。
step 5
→ 選擇 H1 ~ H6 的筆型符號進行修改
→ 修改完成後,點擊最上方的 發布
免費試用 Astra
Astra Theme佈景主題- Colors 網站顏色設定
step 1
step 2
step 3
→ 你可以修改網站 配色版型、品牌主視覺顏色、標題顏色、連結顏色、網站被景色、文章背景色等
→ 你可以切換不同裝置預覽網站排版外觀,修改完成後,點擊最上方的 發布
免費試用 Astra
Astra Theme佈景主題- Container 網站容器設定
step 1
step 2
step 3
→ 你可以選擇適合的網站外觀排版
→ 如果網站有安裝 WooCommerce電商外掛,也可以調整網站的商品頁面排版
→ 你可以切換不同裝置預覽網站排版外觀,修改完成後,點擊最上方的 發布
免費試用 Astra
Astra Theme佈景主題- Buttons 網站按鈕設定
step 1
step 2
step 3
你可以設定 按鈕形狀、按鈕顏色、按鈕字體、按鈕文字顏色、按鈕外框寬度、按鈕圓角等
→ 你可以切換不同裝置預覽網站按鈕外觀,修改完成後,點擊最上方的 發布
免費試用 Astra
Astra Theme佈景主題教學- Header Builder 頁首編輯器
Header Builder 頁首編輯器,可以協助你客製化WordPress網站頁首,你可以透過Header Builder 修改 品牌LOGO、頁首顏色、頁首內距等。
step 1
step 2
Astra Theme佈景主題- Header Builder 頁首編輯器主要功能
- Elements 頁首元素設定: 你可以設定 網站頁首名稱、頁首品牌LOGO、頁首按鈕、頁首主選單等
- Design 頁首設計設定: 你可以修改 頁首內距、頁首外框寬度等
- Transparent Header 透明頁首: 有些Astra佈景主題模板會直接套用透明頁首,因此如果你在修改網站設定後,網站外觀沒有變化,可以嘗試使用透明設定
- 小工具編輯: 頁首主要分為 上層/主要/下層頁首,你可以將滑鼠停留在需要編輯的位置,就會出現 「+」符號 → 點擊「+」即可新增小工具
你可以透過小工具新增-像是 社群連結按鈕、站內搜尋欄、購物車按鈕、網站按鈕等。
免費試用 Astra
Astra Theme佈景主題- 編輯網站Logo
step 1
step 2
step 3
→ 你可以調整 Logo大小、Display Site Title 是否隱藏網站標題、編輯網站標題等
→ 你也可以切換裝置,確認品牌Logo在頁首呈現的排版外觀,確認完成修改後,點擊 發布
免費試用 Astra
Astra Theme佈景主題- 編輯網站主選單
step 1
step 2
step 3
step 4
step 5
step 6
step 7
step 8
→ 點擊 Design 設計
→ 你可以修改選單設計樣式
- Menu Color選單顏色
- Text / Link 選單文字/連結顏色
- Background 選單背景色
- Menu Font 選單字體
- Menu Spacing 選單內距
- Margin 選單外距
→ 你可以切換不同裝置預覽網站主選單外觀,修改完成後,點擊最上方的 發布
免費試用 Astra
Astra Theme佈景主題- 編輯 Above Header 上層頁首
step 1
step 2
step 3
→ 點擊「+」即可新增小工具
→ 我們以新增 Social 社群連結按鈕 為例
step 4
step 5
step 6
- Background 頁首背景色
- Bottom Border Color 頁首邊界顏色
- Menu Font 選單字體
- Padding 頁首內距
- Margin 頁首外距
→ 你可以切換不同裝置預覽網站頁首外觀,修改完成後,點擊最上方的 發布
免費試用 Astra
Astra Theme佈景主題- 編輯 Transparent Header 透明頁首
step 1
step 2
step 3
step 4
- Enable on Complete Website 啟用/關閉 整個網站的透明頁首
- Enable On 開啟哪一種裝置的透明頁首
- Different Logo for Transparent Header 啟用透明頁首後,是否使用不同的品牌Logo
→ 你可以切換不同裝置預覽網站透明頁首,修改完成後,點擊最上方的 發布
免費試用 Astra
Astra Theme佈景主題教學- Breadcrumb 網站路徑/麵包屑 設定
Breadcrumb 網站路徑/麵包屑 可以幫助瀏覽網站的消費者,了解目前正在瀏覽網站的什麼位置。
例如: 消費者目前正在瀏覽商品頁,他們可以透過 Breadcrumb 網站路徑/麵包屑 快速回到首頁、其他網站選單位置等。
通常 Breadcrumb 網站路徑/麵包屑 會使用預設的設定,或是透過其他WordPress外掛設定。
如果你需要調整 Breadcrumb 網站路徑/麵包屑 顯示的位置,可以根據自身品牌需求,跟著以下步驟進行調整。
Astra Theme佈景主題- 編輯 Breadcrumb 網站路徑/麵包屑
step 1
step 2
step 3
- None 不顯示
- Inside 顯示在頁首中
- After 顯示在頁首後
- Before Title 顯示在標題前
延伸閱讀:
Facebook SEO優化– 經營臉書-FB粉絲專頁必學的11大技巧
Astra Theme佈景主題教學- Blog 部落格 設定
Astra Theme佈景主題可以設定 Blog 部落格的 文章列表、單一文章頁面中 標題大小、文章內容寬度、文章顯示方式等。
- Blog / Archieve 文章列表
- Single Post 單一文章頁面
其中,Blog / Archieve 文章列表、Single Post 單一文章頁面 可以設定的功能類似,只是 Single Post 單一文章頁面 可以選擇是否顯示相關文章。
因此,以下我們將以Blog / Archieve 文章列表為例。
Astra Theme佈景主題- Blog 部落格 設定
step 1
step 2
step 3
step 4
- Content Width 內容寬度
- Post Structure 文章結構 → 點擊 眼睛圖示 可以選擇是否顯示文章圖片、文章標題、文章描述等,你也可以拖曳調整文章內容的顯示順序
- Post Content 內容顯示方式 → 可以選擇顯示 Excerpt 文章摘要、Full Content 完整文章,通常會選擇 Excerpt 避免頁面過長的情況
step 5
- Archive Title Font Size 文章列表-標題大小
- Post Title Font Size 單一文章-標題大小
→ 你可以切換不同裝置預覽 部落格外觀,修改完成後,點擊最上方的 發布
免費試用 Astra
Astra Theme佈景主題教學- Sidebar 側邊欄 設定
Astra Theme佈景主題可以設定 Sidebar 側邊欄 的 網站排版外觀、側邊欄寬度等。
Astra Theme佈景主題教學- Sidebar 側邊欄 設定
step 1
step 2
step 3
→ 你可以切換不同裝置預覽 側邊欄外觀,修改完成後,點擊最上方的 發布
step 4
→ 進入 WordPress網站後台 → 選擇 外觀 → 小工具
→ 你可以加入 站內搜尋欄、側邊欄文字、網址連結、圖片等等……
免費試用 Astra
Astra Theme佈景主題教學- Footer Builder 頁尾編輯器
Astra Theme佈景主題的Footer Builder 頁尾編輯器 與上述介紹的 Header Builder 頁首編輯器 功能類似,同樣分為 上層/中層/下層 頁尾,以下我們將簡單介紹 Footer Builder 頁尾編輯器 的功能。
Astra Theme佈景主題教學- Footer Builder 頁尾編輯器 設定
step 1
step 2
step 3
→ 點擊「+」即可新增小工具
→ 我們可以新增 Copyright 版權、Social 社群連結按鈕、按鈕 等等……
其中,Astra 小工具中的Copyright 版權功能 會自更新 網站名稱、日期等資訊,不需要手動調整。
step 4
→ 你可以設定 頁尾顯示排版、調整頁尾寬度、頁尾元素對齊的方式等等…
→ 你可以切換不同裝置預覽 頁首外觀,修改完成後,點擊最上方的 發布
免費試用 Astra
Astra Theme佈景主題教學影片
若你是 Astra Theme佈景主題新手,可以參考 Astra 官方 Brainstorm Force 的影片(有需要可以使用中文自動翻譯),這部教學影片會手把手教你使用這款工具。
Astra Theme佈景主題教學影片(影片來源:Astra 官方 Brainstorm Force )
免費試用 Astra
結論
Astra Theme佈景主題 提供各種網站模板,WordPress新手可以一鍵套用,適合打造不同產業的網站,如: 品牌形象網站、電商購物平台、線上課程平台、網路論壇、自媒體作品集等。
Astra Theme佈景主題 輕量兼具網站速度,使消費者瀏覽網站速度更快,並提供 一次購買,終身使用方案! 你可以先試用Astra,若適合自身品牌、需要更多客製化功能,再購買Astra的付費方案。
免費試用 Astra
Astra Theme佈景主題-常見問題
Astra Theme佈景主題是什麼?
Astra Theme 是由 Brainstorm Force 開發的佈景主題外掛,即使是不熟悉程式語言的WordPress新手,也可以一鍵套用Astra佈景主題模板,架設各種不同功能的網站排版外觀。
Astra佈景主題分為免費版、專業版,若你想要建立 品牌形象網站、電商購物平台、線上課程網站等,推薦你使用Astra Pro專業版。
如果想要使用Elementor 頁面編輯器 客製化你的網站,你可以選擇Astra佈景主題的 Essential Bundle方案,功能完整,適合各種網站排版設計需求。
免費試用 Astra
Astra Theme佈景主題的WordPress網站模板可以直接套用嗎?
Astra佈景主題提供的Starter Templates外掛,其中包含180多款網站模板,WordPress新手不熟悉網頁設計,也能馬上套用各種網站排版風格,打造不同類型的品牌網站,並且無網站使用數量限制。
Astra Theme佈景主題整合什麼頁面編輯器?
Astra佈景主題整合多款知名WordPress頁面編輯器,如 Gutenberg、Elementor、Beaver Builder等,協助你客製化 品牌形象網站、電商平台、網路論壇、自媒體作品集、線上課程網站等。
WordPress網站架設新手,可以透過 Elementor頁面編輯器 直接在預覽畫面中,直接調整網站排版,使用者介面相當直覺,滿足各種產業的網站架設需求!
Astra Theme佈景主題會使WordPress網站變慢嗎?
Astra提供輕量的佈景主題/ 禁用jQuery/ 只需要50 KB 即可運作,使消費者瀏覽網站速度更快!
Starter Templates 是什麼?
Starter Templates 是 Astra Theme佈景主題提供的網站模板,選擇Astra佈景主題的 Essential Bundle方案,其中包含180多款網站模板,你可以一鍵套用網站排版,適合各種產業的網站。
Astra Theme佈景主題有什麼獨家優惠嗎?
Cloudways主機 與 Astra Theme佈景主題 合作,你只需要點擊「立即取得免費 Astra Pro」並同時註冊/安裝 Cloudways主機 + Astra Theme佈景主題,就可以免費使用1年 Astra Pro 專業版!
如果你想了解更多Cloudways的使用教學、主機評價,歡迎點擊這兩篇文章 《Cloudways主機評價》、《Cloudways主機教學》。
立即取得免費 Astra Pro(免費使用1年 Astra Pro 專業版)
WordPress 網站架設教學系列
【 WordPress 架站教學1 】WordPress 是什麼?WordPress 架設網站 8 項入門教學完整介紹
【 WordPress 架站教學2 】如何用 WordPress 架設網站-網域申請 / DNS/ 主機-完整設定教學
【 WordPress 架站教學3 】WordPress 後台教學|WordPress 新手必知 10 大功能完整操作指南
【 WordPress 架站教學4 】Astra Theme 教學|網站架設新手必知 WordPress佈景主題
大家好,我是 Erian
在這裡我們將提供許多數位行銷、電商經營、創業職涯、實用軟體推薦、WordPress 教學等相關主題,協助 MIT 台灣企業打造知名品牌!
我們提供部落格 SEO 顧問、文案撰寫顧問服務,想了解更多 Erian 創立網站的故事嗎?
查看影響立-Erian 的起源
如果你喜歡我的文章,歡迎你按讚、追蹤、分享影響立的 Facebook 粉絲專頁 行銷電商教學、 Instagram 行銷電商懶人包,隨時收到第一手資訊,歡迎在文章下方留言分享。
【現任】
【曾任】
- ViewEC 視宇 行銷部經理 / Wiser 秩宇
- 曾任職知名連鎖零售通路,帶領團隊屢創公司業績、知名媒體採訪(非付費採訪)
【曾合作知名品牌】
Amazon 亞馬遜、Rakuten 樂天、蝦皮大學 Shopee、國際知名物流 DHL、華碩 ASUS、三立新聞、ET Today、Marie Claire 美麗佳人雜誌、美國探索頻道 Discovery、日本角川-Taipei Walker、MOMO 摩天商城、台新銀行等。
【行銷宗旨】
自身成為消費者體驗產品,必能創造亮點行銷。
【企業使命】
協助 MIT 台灣企業打造知名品牌!
【影響立 Facebook 粉絲專頁 行銷電商教學】
【Instagram 行銷電商懶人包】
【影響立 Medium 部落格】
【合作可洽 [email protected]】
文章引用請來信索取授權,否則將保留法律追訴權。