Astra Pro Theme 教學:WordPress 主題入門到專家(完整指南)

Astra Pro Theme 教學:WordPress 主題入門到專家(完整指南)

這是一篇 Astra Pro Theme 教學,帶你掌握 Astra 進階版主題。

Astra 是一款優質輕量級且多功能的 WordPress 主題,不論是新手或是有一定程度的 WordPress 玩家,使用它都是很棒的選擇。

如果對 Astra 還不熟悉的話,建議先閱讀 Astra 主題入門,再來看這篇文章,會學的更全面唷。

這篇文章主要會對 Astra 進階版,進行功能教學。從方案選擇 > 購買安裝 > 功能詳解,讓你全面掌握。章節如下:

準備好了嗎?我們開始吧:)


1. Astra 主題是什麼?

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

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

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

Astra Theme 內建多種主題樣板

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

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

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

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

Astra 主題速度評測

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

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

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

Astra 多種佈局調整功能

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

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

Astra Theme 輕量級 WordPress 主題

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

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

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


2. 進階方案如何選擇?

這章節是寫給有 Astra 進階版需求的讀者,我會幫助你選擇適合的方案,可在有限的預算內,最大化 Astra 主題價值。

首先,前往 Astra 的 方案頁面,往下滑會看到 Astra 進階方案。

如果不知道如何選擇最適合你,下面我會給你一些 Astra 的方案建議。

Astra Theme 進階版方案一覽

Astra 有提供哪幾種方案?

Astra 進階版 會依網站數量、年租或買斷,而影響方案費用。買斷只需付款一次,就能終身享有免費升級。

網站數量部分,若是新手架站,建議可先選擇一個網站數量即可,若未來有架設更多網站需求,可再考慮提高方案。

選擇完網站數量、年租或買斷後,就能看到下方提供 3 種選擇,分別是 Astra Pro 專業版、Essential Toolkit 必備套裝、Business Toolkit 商業套裝。

Astra 進階版方案的功能

不同的方案功能也有所不同,所有方案全都享有 Astra Pro 所有功能,像是頁面多種佈局、自訂頁首頁尾、WooCommerce 電商功能擴充等 .. 。(還有很多沒列出來)

Astra教學 :Astra Pro 多種網頁設計功能(僅部分功能截圖)
Astra Pro 多種網頁設計功能(僅部分功能截圖)

而 Essential Toolkit 方案,增加了 Ultimate Addons for Elementor 終極擴充功能、Premium Starter Templates 超過 140 種以上的高階入門模板、Spectra Pro 頁面編輯器&模板,這 3 種主要功能。

  • Ultimate Addons for Elementor:在 Elementor 上新增 40+ 個元素功能、100+ 網站模板、200+ 區塊模板,可參考 UAE 教學
  • Premium Starter Templates:有更多 Astra 進階模板可使用,可參考 Premium Starter Templates 教學
  • Spectra Pro:使用輕量且功能強大的頁面編輯器設計網站,還有包含 100 多個 Spectra 模板。

這些是 Astra Pro 方案和 Essential Toolkit 方案,之間最主要的差異。

要選擇哪種 Astra 方案?

Astra 進階版方案,有提供年費制和終身買斷(只需付款一次,終身享有免費升級),點擊按鈕就可切換。

Essential Toolkit 方案是優先選擇,除了有更多頁面編輯器元素可用,還多了更多專業優質模板、好用的頁面編輯器,功能會來的更全面。

如果是預算有限的人,可先從 Astra Pro 方案入手,因為費用最便宜,且能使用大部分的 Astra 進階功能。

選擇好心儀的 Astra 方案了嗎?

接下來我將示範如何購買+安裝 Astra 進階版,就能使用更多實用的主題功能囉:)


3. 進階方案購買+安裝

選擇好心目中的進階方案,就可以來購買+安裝 Astra 主題了。

下面會用年租制的 Essential Toolkit 方案當範例,因為會教學的比較全面,分成 3 步驟完成(選擇適合自己的就好)。

Step1:前往 Astra 購買主題

首先,前往 Astra 的 方案頁面,往下滑會看到 Astra 進階版方案。

下圖按鈕可切換年租制 or 終身買斷(只需付款一次,終身享有免費升級)。

Astra Theme 進階版方案一覽
Astra Theme 進階版方案一覽

然後輸入購買資訊,這裡的 Email 是之後的登入帳號,Password 是登入密碼,請妥善保存。

確認金額後送出。

Astra 結帳資訊
Astra 結帳資訊

這樣就購買完成囉,Astra 也會寄封 Email 通知購買完成。

Step2:Astra 主題安裝+啟用

點選 Astra 官網 上方選單的 Login to Account,會前往到 Brainstorm Force(頭腦風暴部隊)網站的登入頁面。或是在 Astra 官網滑到網站頁尾(最底端)也會看到 Downloads 連結。

前往並輸入剛購買註冊的帳號&密碼,然後登入。

前往 Astra 官網,找到 Login to Account

備註:Brainstorm Force(頭腦風暴部隊)是 Astra 主題的開發商,公司旗下還有其他 WordPress 相關軟體。

用購買 Essential Toolkit 方案來說,會看到幾種可下載產品(如果是購買 Astra Pro 方案,僅會看到 Astra Pro 產品)。

  • Premium Starter Templates:Astra 進階模板外掛。
  • Astra Pro:Astra 專業版功能。
  • Ultimate Addons for Elementor:Elementor 功能擴充外掛。
  • Spectra Pro:Spectra 專業功能。

這裡僅示範安裝 Astra Pro 功能,其他產品功能,可參考對應章節,進行安裝&學習。

Astra Pro 的 Astra Theme、Astra Child Theme、Astra Pro Addon Plugin,是等下會用到的資源,可以先下載下來,下面有安裝教學。

Astra Pro 購買後,可下載項目

Astra Theme 主題安裝

先下載 Astra Theme 主題。然後前往「 WordPress 後台 > 外觀 > 佈景主題 」,點選「 安裝佈景主題 」。

