Astra主題教學指南-Global全站文字-顏色-內容設定

Typography (文字樣式) – Global全站設定

Typography(文字樣式),排版在網路行銷用戶體驗中扮演著最重要的網頁設計角色。
因此,Astra專注於為使用者提供許多排版選項,這些選項將幫助你使用Astra主題自定義字體。
Astra提供全站排版選項,你可以在一處進行更改,這些更改將在Global全站設定內反應出來。
在WordPress儀表板中,你可以在 外觀 > 自訂 > Global > Typography 下找到設定選項

Base Typography 基本文字樣式

這是預設排版,將應用在整個網站設計。

可用的選項:

  • Family 字體 – 從Nunito,Times New Roman,Sans Serif 等中選擇字體家族,以確定網頁設計上的字體
  • Variants 字體變形 – 必須選擇要在網站上使用的Variants字體變形。
  • Size 字體大小 – 選擇網站內容的預設字體大小,你還可以找到用於設定字形轉換的選項,
    也就是 [無,首字大寫,全字大寫,全字小寫]
  • Weight 字體粗細 – 選擇網站上內容的預設字體粗細
  • Line Height 行高 – 在此處設定的數值會為網站的文字和內容添加行距高度
  • Paragraph Margin Bottom 段落邊距底部 – 為文字和內容設定預設的段落邊距底部

Body Font Family (字體系列)

Astra允許你在你的網路行銷網站上使用系統字體,Google字體,Typekit字體以及自定義字體。
請參閱將解釋如何使用Astra選擇字體的官方詳細說明

Headings 標題

標題版型可在自訂 > Global > Typography > Headings下找到
你可以為所有標題(H1至H6)設定通用文字樣式和單個標題大小

提醒: 如果使用的是頁面編輯器(例如Elementor、Gutenberg古騰堡…等),
則可以使用特定部分頁面編輯器的版型設定來覆蓋上述版型。


Colors (顏色) – Global全站設定

透過Astra,你可以使用全站Colors顏色選項在你的網站上保持統一的配色方案。
這些顏色將應用於整個網站的主題部分。
從WordPress儀表板瀏覽到 外觀 > 自訂 > Global > Colors

Base Colors (基本顏色)

這是Astra主題可用的預設基本顏色選項

下面是你可以找到的選項:

  • Text Color (文字色彩) – 網站上的文字和說明的顏色
  • Theme Color (主題色彩) – 所有主題元素的顏色,例如按鈕、選定的文字背景顏色等。
  • Link Color (超連結色彩) – 已添加連結的所有文字的顏色
  • Link Hover Color (懸停超連結色彩) – 連結已添加到的所有文字的懸停顏色
  • Background (Color and Image)  背景(顏色和圖片)– 此顏色將作為背景顏色應用於整個網站上的身體。
    如果同時設定了顏色和圖片,請確保調整顏色的不透明度以使圖片可見。

小提醒:如果使用的是頁面編輯器(例如Elementor、Gutenberg古騰堡…等),
則可以使用頁面編輯器的顏色設定覆蓋以上顏色。

Astra在Astra Pro Addon外掛的專用模組中提供了更多樣式選項。
了解有關Astra Pro Addon的 顏色和背景 模組的更多資訊。


Container (內容排版) – Global全站設定

Container是Astra顯示內容的區域,將整個頁面包起來的範圍。
內容區域和Sidebar側邊欄一樣是內容的一部分。
內容區域Astra稱為主要內容,而Sidebar側邊欄是輔助內容。

你可以通過外觀 > 自訂 > Global > Container 中的自訂設定選項在整個網站上全站應用內容排版。可以將不同的內容應用於網頁設定各個頁面和文章。
這些是頁面特定的設定,其優先權高於Container (內容排版)設定。

Container Width 內容寬度

內容將在此寬度內顯示。你可以嘗試將寬度與內容排版結合使用以創建不同的視圖。

Container Layout 內容排版

Astra提供4種內容排版。這些是全站內容,將應用於整個網站。
但是你可以使用 Dedicated Container Layout專用內容排版,
為不同的文章類型設定不同的內容排版。
要更好的客製每個網頁上的內容排版,可以引用網頁設定。

以下連結說明了所有內容的排版類型:

  • Boxed 盒裝
  • Content Boxed 內容盒裝
  • Full Width / Contained 全寬/包含
  • Full Width / Stretched 全寬/延伸

Dedicated Container Layout 專用內容排版

以上四種類型的內容排版可分別用於以下文章類型。

舉例你如果選擇預設排版設定為Boxed排版,
但是部落格頁面,選擇 Full Width / Contained(全寬/包含)。
設定之後,除了部落格頁面外的整個網站都是會變成Boxed的排版,
而部落格頁面則會是Full Width / Contained(全寬/包含)的設定。

  • Page Layout 頁面排版 – 僅適用於頁面
  • Blog Post Layout 部落格文章排版 – 用於部落格彙整和單個部落格文章頁面
  • Archives Layout 彙整頁面排版 – 所有統整類的頁面

