2026年8月25日

Astra 主题安装后,手把手教你完成 Astra 主题设置

Astra Pro 值得买吗

我们利用 Astra 自带的功能组件 导入 Astra 主题及模版数据但大部分人并不知道下一步要如何展开。今天我们就来聊一下,如何修改 Astra 主题设置。

Astra 主题设置教程:设置网站的基本内容、设置网站的导航信息、设置网站的底部信息

自定义 Astra 主题,修改网站基本信息

Astra主题设置的入口

通过 Astra -> 自定义 外观 -> 自定义 都可以设置 Astra 主题。

Astra 主题全局设置

进入主题设置管理页,映入眼帘左侧对应的是主题设置功能栏,右侧对应的页面展示效果及内容信息。

修改主题的流程:全局设置、页眉设置(导航)一步步进行下去。当然并不是所有的功能都要设置哦~

Astra 主题全局设置

全局设置功能包括:字体网站的主色调页面布局结构按钮

Astra 字体设置

我们在安装主题第一步也会让我们选择使用哪种字体。如果当时没有设置,我们可以在这里重新设置。字体的样式、H1 ~ H6 号字体 、文本字体等字体大小、粗细、间距都可以自定义。

Astra 主题 H1 字体设置

例如,我们想要修改 H1 标签字体大小。通常使用的单位为 px 像素;调整数值大小时,右侧页面展示屏中,H1 标签的字体会跟着放大和缩小,非 H1 标签字体不会发生改变哦!修改完后,不要忘记点击左侧顶部的保存按钮。

我们的建议:最好同时打开其他浏览器,保存完后刷新其他浏览器立刻查看效果哦~

设置网站的主色调

不同的行业对网站颜色有不同的要求,例如,医疗行业喜欢用淡蓝绿色白色、制造业喜欢用深蓝藏青橙色;Astra 全局调色板设置,可以随心所欲修改网站色调来满足用户需求。

Astra 全局调色板设置
设置色号ID

Astra 调色板可以设置:网站的背景、文本、链接、边框等颜色;点击 “ 铅笔 ” 按钮,系统预设了 10 种的配色方案。对色调要求较高的用户,可点击圆形的(色号方案)按钮,逐个修改色号值 (替换掉 #E0102F 即可); 

Color Hunt 调色板网站

推荐大家一个不错的调色板网站:ColorHunt

在线网站取色器

再提供一个在线取色器网站,鼠标点击任意位置即可获得色号!JYShare 在线取色器网站

页面全局布局 & 容器结构的设置

Astra 全局网站结构设置

免费版:设置容器宽度布局(页面或文章中使用了容器的宽度),当我们选择较窄的宽度时,文章页宽度会随之变窄。容器宽度 1200px 是常见的设置方式,左右流出空白区域,最高宽度是 1600px 全屏展示。

付费版:目前没有Astra Pro 付费版,无法给到更多设置建议。

网站页眉(导航栏目)设置

左侧:修改每个功能模块的具体配置信息。

右侧顶部:导航展示效果,随着页眉的设置而变化。

右侧底部:设置导航栏的摆放位置。

Astra 导航栏目设置

Logo 设置:当前主题使用了透明的 Logo( PNG 格式 );想保持主题样式原汁原味,可以查看 Logo 图的大小和格式,修改一下 Logo 再替换掉。

主菜单设置:用户可自定义主菜单上放哪些内容;通常主菜单包含的内容有:主页、公司介绍、产品信息、新闻文章、联系我们。

二级菜单:如果网站没有那么多内容,可以忽略此设置。

账户:通常 B2B 展示网站不需要用户注册,此功能可以删掉;B2C 的网站可以保留此功能; 

列表页、文章详情页、单页设置(Post Types)

Astra 主题列表页设置

列表页设置:当前这款主题,并没有帮我们创建文章分类,我们手动添加了文章分类并放置到一级导航栏中(见右侧顶部列表页)。当我们修改左侧容器布局,列表页的布局也将跟随调整。系统默认选择第一个,会继承全局的容器设置(见全局容器设置)。可能我表达不够清晰,如有小伙伴没有理解,可以随时咨询我们。

Astra 文章详情页设置

文章页设置:设置的原理与列表页是一样的。想要立刻查看编辑后的效果,可以把单独的文章放在导航中(如图)或者打开其他浏览器访问详情页。左侧是默认设置,继承了容器的较窄的设置方式。

总结

我们了解了 Astra 主题的初始化设置,下一步我们将进一步学习,如何利用 Astra 原生的模版样式制作你的网站页面。

更多插件教程