Astra主題教學-1款幫你搞定各類型網站的WordPress佈景主題

Astra主題教學

每個人在用Wordpress架站的初期,都會遇到一個問題:要選哪款Wordpress主題才適合我的網站?

其實這關乎到你想架設哪一類型的網站,一個部落格網站、形象網站還是電商網站?

每一類型的網站,都有其適合的Wordpress主題。但如果每架設 1 個網站,就要重新適應 1 款新的主題真的很累人!

其實Astra主題可以讓你不用再為選主題苦惱,因為它就是你一直在尋找的萬用型Wordpress佈景主題

這篇Astra主題教學會詳細介紹Astra的重點功能,帶你一步一步完成所有基礎設定。不論你想架設個人部落格、公司形象官網、購物網站,看完這篇文章 。你也能用這1款萬用型佈景主題架設出你心目中理想的網站!

Astra主題 基本介紹

1

Astra是由Brainstorm Force在2017年開發的1款萬用型主題。截至2021.1月已經有超過100萬的安裝數量,可以說Astra是Wordpress眾多主題中的超級熱門款!

Astra之所以這麼受歡迎是因為它非常的輕量而且可以高度客製化

通常佈景主題都需要佔用幾MB的檔案大小,但Astra因為禁用jQuery函式庫且採用Vanilla JavaScript,這讓它只有50kb的檔案大小,不但載入速度快也減輕了主機負擔。

Astra本身沒有預設太多內建功能,許多功能是你在下載後,可以自己決定要不要開啟,給你很高的自由度客製化自己的網站。

不用擔心因為跟別人用一樣的佈景主題,結果網站都長得一樣。

前台的自訂模式可以讓你即時地看見你替網站所做的外觀變更,可以說是非常直覺化且方便!

一鍵式套版功能也是站長們愛上Astra的主要原因,它提供許多樣板給你選擇,就算你不會任何程式語言,還是可以做出專業且精美的網站。

如何挑選主題?

那要如何判斷一款主題優不優質,以下有幾個條件供你參考

  • 版型輕量:不佔用太多主機空間、載入速度快
    
  • 響應式設計:不論用電腦、平板、手機都能舒適的瀏覽網站
    
  • 與頁面編輯器的相容性:透過頁面編輯器快速拉出你你想要的網站樣貌
    
  • 是否能客製化:主題架構簡單,不會與其他外掛衝突,也能透過簡單的CSS語法,呈現你想要的網站外觀風格
    
  • 大量使用者:讓你遇到問題時,能夠馬上在網路上找到解決辦法
    
  • 持續更新:不斷推陳出新的功能、主題優化

為什麼要選擇Astra主題

WordPress的主題有這麼多,為什麼要選擇 Astra呢?

以下是我為你整理出來的優缺點分析

相信在看完Astra主題的眾多優勢後,你也會想要馬上下載Astra這款萬用型佈景主題!

優點

  • 檔案輕量:
    只有50kb的大小,不會佔用太多主機空間
  • 網站載入速度快:
    如果網站的載入速度太慢,很有可能導致讀者沒有耐心等待直接跳出網站,這會間接影響網站的SEO,使用Astra可以減少這類的問題
  • 操作直覺化、即時畫面更新:
    前台的自訂模式分為6個項目,當你想要修改某些細節時,可以很清楚知道要去哪裡修改,修改後的樣貌也能即時呈現出來,非常方便!
  • 與其他外掛相容性高:
    有些佈景主題會跟你下載的外掛起衝突,導致外掛功能沒辦法使用,使用Astra會大大降低這種問題發生的機率
  • 可高度客製化:
    Astra的結構非常簡單,沒有太多的內建功能,如果你會寫一點CSS語法,就可以依照自己想要的方式做出理想中的網站,不會有被主題架構綁架的問題
  • 支援頁面編輯器:
    Astra支援許多熱門的頁面編輯器,讓你可以用拖拉的方式快速架站
  • 一鍵式套版功能:
    如果你跟我一樣,擔心自己美感不夠,Astra提供很多精美的樣板,讓你可以快速套版,再進行修改,大幅縮短架站時間
  • 持續更新:
    Astra有強大的團隊不斷地在研發新功能、外掛,版本也會時常優化更新
  • 使用者眾多:
    有100萬的安裝啟用數量,當遇到問題時,只要Google一下就能找到解決方案,不用自己花錢請工程師幫忙。

