Astra Pro 主題教學:輕量快速主題,配合多功能Spectra頁面編輯器

Astra 主題是什麼?

Astra 是一款非常受歡迎的 WordPress網站主題,由 Brainstorm Force 開發。Astra 主題以其輕量、快速和豐富的功能而聞名,適用於製作各種 WordPress網站,包括部落格、網上商店、企業網站等。自發佈以來,Astra 深受廣大用戶的好評。在推出後的短短的幾年內,Astra 主題的啟用網站和使用人數已經超過 230 萬個,並獲得了將近全五星的好評。是 WordPress 官方佈景主題目錄最受歡迎和推薦的佈景主題之一。

Astra Pro 主題教學:輕量快速主題,配合多功能Spectra頁面編輯器 | WordPress網頁設計

Astra 主題特色

  • 多種預建網站:Astra Pro 提供 250+ 預建網站以及一鍵安裝程序,免費版也有 30 多種可使用。Astra 的版面樣式都屬於簡約、質感風格,直接選擇自己喜歡的樣式模板,就可以快速做出一個好看的網站囉!
  • 無需程式碼:Astra 提供相當直觀且簡單的操作介面,透過 WordPress 自訂器中的一系列選項變更設計。無需編碼知識!只要點擊或拖曳頁面元素,就能輕鬆變動及更改網站的樣式模板,快速打造出專屬於你個人風格的網站哦!
  • 強大的設計選項:使用版面配置來管理網站容器的佈局,例如標題、部落格、單頁、貼文等。Astra 附帶了幾個內建的頁首和頁尾選項,可透過 Astra Pro 外掛程式進一步擴充。使用 Astra,您可以建立頁面特定的側邊欄,這些側邊欄可以覆蓋網站上預設側邊欄的設定和自訂。
  • 網站佈局:Astra 為您提供了一個預設容器,稱為主容器,在定制器本身內具有自己的特定佈局和設定。Astra 隨附預設的全寬佈局,可讓您使用網站上主要內容的整個寬度。
  • 超快的性能:Astra 專為速度而打造,並針對性能進行了全面優化。作為最輕量級的主題,它的載入時間不到 0.5 秒!Astra 需要不到 50KB 的資源,而其他 WordPress 主題則需要 100KB 的資源。Astra 使用預設的 WordPress 資料並遵循最佳編碼標準,以確保每一段程式碼都得到最佳化。

Astra Pro 主題教學:輕量快速主題,配合多功能Spectra頁面編輯器 | WordPress網頁設計

Astra 主題的優缺點

優點

  • 有免費體驗版可以嘗試,不用花錢
  • 與 WooCommerce 相容很好
  • 超過 240 個現成的入門模板
  • 可客製化版面設計,更突顯個人風格
  • 與 Elementor、Beaver Builder 和 WordPress 有高度相容性
  • 主題樣式輕量、高效,載入網站速度相當快
  • 廣泛的頁面建立和自訂功能

缺點

  • 免費版的主題樣式、功能設計選擇有限
  • 主題和頁面編輯器的升級費用都不便宜
  • 客製化設計功能較複雜,需要一些時間熟悉
  • 對 WordPress 架構有基礎了解,使用起來會更上手

Astra 主題方案

Astra 免費版

Astra 廣受好評的原因之一就是「免費」,Astra免費版已經包含了許多實用功能,適合大部分用戶使用。以下是免費版的一些主要功能:

  1. 輕量和快速: Astra 免費版以其輕量和快速加載著稱。預設安裝的Astra主題僅佔用約50KB,並且只需7個 HTTP 請求,確保網站的載入速度。
  2. 廣泛的自訂選項: 免費版提供了豐富的自訂選項,包括自訂佈局、顏色、字體和背景。使用者可以透過主題自訂器輕鬆更改網站的外觀,無需編寫程式碼。
  3. 響應式設計: Astra 免費版支援響應式設計,確保網站在各種裝置上都能有良好的顯示效果,提升使用者體驗。
  4. 基礎整合: 免費版與多種流行的 WordPress 外掛程式無縫集成,如 WooCommerce、Elementor和Beaver Builder 等,滿足基本的網站建立需求。
  5. 預設模板庫: Astra 免費版提供了一些基礎的預設模板,幫助使用者快速建立網站。

Astra Pro 主題教學:輕量快速主題,配合多功能Spectra頁面編輯器 | WordPress網頁設計

Astra Pro 付費版

