别再忽视页眉页脚!90% 网站专业感都败在这一步

想让页面看起来更专业、有品牌感,页眉(Header)和页脚(Footer)一定不能忽视。整个设置过程不用动一点代码。本文通过 Astra 主题内建的自定义工具,轻松设计出符合网站需求的页眉和页脚布局。

20250730155907241-image

一、为什么要自定义页眉和页脚?

页眉页脚虽然不起眼,却是提升网站专业度和用户体验的关键位置:

  • 页眉是品牌第一眼印象,常用于展示 Logo、菜单、联系方式等;
  • 页脚通常包含版权信息、快速链接、社交图标或订阅表单等;
  • 定制后的结构更符合品牌调性,也有助于 SEO 和转化率提升。

二、使用 Astra 自带的“自定义器”编辑页眉页脚(推荐方法)

Astra 提供了强大的可视化自定义器,适用于绝大多数用户。

1. 打开自定义器

进入 WordPress 后台:

依次点击:外观 > 自定义

20250731152331379-image

2. 定制页眉(Header)

在自定义器中,点击“页眉”模块。

可以看到三个区域:

  • Site Title & Logo
  • Primary Menu
  • Social
20250731153434621-image

可自定义内容:

  • 上传网站 Logo
  • 设置主菜单
  • 添加社交图标
20250731153707242-image

3. 自定义页脚(Footer)

点击“页脚(Footer)”模块进入编辑后,可以看到 Astra 主题内置的页脚构建器(Footer Builder)。

可以自由添加模块并排布,页脚分为多个可编辑区域(行与列),每列可插入一个或多个元素。

可插入内容包括:

  • 版权信息(Copyright)
  • 语言切换器(Language Switcher)
  • 社交图标(Social)
  • 小工具区域(Widget 1–4)
  • 自定义 HTML、文本等内容
20250731155139606-image

可操作内容:

  • 拖拽布局:设置单栏、双栏或三栏结构
20250731155518998-image
  • 响应式布局:适配桌面、平板与移动端显示
20250731155558907-image

三、常见问题解答


Q1:自定义器中添加的菜单无法点击怎么办?

确认“菜单”模块已关联正确的菜单(外观 > 菜单),并检查是否启用了响应式设计设置。


Q2:页脚显示英文?如何改成中文?

Astra 默认有些模板是英文,进入页脚栏修改对应文字即可;主题语言包问题,可通过 Loco Translate 插件翻译。


Q3:移动端菜单错位?

建议开启 Astra 的“移动端菜单样式”,并通过自定义器进行专门布局调整,确保按钮大小、颜色、间距合理。

四、结语

页眉和页脚虽然不起眼,却是提升网站专业感和用户体验的关键。使用 Astra 自带功能快速设置 Logo、菜单、社交图标等,就可以打造出外观统一、功能完善的专业网站结构。


了解 宝藏号 的更多信息

订阅后即可通过电子邮件收到最新文章。

© 版权声明

相关文章

暂无评论

none
暂无评论...

了解 宝藏号 的更多信息

立即订阅以继续阅读并访问完整档案。

继续阅读