前往 WordPress 安裝佈景主題
前往 WordPress 安裝佈景主題

上傳 Astra Theme 主題,安裝後先不要啟用,留著就好。

上傳 WordPress 第三方主題
上傳 WordPress 第三方主題

Astra Child Theme 子主題安裝

再來,下載 Astra Child Theme 子主題,可任意命名子主題名稱,也可參考我的命名。

點擊 Generate 按鈕下載。

下載&命名 Astra 子主題
下載&命名 Astra 子主題

使用子主題好處:

因為主題都會進行升級&維護,如果有些程式碼改在原主題上,就可能會被還原掉。

所以有些人會使用子主題方式,保持住自己設定的程式碼(或功能設定),而不用再重新做一次。

跟上面安裝主題流程一樣,前往 WordPress 後台,把子主題上傳安裝,只是這次需點 啟用

啟用 Astra 子主題
啟用 Astra 子主題

到此步驟,應該會看到有兩個 Astra 主題,分別是 Astra 主題& Astra 子主題,而 Astra 子主題也有正常啟用,這是完成圖。

Astra 子主題順利啟用
Astra 子主題順利啟用

備註:原主題&子主題只能擇一啟用,上面示範的是啟用子主題。

Astra Pro Addon Plugin 擴充外掛安裝

再來安裝 Astra Pro 擴充外掛的部分。

首先,下載 Astra Pro Addon Plugin 外掛,需注意此套件是 WordPress 外掛,而不是佈景主題,所以安裝地方會不一樣。

然後,前往「 WordPress 後台 > 外掛 > 安裝外掛 」,點「 上傳外掛 」進行安裝,安裝後就直接「 啟用 」。

安裝 Astra Pro 擴充外掛
安裝 Astra Pro 擴充外掛

這樣 Astra Pro 外掛就安裝+啟用成功囉。

Astra Pro 外掛啟用
Astra Pro 外掛啟用

Step3:輸入 Astra Pro 憑證+啟用功能

這步驟,需輸入 Astra 啟用憑證,確保是有真實購買 Astra 這款主題。

前往「 Brainstorm Force 的 Account > Licenses 」(可從 Astra 官網 前往&登入會員,跟剛剛 Downloads 產品是同個網站)。

前往 brainstormforce 的憑證專區
前往 brainstormforce 的憑證專區

會看到剛購買的 Astra Pro 憑證(需是登入狀態),把它複製下來。

Astra 複製使用憑證
Astra 複製使用憑證

前往後台點選 Astra,滑到最底部頁面就會看到 Your License,輸入 Astra 憑證& Activate 啟用憑證。

Astra 憑證啟用成功!
Astra 憑證啟用成功!

憑證輸入完成後,再點選 Activate All,就可以使用所有的 Astra Pro 功能囉!恭喜大家!

Astra 啟用憑證&啟用進階功能

以上就是 Astra 進階版主題,從「 購買 > 安裝 > 啟用憑證 」的完整流程。

有關於 Essential Bundle 方案的下載安裝、憑證啟用、功能使用,可參考 Astra Pro Theme 教學文章,找到對應章節學習:)


4. 啟用 Astra Pro Theme 功能

啟用 Astra Pro 功能前,請確保有購買 Astra 進階版方案,下面的功能才能正常啟用唷(免費版是不能啟用的)。

還有,需完成相關安裝&憑證激活,上面都有提到,照著流程走應該都沒問題。

前置作業搞定後,前往後台直接點選 Astra,就會看到 Astra Pro 版 Modules,點 Activate All 啟用全部模組,才能使用接下來的教學功能(再提醒一次XD)。

啟用所有的 Astra Pro 功能
啟用所有的 Astra Pro 功能

接下來,我會對 Astra Pro 進階版,進行相關的功能教學,不會百分百都介紹(怕篇幅太長),但大致上的功能都會進來。

然後後面章節,會特別介紹 Mini Agency Bundle 方案才有的功能,如果是購買此方案的,也可以學習的到。

那我們開始吧:)


排版樣式 Typography

Astra 免費版就有許多文字樣式可調整,前往「 全域 > 排版樣式 」,即可做設定。相關教學可看 Astra 主題入門

全域(Global)是指全站通用的文字設定,至於下面的文字設定教學,如果有設定就會覆蓋上去,沒有的話就會維持預設。

Astra Pro 進階版的排版樣式,則是對不同項目做了更多的文字樣式的設定擴充,可以管理整個網站的字型,提供設定網站排版的完全控制權。

Astra Pro 教學:更多文字樣式的設定擴充
更多文字樣式的設定擴充

按鈕文字設定

前往「 全域 > 按鈕 」,這裡可細調按鈕文字的相關設定,更能設計出良好的行動呼籲按鈕(CTA)。

按鈕文字設定
按鈕文字設定

內文字型&標題字型設定

前往「 全域 > 排版樣式 」,可以針對 H1 ~H6 字型進行詳細調整。

如果想要針對單一文章的字型設定,直接點選該篇文章的「 編輯文章 」就能設定單一文章的標題文字樣式。

Astra 進階字型調整
Astra 進階字型調整

資訊欄的字型排版

前往「 資訊欄 > DESIGN 」,即可設定資訊欄的標題字型、內容字形,還能細調尺寸大小。

進階還提供外側與內側的間距調整,可以針對頂端、右側、底端、左側進行微調。

Astra Pro 教學:資訊欄的字型排版設定
資訊欄的字型排版設定

網站文章的字型排版

前往「 網站文章 > 網站文章/彙整 > DESIGN 」,即可修改網站文章標題、中繼資料、頁數的字型。

進階版還能排版設定文章的外側、內部、頁數的間距。

Astra Pro 教學:網站文章的字型排版設定
網站文章的字型排版設定

單篇文章的字型排版

前往「 網站文章 > 單篇文章 」。單篇文章最具特色的功能是「 相關文章 」,也就是閱讀完整文章後出現的延伸閱讀,在 DESIGN 區域可以設定色彩、字型、文章間距。

