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 網站製作,有免費版&進階版可使用。

它是多功能的 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 Theme 輕量級 WordPress 主題
Astra Theme 輕量級 WordPress 主題

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

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

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


2. 進階方案如何選擇?

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

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

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

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

Astra 有提供哪幾種方案?

Astra 進階版 提供 3 種選擇,分別是 Astra Pro 專業版、Mini Agency Bundle 迷你代理商、Agency Bundle 機構代理商。

依照不同的方案,全都享有 Astra Pro 所有功能,且能應用在無限數量的網站。

Astra Pro 功能,像是頁面多種佈局、顏色字體擴充、手機版功能擴充、頁面間距控制、WooCommerce 電商功能擴充等 .. 。(還有很多沒列出來)

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

而 Mini Agency Bundle 方案,增加了 WP Portfolio 作品集外掛、Ultimate Addons for Elementor 終極擴充功能、Premium Starter Templates 進階模板,這 3 種主要功能。

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

這些是 Astra Pro 方案和 Mini Agency Bundle 方案,之間最主要的差異。

要選擇哪種 Astra 方案?

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

Mini Agency Bundle 方案是優先選擇,除了有更多頁面編輯器元素可用,還多了作品集製作外掛、更多專業優質模板,功能會來的更全面。

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

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

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


3. 進階方案購買+安裝

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

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

Step1:前往 Astra 購買主題

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

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

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

選擇常使用的頁面編輯器,這邊我選 Elementor。

選擇 Mini Agency Bundle 的 Elementor 頁面編輯器
選擇 Mini Agency Bundle 的 Elementor 頁面編輯器

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

確認金額後送出。

Astra 結帳資訊
Astra 結帳資訊

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

Step2:Astra 主題安裝+啟用

點選 Astra 官網 上方選單的 My Account > Downloads,會前往到 Brainstorm Force(頭腦風暴部隊)網站的登入頁面。

如果找不到路徑,前往 Astra 官網滑到網站頁尾(最底端)也會看到 Downloads 按鈕。

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

前往 Astra 官網,找到 Download。
前往 Astra 官網,找到 Download。

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

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

  • Premium Starter Templates:Astra 進階模板外掛。
  • Astra Pro:Astra 專業版功能。
  • Ultimate Addons for Elementor:Elementor 功能擴充外掛。
  • WP Portfolio:Astra 作品集製作外掛。

這裡僅示範安裝 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 複製使用憑證

前往 WordPress 外觀 > Astra Options,輸入 Astra 憑證&啟用憑證。

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

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

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

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

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


4. 啟用 Astra Pro Theme 功能

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

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

前置作業搞定後,前往 WordPress 外觀 > Astra Options,點 Activate All 啟用全部模組,才能使用接下來的教學功能(再提醒一次XD)。

Astra Pro Theme 主題 :啟用所有的 Astra Pro 功能
啟用所有的 Astra Pro 功能

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

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

那我們開始吧:)


Typography 字體

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

Astra Pro 進階版的 Typography 模組,則是對不同項目做了更多的文字樣式的設定擴充。

Astra Pro Theme 主題 :網站文字,通用設定
網站文字,通用設定

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

網站選單文字設定

前往 Header > Primary Menu > Typography,可對選單做文字設定。

Astra Pro Theme 主題 :選單文字設定
選單文字設定

按鈕文字設定

前往 Global > Buttons,這裡可設定按鈕文字。

Astra Pro Theme 主題 :按鈕文字設定
按鈕文字設定

文章列表的文字設定

前往 Blog > Blog / Archive,可設定文章列表相關的文字。

Astra Pro Theme 主題 :部落格頁面,文字設定
部落格頁面,文字設定

單一文章的標題設定

前往 Blog > Single Post,可設定單一文章的標題文字樣式。

Astra Pro Theme 主題 :單一文章標題設定
單一文章標題設定

網站側邊欄的文字設定

前往 Sidebar。可設定網站側邊欄的標題&內容文字樣式。

Astra Pro Theme 主題 :側邊欄的文字設定
側邊欄的文字設定

頁尾小工具的文字設定

前往 Footer > Footer Widgets。可設定頁尾小工具的文字樣式。

Astra Pro Theme 主題 :頁尾工具的文字設定
頁尾工具的文字設定

以上,就是大致 Astra Pro 進階版的 Typography 字體功能。


Color & Background 顏色

Astra 免費版主題,原來就可以設定文字&背景顏色。

而 Astra Pro 進階版的 Color & Background 模組,則是開啟了更多文字、背景可設置選項。

全網站背景顏色 & 圖片設定

