WordPress Astra 主題完整教學|全局設定篇(Global Settings)

WordPress Astra 主題完整教學|全局設定篇(Global Settings) 3

本篇是 Astra 主題教學系列之一文章,教學主題是「全局設定(Global Settings)」的完整詳細教學,內容包含字體(Typography)、顏色(Colors)、版型(Container)與按鈕(Buttons)的設定,Astra Pro 版本則會有 Astra Free 沒有的功能,這邊也會一起介紹,如果有什麼問題,都歡迎透過聯絡我跟我溝通討論!

Astra Global Settings
全局設定(Global Settings)

Astra 字體調整設定(Typography)

在字體(Typography)設定內又細分為「基礎字體(Base Typography)」與「標題(Headings)」,以下會逐一說明教學。

基礎字體(Base Typography)

在基礎字體(Base Typography)設定裡面,最主要就是可以針對網站的全局文字去做設定與修改,包含字形、字體大小、文字粗細、文字大小寫轉換、行距與邊界距離等,如下圖。

WordPress Astra 主題完整教學|全局設定篇(Global Settings) 6

以下會針對每個功能做個簡單的示範,大家可以試著自己動手跟著修改看看喔!

字形(Body Font Family)

這邊是設定整個網站所顯示的字形,字形的數量非常多,範例是用「Noto Sans TC(思源黑體)」,這是 Google 所提供的免費字體。

Astra-Theme-free-font-type

如果你選擇使用 Google 的字體,下方會多出一個 Variants(變體) 的選項,意思是當網頁載入的時候,只會跟 Google 請求有設定的字體。建議只填入網站有用到的字體粗細,以免影響載入速度。

Astra-Theme-free-Variants

字體大小(Size)

可以設定字體的大小,利用拖曳的方式或是手動填入數字都可以調整。

Astra-Theme-free-Variants

字體粗細(Weight)、大小寫轉換(Text Transform)

可以設定字體的粗細以及是否轉換文字大小寫。

Astra-Theme-free-font-weight-transform

行距(Line Height)、邊界距離(Paragraph Margin Bottom)

可以調整文字每一行之間的距離與邊界的距離。

Astra-Theme-free-font-hight-margin

標題(Headings)

在標題(Headings)設定裡面,主要是可以針對文章標題(H1~H6)做細項設定,設定的方法與效果跟上方基礎字體是一樣的,這邊不再多做示範。

Astra-Theme-free-Headings

Astra 顏色調整(Colors)

可以針對文字、標題、連結與背景等選項的顏色做客製化與調整,如下圖。

Astra-Theme-free-Colors

文字顏色(Text Color)

可以針對文章文字內容做顏色的調整,如下。

Astra-Theme-free-Text-Color

主題顏色(Theme Color)

可以設定 Astra 主題的元件顏色,如按鈕或是反白文字的顏色,範例如下。

Astra-Theme-free-Theme-Color

連結顏色(Link Color)

可以針對文章內的超連結做顏色的設定,如下範例。

Astra-Theme-free-Link-Color

連結變色(Link Hover Color)

hover 是在控制當滑鼠移至某元件時,某元件該如何反應,所以這個選項可以調整,當我滑鼠屬標移動到連結的時候,顏色是否要變化,範例如下。

Astra-Theme-free-Link-Hover-Color

標題顏色(Heading Color)

可以針對標題 H1 – H6 進行顏色的個別設定,範例如下。

Astra-Theme-free-H1toH6-Color

背景顏色(Background)

可以針對網站背景顏色做調整,包含純色系跟漸層(Gradient),也可以針對背景更換圖片,以下為範例。

純色

Astra-Theme-free-Background-Color

漸層(Gradient)

Astra-Theme-free-Color-Background-Gradient

背景圖片(Image)

Astra-Theme-free-Color-Background-Image

Astra 版型調整(Container)

Container 可以把它想像成為一個容器,用來裝網站的文章內容,而這個容器可以調整不同的形式,在版型調整裡面,可以針對網站的文章與排版做客製化調整,下方為細項說明。

Astra-Theme-free-Container

文章顯示範圍(Container Width)

Container Width 可以調整文章顯示的範圍大小,如下範例。

Astra-Theme-free-Container-Width

網站排版(Layout)

針對整個網站的排版做設定,設定解說如下:

  • Boxed:文章與側邊欄及其他元素都用自己的方形範圍區分。
  • Content Boxed:只有文章用方形範圍區分。
  • Full Width / Contained:版面最大,但文章內容沒有最大化。
  • Full Width / Stretched:版面最大,文章內容也延伸到最大。
Astra-Theme-free-Container-Layout

頁面排版(Page Layout)

這邊的設定只有針對頁面(Page)生效,頁面一般來說都會用來撰寫「關於我們、服務項目、聯絡我們、隱私權政策等」,對於文章或其他地方並不會有影響,範例如下。

Astra-Theme-free-Container-Layout-Page

單篇文章排版(Blog Post Layout)

可以針對你的文章做排版設定,範例如下。

Astra-Theme-free-Container-Layout-Post

彙整頁面排版(Archives Layout)

彙整頁面(Archives)指的是你文章分類的總覽,例如我有好幾篇文章都分類成「科技」,那在科技的分類頁面就是所謂的彙整頁面,範例是拿分類成「樂」的彙整頁面當。

Astra-Theme-free-Container-Layout-Archives

Astra 按鈕調整(Buttons)

在按鈕調整項目內,可以針對文章內的按鈕外觀、顏色、大小等進行客製化調整,特別注意的是只針對 Astra 主題自帶的按鈕或是 Gutenberg 編輯器內建的按鈕有作用,如果是用其他外掛的按鈕,目前我測試是沒有作用的。

