Astra Pro 间距模块详解：全面掌控站点边距与排版空间

在网站布局中，间距会影响页面内容的层次感和可读性。Astra Pro 插件提供的 Spacing Addon 模块，能对网站多个核心区域进行边距与内边距调整，包括站点标识、容器、页脚和侧边栏。通过灵活的设置，让页面结构更紧凑、视觉更清爽。

站点标识间距设置

路径：外观 > 自定义 > Header > Site Identity

Spacing 模块支持为站点 Logo、标题和副标题设置上下左右的外边距或内边距，使内容在页眉中排列得更有秩序，避免元素之间显得拥挤或不协调。

容器间距设置

路径：外观 > 自定义 > Global > Container

容器是页面中承载主要内容的区域，例如文章正文、图片和段落等。Spacing 模块提供了两项关键设置：

• 外部间距：用于调整容器与页眉、页脚之间的垂直间隔
• 内部间距：用于控制内容与容器边缘之间的距离

在不同布局下，这些设置表现形式略有差异：

Boxed 布局

容器有固定宽度，外部间距设置为 margin，内部为 padding。页面整体呈现居中效果。

Content Boxed 布局

仅内容区域居中，背景可全宽显示。与 Boxed 类似支持上下左右间距的设置。

Full Width / Contained 布局

文章页可设置顶部和底部的间距，但左右会自动贴边。

开启侧边栏时，间距表现为 padding，关闭则上下添加 margin。

Full Width / Stretched 布局

内容会拉伸至整个浏览器宽度，边距设置在该模式下不生效，适用于边界清晰的设计需求。

页脚间距设置

分为两个区域可单独调整：

页脚小工具区域

路径：外观 > 自定义 > Footer > Footer Widgets

为每个小工具模块设置四边的内边距，避免内容紧贴边界，保持视觉良好的排版效果。

页脚底部区域

路径：外观 > 自定义 > Footer > Footer Bar

用于设置底部版权区域的边距，让文字、社交图标或其他内容不会显得过于靠边。

侧边栏间距设置

路径：外观 > 自定义 > Sidebar > Design

Spacing 模块支持控制整个侧边栏与页面主体之间的上下左右空间，同时可为每个小工具单独添加内边距。例如：

• 外部间距：顶部与底部使用 margin，左右添加 padding

• 内部间距：每个小工具模块内部四边空间可独立设置，内容不会靠得过近

这种精细控制，能让侧边栏中的导航、搜索、广告模块等内容看起来更加清晰有序。

总结

Spacing Addon 是提升页面布局能力的重要工具。通过为各部分添加合适的边距，可使整体排版更具条理感，改善阅读环境，并增强视觉引导力。搭配 Astra 主题本身的模块化设置方式，能够轻松打造出结构清晰、节奏舒适的页面效果。

相关文章