04- Astra主题快速入门(文末有福利)

Astra主题介绍

Astra主题是一个轻量化可高度定制的免费主题,可以用于构建Blog博客网站、B2B企业门户网站,还可以与 Woocommerce结合构建B2C在线商城网站、在线教学网站等。

在wordpress主题市场中Astra有超过100w安装量,仅次于wordpress自带的主题。且该主题的rate评价常年稳居5星,足以见Astra主题的受欢迎程度。

安装方法

直接在wordpress主题市场中搜索Astra,即可找到astra主题。

mark

安装完Astra主题后,建议删除其他主题,加快网站加载速度,减少安全漏洞。

在上一节中讲到了主题最重要的两个作用:

  1. 为页面元素提供缺省的样式设置(字体大小,颜色,页面宽度等)
  2. 网页模板

接下来我们分别从这两个方面了解Astra主题怎么使用。

网站通用设置

网页是由文字、标题、图片、按钮等各种网页元素排列组合而成。这些元素的样式在主题中默认都有一个缺省的样式,如正文的字体大小、类型、颜色等。大部分的主题同时也会提供了一些设置选项用于改变这些通用元素的样式。

制作具体页面时如果不单独指定元素的样式,则会继承主题中定义好的样式。

在astra主题中对应为Global菜单下的选项:

mark

字体Typography

用于控制所有页面默认的字体显示,包括字体类型(font-family)、大小(size)、字重(weight)等。

mark

字体类型(family)默认为inherit继承,表示网页最终显示的字体由用户电脑中自带的字体类型决定。也可以根据设计需要进行自定义。

如用国内网站主机,则不建议使用Google字体,由于FW的存在,使用谷歌字体后网站打开会很慢。

关于字体设置的一些设置参考:

Global设置项选项和推荐参数说明
正文字体Family font:inherit(继承)
Size(字号): 16-18px
Line Height(行高): 1.8
网站正文文字样式
Heading 标题H1:36px
H2:28px
H3:20px
标题的字体样式设置

如需了解其它网页中使用的字体参数,可借助Chrome浏览器中的whatfont插件进行字体参数识别。

mark

颜色Colors

用于控制网站的整体颜色显示,包括字体颜色、链接颜色、主题颜色等。具体的选项和作用范围可参考下图。

mark

容器Container模型

用于控制网页的整体布局样式和内容容器宽度。

Astra提供了4种类型的Layout布局:

  • Boxed盒子模型: 内容容器宽度由width参数决定,但只有主体内容区域以box盒子形式突出(白底)。
mark
  • Content Boxed内容盒子模型:内容容器宽度由width参数决定,主体内容和sidebar侧边栏都以盒子形式突出(白底)。
mark
  • Full Width / Contained模型:整个页面宽度全部被占用,但页面的主要的内容仍然受width参数限制,两侧由空白填充。
mark
  • Full Width / Stretched:整个页面宽度全部被占用,且页面的主要的内容不受width参数限制,填充整行空间。
mark

可以分别对Page页面、Post文章页面、Archive归档页设置不同的页面布局(layout)。

mark

关于page、post、archive页面的区别可参考下一章节内容。

按钮Buttons

控制按钮元素的显示样式。

mark

模板设置

Astra主题默认的Page页面样式如下图所示,橙色区域为Page页面的页面模板内容,所有新建的page页面都根据页面模板进行布局显示。

mark

模板中显示的内容由以下三部分组成:

Header页头部分

可设置网站的Logo、导航菜单以及添加一个自定义的功能组件。

mark

导航菜单的自定义需回到显示(appearance)下面的菜单(Menu)选项进行设置。

mark

侧边栏区域

用于控制页面是否显示侧边栏(sidebar)区域,以及宽度和位置。可分别对不同的网页类型设置不同的侧边栏选项。

mark

侧边栏区域只允许添加小工具(widget),小工具的添加和删除可参考下图:

mark

Footer页脚区域

用于设置网站版权申明和添加Footer Bar小组件。

mark

页面独立设置

网页模板的修改是全局的,会影响所有的网页的显示样式。如果只想修改某个页面的header、sidebar、footer的显示属性该怎么处理?

Astra主题为每个网页提供了独立的选项,可用于单独设置模板中内容的显示。创建新页面时,在页面的右侧区域有个Astra settings的选项,可单独控制该页面是否显示header、sidebar、footer等内容。

mark

Pro高级功能

以上的设置选项基本涵盖了大部分网站常用的设置。如还需更精细地控制网页的模板设置,可参考Astra的Pro版本(收费)。

在pro版本,提供了更多的可选项,同时增加了一些额外功能,如固定头部栏、Scroll to top等功能,有需要的话可以登陆Astra官网了解。

mark

福利:关注公众号后,输入“astra高级版”,我会赠送您一个正版的astra pro高级版终生授权,仅限一个网站。

最新WordPress5完整教程列表

End
Share on facebook
Facebook
Share on email
Email
Share on linkedin
LinkedIn

这篇文章有用吗?

平均评分 5 / 5. 投票数: 5

本文目录:

Subscribe
提醒
0 Comments
Inline Feedbacks
View all comments
Scroll to Top
TTVPS公众号

欢迎关注TTVPS公众号,
一起交流探讨最新的外贸营销技术!