Astra-Theme-free-Buttons

按鈕文字顏色(Text Color)

可以調整按鈕內的文字顏色,如下範例。

Astra-Theme-free-Buttons-Text-Color

按鈕背景顏色(Background Color)

可以調整按鈕的背景顏色,如下範例。

Astra-Theme-free-Buttons-Background-Color

按鈕大小(Border Width)

可以針對按鈕的大小作調整,正確來說,是對按鈕的外框進行大小調整,範例如下。

Astra-Theme-free-Buttons-Border-Width

按鈕邊緣顏色(Border Color)

可以改變按鈕外框的顏色,範例因為把外框變大,所以看起來會比較明顯。

Astra-Theme-free-Buttons-Border-Color

按鈕邊角圓滑(Border Radius)

可以針對按鈕設定是否有圓滑的效果,範例如下。

Astra-Theme-free-Buttons-Border-Radius

按鈕文字字形(Button Font)與間距(Padding)

文字的字形這邊不做示範,跟之前章節調整字形的方法是一樣的,間距則是可以調整四邊的距離,範例如下。

Astra-Theme-free-Buttons-Padding

Astra Pro 限定功能

在全局設定中,有些設定功能只有 Astra Pro 版本才有,如下:

  • Site Layout: 在版型(Container)的設定中,Astra Pro 版本會多了一個「網站排版」的設定,可以針對整個網站做排版的調整。
  • Content Color: 在顏色的設定中,Astra Pro 版本會多了「內容顏色」的設定,可以針對標題(H1-H6)個別進行顏色調整。
  • Scroll to Top: Astra Pro 會多了「捲動至網頁最上方」的功能,可以讓使用者快速的回到網頁最上方。

網站排版(Site Layout)

Astra-Theme-Pro-Container-Site-Layout

可以針對整個網站的排版做設定,如下範例。

Astra-Theme-Pro-Container-Site-Layout

內容顏色(Content Color)

Astra-Theme-Pro-Color-Content

可以針對文章內容的標題(H1-H6)個別作顏色的調整,範例如下。

Astra-Theme-Pro-Color-Content

捲動至最上方(Scroll to Top)

Astra-Theme-Pro-Scroll-to-Top-01

這個功能可以在網頁的左下或是右下,新增一個按鈕,使用者按了之後可以快速的回到該網頁的最上方。

Astra-Theme-Pro-Scroll-to-Top-02
Astra-Theme-Pro-Scroll-to-Top-03

使用上也是很簡單,只要設定在電腦或是手機顯示,並選擇顯示位置即可,效果如下範例。

Astra-Theme-Pro-Scroll-to-Top

Astra 主題教學系列文章

Astra 主題文章

文章連結

全局設定篇(Global Settings)

頁首與頁尾篇(Header and Footer)

麵包屑(Breadcrumb)、側邊欄(Sidebar)與部落格設定(Blog)篇

選單(Menu)、小工具(Widget)、首頁(Homepage)設定、附加 CSS 篇

免費(Free)延伸功能篇

Astra Pro 專業版進階功能篇

常見問題

Astra Theme 是什麼?

Astra 是一款由 Brainstorm Force 所開發的一款輕量萬用型主題,並且有豐富的範例模板可以直接套用,快速建立網站。

Astra Theme 需要收費嗎?

Astra Theme 有免費版本與收費版本,免費版本可以直接下載並使用。

Astra Theme 有什麼特色?

有以下重點特色:
1. 禁用 jQuery,改使用 Vanilla JavaScript,達到更好的效能。
2. 主題大小只有 50KB,相較於其他主題非常的輕量。
3. 擁有多種內建網頁模板可以使用。
4. 完美與主流編輯器兼容,如 Elementor、Beaver Builder、Gutenberg等。
5. 在 GitHub 上擁有 100% 開源程式碼。
6. 主題自帶基本SEO 結構化資料標記。

Astra Theme 有哪些方案?

Astra Theme 總共有三種方案以及兩種合約長度,官網不定時舉辦折扣活動:
年約制:
1. ASTRA PRO:47 美金/年
2. ESSENTIAL BUNDLE:169 美金/年
3. GROWTH BUNDLE:249 美金/年
終身制:
1. ASTRA PRO:249 美金
2. ESSENTIAL BUNDLE:499 美金
3. GROWTH BUNDLE:699 美金

建議一開始就購買 Astra Pro 以上版本嗎?

不建議一開始就購買,先使用免費版本,覺得適合自己再花錢購買即可。

Starter Templates 是什麼?

Starter Templates 是 Astra Theme 所提供的免費網頁模版,可以直接套用,對於剛建立網站的新手來說,非常的方便。

Starter Templates 有幾個模板可以使用?

免費版的 Astra 主題提供的 Starter Templates 免費模板大約有 41 款,如果購買 Astra Essential Bundle 版本(Pro 版的下一階),則可以擁有 150 個以上的模板可以任意使用,數量非常之多!

Astra 主題簡介

Astra 主題
WordPress Astra 主題完整教學|全局設定篇(Global Settings) 44

Astra 是一款由 Brainstorm Force 所開發的一款輕量萬用型主題,並且有豐富的範例模板可以直接套用,快速建立網站。

Price Currency: TWD

Operating System: WordPress

Application Category: DesignApplication

Editor's Rating:
5

【文章在 2022-05-28 更新過內容】

歡迎免費訂閱Google 新聞」、「RSS」、追蹤Facebook」、「Instagram」、「YouTube」、「Dcard」、「TikTok」或加入討論社團」,並且可以透過「小額贊助」方式支持本站所有媒體持續營運!

返回頂端