缺點

  • 一開始需投入較多時間熟悉:
    因為Astra本身沒有太多內建功能,剛啟用主題時,基本上是空的,需要花時間去了解自己需要的功能要在哪邊開啟、設定
  • 免費功能較陽春:
    如果你沒有升級付費版本,你會發現有很多進階功能是沒辦法使用的,也就體會不到Astra所帶來的優勢,如果有在接案的話,還是建議升級付費版
  • 外觀不華麗:
    如果你有使用過其他主題,或許會覺得Astra預設的外觀較簡陋一點,看起來沒有其他主題那麼精緻(不過透過套版是可以解決這個問題的)

什麼類型的網站適合使用Astra

當我們要架設網站時,都會以網站的需求去挑選其適合的佈景主題

例如:

想要架設部落格,你可能會選擇使用Ashe主題

想要架設新聞網站,你可能會選擇使用Jannah主題

想要架設形象網站,你可能會選擇使用Avada主題

想要架設電商購物網站,你可能會選擇使用FlatsomeWoodMart主題

不過如果你使用Astra,就不用在這麼多主題之間游走了!畢竟要熟悉一個主題都需要花很多時間,因為Astra可高度客製化的特色,能讓你架設出各種類型的網站!

  • 作品集網站:
    付費版的Astra(Mini Agency Bundle以上的方案)有WP Portfolio 這款外掛,讓你能輕鬆地做出精美的作品集
  • 部落格:
    部落格最重要的是有價值的內容,Astra本身的預設頁面就很適合直接拿來當部落格使用,簡潔有力不會模糊焦點
  • 企業形象網站:
    Astra的付費版就有100種以上的模板讓你套用,再搭配Elementor幾乎可以做出各式各樣的形象網站
  • 電商購物網站:
    Astra支援WooCommerce這款電子商務外掛,而且還特別獨立出WooCommerce的自訂選項,讓你更方便設定電商網站的細節

Astra可以跟哪些頁面編輯器搭配使用

Astra主題支援的頁面編輯器如下

2

  1. Elementor:
    Elementor是我最推薦的頁面編輯器,Astra與Elementor官方有合作關係,所以使用Elementor不太需要擔心相容性的問題。 搭配Elementor付費版提供的300多種樣板,輕鬆拖拉出各式各樣專業且精美的網站
  2. Beaver builder
  3. Gutenberg (Wordpress內建的區塊編輯器):
    Astra的母公司BrainstormForce有專門為Gutenberg古騰堡頁面編輯器推出一款免費外掛“Ultimate Addons for Gutenberg”,讓你在使用WordPress內建的編輯器時,多出許多強大功能。也因為是BrainstormForce這個大公司出的外掛,使用起來比較不會有安全上的疑慮及外掛衝突。
  4. Brizy

想要了解如何用Elememtor製作出你腦海中完美的網站,可以參考我寫的:
Elementor教學-不會寫程式也能架出精美網站,1款讓500萬人愛上的頁面編輯器!

Astra方案介紹

Astra有免費版&付費版,當然付費版本多出非常多強大的功能,在這個章節將詳細介紹&比較各個版本,讓你在看完這個章節後,可以依照自己的需求選擇最適合自己的方案。

免費版功能簡介

免費版的功能其實比較陽春一點,只可以調整一些基礎的字體、顏色、版面大小、頁首、部落格區塊、頁尾及側邊欄。

當你在使用免費版時,你會發現很多功能Astra都會要你升級成Pro版之後才開放使用,其實是相當受限的,也比較感受不到使用Astra的優勢在哪裡。

付費版才有的功能

我們來看一下升級成付費版本後多出了哪些強大功能(後續的章節會有詳細使用教學)

