Astra Pro模組教學指南-Spacing間距設定

Spacing間距模組概述

這是Astra Pro Addon模組提供的一項進階功能。
網站設計要使用這些Pro功能,你需要在你的網路行銷網站上安裝Astra主題以及Astra Pro模組。

Spacing Addon允許你管理Astra可用的各種元件的margin外距和padding內距。
主題的預設值將被在 Spacing Addon 設定中輸入的值覆蓋。

如何使用Spacing附加模組設定間距和內距的快速步驟:

步驟1:確保已安裝並啟用了Astra Pro附加外掛。
步驟2:WordPress控制台 > 外觀 > Astra Options下啟用模組
步驟3:訪問控制台 [ 外觀 > Astra Options > Spacing ] 設定margin和padding

啟用模組後,每個模組的Spacing間距設定將出現在 外觀 > 自訂 中的特定元件設定下

Spacing 間距控制概述:

間距選項中將包含以下控制元件。

Spacing Units 間距單位

你可以根據需要從PX(像素),EM(相對於元件的字體大小),%(百分比)中選擇一個間距單位。

Responsive spacing options 響應間距選項

你可以為響應式裝置設定不同的間距值。
選擇一個裝置並相應地設定間距值。
Top頂部、Right右側、Bottom底部、Left、左側間距
你可以選擇在元件的所有側邊新增間距。

Connector 連接器

你在上面的間距控件旁邊看到的連結圖標是一個連接器。
點擊它時,它將連接所有4個(頂部,右側,底部,左側)間距選項,
允許你通過在4個空格中的任何一個中輸入一個值,同時對所有4個側面應用相同的間距值。
取消選擇時,你將能夠為每側分別新增不同的間距值。

Spacing模組將向控制台中的以下元件新增間距控制選項:

  • Site LOGO
  • Container
  • Header
  • Blog / Archive
  • Sidebar
  • Footer

網站標誌間距控制

這將使你可以在網頁設計LOGO、網站標題和標語等網站標誌周圍新增間距。
你可以在 外觀 > 自訂 > Header Builder > LOGO下找到設定

如果你想進一步了解WordPress網站設計LOGO,請訪問此處


如何使用Astra管理Header中的間距?

在這種情況下,你可以選擇設定頁首排版的間距。

啟用Spacing Addon將為以下Header排版新增選項:

  • Primary Header 主頁首
  • Primary Menu 主選單
  • Above Header 上方頁首
  • Below Header 下方頁首
  • Sticky Header 固定頁首

Primary Header主頁首

可以在 外觀 > 自訂 > Header Builder > Primary Header >Design
找到設定主頁首和主選單/子選單的間距選項

  • Header Space頁首空間–主頁首是顯示你的網站標識和主導航選單的部分。
    你可以在其中的內容周圍設定間距。

筆記:
在Header Builder中Astra還有其他可用元件,例如WooCommerce購物車,EDD購物車
出於同樣的原因,你可能需要新增一些其他外掛。

Primary Menu 主選單

  • Menu Space選單空間–主選單是出現在主頁首內的導航選單。
    為此設定的間距值將用作每個選單項周圍的內距。
    它允許你調整每個選單項之間的空間。
  • Submenu Space子選單空間–為主/子選單設定的間距值用作每個子選單項周圍的內距。

Above Header 上方頁首

該設定將在 外觀 > 自訂 > Header Builder > Above Header 上方提供。
上方頁首空間將從所有側面向上方頁首部分新增內距。

當你為上方頁首中的任一部分選擇選單項目時,上方頁首選單和子選單的間距選項將可見。
內距將與此相關的各個選單項應用。

Below Header 下方頁首

該設定將在 外觀 > 自訂 > Header Builder > Below Header下可用

下方頁首空間將向所有下方的頁首區域新增內距。

當你為下方頁首的任一部分選擇選單項目時,Header選單下方和子選單的間距選項將可見。
內距將與此相關的各個選單項應用。

Sticky Header 固定頁首

