Astra Pro Footer Widgets 模块与页脚固定设置教程

在网站设计中,页脚不仅是关键信息的展示区域,更是体现整体设计美学的重要元素。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 代码,页脚展示位置也变得更加规范。这个组合非常适合用于博客、电商网站或企业官网的页面构建。

相关文章

Leave a Reply

您的电子邮箱地址不会被公开。 必填项已用 * 标注