【文章在 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 所提供的免費字體。
如果你選擇使用 Google 的字體,下方會多出一個 Variants(變體) 的選項,意思是當網頁載入的時候,只會跟 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 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 主題
Astra 是一款由 Brainstorm Force 所開發的一款輕量萬用型主題,並且有豐富的範例模板可以直接套用,快速建立網站。
Price Currency: TWD
Operating System: WordPress
Application Category: DesignApplication
5
最新文章
- 日本大學生對電腦快捷鍵知識缺乏,40% 受訪者不知道複製貼上快捷鍵
- Windows 12 預計 2024 年登場,將攜手 AI 電腦引領新時代
- 出包!Windows 11 23H2 效能變差,詳細說明與解決辦法看這篇!
- 不是 HP 印表機卻顯示 HP 廠牌?微軟官方承認出問題啦!
- Windows 10 KB5032278 非安全性更新釋出,版本 19045.3758
- Windows 11 KB5032288 非安全性更新釋出,更新內容總整理(22621.2792 和 22631.2792)
- 2023 PS Plus 12 月免費遊戲公布,共三款遊戲免費玩
- Windows 11 省電模式新功能,讓筆電電池更耐用
- Windows 11 市佔率突破 26%,Windows 10 市佔小幅下降
- 台灣警方查緝假 HDMI 線,一天就查扣 260 萬美元的仿冒品