在網(wǎng)站布局中，間距會影響頁面內(nèi)容的層次感和可讀性。Astra Pro 插件提供的 Spacing Addon 模塊，能對網(wǎng)站多個核心區(qū)域進(jìn)行邊距與內(nèi)邊距調(diào)整，包括站點(diǎn)標(biāo)識、容器、頁腳和側(cè)邊欄。通過靈活的設(shè)置，讓頁面結(jié)構(gòu)更緊湊、視覺更清爽。

站點(diǎn)標(biāo)識間距設(shè)置

路徑：外觀 > 自定義 > Header > Site Identity

Spacing 模塊支持為站點(diǎn) Logo、標(biāo)題和副標(biāo)題設(shè)置上下左右的外邊距或內(nèi)邊距，使內(nèi)容在頁眉中排列得更有秩序，避免元素之間顯得擁擠或不協(xié)調(diào)。

容器間距設(shè)置

路徑：外觀 > 自定義 > Global > Container

容器是頁面中承載主要內(nèi)容的區(qū)域，例如文章正文、圖片和段落等。Spacing 模塊提供了兩項(xiàng)關(guān)鍵設(shè)置：

• 外部間距：用于調(diào)整容器與頁眉、頁腳之間的垂直間隔
• 內(nèi)部間距：用于控制內(nèi)容與容器邊緣之間的距離

在不同布局下，這些設(shè)置表現(xiàn)形式略有差異：

Boxed 布局

容器有固定寬度，外部間距設(shè)置為 margin，內(nèi)部為 padding。頁面整體呈現(xiàn)居中效果。

Content Boxed 布局

僅內(nèi)容區(qū)域居中，背景可全寬顯示。與 Boxed 類似支持上下左右間距的設(shè)置。

Full Width / Contained 布局

文章頁可設(shè)置頂部和底部的間距，但左右會自動貼邊。

開啟側(cè)邊欄時，間距表現(xiàn)為 padding，關(guān)閉則上下添加 margin。

Full Width / Stretched 布局

內(nèi)容會拉伸至整個瀏覽器寬度，邊距設(shè)置在該模式下不生效，適用于邊界清晰的設(shè)計需求。

頁腳間距設(shè)置

分為兩個區(qū)域可單獨(dú)調(diào)整：

頁腳小工具區(qū)域

路徑：外觀 > 自定義 > Footer > Footer Widgets

為每個小工具模塊設(shè)置四邊的內(nèi)邊距，避免內(nèi)容緊貼邊界，保持視覺良好的排版效果。

頁腳底部區(qū)域

路徑：外觀 > 自定義 > Footer > Footer Bar

用于設(shè)置底部版權(quán)區(qū)域的邊距，讓文字、社交圖標(biāo)或其他內(nèi)容不會顯得過于靠邊。

側(cè)邊欄間距設(shè)置

路徑：外觀 > 自定義 > Sidebar > Design

Spacing 模塊支持控制整個側(cè)邊欄與頁面主體之間的上下左右空間，同時可為每個小工具單獨(dú)添加內(nèi)邊距。例如：

• 外部間距：頂部與底部使用 margin，左右添加 padding

• 內(nèi)部間距：每個小工具模塊內(nèi)部四邊空間可獨(dú)立設(shè)置，內(nèi)容不會靠得過近

這種精細(xì)控制，能讓側(cè)邊欄中的導(dǎo)航、搜索、廣告模塊等內(nèi)容看起來更加清晰有序。

總結(jié)

Spacing Addon 是提升頁面布局能力的重要工具。通過為各部分添加合適的邊距，可使整體排版更具條理感，改善閱讀環(huán)境，并增強(qiáng)視覺引導(dǎo)力。搭配 Astra 主題本身的模塊化設(shè)置方式，能夠輕松打造出結(jié)構(gòu)清晰、節(jié)奏舒適的頁面效果。

相關(guān)文章

聯(lián)系我們
教程看不懂？聯(lián)系我們?yōu)槟赓M(fèi)解答！免費(fèi)助力個人，小企站點(diǎn)！	客服微信
① 電話：020-2206-9892
② QQ咨詢：1025174874
③ 郵件：info@361sale.com
④ 工作時間：周一至周五，9:30-18:30，節(jié)假日休息