3

  • Nav Menu 導航選單:
    導航選單讓你可以在選單的區塊加入更多的選項,可以設計互動式大型選單吸引瀏覽者的目光
  • White Label 白標籤:
    可以將Astra主題、外掛改成自己品牌的名稱,如果你有在接案,這個功能會提升你品牌的專業度
  • Blog Layouts 部落格版面:
    輕鬆調整部落格文章的排版方式
  • Site Layouts 網站排版:
    包括網站圖示、品牌logo的細節設定,調整出你想要的網站排版方式
  • WooCommerce 電子商務外掛設定:
    獨立出來的WooCommerce外掛設定選項,讓你可以在前台自訂列表中,輕鬆客製化你的電子商務網站且即時預覽變更的項目
  • Sticky Header 固定式頁首:
    當瀏覽者閱讀你的文章時,也能隨時看到你網站的主選單,讓他們可以在你的網站裡,更快速找到需要的資訊
  • Page Headers 頁面頁首:
    在每個頁面客製化頁首(可加上麵包屑導覽功能)
  • More Color Controls 更多顏色設定:
    付費版本提供更多細節的顏色設定功能,對自己的網站色系能100%掌握
  • Better Typography 更多字體選擇:
    擁有800多種Google Fonts供你選擇,你一定可以找到最適合自己網站的字體
  • Custom Layouts 客製化排版:
    可以搭配Elementor等頁面編輯器,製作出自己想要的區塊樣板,放到你的網站上
  • Scroll To Top 按鈕:
    當瀏覽者讀完文章,或是找到自己想要的資訊後,就能按”Scroll To Top”這個按鈕回到頁面最上方,找其他需要的資訊。不用滑滑鼠滾輪滑到天荒地老!
  • Footer Widget 頁尾小工具:
    更多元的頁尾功能設定
  • Header Sections 更多頁首設定:
    可以設定網站、平板、手機頁首的呈現方式
  • More Header Design 更多頁首設計:
    設定透明頁首、頁首上下方增加地址或聯繫方式..等
  • Spacing Control 間距設定:
    可以設定整體網站、部落格文章的間距,將版面調整成可以舒適閱讀的間距大小

付費版本的3種方案價格

Astra 付費版共有三種付費方案,你可以選擇年費制或是直接買斷(終身使用)

在寫這篇文章時,Astra剛好有聖誕節優惠價(7折~8折的優惠)

如果你有打算購買Astra 付費版可以趁現在把握機會呦!

4

將中間的小按鈕向右滑,就會看到終身版的價格

5

  1. Astra Pro
    年費制:$59 USD / 年
    買斷制:$249 USD / 一次性收費

  1. Mini Agency Bundle 
    年費制:$169 USD / 年
    買斷制:$499 USD / 一次性收費

  1. Agency Bundle 
    年費制:$249 USD / 年
    買斷制:$699 USD / 一次性收費

因為每一波活動的優惠價都不同,所以我這邊寫的是原價價格

3種付費方案功能比較

6

  1. Astra Pro 功能
    • 所有付費版的特色功能:讓你可以客製化更多的細節
    • 100個以上免費樣板
    • 1 對 1 客服支援
    • 可裝在無數個網站上
  2. Mini Agency Bundle 功能:
    • 涵蓋所有Astra Pro的功能
    • 150 個以上Agency樣板
    • WP Portfolio外掛:讓你做出精美的作品集
    • 頁面編輯器擴充功能擇一:Elementor 或 Beaver Builder
  3. Agency Bundle 功能:
    • 涵蓋所有Mini Agency Bundle的功能
    • 150 個以上Agency樣板
    • 兩種頁面編輯器擴充功能都可以用:Elementor 及 Beaver Builder
    • Convert Pro 外掛:製作彈跳式視窗,可用在訂閱網站電子報、行動呼籲..等
    • Schema Pro 外掛 : 製作網站結構標記,有助於網站的SEO
    • 未來新推出的外掛都能免費使用

延伸閱讀:

想要了解如何透過SEO來獲取大量的免費流量,可以參考我寫的這篇文章
Rank Math教學全攻略,1款讓你網站排名飆升的終極SEO外掛

Astra Pro

Mini Agency Bundle

Agency Bundle

精美樣板

100+Free

150+ Agency

150+ Agency

作品集

外掛

需購買

頁面編輯器

擴充外掛

需購買

Elementor/
Beaver Builder
擇一

Elementor/
Beaver Builder
都有

彈跳視窗

外掛

需購買

需購買

結構標記

外掛

需購買

需購買

未來推出

的外掛

需購買

需購買

推薦指數

Astra 官網

我推薦的方案