Astra Pro 教學:單篇文章的字型排版
單篇文章的字型排版

網站說明的字型設定

直接點選 網站 Logo 的筆,就會跳出相關設定,可以調整上方的標題字型,以及下方的網站說明字型。

網站說明的字型設定
網站說明的字型設定

以上,就是大致 Astra Pro 進階版的排版樣式功能。


色彩及背景 Color & Background

前往「 後台 > Astra > 色彩及背景 > 自訂 」,即可快速前往設定區域。

快速前往色彩及背景的設定
快速前往色彩及背景的設定

Astra 免費版主題,原來就可以設定文字&背景顏色,而 Astra Pro 進階版的 Color & Background 模組,則是開啟了更多文字、背景可設置選項。

全域性顏色選項

點選「 全域 > 色彩 」,即可來到全域調色盤。

Astra 主題本身就提供了基本的全域性顏色選項,進階則是可以針對個別標題調色,表層色彩也提供 Color 單色、Gradient 漸層、Image 圖檔,這 3 種背景選擇。

Astra Pro 有更完整的全域調色盤
Astra Pro 有更完整的全域調色盤

導覽標記的色彩設定

點選「 導覽標記 > DESIGN 」,即可設定導覽標記的更多色彩細節。

導覽標記的色彩設定
導覽標記的色彩設定

資訊欄的色彩設定

前往「 資訊欄 > DESIGN 」,即可設定資訊欄的標題、內文、連結、背景的色彩。

資訊欄的色彩設定
資訊欄的色彩設定

網站文章的色彩設定

前往「 網站文章 > 網站文章/彙整 > DESIGN > 內容色彩 」,即可設定文章標題、中繼資料的顏色。

有地球符號代表這是系統提供的色號,如果是自選色號就會消失這個符號。

網站文章的色彩設定
網站文章的色彩設定

間距 Spacing

Spacing 模組是一個 Astra Pro 進階版功能,可以對指定區塊調整距離,達到網站美化效果。

前往「 後台 > Astra > 間距 > 自訂 」。可設定間距的地方有很多,下面我會挑幾個範例,跟大家做分享。

前往間距的快速途徑
前往間距的快速途徑

網站 Logo 間距調整

前往「 頁首編輯器 > 網站標題及標誌 」,也可以直接點選 Logo 的筆,即可快速前往設定。

標誌寬度可設定 Logo 圖片大小、間距則是設定 Logo 與上下左右的邊界距離。

網站 Logo 間距調整
網站 Logo 間距調整

文章間距設定

前往「 網站文章 > 網站文章/彙整 > DESIGN 」,即可設定文章間距。

文章間距設定
文章間距設定

網站頁尾內距設定

直接點選「 網站頁尾的筆 > DESIGN 」,即可設定網站頁尾小工具的內距。

在設定間距的數據時,只要輸入其中 1 個欄位,系統就會統一 4 個欄位的數據,如果只想要設定上方和下方的間距,將右手邊的連結取消,就能個別設定囉!

頁尾小工具的內距設定
頁尾小工具的內距設定

以上,就是間距的相關設定,其實各處的 DESIGN 區域,都有類似的間距設定,因為功能差不多就不多介紹。


網站文章擴充功能 Blog Pro

Blog Pro 模組,是 Astra Pro 用來強化部落格頁面(網路文章&單篇文章),可設定的項目。

網站文章 / 彙整的擴充功能

  • 部落格版面配置:提供 3 種版面配置,像是置中對齊、靠右、靠左。
  • 格狀版面配置:如果你的文章數量很多,可以增加列數,如圖下示範的 3 列文章。
  • 在兩篇文章中間加入間距:啟用這項功能,可以讓每篇文章的間距,看起來更加寬敞。
  • 瀑布流版面配置:無需按下一頁,頁面便會不斷的加載,讓使用者瀏覽更輕鬆,但這項配置比較適合圖片居多的網站,大多應用在瀑布流相簿。
  • 強調第一篇文章:這項功能跟瀑布流只能 2 選 1,可突出最新發表的新文章,加寬設計更為顯眼。
  • 啟用日期框:顯示這篇文章的發佈日期,可以選擇方形或圓形的樣式。
  • 除精選圖片的內距:請注意此選項,將不會動作於全幅寬版面配置。
網站文章的擴充功能
網站文章的擴充功能

小補充:如果你的格狀版面配置設定為 4 列,畫面中卻只有出現 3 列文章,代表需要至後台調整閱讀設定。可以依照自己的需求,設定網站文章的每頁顯示數量。

設定網站文章的每頁顯示數量
設定網站文章的每頁顯示數量

網站文章的進階功能,還有提供內容寬度、文章結構、中繼資料 … 等設定,我們挑幾項重點介紹:

  • 文章內容顯示方式:建議選擇內容摘要,網站的視覺畫面會更精簡,除非本身內文不多,則可選完整內容。
  • 閱讀全文文字:可以先搭配啟動按鈕,再更改按鈕內的文字。
  • 文章頁數&樣式:可以選擇數字、無限捲動的模式,以及 3 種外觀樣式。
網站文章的進階功能
網站文章的進階功能

單篇文章的擴充功能

針對單篇文章可以啟用作者資訊、相關文章,Astra 基礎版就有提供「 相關文章 」的查詢條件、數量上限、格狀排列欄位版面配置 … 等設定。

Astra 進階版則是多了啟用文章內容摘要,還能針對相關文章的標題與內容調整色彩、字型、間距排版。

單篇文章的擴充功能
單篇文章的擴充功能

以上,就是網站文章擴充功能的詳細介紹。


手機頁首 Mobile Header

Mobile Header 模組,是 Astra Pro 用來強化手機頁首的可設定項目,這邊舉一些例子做分享。

手機版切換不同 Logo

前往「 頁首編輯器 > 網站標題及標誌 」,或是直接點選 Logo 附近的筆,即可設定對手機版標誌。

因為手機版的寬度較窄,或是手機頁首的背景顏色不同,可能需切換不同 Logo 應對。

