Astra 主题在免费版本中也提供了丰富的功能,可以帮助你轻松设计出布局清晰、结构丰富、视觉美观且加载速度快的首页。无论是个人博客、公司官网,还是作品展示页面,通过 Astra 的多栏目布局为你呈现出专业而有条理的内容结构。
![图片[1]-使用 Astra 免费版创建多栏目首页布局:详细教程](https://www.361sale.com/wp-content/uploads/2025/07/20250705112950445-image.png)
本文将详细讲解使用 Astra 模板与 WordPress 默认工具,快速打造一个多栏目首页的方法,帮助你全面展示网站的内容与品牌形象,增强整体网站的专业度与吸引力。
1. 为什么选择多栏目布局?
多栏目布局可以帮助网站:
- 展示不同版块内容
- 提高首页信息承载量
- 让访客快速找到所需内容
对于博客、公司官网或个人品牌网站,多栏目布局都是常用的首页结构方案。
![图片[2]-使用 Astra 免费版创建多栏目首页布局:详细教程](https://www.361sale.com/wp-content/uploads/2025/07/20250705113836151-image.png)
2. 进入自定义器设置首页
- 登录 WordPress 后台
- 点击左侧菜单 外观 > 自定义
![图片[3]-使用 Astra 免费版创建多栏目首页布局:详细教程](https://www.361sale.com/wp-content/uploads/2025/07/20250705113951355-image.png)
- 在自定义器中,点击 首页设置(Homepage Settings)
![图片[4]-使用 Astra 免费版创建多栏目首页布局:详细教程](https://www.361sale.com/wp-content/uploads/2025/07/20250705113919432-image.png)
这里可以选择首页显示的内容:
- 最新文章
- 静态页面
如果你想创建一个多栏目首页,建议选择 静态页面,然后指定一个新建的页面作为首页。
![图片[5]-使用 Astra 免费版创建多栏目首页布局:详细教程](https://www.361sale.com/wp-content/uploads/2025/07/20250705134354335-image.png)
3. 创建一个首页页面
- 在后台点击 页面 > 新增页面
![图片[6]-使用 Astra 免费版创建多栏目首页布局:详细教程](https://www.361sale.com/wp-content/uploads/2025/07/20250705134712355-image.png)
- 命名为“首页”
![图片[7]-使用 Astra 免费版创建多栏目首页布局:详细教程](https://www.361sale.com/wp-content/uploads/2025/07/20250705134737805-image.png)
- 在页面属性中,模板选择 Elementor Full Width(若使用 Elementor 编辑器)或保持默认模板
点击 发布。
![图片[8]-使用 Astra 免费版创建多栏目首页布局:详细教程](https://www.361sale.com/wp-content/uploads/2025/07/20250705134845248-image.png)
4. 使用区块编辑器(Gutenberg)创建多栏目布局
即使不使用页面构建器,你也可以用 WordPress 自带的区块编辑器创建多栏目布局。
4.1 添加多列区块
- 点击 编辑页面
- 在编辑器中点击 “+” 添加区块
![图片[9]-使用 Astra 免费版创建多栏目首页布局:详细教程](https://www.361sale.com/wp-content/uploads/2025/07/20250705135042420-image.png)
- 搜索并选择 列(Columns)
![图片[10]-使用 Astra 免费版创建多栏目首页布局:详细教程](https://www.361sale.com/wp-content/uploads/2025/07/20250705135112481-image.png)
4.2 选择列结构
例如:
- 两列等宽
- 三列等宽
- 左窄右宽
![图片[11]-使用 Astra 免费版创建多栏目首页布局:详细教程](https://www.361sale.com/wp-content/uploads/2025/07/20250705135152449-image.png)
选择好后,你可以在每个列中插入:
- 图片
- 文字
- 按钮
- 最新文章模块
![图片[12]-使用 Astra 免费版创建多栏目首页布局:详细教程](https://www.361sale.com/wp-content/uploads/2025/07/20250705135434309-image.png)
4.3 组合多个列区块
为了打造真正的多栏目首页,可以在同一页面添加多个列区块。例如:
- 顶部为横幅图片与欢迎文字
- 第二部分为三列服务介绍
- 第三部分为两列:一侧是最新文章,另一侧是联系方式或表单
5. 使用 Astra 自定义设置增强页面样式
在 外观 > 自定义 > Global(全局)> Container(容器)中,可以设置:
- 页面宽度(全宽或带边距)
![图片[13]-使用 Astra 免费版创建多栏目首页布局:详细教程](https://www.361sale.com/wp-content/uploads/2025/07/20250705135922560-image.png)
在 Post Types > Blog / Archive 中,设置:
- Right Sidebar(右侧边栏)
- No Sidebar(无侧边栏)
- Left Sidebar(左侧边栏)
![图片[14]-使用 Astra 免费版创建多栏目首页布局:详细教程](https://www.361sale.com/wp-content/uploads/2025/07/20250705140328546-image.png)
如果希望首页保持简洁,可隐藏页面标题,让多栏目内容成为视觉焦点。
- 进入 页面 > 所有页面
![图片[15]-使用 Astra 免费版创建多栏目首页布局:详细教程](https://www.361sale.com/wp-content/uploads/2025/07/20250705140531477-image.png)
- 点击首页编辑
![图片[16]-使用 Astra 免费版创建多栏目首页布局:详细教程](https://www.361sale.com/wp-content/uploads/2025/07/20250705140625713-image.png)
- 在页面右侧(或 Gutenberg 编辑器下方)找到 Astra Settings 面板
- 勾选 Disable Banner Area
![图片[17]-使用 Astra 免费版创建多栏目首页布局:详细教程](https://www.361sale.com/wp-content/uploads/2025/07/20250705140919285-image.png)
6. 设置菜单与首页链接
最后,将首页添加到导航菜单:
- 进入 外观 > 菜单
![图片[18]-使用 Astra 免费版创建多栏目首页布局:详细教程](https://www.361sale.com/wp-content/uploads/2025/07/20250705141239681-image.png)
- 勾选“首页”页面,添加到主菜单
![图片[19]-使用 Astra 免费版创建多栏目首页布局:详细教程](https://www.361sale.com/wp-content/uploads/2025/07/20250705141111611-image.png)
- 保存菜单
![图片[20]-使用 Astra 免费版创建多栏目首页布局:详细教程](https://www.361sale.com/wp-content/uploads/2025/07/20250705141207473-image.png)
这样,访客访问网站时就能通过导航栏直接进入你的多栏目首页。
7. 总结
使用 Astra 模板和 WordPress 区块编辑器,可以轻松创建布局丰富的多栏目首页。新建页面,添加列布局,调整排版,并将页面加入菜单,首页结构就搭建完成。这种方式让网站清晰有序,方便访客浏览各个内容版块。
现在就动手设计你的首页,让网站看起来更专业、更吸引人吧。
| 联系我们 | |
|---|---|
| 教程看不懂?联系我们为您免费解答!免费助力个人,小企站点! |
客服微信
|
| ① 电话:020-2206-9892 | |
| ② QQ咨询:1025174874 | |
| ③ 邮件:info@361sale.com | |
| ④ 工作时间:周一至周五,9:30-18:30,节假日休息 | |






















![表情[wozuimei]-光子波动网 | 专业WordPress修复服务,全球范围,快速响应](https://www.361sale.com/wp-content/themes/zibll/img/smilies/wozuimei.gif)
![表情[baoquan]-光子波动网 | 专业WordPress修复服务,全球范围,快速响应](https://www.361sale.com/wp-content/themes/zibll/img/smilies/baoquan.gif)

暂无评论内容