如果你想做出一個專業又好看的網站,或是你有接案需求的話,花錢投資付費版本的Astra是有必要的,免費版其實在功能上還是頗受限制的!

我個人非常推薦購買Mini Agency Bundle的終身版,如果你都確定要使用Astra製作你的網站的話,一次買斷比年繳還要划算許多!再加上Astra在一年當中,時不時會有優惠活動,打折的時候購買真的會有一種賺到的感覺呢!

Mini Agency Bundle的終身版可以說是CP值最高的一個選項,這個方案可以讓你使用150多種網站模板、作品集外掛 (WP Portfolio) 以及頁面編輯器的擴充功能外掛 (Ultimate Addons for Elementor/Beaver Builder)!

但如果你的預算比較充裕,當然也可以直接購買Agency Bundle的終身版。這樣就不用再找其他外掛來製作彈跳式視窗&結構化標記,而且未來如果Astra有推出其他好用的外掛,你也能免費使用!

購買&安裝Astra教學

這篇文章的購買&功能教學是以付費版Mini Agency Bundle為主軸下去撰寫

購買Astra主題

前往Brainstorm Force的官網購買Astra,若要購買終生版,記得將上方的按鈕向右滑

點選 “ Get Started ”

7

選擇你要的頁面編輯器擴充功能外掛

點選 “ Proceed to Checkout ”

8

接這會到結帳畫面,填完自己的基本資料及信用卡後

點選 “ Complete Checkout ”

9

這樣就購買完成囉!

記得到Email收確認信,他會給你連結到 Brainstorm Force的官網,我們要下載剛剛購買好的Mini Agency Bundle檔案

Astra安裝&啟用

你可以直接到Brainstorm Force的官網或在你的確認信中點選 ” here “ 下載檔案

10

Brainstorm Force的官網 > Downloads

11

我們先在這邊將 6 個檔案都下載到桌面

  1. Astra Theme
  2. Astra Child Theme (子主題)
  3. Astra Pro Addon Plugin
  4. Premium Starter Templates
  5. Ultimate Addons for Elementor / Beaver Builder(看你當時選擇哪一個頁面編輯器)
  6. WP Portfolio

上傳主題

WordPress 後台 > 外觀 > 佈景主題 > 安裝佈景主題 > 上傳佈景主題

點選 “ 選擇檔案 > 立即安裝”

將我們剛剛下載到桌面的 2 個主題檔案上傳

  • Astra Theme
  • Astra Child Theme (下載時可以自己命名檔案)
14

接這你就會看到這個畫面

13

這邊我們要啟用 Astra Child Theme 子主題,而不是Astra Theme 母主題

因為Astra Theme 母主題會不斷的更新,如果你有寫一些程式語言,客製化自己的網站,有時候主題更新到最新版本,有可能會把你寫的程式語言都洗掉,導致你要再重寫一次,如果網站經營久了,要重寫程式語言會非常花費時間而且麻煩!

上傳主題的部份這樣就完成囉!

上傳外掛

我們到 WordPress 後台 > 外掛 > 安裝外掛 > 上傳外掛

點選 “ 選擇檔案 > 立即安裝”

將我們剛剛下載到桌面的 4 個外掛檔案一個個上傳&啟用(步驟要重複4次)

  • Astra Pro Addon Plugin
  • Premium Starter Templates
  • Ultimate Addons for Elementor / Beaver Builde
  • WP Portfolio
12 1
15

要特別注意的是,當你在安裝 Ultimate Addons for Elementor / Beaver Builder 這款擴充功能外掛時,請記得要先下載頁面編輯器的外掛

外掛 > 安裝外掛 > 搜尋Elementor / Beaver Builder > 安裝&啟用

16

上傳外掛的部份這樣就完成囉!

激活付費外掛功能(輸入憑證)

我們先到 Brainstorm Force的官網 > Account > Licenses

這邊要記得先登入會員喔!

如果忘記帳號&密碼,可以到信箱中找購買確認信,那邊會有你的個人帳戶資料

17

接著會進到這個畫面

將 4 個付費外掛的序號複製起來

18

輸入 Astra Pro 憑證

前往 WordPress 後台 > 外觀 > Astra Options

將剛剛複製的序號貼到右邊 Astra Pro License欄位