手機版切換不同 Logo
手機版切換不同 Logo

手機版主選單調整

先在左下切換手機裝置,直接點選單附近的筆,左側就會自動跳出相關設定,可以調整選單的圖示與按鈕樣式。

如果想要調整手機裝置的選單項目,可在下方的 OFF CANVAS 直接新增和拖曳項目,這是 Astra 的基礎功能。更多 Astra 基礎教學

手機版主選單調整
手機版主選單調整

Nav Menu 模組,是 Astra Pro Theme 用來強化選單功能。

最特別的就是可製作 Mega Menu 超級選單,新版 Astra 稱為巨型選單,這功能對有規模的網站,是很實用的功能!

除了簡單版的 Mega Menu,Astra 還可以套用 Elementor 模板,完成客製化選單設計(因為步驟比較多一點,我會額外寫一篇文章教學)。

這章節,我會分 3 個步驟,教大家製作簡單版 Mega Menu,可先看一下完成圖。

Astra Pro Theme 主題 :製作 Mega Menu 的完成圖
製作巨型選單的完成圖

Step1:設定選單層級

前往 WordPress 外觀 > 選單,先設定一個三階層的選單,相關教學可參考 WordPress 選單

設定 WordPress 選單層級
設定 WordPress 選單層級

Step2:設定最上層選單

找到最上層的選單,點擊 Astra 選單設定,英文介面則是 Astra Menu Settings。

備註:這裡是選最上層的選單唷,這樣子選單們才會套用巨型選單的功能。

設定最上層選單的 Astra Menu Settings
設定最上層選單的 Astra 選單設定

當你點選 Astra 選單設定時,右側就會自動跳出 Astra Menu Options 的設定選項,開啟巨型選單後,可以選擇選單的寬度,完成後記得儲存變更。

開啟 Astra Mega Menu 功能
開啟 Astra Mega Menu 功能

如果想要針對個別選單進行外觀設定,點選 DESIGN 則設定背景類型、色彩、分隔線、強調標籤色彩、欄位寬度、內距與外距的排版設定。

特別的是背景類型提供 2 種模式可以切換,左邊主要設定圖片背景,右邊則是設定漸層背景。

Astra Pro 巨型選單的外觀設計
Astra Pro 巨型選單的外觀設計

Step3:設定第二層選單&Mega Menu 完成

點選第二層選單的 Astra 選單設定。

設定第二層選單的 Astra 選單設定
設定第二層選單的 Astra 選單設定

子項目的 Astra 選單設定的功能會有些不同,可以設為 As Heading 作為標題、隱藏選單標籤、停用連結,其中最強的功能是設定圖示,可以直接選用系統提供的 Icon 範本,高達 74 頁可以隨意挑選。

當然你也可以選擇中間的上傳選項,自己製圖專屬的子項目 Icon,進階版還能設定圖示間距、位置、大小 … 等細部調整,最後記得儲存設定喔!

子項目的 Icon 圖示設定

依照此流程,完成其他第二層選單的標籤設定。如果不設定標籤也可以,依照自己需求調整即可。

最後來看一下成果,就會跟上面提供的巨型選單成品圖一樣囉:)


Sticky Header 模組,是 Astra Pro Theme 提供的頁首置頂功能,在頁面滾動時,選單會持續在頂端功能,可達到美觀的效果。

前往 Astra > 固定式頁首 > 自訂,也可以點選 頁首編輯器 > 頁首類型的固定式頁首。

Astra Pro 教學:前往固定式頁首的途徑
前往固定式頁首的途徑

新版的 Astra Pro 可以調整固定式頁首的呈現效果,功能說明如下:

  • 固定頁首上方:將選單固定在頁首的上方。
  • 固定主頁首:啟用固定式頁首的重要開關。
  • 固定頁首下方:將選單固定在頁首的下方。
  • 啟用收縮效果:將縮小固定頁首高度、標誌和選單大小,以緊湊的尺寸顯示,適合行動裝置的功能。
  • 向下捲動時隱藏:網頁往下滑動時,會隱藏固定頁首;網頁往上滑動時,固定頁首會自動出現。
  • 固定式頁首使用不同標誌:可針對固定式頁首使用特定的標誌,並不影響原有的標誌。
  • 選擇動畫:當網頁往下滑動的時候,固定式頁首跳出來的動畫效果。
  • 啟用於:可以針對個別裝置啟動這項功能。
固定式頁首的功能
固定式頁首的功能

如果想要調整固定式頁首的外觀,直接點選筆,就會自動跳到 DESIGN,可調整固定定頁首的背景色彩、邊框間距和邊界。

固定式頁首的外觀設計
固定式頁首的外觀設計

以上,就是固定式頁首的詳細說明,不僅可以美觀網站,還能讓用戶在任一頁面時,都能隨時輕鬆找到選單。


Page Headers 模組,是 Astra Pro Theme 的頁面標題功能,可以更明確的表示當前頁面的目的,另一方面也有美觀效果。

前往「 Astra > 頁面頁首 > 設定 」,即可快速前往頁面頁首的設定。

Astra Pro 教學:前往頁面頁首的快速途徑
前往頁面頁首的快速途徑

這章節,我會分 3 個步驟,教大家製作頁面標題,可先看一下完成圖。

Page Headers 網站頁面標題
Page Headers 網站頁面標題

Step1:設定頁面頁首

當你前往頁面頁首時,點選最上方欄位的「 Add New 」。

新增 Page Headers 區塊

可以設定 3 種版面配置、標題色彩、背景大小,記得勾選顯示導覽標記,才能設定相關的色彩調整。

Astra Pro 教學:頁面頁首的相關設定
頁面頁首的相關設定

設定覆蓋的背景顏色(調偏黑色),點選「 選擇圖片 」即可上傳背景圖片,並打勾「 覆蓋背景色彩 」。

視差 是設定不同裝置是否要顯示頁面頁首,如果想統一出現,就選擇「 桌上型裝置+行動裝置 」。

上傳頁面頁首的背景圖片
上傳頁面頁首的背景圖片