預設情況下,網站標識、主頁首和主選單/子選單設定的間距值將應用於Sticky Header。

請注意,當你為 Sticky Header啟用 Shrink Effect縮放效果時,
網站標識、主頁首和主選單/子選單的頂部和底部間距將被刪除。
而左右間距將保持原樣。

Astra在Astra Pro Addon外掛的專用模組中提供了更多樣式選項。
了解有關Astra Pro Addon的Sticky Header模組的更多資訊。


Container Spacing排版間距控制

以下是不同排版版型的間距選項:

Boxed Layout 版型

在 Boxed Layout 中,Outside Container Space值將用作排版的間距。
TOP頂部空間值將允許你管理頁首和排版的頂部邊緣之間的空間。
而Bottom底部空間值將允許你管理頁尾和排版底部邊緣之間的空間。

Inside Container Space將作為內距應用於排版。
它將允許你管理頁面/文章內容與排版邊緣之間的空間。

小提醒:如果啟用了Sidebar側邊欄,則可以從 外觀 > 自訂 > Sidebar管理空間。

Content Boxed Layout 版型

在 Content Boxed Layout 中,Outside Container Space值將作為排版的間距應用。
TOP頂部空間值將允許你管理頁首和排版的頂部邊緣之間的空間。
而Bottom底部空間值將允許你管理頁尾和排版底部邊緣之間的空間。

Inside Container Space將作為內距應用於排版。
它將允許你管理頁面/文章內容與排版邊緣之間的空間。

小提醒:如果啟用了Sidebar側邊欄,則可以從 外觀 > 自訂 > Sidebar管理空間。

Full Width / Contained Layout版型

在 Full Width / Contained Layout 中,Outside Container Space值將用作排版的頂部和底部間距,但不應用在左右側面。

在此排版中,將不應用 Inside Container Space,因為內容將被拉伸到排版的邊緣。

小提醒:如果啟用了Sidebar側邊欄,則可以從 外觀 > 自訂 > Sidebar管理空間。

Full Width / Stretched Layout版型

在 Full Width / Stretched Layout 中,
Outside Container Space和Inside Container Space均不會顯示任何更改,
因為版型及其內容將被從邊到邊拉伸到瀏覽器的寬度。


Footer Spacing頁尾間距控制

它為Footer Builder Widgets頁尾小工具和頁尾欄提供了一個間距選項。

Footer Builder Widgets 頁尾小工具

要訪問這些設定,請導到 外觀 > 自訂 > 小工具 > Footer Builder Widgets
頁尾小工具內距會從所有側面為頁尾新增內距。

小提醒:要將小工具新增到頁尾中,請導航到 外觀 > Footer Builder > Widget 1~4
然後將所需的小工具新增到Footer Builder的Footer上中下區域 。

下方頁尾欄

它將從所有側面向主頁尾(版權區域)新增內距。


Sidebar Spacing側邊欄間距控制

你可以在 外觀 > 自訂 > Sidebar下找到設定

以下是可用的選項:

Outside Sidebar Space 側邊欄外部空間

這將在側欄中的小工具周圍新增空間:

  • Top間距值將在頂部新增間距。
  • Bottom間距值將為整個側欄新增一個底部間距,
    並為側欄內的單個小工具新增一個底部間距。
  • Left 和 Right間距將在整個側邊欄的左側和右側新增內距。

Inside Sidebar Space 側邊欄內部空間

它將向各個小工具新增內距。


如何使用Astra管理部落格頁面上的間距?

你將獲得用於在部落格/彙整頁面上設定文章和分頁間距的選項。
你可以在 外觀 > 自訂 > Blog > Blog / Archive > Design 下找到設定

以下是可用的選項:

Post Pagination Space文章分頁空間

它將從各個方面在分頁選項周圍新增內距。

Outside Post Space文章外部空間

這將從各個方面為單篇文章增加間距。

Inside Post Space文章內部空間

它將為各個文章新增內距。

Leave a Comment

Shopping Cart
回到頂端
Malcare WordPress Security