前往 Global > Colors >Base Colors,可做全站的背景顏色 or 背景圖片設定。

這邊示範使用背景圖片,也可針對不同裝置做背景設計,點選 More Settings 有更多的設定。

Astra Pro Theme 主題 :全網站背景圖片設定
全網站背景圖片設定

More Settings 更多設定,主要有幾種選項,跟大家介紹。

Astra Pro Theme 主題 :背景圖片,更多設定
背景圖片,更多設定
  • Image Position:可設定圖片位置靠左 / 右 / 中 ..。
  • Attachment:當網頁滾動時,圖片是 Scroll(跟著滾動) or Fixed(固定在原位)。
  • Repeat:圖片是否重複,No Repeat 是不重複。
  • Size:圖片尺寸,可設定 Auto(自動調整)、Contain(原尺寸)、Cover(覆蓋)。

網站背景圖,大多上傳暗色系的比較不會跟內容文字衝突,然後可搭配 Fixed 固定 & No Repeat 不重複 & Cover 覆蓋,通常會有不錯的效果。(依需求調整)

網站頁首、網站選單,顏色&背景設定

網站的各頁首、各選單,都可做顏色和背景調整。

這邊舉一個範例,前往 Header > Primary Header,可以設定頁首顏色 or 背景。

Astra Pro Theme 主題 :設定頁首背景(背景圖片示範)
設定頁首背景(背景圖片示範)

網站文章、頁面、側邊欄,顏色&背景設定

網站的文章列表、單一文章、網站頁面、側邊欄等 .. ,都能做顏色&背景設定。

這邊舉一個範例,前往 Blog > Blog / Archive,可做文章列表頁面的顏色、背景更換,可參考下圖數字對應。

Astra Pro Theme 主題 :文章列表,背景&文字顏色設定
文章列表,背景&文字顏色設定

Spacing 間距

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

可設定間距的地方有很多,下面我會挑幾個範例,跟大家做分享。

網站 Logo 間距調整

前往 Header > Site Identity,可設定 Logo 距離。

Astra Pro Theme 主題 :網站 Logo 間距設定
網站 Logo 間距設定

上圖的鏈子 Icon 可切換為單一設定間距 or 全部設定間距,電腦 Icon 可對不同裝置設定間距。

文章、頁面容器間距調整

前往 Global > Container,可設定文章 / 頁面的容器間距。

Astra Pro Theme 主題 :容器內外間距調整
容器內外間距調整

備註:Container 的 Layout 如果是設定 Full Width / Stretched,此功能不會有作用唷。

網站頁尾內距設定

前往 Footer > Footer Widgets,可設定網站頁尾小工具的內距。

Astra Pro Theme 主題 :頁尾小工具的內距設定
頁尾小工具的內距設定

還有 Footer > Footer Bar,也可以做相關設定,因為功能差不多就不多介紹。


Blog Pro 部落格進階

Blog Pro 模組,是 Astra Pro 用來強化部落格頁面(文章列表&單一文章),可設定的項目。這邊舉一些例子做分享。

文章列表頁,進階設定

前往 Blog > Blog / Archive,可更改佈局、欄位數量、加上文章間格、文章結構等 .. 。

Astra Pro Theme 主題 :文章列表頁,相關設定
文章列表頁,相關設定
  • Layout:有 3 種佈局可切換,可點擊玩玩看。
  • Add Space Between Posts :可在每篇文章之間,加入間格。
  • Hightlight First Post:特別標註第一篇文章。
  • Enable Date Box:開啟時間日期框。
  • Remove Featured Image Padding:移除封面圖片的內距。

這是另一種佈局的呈現方式,可選擇你喜歡的。

Astra Pro Theme 主題 :切換文章列表的佈局樣式
切換文章列表的佈局樣式
  • Content Width:設定內容寬度,有 Default 預設 & Custom 自訂兩種。
  • Post Structure:是否顯示 Featured Image 顯示封面圖片、Title & Blog Meta 網站標題(點眼睛 icon 可開啟或關閉,長按橫條 icon 可拖放排序)。

還可更改文章描述、內容顯示方式、摘要字數、閱讀按鈕等 .. 。

Astra Pro Theme 主題 :文章列表頁,相關設定
文章列表頁,相關設定
  • Post Content:內容顯示方式,有 Excerpt 摘要 & Full Content 全內容兩種。
  • Excerpt Count:摘要字數,如有選用 Excerpt 摘要,這裡可設定顯示字數。
  • Read More Text:按鈕文字。
  • Display Read More as Button:是否顯示閱讀更多按鈕。