Step2:設定網站首頁

如果你想要將頁面頁首與網站首頁合併,前往中間欄位的「 網站頁首 」將其功能打勾。

Astra Pro:勾選頁首的合併功能
勾選頁首的合併功能

Step3:設定顯示規則

可以根據自己的需求設定顯示條件,簡單介紹顯示規則的選項:

  • 加入顯示規則:設定頁面頁首顯示的位置,可設定在基本的全網站、特殊頁面、Landing Pages、自訂版面配置 … 等超多選項。
  • 加入排除規則:排除規則與顯示規則的選項一樣,可選擇「 特定頁面 / 文章 / 自訂義分類 」針對特定的條件進行排除。
  • 添加使用者規則:針對使用者的身份進行顯示設定,可設定全部、登入、登出的用戶能否看到頁面頁首,進階的設定則可針對訂閱者、客戶、作者 … 等特殊身份才能看到頁面頁首。
設定顯示規則
設定顯示規則

最後記得點選 發佈&更新,到 WordPress 網站前台就會看到成果囉!

以上只是教學範例,你可參考流程並設計自己喜歡的樣子。


自訂版面配置 Custom Layouts

Custom Layouts 模組,是 Astra Pro Theme 的客製化佈局功能。

能自訂客製化的 Header 頁首、 Footer 頁尾、Hooks 鉤子,在指定頁面上出現,達到真正客製化網頁的目的。

備註:Hooks 鉤子的意思是,Astra 在網頁的不同位置有設定標註代碼,使用者可自行客製化區塊,並放入到指定的 Hook 位置上,就能達到多樣化的網站設計。

接下來,我會示範自訂版面配置的 Hooks 類型,並運用這個功能,在每一篇文章下方都加上聯絡表單,提升網站轉化率。

下面是完成圖。

Astra Pro Theme 主題 :使用 Hooks 鉤子,在每一篇文章下面加上聯絡表單
使用 Hooks 鉤子,在每一篇文章下面加上聯絡表單

Step1:前往 自訂版面配置&設計區塊

前往 WordPress 外觀 > Astra > 自訂版面配置,點 Add New。

前往 Astra 的自訂版面配置

根據自己的需求選擇版面,這邊示範 Hooks 勾點的設計。

選擇 Hooks 製作聯絡表單
選擇 Hooks 製作聯絡表單

設計 Custom Layouts 區塊內容,有 WordPress 預設編輯器、Elementor 頁面編輯器、Code Editor 幾種編輯可選。

這裡我示範新增一個 聯絡表單區塊

Astra Pro Theme 主題 :編輯 Custom Layouts 區塊
編輯自訂版面配置的區塊

Step2:自訂版面配置的設定

首先,點選右上角的符號,就會跳出自訂版面配置的更多設定。

Layout 選 Hooks 勾點類型,Action 置入位置選 entry_content_after,其餘設定依照個人需求調整。

Custom Layouts 相關設定
Custom Layouts 相關設定
  • Layout:提供 5 種選項,像是頁首、頁尾、404 頁面、勾點、內部文章/頁面內容。
  • Actions:客製化區塊置入位置,可參考 Astra 的 Hooks 位置,選擇對應的即可。
  • Priority:數字越小,優先級越高,系統預設 10,可自行調整數字。
  • Spacing:可設定上下間距。
  • Display and User Conditions:設定顯示版面的條件,如果沒有特別要限制的條件,建議選擇開放 All。
  • Device Visibility:可設定 Desktop 桌面、Tablet 平板、Mobile 行動裝置的可見性。
  • Date & Time Conditions:如果自訂版面為短期活動,可設定開放與結束的時段。

最後再進行發佈,前往網站前台,就會看到上面的成果圖囉:)

以上只是單一情況的示範,你也可新增電子報區塊、商品行銷區塊等 .. ,並讓它在指定頁面出現,就能達成 Custom Layouts 客製化佈局。

很強大的 Astra Pro 功能吧,發揮你的創意吧!


網站版面配置 Site Layouts

Site Layouts 模組,是 Astra Pro Theme 的全站佈局功能,提供 4 種版面可選擇:全幅寬度、最大寬度、邊框四邊留白、流體版面配置。

前往「 全域 > 內容容器 」,即可設定網站版面配置。GENRAL 可設定網站版面配置、DESIGN 則可設定更詳細的內外側間距。

設定 Site Layouts 全站佈局
設定 Site Layouts 全站佈局

因為這功能要實際操作,才能比較明確感受差異,這裡就大約說明在哪做更改。


Footer Widgets 模組,是 Astra Pro Theme 的頁尾小工具功能強化。

直接點選頁尾區域的筆,即可在 GENERAL 設定欄位數量、頁尾版面配置、內部元素版面配置 … 等設定。

DESIGN 則可以設定頁尾的內部欄位間距,以及邊框與邊界的間距,彈性調整頁尾的留白空間。

Astra Footer Widgets 設定
Astra Footer Widgets 設定

返回頂端 Scroll To Top

Scroll To Top 模組,是 Astra Pro Theme 的回到頂端按鈕,增加了可客製化設定。

前往「 全域 > 返回頂端 」,可設定 Display On 顯示裝置、顯示位置(按鈕在右側或左側)、圖示尺寸。

Scroll To Top 按鈕設定

DESIGN 區域則可以設計返回按鈕的外觀,像是調整顏色、框線圓角半徑。

Astra Pro 教學:返回按鈕的外觀設計
返回按鈕的外觀設計

WooCommerce 電商功能

WooCommerce 模組,是 Astra Pro Theme 的 WooCommerce 電商功能強化。

前往 WooCommerce,會看到有不同項目可調整,像是 General 一般設定、產品目錄、Single Product 單一商品等 .. 。

WooCommerce 商店功能設定
WooCommerce 商店功能設定

這邊用產品目錄當示範,因為這是 WooCommerce 的核心功能之一。

前往 WooCommerce > 產品目錄,可調整商品排序方式、畫面版型、商品欄位&出現數量、文字樣式 … 等完整的商品設定。