點擊 Activate License之後就會看到綠色的Active!

這代表你的憑證已經激活成功囉!

截圖 2021 01 13 上午8.14.11

輸入 Premium Starter Templates, Ultimate Addons for Elementor, WP Portfolio 憑證

前往 WordPress 後台 > 外掛

找到這 4 個外掛,點擊下方綠色的 “Activate License” 貼上你的序號並啟用就完成囉!

20

最後,別忘了啟用想用的功能

在下方 “Available Astra Pro Modules” 挑選自己想用的功能點右邊的 “Activate”

為了方便後續章節的教學,我先將所有功能都啟用(Activate All)

21

Astra重點功能介紹

在這一個章節中,我將挑選較常會使用到的功能介紹

網站佈局

首先我們先來了解一個網站大致上的佈局方式

包含 4 個區塊

  • 頁首: Logo、網站標題、主選單可以在這邊設定
  • 內容:頁面的主要內容、部落格文章
  • 側邊欄:通常會放文章分類、站長介紹、網站主打產品
  • 頁尾:隱私權政策、免責聲明、或是網站其他服務項目
網站佈局

前台自訂

在網站前台上方找到 ” 自訂 “

23

你會看到這個畫面,Astra 幫你把功能歸納到 6 個區塊,分別為

  1. Global 網站整體設定
  2. Header Builder頁首編輯器
  3. Breadcrumb 麵包屑導覽
  4. Blog 部落格
  5. Sidebar 側邊欄
  6. Footer Builder 頁尾編輯器
24.0

Global 網站整體設定

在這個區塊可以調整網站整體的

網站字體設定 (Global > Typography > Base Typography)

調整字型、字體粗細、字體大小、行高…等

25

標題的字體設定 (Global > Typography > Headings)

26

網站顏色設定 (Global > Typography > Colors)

調整字體顏色、主題顏色、連結顏色、標題顏色、背景顏色..等

27

網站佈局設定 (Global > Typography > Container)

調整網站佈局樣式、寬度、間距

28

Header Builder頁首編輯器

Header Builder 是Astra 3.0.0版本後的新功能,使用前要先確認Astra主題的版本

Astra一直被使用者詬病頁首、頁尾功能較陽春,現在他們推出了Header& Footer Builder新功能,讓你可以用滑鼠拖曳的方式,設計出更具有個人風格的頁首、頁尾。

前往 WordPress後台 > 外觀 > Astra Options

你會看到Header & Footer Builder新功能的連結

點擊連結就能前往前台的自訂功能

24.1
24.2

Header Builder有4大區塊

24.3
  1. General 一般設定
    這邊可以調整你在視覺化頁首編輯器中元素的基本設定
  2. Design 版型調整
    這邊可以調整頁首(Header)的寬度、邊界
  3. Header Types 頁首類型
    這邊可以設定透明頁首、固定式頁首
  4. 視覺化頁首編輯器
    分為3個欄位(上、中、下),讓你可以設計出獨特的頁首

視覺化頁首編輯器欄位設定

24.4

點擊視覺化頁首編輯器左邊的設定icon,就可以調整General & Design的設定 每個人想要的樣式都不同,需要自行去摸索,這邊就不一一介紹囉

視覺化頁首編輯器左、中、右三個欄位,只要點擊欄位中的+

就可以幫你的頁首添加不同的元素

在欄位中的元素都可以用滑鼠拖拉移動位置

24.5

Astra Pro可以選擇的元素如下

  • 按鈕 1
  • 按鈕 2
  • HTML 1
  • HTML 2
  • Logo
  • 主選單
  • 次選單
  • 搜尋框
  • 小工具 1
  • 小工具 2
  • 小工具 3
  • 小工具4
2021 02 14 12.02.02 1

響應式設計

在左下角的地方,有桌機、平板、手機三種裝置可以選擇

你可以替這個3個裝置分別設計不同的頁首

24.7

Breadcrumbs 麵包屑導覽

(自訂 > Breadcrumbs)

可以選擇將麵包屑放置在頁首中、頁首下方、標題上面

34

Blog 部落格

部落格列表排列方式 (Blog > Blog/Archive)

可以選擇部落格列表要用幾個欄位的方式呈現

35

我的部落格列表是選擇左邊的排列方式