還可設定特色圖片尺寸、分頁相關樣式等 .. 。

Astra Pro Theme 主題 :文章列表頁,相關設定
文章列表頁,相關設定

單一文章頁,相關設定

前往 Blog > Single Post,可設定單一文章相關設定。

像是 Meta 文章描述、Author info 是否顯示作者、移除封面內距等 .. ,可參考下圖(部分截圖)。

Astra Pro Theme 主題 :單一文章設定
單一文章設定

Mobile Header 手機頁首

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

手機版切換不同 Logo

前往 Header > Site Identity,可設定對手機版設定 Logo。

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

Astra Pro Theme 主題 :手機版切換不同 Logo
手機版切換不同 Logo

手機版主選單調整

前往 Header > Primary Menu,可對手機版主選單做相關調整。

Astra Pro Theme 主題 :手機版主選單調整
手機版主選單調整
  • Menu Breakpoint:設定多少螢幕寬度時,會切換成手機版選單。
  • Menu Label:設定按鈕文字。
  • Menu Style:選單出現樣式,有 Dropdown 下滑式、Flyout 飛越式、Full-Screen 滿版式。
  • Toggle Button Style:按鈕樣式。

Header Sections 頁首區塊

Header Sections 模組,是 Astra Pro 用來擴充網站選單,新增 Above Header 上層選單、Below Header 下層選單,我舉一些例子分享。

Above Header 上層選單

前往 Header > Above Header,可設定是否開啟上層選單。

Astra Pro Theme 主題 :上層選單設定
上層選單設定

Section 區塊有幾種類型可選,可自行設定。

  • None:不顯示。
  • Menu:顯示網站選單。
  • Search:顯示搜尋功能。
  • Text / Html:顯字自訂文字 or 程式碼效果。
  • Widget:顯示網站小工具。
  • WooCommerce:顯示購物車功能。

再來可設定上層頁首高度、邊線寬度&顏色等 .. 。

Astra Pro Theme 主題 :上層頁首設定
上層頁首設定

Astra Pro 除了 Above Header 上層頁首,也有 Below Header 下層頁首可做設定,因為功能差不多就先略過。


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

最特別的就是可製作 Mega Menu 超級選單,這功能對有規模的網站,是很實用的功能。

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

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

Astra Pro Theme 主題 :製作 Mega Menu 的完成圖
製作 Mega Menu 的完成圖

Step1:設定選單層級

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

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

Step2:設定最上層選單

找到最上層的選單,點擊 Astra Menu Settings。

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

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

把 Enable Mega Menu 功能打開,Mega Menu width 是設定選單的寬度形式,完成後點 Save。

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

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

點選第二層選單的 Astra Menu Settings。

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

Content Source 內容類型選 Default 預設,Highlight Labels 高亮標籤可做自己的設定,完成點 Save。

設定第二層選單, Mega Menu 相關內容
設定第二層選單, Mega Menu 相關內容

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

最後來看一下成果,就會跟上面提供的 Mega Menu 成品圖一樣囉:)


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

前往 Header > Sticky Header,相關功能都在這。

如果要使用此功能,就把 Stick Primary Header 開啟就 ok。

設定 Sticky Header 相關功能
設定 Sticky Header 相關功能
  • Stick Primary Header:開啟選單置頂功能。
  • Different Logo For Sticky Header:置頂選單使用不同的 Logo。
  • Hide When Scrolling Down:向下滾動時,隱藏主選單。

同一地方往下滑,會看到 Primary Header Colors 主選單顏色。

可更改 Header 頁首、Menu 選單、Submenu 子選單等 .. 的顏色。

Sticky Header 置頂選單,顏色設計
Sticky Header 置頂選單,顏色設計

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

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

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

Step1:設定 Page Headers 功能

前往 WordPress 外觀 > Page Headers,新增頁面標題區塊。

Astra Pro Theme 主題 :新增 Page Headers 區塊
新增 Page Headers 區塊

可設定佈局樣式、是否顯示路徑、標題顏色等 .. ,還有其他的設定項,這邊僅示範部分功能修改。

選擇喜歡的 Layout 佈局樣式,把 Display Breadcrumb 顯示路徑打勾,Text Color 標題顏色設為白色。

Astra Pro Theme 主題 :Page Headers 相關設定
Page Headers 相關設定

設定覆蓋的背景顏色(調偏黑色),上傳 Page Headers 的背景圖片,把 Overlay Background Color 覆蓋顏色功能打勾。

Astra Pro Theme 主題 :Page Headers 相關設定
Page Headers 相關設定