Astra Pro WooCommerce 的核心功能
Astra Pro WooCommerce 的核心功能

其他商品列表功能 & 更多 WooCommerce 頁面設定,可參考 Astra Pro Theme 的 WooCommerce 電商功能,內有完整教學。


Premium Starter Templates 進階模板

Astra 的 Premium Starter Templates 進階模板
Astra 的 Premium Starter Templates 進階模板

Premium Starter Templates 進階模板,是 Astra 的 Mini Agency Bundle 迷你代理商方案,才能使用的功能。請參考 Premium Starter Templates 教學,有完整流程。

Premium Starter Templates 是 Astra 在免費基礎模板上,新增多達 50+ 個多類型的進階模板,適用於各種產業別,需用外掛的方式安裝。

可選擇全網站模板匯入,或是挑選喜歡的單一頁面,進行模板匯入。

除此之外,在 Elementor 編輯器中,也能匯入 Premium Starter Templates 多種進階模板&區塊,不但美觀也製作快速。

請參考 Premium Starter Templates 教學,內有完整安裝+使用流程唷:)


WP Portfolio Plugin 作品集功能

Astra Pro Theme 教學:WP Portfolio 作品集功能
Astra Pro Theme 教學:WP Portfolio 作品集功能

WP Portfolio 是 Astra 開發專門製作作品集、展示頁面、服務案例等 .. ,相關頁面內容的外掛。

它有多種作品型態可選擇,像是 Website 網站展示、Image 照片 / 圖片展示、Video 影片展示,或者是更萬能的 Single Page 客製化頁面形式。

Astra 的 WP Portfolio 作品集展示
Astra 的 WP Portfolio 作品集展示

WP Portfolio 本身極為輕量,完全不會影響到網站速度,這跟 Astra 本身輕量快速的優點一樣。

同時提供物品搜尋功能、雙層分類條件、滾動加載作品、Demo 演示作品匯入、瀑布流展示等 .. 多種特色。

當然,WP Portfolio 同樣支援主流的頁面編輯器,像是 Elementor、Beaver Builder、Visual Composer .. 。

WP Portfolio 支援多種主流頁面編輯器
WP Portfolio 支援多種主流頁面編輯器

這代表能自由客製化網站頁面,並當成展示頁面的一部分,達成你的真正需求:)

有關 WP Portfolio 的安裝啟用、憑證激活、各作品類型的製作方法,我在 WP Portfolio 作品集功能 有完整說明,是篇完整的手把手教學。


Ultimate Addons for Elementor 終極擴充功能

Astra 的 Ultimate Addons for Elementor 功能外掛
Astra 的 Ultimate Addons for Elementor 功能外掛

Ultimate Addons for Elementor 終極擴充功能,是 Astra 的 Mini Agency Bundle 迷你代理商方案,才能使用的功能。請參考 Ultimate Addons for Elementor 教學,有完整介紹。

除了 Elementor 編輯器,Astra 也有 Ultimate Addons for Beaver Builder 外掛,幫 Beaver Builder 做了功能擴充(這在購買 Astra 方案時,就需選擇)。

Ultimate Addons for Elementor 主要功能有,提供 49 種功能小套件、180+ 網站模板、多種區塊模板。

Ultimate Addons for Elementor 外掛特色
Ultimate Addons for Elementor 外掛特色

像是內容切換、圖片展示畫廊、多變訊息框、多類型廣告框(不同出現方法)、價目表功能、客製化文章佈局等 .. 。(下面僅列舉幾個)

  • Mega Menu Widget 超級選單

客製化的大型選單,如果你的網站是中大型網站,那會非常實用(也支援 WooCommerce 商品)。

多種交互式選單效果、強化選單&子選單可控制項、多種選單佈局方式。

Ultimate Addons for Elementor 的超級選單示範
  • Form Styler Widgets 表單設計

多種風格樣式表格,可自定義輸入字段、按鈕、顏色背景,配置成功和錯誤消息。

Ultimate Addons for Elementor :Form Styler Widgets 表單設計功能
Ultimate Addons for Elementor :Form Styler Widgets 表單設計功能
  • Hotspot Tour Widget 動態熱點互動

互動式網頁效果,增加與訪客接觸機會。

動態熱點互動功能

如果個人、公司或是相關的網頁製作者,需要多種 Elementor 元素&模板樣式,這絕對是非常足夠使用:)

Ultimate Addons for Elementor 的多種 Elementor 功能擴充(僅部分截圖)
Ultimate Addons for Elementor 的多種 Elementor 功能擴充(僅部分截圖)

以上就是 Astra 的 Ultimate Addons for Elementor 外掛簡單介紹。請參考 Ultimate Addons for Elementor 教學,有更多詳細功能。

如果有興趣使用,可參考前面的 Astra 進階主題購買教學:)


白色標籤 / 自訂品牌 White Label

White Label 翻譯為白色標籤,最強功能是可以將產品或外掛重新命名,並改為自己想要的名稱

這代表你可以隱藏所用主題和外掛的實際身份,自己定義品牌名稱,因此又稱為「 自訂品牌 」,但請注意 White Label 不能更改資料夾名稱。

Astra Pro 提供自訂品牌的選項,幾乎可以更改網站內每個領域,好證明所有的網站產品屬於自家品牌,這對於網站開發人員來說,是很重要的進階功能!

前往後台點選「 Astra > 自訂品牌 > 設定 」。

前往 White Label 的途徑
前往 White Label 的途徑

下圖列出 White Label 可以設定哪些細項,完成設定後,記得按 Save。

Astra Pro 教學:White Label 設定
Astra Pro 教學:White Label 設定
Astra Pro 教學:啟用 White Label
Astra Pro 教學:啟用 White Label

啟用 White Label 就會刪除 Astra 網站的任何連結,並在儀表板中更改身份,因此這個設定主要應用在 為客戶構建網站的企業機構和開發人員使用,像是網站架設公司、網頁設計師。