36

側邊欄 Sidebar

(自訂 > Sidebar)

這邊可以設定你的側邊欄要放在網站的左、右邊&寬度調整

這邊的側邊欄功能只能設定排版&位置

若要編輯側邊欄的內容,要到自訂 > 小工具

或是到WordPress 後台 > 外觀 > 小工具

37

Footer Builder 頁尾編輯器

Footer Builder跟前面介紹的Header Builder是一樣的操作方法

只是頁尾放的元素跟頁首會不一樣

但一樣要依個人需求做調整

這邊就不重複介紹囉

24.8

前台自訂的其他4個區塊

41

  • 選單:設定你的主選單&頁尾選單
  • 小工具:設定你的側邊欄要加入哪些小工具(這邊可以修改側邊欄的內容)
  • 首頁設定:選擇首頁是要呈現部落格列表或靜態頁面
  • 附加的CSS:自己寫CSS語法客製化你網站的外觀

後台進階功能教學

在使用下面所介紹的進階功能之前,要記得先到

WordPress 後台 > 外觀 > Astra Options

將這些功能啟用(Activate)

42

Nav Menu 導覽選單製作

導覽選單看起來會是下面這張圖的樣子

製作清楚明瞭的導覽選單,可以幫助你的讀者更快的找到他們需要的資訊,也可以讓讀者更快了解你的網站有哪些內容

43

讓我一步一步帶你操作吧!

首先,到 WordPress 後台 > 外觀 > 選單,點選你要製作導覽選單的頁面(我這邊以Wordpress為例)

點擊 “Astra Menu Settings”

44

“Enable Mega Menu” 打勾,並按右下角的 ” Save “

45

接著到 “自訂連結”

網址的欄位輸入:#

連結文字輸入:子項目名稱

輸入完記得按 “新增至選單”

46

我這邊將 “主機“ 這個子項目設定為該欄位的標題

點擊 ”Astra Menu settings“

47

勾選 “Making this menu as column heading”

這邊你還可以依照自己的需求,調整選單的標籤、內容來源、重點標籤

48

頁面內的子項目都設定完後,會呈現這個樣子

49

製作完成後,記得按 “儲存選單”

再到網站前台,就會看到你製作的導覽選單囉!

Page Headers 頁面頁首製作

Page Header 就是出現在你網站的 Primary Header下面、內容上方的區塊

50

前往 WordPress 後台 > 外觀 > Page Headers

點擊上方的 “Add New”

51

  1. 打上標題
  2. 在 Page Header 的區塊選擇排版方式
  3. 是否要在 Page Header 加入麵包屑導覽功能
  4. 設定標題顏色
  5. 麵包屑文字顏色
  6. 調整 Page Header 區塊大小
  7. 調整Page Header 區塊的背景顏色 / 放入背景圖片
52

接下來我們到 “Display Rules” 區塊

  1. 選擇你要在網站哪些頁面顯示 Page Header (我選擇整體網站)
  2. 選擇特定頁面是否要顯示 Page Header
  3. 選擇用戶角色 (我選擇全部)
  4. 接著就可以按右邊的 “發佈”
53

如果你想要將你的 Page Header 跟網站的 Primary Header 融合再一起(如下圖)

54

“Site Header” 區塊

“Merge Page Header with Site Header” 打勾

若將兩個區塊融合在一起,有些字體、背景顏色等等需要重新調整,在下方可以依照自己的需求進行微調

都設定完成後,別忘了按右側的“更新”呦!

55

Custom Layouts 客製化排版

如果你不喜歡 Astra主題預設的排版方式

你可以在 Custom Layouts 客製化自己的網站排版

選項包含:

  1. Header (頁首)
  2. Footer(頁尾)
  3. 404 Page(404錯誤頁面)
  4. Hooks(任何你想客製化的區塊)

建議搭配 Elementor一起使用會更方便快速

前往 WordPress 後台 > 外觀 > Custom Layouts

點擊上方 “Add New”

56

選擇

  1. 你要製作的排版 (Header, Footer, 404 Page, Hooks)
  2. 是否要固定該區塊
  3. 顯示在網站的哪些地方
  4. 用戶角色
58

如果你要客製化 Header, Footer, 404 Page以外的區塊,請選擇 “Hook”