Astra Pro 付費版是在免費版基礎上增加了更多高級功能,適合需要更多自訂選項和高級功能的用戶。以下是Pro付費版的一些主要功能:

  1. 色彩及背景設定:使用 Astra Pro,您可以管理網站上任何區域的顏色和背景。該主題使您可以完全控制並仔細管理每個部分。
  2. 更多自訂選項:使用 Astra,您可以建立用戶友好且有吸引力的互動式大型選單。管理佈局和模組內的間距,以建立美觀且可讀的網站。包括自訂頁首和頁尾、黏性標題、Mega Menu 等高級排版設定和更多的版面選項。
  3. 博客佈局:創建一個具有無數種佈局變化的漂亮博客。將內容與時尚設計結合,對受眾產生更好的影響。
  4. 高級集成:Astra Pro 與更多的WordPress外掛程式無縫集成,如 LifterLMS和LearnDash LMS,支援更複雜的功能需求。
  5. 高級模板庫:Astra Pro 提供了更豐富的預設模板,涵蓋了更多類型的網站,如高級企業站、電子商務站點和高端博客等。
  6. WooCommerce:Astra Pro 提供了更多的WooCommerce客製化選項,如快速查看、產品輪播和銷售標記等,幫助用戶創建更專業的線上商店。
  7. 自訂品牌: 透過 Astra Pro,您可以完全放心地建立和設計網站。借助白色標籤功能,您可以炫耀 Astra 是您自己的!

Astra Pro 主題教學:輕量快速主題,配合多功能Spectra頁面編輯器 | WordPress網頁設計

Astra 主題價錢

年費方案:

  • Astra Pro:$49美元
  • Essential Toolkit:$79美元(推薦)
  • Business Toolkit:$149美元

終身方案:

  • Astra Pro:$199美元
  • Essential Toolkit:$399美元(推薦)
  • Business Toolkit:$599美元

Astra Pro 主題教學:輕量快速主題,配合多功能Spectra頁面編輯器 | WordPress網頁設計

Astra 主題安裝

安裝 Astra 免費版

安裝 Astra 免費佈景主題十分簡單,只需按照以下幾個步驟即可完成安裝,預計安裝過程只需2分鐘。

Astra Pro 主題教學:輕量快速主題,配合多功能Spectra頁面編輯器 | WordPress網頁設計

  1. 登入網站後台,請選擇 [外觀] → [佈景主題]
  2. 選擇[安裝佈景主題]
  3. 在搜尋欄位中輸入 Astra,點擊[安裝],然後[啟用]
  4. 完成後,代表你已經成功安裝了Astra佈景主題(免費版)

安裝 Astra Pro 付費版

如果你覺得 Astra 免費版的功能還不夠用,就可以考慮付費升級成 Astra Pro 方案!

Astra Pro 主題教學:輕量快速主題,配合多功能Spectra頁面編輯器 | WordPress網頁設計

  1. 進入 Astra 官網 購買付費方案,選擇上方「Login to Account」
  2. 登入帳戶後,點選上方工具列「Account > Downloads」
  3. 點擊下載「Astra Pro Addon Plugin」安裝檔,檔案為 .zip 檔
  4. 回到 WordPress 後台,點選左側工具列「外掛 > 安裝外掛」
  5. 上傳剛剛下載的 Astra Addon Plugin.zip 檔案後,點選「立即安裝」
  6. 安裝完成後,回到外掛頁面,找到 Astra Pro 並點選「啟用」
  7. 回到 Astra 帳戶頁面,點選上方工具列「Account > License」
  8. 找到 Astra Pro 的金鑰密碼後,複製到剪貼簿中
  9. 回到 WordPress 後台外掛頁面,點選 Astra Pro 的「設定」
  10. 在「Your License」貼上金鑰密碼,點選「Active」
  11. 頁面右上方顯示「Lisense activated」就代表 Astra Pro 安裝且啟用完成囉!

Starter Templates 網站模板

Astra Pro 提供 Starter Templates 插件,Premium有 250+ 預建網站模板可以一鍵安裝,免費版也有 30 多種模板可使用,非常的方便。包括一些專用的電子商務設計,每個模板都包含所有圖像和圖形,並且可以隨時使用。

點選左側 Astra > 最右側 實用外掛 > Starter Templates,點 Install,就會自動安裝。

Astra Pro 主題教學:輕量快速主題,配合多功能Spectra頁面編輯器 | WordPress網頁設計

安裝完成後,進入初始設定頁面,右上角選擇頁面編輯器,像是 WordPress Block Editor, Elementor、Beaver Builder,可用這些頁面編輯器來製作網頁。而這邊我會選擇Block Editor,方便配合它的Spectra Pro編輯器。

Astra Pro 主題教學:輕量快速主題,配合多功能Spectra頁面編輯器 | WordPress網頁設計

以上是使用 Astra 的 Starter Templates外掛安裝預裝網站,善加使用就不用從零開始架站,網站建置流程會加快很多。

Astra 主題自訂樣式

Astra 自訂的樣式功能非常多樣,每一種功能點進去,都可以調整非常多的細節,以下簡單介紹各個樣式項目的功能:

Astra Pro 主題教學:輕量快速主題,配合多功能Spectra頁面編輯器 | WordPress網頁設計

全域

顧名思義就修改整個網站的設定,像是網站文字、風格顏色、佈局排版、內容容器版面配置、按鈕、返回頂端、區塊編輯器等:

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

頁首編輯器

有關網站 Logo、網站選單、佈局成列、顏色調整、是否為透明頁首等:

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

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