Spectra 頁面編輯器

Spectra 外掛

Spectra 是一款 WordPress 頁面編輯器外掛,不需任何程式碼,就能設計 RWD 響應式網站。更多 RWD 響應式網頁是什麼

Spectra 標榜使用最新、最乾淨簡單的程式碼,可以減少外掛檔案大小,並加速網站載入時間。

Spectra 提供多種類型的免費、付費模板,且每週推出新的模板樣式,不論是部落格、電商、形象網站,都能找到精美的模板,一鍵套用。

Spectra 提供多類型的免費模板,可直接套用

套用模板後,可以再依個人喜好調整樣式,Spectra 編輯器除了快速、易用外,還提供多種元件小工具。

Spectra 提供 20 多種元件小工具,像是商品輪播器、項目清單、網站表單、CTA 按鈕等..,任何常見的網站區塊功能都有,讓你享受方便快速的編輯體驗!

此外,Spectra 快速的載入速度以及內建的 SEO 優化功能,可以讓你的網站更有機會獲得較高的排名!

Spectra 建立 SEO 友善網站,提高 Google 搜尋引擎分數

Spectra 搭配 Astra Pro 更能製作出更進階的網站,這邊列出 Spectra 的 3 大特色:

  • 適用新手:Spectra 直接整合在 WordPress 編輯器中,即使不會寫程式,也能透過內部的視覺化功能、flexbox 容器輕鬆設計響應式網站,操作過程中無需觸碰程式,讓你直覺操作。
  • 多種功能元件:Spectra 提供多種適合設計頁面的元件,像是多了 Call To Action 行動呼籲按鈕、Post Timeline 時間表 … 等豐富多樣的專業功能,無需另外下載其他外掛,就能一次滿足。
  • 提高 SEO 排名:Spectra 在 CWV(使用者體驗核心指標)中得分 100% 的成績,閃電般的網站載入速度和程式輸入,有效提高搜尋引擎最佳化。

若你是不懂程式碼的架站新手,推薦你可以試試使用 Spectra 架設美觀與 SEO 兼具的網站唷!


Spectra 功能教學

稍微了解 Spectra 的優勢後,接下來我們來實際操作這款外掛!

稍後我會一步步地帶著各位安裝 Spectra 外掛、新增頁面,示範如何新增元件小工具。

Step1:安裝 Spectra 外掛

首先,前往 WordPress 後台的外掛 > 安裝外掛 > 關鍵字欄位輸入 Spectra > 立即安裝 Spectra。

安裝 Spectra 外掛
安裝 Spectra 外掛

安裝完成後,就可以馬上啟用 Spectra 並開始使用外掛功能囉!

Step2:新增 Spectra 頁面

啟用外掛後,就可以前往「 設定 > Spectra > Create New Page 」,來新增頁面。

新增 Spectra 頁面
新增 Spectra 頁面

新增頁面後,左方工具列就會先看到 Spectra 的各種功能項目,預設的 WordPress 頁面編輯器則排在後面,你可以一次擁有這 2 種頁面編輯器的功能。

Spectra 頁面編輯器的功能
Spectra 頁面編輯器的功能

Step3:新增元件,「 Content Timeline 內容時間表 」示範

Spectra 有許多進階的功能,我們示範其中一個功能 Content Timeline,適合製作企業的發展歷程,或是展現個人品牌特色的時間表。

操作過程中不需要接觸程式碼,直接輸入想要的內容,右手邊區塊工具也能針對時間軸進行調整。

Spectra 提供簡單且直覺的操作介面
Spectra 提供簡單且直覺的操作介面

根據自己的需求輸入內容與設定時間軸,點選「 發佈 」即可看到成果!

Spectra 還有很多部落格、電商常用的元件小工具,像是商品輪播、顧客評價、文章展示排版等..,大家可以使用看看唷:)


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 主題的整體掌握度,大概也就如魚得水了!


WordPress 學習資源

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

接下來,額外分享 3 項架站資源,可有效幫助大家處理網站問題。

資源一:WP 高手架站課(線上課程)

這門 WordPress 高手架站課 濃縮了犬哥多年在網頁設計的實戰經驗,從網頁設計觀念、WordPress / WooCommerce 後台操作、熱門主題.外掛教學、品牌網站 / 部落格 / 電商網站,3 大類型網站建置方法等 .. 豐富內容,一次教會你。

課程內容非常的紮實(長度超過 20 小時)。如果你剛學習自架網站,這門課程可以讓你用最快的速度,就學會這項技能!

幫你增加網路曝光,提高你的線上營收!

WordPress 高手架站課|一堂課讓你變架站高手!

資源二:犬哥數位(專業 WordPress 網頁設計公司)

如果你沒時間自己架站、或是遇到解決不了的網站問題。歡迎洽詢 犬哥數位(WordPress 網頁設計公司),請專家製作會更有效率!

WordPress 網頁設計公司|犬哥數位

資源三:更多犬哥教學資源

如果你在操作過程中遇到問題,可以加入 流量研究室 – 犬哥網站(目前有超過 9000+ 團員)。除了有網友一同幫你解惑外,犬哥團隊也會同步在社團幫助大家。

加入 FB 犬哥社團
加入 FB 犬哥社團(目前有超過 9000+ 團員)

另外這是送給剛起步經營自媒體的朋友們,不論是經營網站、各類社群等都適用,立即加入 Line 群 免費領取「 神級自媒體起號工具包 」。

如果你想學更多品牌設計、社群行銷知識,也歡迎追蹤 犬哥網站 IG。或是喜歡看影片學習,可關注 YouTube 頻道

關於作者

犬哥網站:網頁設計 x 網路行銷教學平台

犬哥網站

我們分享 WordPress 架站 x 網路行銷知識,不需會任何程式技術,就能自己建立各種網站。 搭配豐富的網路行銷教學,幫助你被更多人看到。 趕快跟著我們的腳步,開始學習吧:)