“Action” 那個欄位不知道要選什麼的話,可以參考這個網站

Astra 明確地告訴你每個Action 選項,在網站上的對應位置

你只要確認你要增加的區塊在網站的哪裡,選擇那個代碼就可以了!

這個Hook 選項的功能可以說是非常強大!搭配Elementor就能做出各式各樣的客製化區塊!

59

White Label 白標籤

White Label 白標籤的功能,是讓你將Astra主題、外掛更名成自己的品牌名稱。

若你有在接案幫別人架設網站,不想讓客戶知道你是使用Astra這款佈景主題製作他們的網站,你可以將其改成自己的品牌名稱,增加自己品牌的專業度

前往 WordPress 後台 > 外觀 > Astra Options > White Label

點擊 “Settings” 進行修改

60

接這你會進入這個畫面

Astra主題教學 White Label 白標籤
  1. 更改機構資訊:填入作者名稱、網址
  2. 將 Astra 主題名稱改為自己的品牌名稱、貼上主題圖片的網址(要先將圖片上傳到媒體庫)
  3. 將Astra Pro 外掛改為自己的品牌名稱
  4. 將Astra 側邊欄改為自己的品牌名稱
  5. 勾選 “Enable White Label” 並按 “Save Changes”

因為你勾選了“Enable White Label”,所以當你回到WordPress後台,你會看不到 ”White Label“ 這個選項

這樣你的客戶也不會知道你是透過 ”White Label“ 這個功能將Astra這款主題,更名為自己品牌的主題

62

接著我們到 WordPress 後台 > 外觀 > 佈景主題

你就會看到你使用的 Astra 主題已經變成你的品牌主題了!

63

前往 WordPress 後台 > 外掛

你會看到 Astra Pro 外掛已經變更成你的品牌名稱外掛

64

WP Portfolio 作品集外掛

在這個章節,我會一步一步帶你把WP Portfolio這款外掛設定好並且搭配Elementor做出一個簡單的作品集當作範例

首先,我們要先製作一個作品集頁面

前往 WordPress 後台 > 頁面 > 新增頁面

替你的頁面命名並且到 外觀 >選單

將頁面新增到你的主選單

65

接下來,我們要設定 WP Portfolio 這個外掛

前往 Worpress 後台 > WP Portfolio > Settings

Astra主題教學 WP Portfolio 作品集外掛
  1. Page Builder 選擇 ”All“,你將來若想匯入 Starter Templates樣板選項會比較多
  2. 複製 Shortcode的代碼,等一下會用到
  3. 在Display的地方將 4 個選項都打勾
  4. 都完成後,按”儲存設定”

接著,前往 WordPress 後台 > 頁面 > 作品集頁面

將剛剛複製的代碼貼在這個頁面

記得按 “更新”

67

回到 WP Portfolio > Add New

新增一個作品集

  1. 打上作品集標題
  2. 選擇作品集樣式
68

新增完作品集後,到右側的地方新增分類

我這邊以照片的作品集作為示範

所以我將分類命名為圖片

69

精選圖片的地方,設定你的作品集精選圖片

70

接著,到下方 “Portfolio Settings”

  1. 設定你的 Thumbnail Image
  2. 作品集頁面開啟方式

完成後,記得點擊右上方的 “更新”

71

回到Portfolio的最上方,點擊 “使用Elementor編輯”

如果找不到”使用Elementor編輯”的按鈕,前往Elementor > Settings > 勾選 Portfolio >儲存設定

再回到Portfolio的頁面就能看到“使用Elementor編輯”的按鈕了

71.1

來這邊我是使用 Elementor Pro 的 ”藝廊” 來示範

將其拖拉到頁面中

72

前往 內容 > 設定

上傳你的圖片

外觀細節的部分可以在下面自行調整,因為這篇文章不是Elementor教學,所以就不多作介紹

都設定完成後,記得按右下角的 “更新”

73

回到前台 Portfolio 的頁面,你就會看到你的作品集&分類等選項

74

點開你的作品集就會呈現出這樣的畫面

75

作品集裡面的圖片可以點開來看

76

這樣作品集的製作就完成囉!

Customizer Search 自訂搜尋

在上面有介紹到 Astra 的前台自訂功能,我們可以輕鬆地在前台修改網站外觀。

