Astra Pro模組教學指南-Site Layout設定

Site Layout 網站排版概述

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

使用 Site Layout 模組創建網站排版的快速步驟:
步驟1:確保已安裝並啟用了Astra Pro Addon外掛。
步驟2:WordPress控制台 > 外觀 > Astra Options下啟用模組
步驟3:訪問控制台 [ 外觀 > Astra Options > Global> Container> Site Layout ]以獲得網站設計排版選項和設定

你可以從 外觀 > Astra Options > Site Layout 啟用該模組 

使用 Site Layout 模組,你可以管理網站的整體排版。

啟用模組後,你可以在 外觀 > 自訂 > Global > Container > Site Layout 下找到網站設計的排版設定。

選擇的排版將應用於網頁設計的外部包裝。
預設排版為 Full Width全寬 。
網站排版模組中可用的選項會在下面的各個分節中進行說明。

  • Full-Width Layout
  • Max Width Layout
  • Padded Layout
  • Fluid Layout

Full Width Site Layout 全寬網站排版

網站通常具有主要包裝,後面跟隨排版。

  • 整個網站的主要包裝包括頁首、內容、側邊欄和頁尾;
  • 排版是包含內容和側邊欄的次要包裝。

當你選擇 Full Width Site Layout 時,網站的主畫面就會貼合瀏覽器的邊緣到邊緣。
而內容是由排版寬度來訂定的。

你可以在 外觀 > 自訂 > Global > Container > Site Layout排版下找到用於管理Full Width Site Layout的設定。


Max Width Site Layout 最大寬度網站排版

網頁設計通常具有主要包裝,後面跟隨排版。
整個網站的主要包裝包括頁首、內容、側邊欄和頁尾;
排版是包含內容和側邊欄的次要包裝。

在 Max Width Site Layout 中,網站的主包裝設定為某個最大寬度。
Astra還為你提供了控制頂部和底部間距的設定,
因此你可以將網站設計為看起來像一個實際的框架。

你可以在 外觀 > 自訂 > Global > Container > Site Layout 下找到用於管理 Max Width Site Layout 的設定

其他說明:
如果從Astra Pro啟用了Colors and Background 模組,
則可以選擇在以下位置為整個網站設定背景圖片

請參考– 如何為網站設定背景圖片?


Fluid Site Layout 流體網站排版

使用Astra啟用Fluid Site Layout的快速步驟

步驟1:確保已安裝並啟用Astra Pro Addon外掛。
步驟2:WordPress控制台 > 外觀 > Astra Options下啟用Site Layout模組。
步驟3:訪問控制台 [ 外觀 > 自訂 > Global > Container > Site Layout ],然後選擇Fluid Site Layout設定。

顧名思義,當啟用Fluid Site Layout時,在所有屏幕尺寸下,
整個網站不管瀏覽器大小邊框都會固定間距。

如果你的網站上有很多內容;例如部落格、線上雜誌等
如果你需要整個網站(包括頁首、頁尾和主要內容區域)在所有螢幕尺寸瀏覽器上都要使用
那麼 Fluid Site Layout 非常適合你。

Fluid Site Layout的設定可以在 外觀 > 自訂 > Global > Container > Site Layout下找到

Astra提供了管理左側和右側Padding內距的選項。
在響應式裝置上,此Padding內距都是自動調整的。


Padded Site Layout 內距網站排版

從技術上講, Padded 只是 Full-Width Site Layout,帶有用於跨網站邊緣進行內距的選項。

即使使用者換螢幕裝置,內距也保持一樣,
因此,它可以為網站提供簡潔的框架設計,這在許多創意網站上都可以看到。

你可以在 外觀 > 自訂 > Global > Container > Site Layout 找到設定

小提醒:Padded layouts在Full Width / Stretched時效果最佳。
你可以為不同的裝置獨立管理內距,因為Astra提供了這種靈活性。

這是Astra使用Padded Site Layout選項的示範網站:https ://websitedemos.net/plant-shop-03/

其他說明:
如果從Astra Pro啟用了 顏色和背景 模組,則可以在
請參閱-如何為該網站設定背景圖片下為整個網路行銷網站設定背景圖片

延伸閱讀:
了解有關行銷網站中常用的購物車系統,
WooCommerce電子商務與Astra整合概述的更多資訊
Astra Pro 通過WooCommerce模組擴展網站商店選項。

Leave a Comment

Shopping Cart
回到頂端
Malcare WordPress Security