Step2:設定 Display Rules 功能

設定顯示條件,Display On 設為 Entire Website 全網站顯示。

Do Not Display On 排除頁面,下面設定 2 個條件,分別是在所有文章頁&網站首頁,皆不出現 Page Headers 頁面標題。

點擊 Add Display Rule、Add Exclusion Rule 按鈕,可新增多個條件。

Astra Pro Theme 主題 :設定 Display Rules 顯示規則
設定 Display Rules 顯示規則
  • Display On:設定顯示條件,像是全網站、網站文章、網站頁面、Elementor 頁面、指定頁面等 ..。
  • Do Not Display On:設定排除條件,同上。

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

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


Custom Layouts 客製化佈局

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

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

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

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

下面是完成圖。

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

Step1:前往 Custom Layouts 功能&設計區塊

前往 WordPress 外觀 > Astra Options > Custom Layouts,點 Add New。

Astra Pro Theme 主題 :前往 Astra 的 Custom Layouts 功能
前往 Astra 的 Custom Layouts 功能

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

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

Astra Pro Theme 主題 :編輯 Custom Layouts 區塊
編輯 Custom Layouts 區塊

Step2:Custom Layout Settings 設定

Layout 選 Hooks 鉤子類型,Action 置入位置選 entry_content_after,Display On 顯示頁面選 All 文章,User Roles 角色權限選 All。

Astra Pro Theme 主題 :Custom Layouts 相關設定
Custom Layouts 相關設定
  • Layout:有 Header、Footer、404 Page、Hooks 幾種類型,這裡是示範使用 Hooks。
  • Actions:客製化區塊置入位置,可參考 Astra 的 Hooks 位置,選擇對應的即可。
  • Priority:數字越小,優先級越高。
  • Spacing:可設定上下間距。
  • Display On:設定客製化區塊要在哪顯示,這裡是選 All 文章(所有文章),可新增多個條件。
  • User Roles:設定可看到客製化區塊的角色權限,可新增多個條件。

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

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

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


Site Layouts 全站佈局

Site Layouts 模組,是 Astra Pro Theme 的全站佈局功能,有 Full Width、Max Width、Padded、Fluid 可設定。

  • Full Width:全寬版面。
  • Max Width:最大寬度佈局。
  • Padded:內距版型。
  • Fluid:流體佈局。

前往 Global > Container > Site Layout,可進行相關設定。也能自行調整 Width 網站寬度。

Astra Pro Theme 主題 :設定 Site Layouts 全站佈局
設定 Site Layouts 全站佈局

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


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

增加了更多 Footer 版型的選擇、Padding 頁尾內距設定、Colors & Background 顏色背景等 .. ,相關設定。

前往 Footer > Footer Widgets,就可做設定。

Astra Footer Widgets 設定
Astra Footer Widgets 設定

Scroll To Top 回到頂端

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

前往 Global > Scroll To Top,可設定 Display On 顯示裝置、Position 按鈕位置、Icon Size 按鈕大小等 .. 。

Astra Pro Theme 主題 :Scroll To Top 按鈕設定
Scroll To Top 按鈕設定

WooCommerce 電商功能

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

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

Astra Pro Theme 主題 :WooCommerce 商店功能設定
WooCommerce 商店功能設定

這邊用產品目錄(商品列表頁)當舉例。

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

Astra Pro Theme 主題 :商品列表頁設定
商品列表頁設定
  • Shop Archive Content Width:可自訂版面寬度。
  • Shop Columns:商品欄位數量,可對不同裝置做設定(點電腦的 Icon)。
  • Products Per Page:每頁出現幾個商品。

其他商品列表功能 & 更多 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 的 Mini Agency Bundle 迷你代理商方案,才能使用的功能。請參考 WP Portfolio 作品集功能 有完整教學。

你可以用它製作各類型的展示頁面,像是網站、照片 / 圖片、影片等 .. 多種作品類型。

不論是用來展示作品、製作個人 or 公司的服務案例,或是單純覺得它會派上用場,都可以使用 WP Portfolio。

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 主要功能有,提供 40 多種功能小套件、100+ 網站模板、200+ 區塊模板。

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 進階主題購買教學:)


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 網站架設流程中,或許會遇到一些解決不了問題,你可以在下方留言給我,我會盡力協助解答。

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

我最近也開啟了 YouTube 頻道,裡面有些影片教學,你也能配上 Blog 一起學習,應該會來的更加順手(歡迎訂閱我+開啟小鈴鐺,可收到第一手影片教學通知)。

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

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

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

Leave a Comment

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

Scroll to Top