由於 Astra 自訂的功能實在太多了,有時候我們會忘記想要修改的選項,要在前台自訂的哪個區塊修改

開啟 Customizer Search這一個免費外掛

你就可以在前台自訂的地方搜尋關鍵字

馬上就可以找到你想修改的內容要在哪個區塊修改,真的非常方便!

但是要記得只能用英文搜尋喔!

77

前往 WordPress 後台 > 外觀 > Astra Options > Free Plugins > Customizer Search

將 ”Customizer Search“ 啟用

78

一鍵式套版

如果你跟我一樣對於設計、美感一竅不通,真的不用擔心!

因為 Mini Agency Bundle 這個方案,提供了超過 150 個精美樣板給你選擇,就算不會任何程式語言也不怎麼有美感,一樣可以做出專業又美觀的網站!

趕快來看看怎麼使用 “一鍵式套版” 這個強大功能吧!

前往 WordPress 後台 > 外觀 > Starter Templates

確認右上方式選擇你用的頁面編輯器

79

選擇自己喜歡的版型

點擊下方 “Import Complete Site”

點擊 “Import”

81

回到網站前台,你就會看到你的網站已經匯入套版成功囉!

接著就可以開始用頁面編輯器修改你的網站外觀 & 內容了

82

進階學習

如果你想要學習更多關於 Astra主題的進階功能,可以參考這 2 支 Youtube 影片

Create a Pro Website

這個影片教你使用 Astra + Elementor頁面編輯器,從 0 開始架設一個 WordPress網站。

Ferdy Korpershoek-Astra教學系列影片

Ferdy Korpershoek 是一位荷蘭籍的 Youtuber,他的影片都是關於Wordpress架站的教學影片,他都會一步一步帶你操作Wordpress外掛、主題、各式功能…等。

基本上,看完他的教學影片你就能將影片中學到的東西,運用在自己的網站上!

結語

如果你不會寫程式語言,但想要架設出一個精美又實用的網站,其實只要使用Astra+Elementor 編輯器,你也能快速製作出各式各樣的網站!

Astra的架構非常簡單,如果你有使用過其他主題,可能會覺得它的外觀有點單調,但也是因為它的輕量、簡潔,讓你可以高度客製化你的網站,不會有被主題架構綁架的問題。

Mini Agency Bundle方案提供了超過 150 種以上的樣板讓你選擇,再搭配Elementor修改網站外觀,不論你想製作部落格、形象網站或是電商購物網站,都不用擔心自己做出的網站跟別人的長的一樣。

這篇Astra主題教學涵蓋了大部分Mini Agency Bundle的重點功能,希望你在閱讀完這篇文章後,有更了解如何使用Astra這款萬用型主題。

Astra 常見問題

Astra 是什麼

Astra主題是Brainstorm Force在2017年推出的1款非常輕量(50kb)的萬用型Wordpress 佈景主題,不論是部落格、形象網站、電商購物網站都可以用Astra主題製作。

使用Astra有哪些好處

-載入速度快(檔案只有50kb)
-可高度客製化(主題架構簡單)
-遇到問題找得到解決辦法(超過100萬的啟用人數)
-操作非常直覺化、好上手
-與其他外掛相容性高(主題架構簡單,衝突較少)

Astra要付費嗎?

Astra主題共有 4 個版本
費用分為年費制 & 終身買斷(USD)

-免費版
-Astra Pro: $59/年、$249/一次收費
-Mini Agency Bundle: $169/年、$499/一次收費
-Agency Bundle: $249/年、$699/一次收費

免費版本的Astra主題,在功能上還是有許多的限制,如果想做出專業的網站,還是建議投資付費版本,其中以Mini Agency Bundle最為推薦,CP值最高!

當然還是要以你的需求及預算來考慮要買哪一個版本。

Astra有提供免費的樣板嗎?

有的,Astra的免費版也有提供樣板可以套用,但選擇較少,如果你購買Mini Agency Bundle的方案就能擁有超過150種的精美樣板。

Astra可以搭配頁面編輯器一起使用嗎?

可以的! Astra支援 Elementor, Beaver builder, Gutenberg, Brizy 等視覺化頁面編輯器。

Leave a Comment

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

回到頂端