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

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

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

Astra 字體調整設定(Typography)

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

基礎字體(Base Typography)

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

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

字形(Body Font Family)

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

字體大小(Size)

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

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

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

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

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

標題(Headings)

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

Astra 顏色調整(Colors)

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

文字顏色(Text Color)

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

主題顏色(Theme Color)

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

連結顏色(Link Color)

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

連結變色(Link Hover Color)

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

標題顏色(Heading Color)

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

背景顏色(Background)

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

純色

漸層(Gradient)

背景圖片(Image)

Astra 版型調整(Container)

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

文章顯示範圍(Container Width)

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

網站排版(Layout)

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

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

頁面排版(Page Layout)

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

單篇文章排版(Blog Post Layout)

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

彙整頁面排版(Archives Layout)

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

Astra 按鈕調整(Buttons)

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

按鈕文字顏色(Text Color)

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

按鈕背景顏色(Background Color)

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

按鈕大小(Border Width)

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

按鈕邊緣顏色(Border Color)

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

按鈕邊角圓滑(Border Radius)

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

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

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

Astra Pro 限定功能

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

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

網站排版(Site Layout)

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

內容顏色(Content Color)

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

捲動至最上方(Scroll to Top)

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

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

Astra 主題教學系列文章

常見問題

Astra 主題簡介