在〈Astra Pro Theme 教學:WordPress 主題入門到專家(完整指南)〉中有 38 則留言

  1. 您好!看完小犬對Astra 的介紹後,感到很興趣。
    想請問一下購買Astra Pro後能提供給第二個網站使用嗎?

  2. 站長小犬您好:想請問Astra的主題中,有辦法隱藏文章結尾的previous文章跟next文章的按鈕選項嗎,謝謝。

    1. 嗨~Vincent:

      可以到 Single Post > Disable Single Post Navigation,把這個選項打開,應該就可以禁止了。

      但不確定的這個是不是進階版的功能,可以試試看~

  3. 請問如何把文章分類的標題拿掉, 以你這個範例是”國外旅遊”, 如何把這個區塊拿掉呢? 謝謝!

  4. 緒方ㄧ神齋

    大大,page header的layout(布局設定),我選擇是置中,但跑出來的頁面標題卻是偏左的(麵包蟲和文字都在左邊),怎麼辦!!

    1. 嗨,在 Page Header 裡面的 Layout,有選擇 inline 模式了嗎(我自己測試是可以靠左)?

      也可以把瀏覽器快取清除一下,再重新刷新試看看~

      如果還是一樣的話,可能就要用 CSS 程式碼調整了

      1. 緒方ㄧ神齋

        試著自己解決,似乎是.ast-container這個東西在作亂
        稍微用CSS語法,就好了

  5. 想請問小犬,有看過您的Astra Theme 教學和Flatsome 主題影片的介紹,不知道要購買哪一款的主題,目前是在協助做腳架及周邊的電商平台,因為是要跟老闆申請經費有點怕買錯😂,因為腳架會連結到很多的子品牌,不知道哪個主題是適合的🙇🏻‍♀️想要問問小犬的意見

    1. 嗨,如果第一次入門架站,會建議用 Flatsome 主題,因為功能大多都集成好了,上手難度會比較低一點。

      但如果你的購物網站,是有很特規的或特製的購物功能,那就可能需用 Astra 架站了,至於要搭配哪些外掛完成,就需要做些功課了~

        1. 嗨,是的唷!如果是打算長期經營網站,Astra Pro 有更多主題樣式&週邊功能可以使用。

          至於是否付費升級,主要還是看你的需求有沒有到那邊~

  6. 站長你好,請教這個付費版如年付費,是在設計階段及網站可以使用這些功能,如果一年過後沒有續購,網站上的功能會不見嗎??

    1. 嗨,網站前台現有的版型&畫面不會不見唷,唯一差別就是沒續約後,後台將無法使用進階版功能而已。

  7. 不好意思!
    想請問一下 如果購買Astra pro 可以用其他的主題套上電商的購物車嗎?
    還是只能用本身的電商主題去做設計? 謝謝

    1. 嗨,抱歉不是聽的很懂,如果已經購買了 Astra Pro 當然可用它當主題製作網站。

      但如果用了之後不喜歡,就擺著然後換其他主題也是可以的~

  8. 你好,站长。
    應用在無限數量的網站,意思是购买一个代码可以架设多个网站吗?

    1. 嗨,huadi,

      是的唷,有標註無限數量,就可以應用在多個網站,

      近期有萬聖節特價活動,可以趁這段時間,用優惠價購入 Astra Pro 唷!

      1. 好的,谢谢站长的解答与推荐。
        已经购买了。
        看您的教学能学到很多,继续加油。

  9. 請教犬哥,Elementor Pro跟Astra Pro是一個東西嗎?另外你這個網站用的是什麼外觀?

    1. 犬哥網站

      嗨,Brian,

      Elementor 是頁面編輯器,可以針對單一頁面進行編輯 / 排版設計。

      Astra 是佈景主題,也就是決定前台網站的整體外觀,兩個是不一樣的唷。

      可以參考 WordPress 是什麼 進行學習,加快掌握 WordPress 進度~

      另外犬哥網站是使用 Astra+Elementor 進行設計的唷:)

    1. 犬哥網站

      嗨,Terrence,

      Astra Pro 方案,可以運用在無限多個網站,但可開放使用的功能都不太相同,

      可以觀看本文第二章節,若選擇上還有疑問,可以再繼續留言唷:)

  10. 如果我購買了一年的PRO方案,後面不續訂會有什麼影響呢?
    另外我目前用ASTRA PRO+ELEMENTOR(免費)
    有些ASTRA提供的模板用elementor編輯時,他所有東西都在內容編輯器裡面
    這是不是代表不讓我去改的意思

    1. 犬哥網站

      嗨,HUANG,

      不續訂進階版本,網站前台現有的版型&畫面會持續保留,但沒續約後,後台將無法使用進階版功能。

      第二個問題,可以點擊「 使用 Elementor 編輯 」看看,如果沒有順利出現編輯頁面,那就是無法使用唷!

  11. 谢谢小犬老师的分享!讲得真是太好了!既条理清晰又详细且实用!让我感受到了您的那份用心和专业的优秀!辛苦了!在这里有个问题还想请教您一下!astra pro 版的激活码是不是第一次激活得到后就固定不变了?以后再装另一个网站就永远用这个激活码呢?以前没装过现正准备想买,很困惑,不懂他的激活码验证不限主机的具体是什么逻辑?要是固定不变只有一个激活码,那我只要得到那个码不就可以给别人授权了吗?有的第三方说送激活码自己激活不限网站,那我得到那个码岂不是也可以卖给别人了吗?不是钱多少的问题,我就是想买之前弄清楚!希望能得到您的指导!再次感谢小犬老师。

    1. 犬哥網站

      嗨,stone,

      Astra Pro 的激活碼可以不限制使用網站,意思是如果你架設多個網站,都可以使用同一組激活碼啟用 Pro 版本,沒有限制數量,在 Astra 會有面板,可刪除或新增使用網站

      也有人購買後,在二次販售給他人使用,但通常建議站長自行向 Astra 購買,因為如果你向其他站長購買激活碼,其他站長是可以隨時刪除你的使用權限,這樣會較無保障

      希望有回答到你的疑問唷:)

發佈留言

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

返回頂端