導覽標記

導覽(Breadcrumb )指的是用來標註網站頁面位置的文字列,決定導覽位置位於內部、下方或標題上方。通常只會在「文章頁面」顯示導覽標記。

網站文章

決定網站文章和資訊欄的容器版面配置、文章寬度、文章結構等:

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

頁面

可以選擇頁面的版面配置,像是區塊式版面、全幅寬度等多種設計。

資訊欄

就是以往的 Sidebar 側邊欄,可以調整網站各頁面的側邊欄佈局,設定資訊欄的寬度與版面位置。

頁尾編輯器

頁尾指的是頁面最下方的區塊,可自由設定頁尾工具、頁尾佈局、頁尾等,可以根據個人喜好,自由拖曳調整頁首的排版,點擊空白版位就可以增加其他可使用的功能。

WooCommerce

設定電商相關頁面,有開啟 WooCommerce 插件才有,像是產品目錄、單項商品頁面、購物車、結帳頁面、商品圖案等設定。

網站識別

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

選單

設定選單的位置和名稱、選單項目標籤、自訂選單連結等,也可自訂多個不同的選單。

小工具

可以進行區塊設定,像是編輯頁首、頁尾、側邊欄的內容、自訂 HTML 等功能

首頁設定

可以選取網站首頁要顯示的的內容,顯示「最新文章」還是「靜態頁面」,兩者只能選其一。

附加的CSS

加入網站專屬的 CSS 程式碼,可以自訂網站的外觀和版面配置,設定專屬的樣式風格。

Spectra 頁面編輯器

Spectra 是一款由 Brainstorm Force 所開發的 WordPress 外掛,提供許多獨特且功能豐富的區塊,可以加強 Block Editor 的不足。不需任何程式碼,就能設計 RWD 響應式網站。

Astra Pro 主題教學:輕量快速主題,配合多功能Spectra頁面編輯器 | WordPress網頁設計

Spectra Blocks 區塊

你可以停用不會使用到的區塊,這不僅對於效能有所幫助,也能夠提升使用者體驗。Spectra 將所有的區塊分門別類,包含內容、文章、社群等等,方便你進行管理。

Astra Pro 主題教學:輕量快速主題,配合多功能Spectra頁面編輯器 | WordPress網頁設計

Spectra 操作界面

打開頁面編輯時,在區塊中找尋Spectra區塊,只需點擊或拖放區塊即可使用。

Astra Pro 主題教學:輕量快速主題,配合多功能Spectra頁面編輯器 | WordPress網頁設計

Spectra 功能介紹

Astra Pro 主題教學:輕量快速主題,配合多功能Spectra頁面編輯器 | WordPress網頁設計

28 個創意獨特的區塊

Spectra 擁有一個獨特且富有創意的區塊庫,可以更快地建立任何類型的網站。

Flexbox Containers

使用 Flexbox 容器輕鬆設計響應式網站,無需接觸程式碼。

Dynamic Content

輕鬆建立內容驅動的網站。利用動態數據,例如特色圖像、文章作者等。

Loop Builder

Loop Builder 是 Spectra Pro 的另一個吸引力。它可以幫助您根據某些關鍵字、分類法和作者顯示貼文和頁面。有四種佈局可以以縱向、橫向和盒裝樣式顯示內容。循環有效顯示重複元素,節省時間並確保整個網站的一致性。

使用流行的動態內容工具(例如 ACF、工具集、自訂欄位或 Spectra 的動態內容功能)建立自適應內容循環。

Spectra Popup Builder

Spectra Popup Builder 可讓您建立網站範圍內的彈出窗口,這些彈出視窗將透過各種觸發器、顯示規則等顯示在您網站的任何頁面上!

SEO 工具

Spectra 有提供 How To、FAQ 以及 Review 三個你可以馬上使用在頁面上的 SEO 結構化資料工具,如果你會操作 Meta Title 以及 Meta Description 的話,你完全可以不用安裝 SEO 外掛就可以做好 SEO,並且是有結構化資料的!

動畫

使用 Spectra 的基於滾動的入口動畫以及為動畫添加延遲、持續時間和平滑度的選項,讓您的頁面栩栩如生。

使用者登入

自訂預設 WordPress 登入表單以符合您的網站設計,並使用 Spectra Pro 打造令人愉悅的使用者體驗。

Astra 官方影片介紹

常見問題

Astra 主題對WordPress SEO友好嗎?

是的,SEO友善也是Astra主題優秀特色之一。

Astra 主題是免費的嗎?

是的,Astra有免費和付費兩個版本

Astra 主題支援哪些 Page builder?

Astra支援 WordPress Gutenberg, Elementor, BeaverBuilder …

結論

以上就是 Astra主題的基本介紹。希望這篇文章對您有幫助!如果您有任何問題或需要 WordPress網頁設計 服務,請隨時聯繫我們。

我想要找..

文章目錄

推薦服務

最新文章

結合創意、策劃、設計與科技

一站式設計及網上推廣

搵我哋傾下