Astra Pro 页脚小工具模块完整教程（含页脚固定设置）

在网站设计中，页脚不仅是关键信息的展示区域，更是体现整体设计美学的重要元素。Astra Pro 提供了一个非常实用的页脚小工具模块，可以帮助你快速构建多样化的页脚区域，并自由控制布局、颜色、字体等元素。本文介绍具体的设置流程，并补充如何让页脚固定在页面底部，避免因为内容太少而出现空白空间。

Footer Widgets 模块介绍

Astra Pro 的页脚小工具模块支持多达 7 种不同布局。你可以根据网站结构或品牌风格选择适合的排列方式，如：

单列布局
两列或三列等并排组合
左右结构不对称分布

模块激活后，在每个区域中都能放置 WordPress 原生小工具，也支持第三方插件提供的内容模块，例如表单、导航、社交图标等。

设置步骤

安装并启用 Astra 主题与 Astra Pro 插件。
进入 WordPress 后台，点击“外观” > “自定义” > “Footer Builder”。
在页脚构建器中选择合适的布局结构。
设置每一栏所需内容：进入“自定义” > “小工具” > “Footer Widget Area”，添加你希望展示的小工具类型。

样式与排版控制

Astra Pro 提供细致的样式设置选项：

内边距：可以分别为页脚区域设置上下左右的留白；

宽度设定：
- 全屏宽度，填满浏览器横向空间；
- 内容宽度，与页面主容器保持一致；

字体：支持为每个小工具的标题与正文设置字体、字号、行高等参数；

背景与颜色：可自定义背景色，也支持上传背景图像。

这些选项有助于实现统一的视觉风格，让页脚更有质感。

页脚固定在页面底部的设置方法

当页面内容过少时，页脚可能会悬空在中间，影响整体排版。

可以添加以下 CSS 代码，让页脚始终贴合在底部，无论页面长度如何都保持在底部显示。

使用的代码如下：

#page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.admin-bar #page {
    min-height: calc(100vh - 32px);
}
#page .site-content {
    flex-grow: 1;
}

添加方式：

打开 WordPress 后台；
点击“外观” > “自定义”；

滚动至最底部找到“额外 CSS”；

将代码粘贴到编辑框中；

点击右上角的“发布”按钮保存。

完成以上操作后，不管页面是否有大量内容，页脚都不会再上浮。

总结

Astra Pro 的页脚模块可以快速搭建结构清晰、视觉统一的页面底部区域。配合简单的 CSS 代码，页脚展示位置也变得更加规范。这个组合非常适合用于博客、电商网站或企业官网的页面构建。

联系我们
教程看不懂？联系我们为您免费解答！免费助力个人，小企站点！	客服微信
① 电话：020-2206-9892
② QQ咨询：1025174874
③ 邮件：info@361sale.com
④ 工作时间：周一至周五，9:30-18:30，节假日休息