Astra與一些主流的外掛整合在一起。
安裝這些外掛後,你還可以設定這些外掛頁面的專用內容排版選項。

以下是與Astra整合的外掛列表:

  • WooCommerce
  • LifterLMS
  • LearnDash
  • EDD (Easy Digital Downloads)

重點:
Astra在Astra Pro Addon外掛的專用模組中提供了更多進階選項。
這些選項在Astra Pro Addon外掛的專用模組中可用。

例如:
內容排版可以被網頁設定覆蓋。網頁設定的優先權高於自訂設定。
排版的寬度取決於Astra Pro Addon的Site Layouts 網站排版 設定。


Boxed – Container 內容排版

如全站內容排版章節中所述,通常一個網站可以有兩個內容,即 主要內容 次要內容
主要內容是文字或內容出現的地方,而輔助內容則由側邊欄和側邊欄中的各種不同的小部件組成。
當你選擇 Boxed版型 時;各個內容和小部件將顯示在白框中。
你可以在 外觀 > 自訂 > Global > Container 下找到設定

你可以從 自訂 > Global > Colors > Base Colors > Background Color 更改背景顏色。

其他說明:
你可以將Boxed排版應用於網頁設定中的選定頁面或文章。
排版的寬度取決於 網站排版 設定。
如果你有Astra Pro,則可以通過Astra的 顏色和背景 模組找到其他選項,例如背景色。
如果沒有Astra Pro,也可以使用自定義CSS添加背景圖片。


Content Boxed – Container 內容排版

如全站內容排版章節中所述,通常一個網站可以有兩個內容,即 主要內容 次要內容
主要內容是文字或內容出現的地方,而輔助內容則由側邊欄和側邊欄中的各種不同的小部件組成。
當你選擇 Content Boxed排版 時;只有主內容在白框中出現。側邊欄或輔助內容出現在純背景上。

Content Boxed排版非常適合內容網站、部落格和頁面
在這些網站中,你需要比側邊欄更突出顯示內容區域。
你可以在 外觀 > 自訂 > Global > Container 下找到設定
另外,你可以為網頁設定中的每個頁面應用不同的內容。

其他說明:
你可以將Content Boxed排版應用於網頁設定中的選定頁面或文章。
內容的寬度取決於 網站排版 設定。
如果你具有 Astra Pro外掛 ,則可以通過Astra的 顏色和背景  模組找到其他選項,例如背景色 。
如果沒有Astra Pro,也可以使用自定義CSS添加背景圖片。


Full Width / Contained – Container 內容排版

如全站內容排版章節中所述,通常一個網站可以有兩個內容,即 主要內容 次要內容
主要內容是文字或內容出現的地方,而輔助內容則由側邊欄和側邊欄中的各種不同的小部件組成。

Full Width / Contained 排版將主要和次要內容組合在一起,並以單一格式顯示在單個內容中。
這表示內容和側邊欄將在單個內容中並排顯示。
該內容將以內容的寬度顯示,在內容周圍留有空間。
你可以在 外觀 > 自訂 > Global > Container 下找到設定

Full Width / Contained layout非常適合需要簡潔網站設計,沒有任何背景的網站。
Astra在與某些外掛(例如WooCommerce,LifterLMS等)的整合中將此排版設定為預設排版。

對於諸如Visual Composer之類的頁面編輯器,也建議使用 Full Width / Contained layout 排版;其中頁面編輯器需要主題來控制內容的寬度。


如何在Astra中設定Full-width / Stretched內容排版?

如全站內容排版章節中所述,通常一個網站可以有兩個內容,即 主要內容 次要內容
主要內容是文字或內容出現的地方,而輔助內容則由側邊欄和側邊欄中的各種不同的小部件組成。

Full Width / Stretched 排版將主內容和輔助內容合併,並在單個內容中顯示。
並且內容的寬度拉伸到最大。由於內容的寬度被拉長,因此內容與瀏覽器的寬度邊到邊延伸。

你可以在 外觀 > 自訂 > Global > Container 下找到設定
由於主內容佔據了整個瀏覽器,因此在 Full Width / Stretched 排版中沒有用到背景色。
這些排版最適合與頁面編輯器(例如Beaver Builder,Elementor等)配合使用,你可以在其中使用頁面編輯器設定內容寬度。

Astra在Astra Pro Addon 外掛的專用模組中提供了更多樣式選項 。
了解有關 Astra Pro Addon的Site Layouts 網站排版 模組的更多資訊 。

2 thoughts on “Astra主題教學指南-Global全站文字-顏色-內容設定”

  1. Pingback: Astra主題教學指南-LearnDash設定 – Ez2.HELP

  2. Pingback: Astra Pro模組教學指南-Colors & Background顏色背景設定 – Ez2.HELP

Leave a Comment

Shopping Cart
回到頂端
Malcare WordPress Security