所有分类
  • 所有分类
  • WP插件Pro
  • HTML模板
  • 微信小程序模板
  • 源码

Astra Pro Theme 教程:WordPress 主题入门到专家(完整指南)

这是一篇 Astra Pro Theme 教程,带你掌握 Astra 进阶版主题。

Astra 是一款优质轻量级且多功能的 WordPress 主题,不论是新手或是有一定程度的 WordPress 玩家,使用它都是很棒的选择。

如果对 Astra 还不熟悉的话,建议先阅读 Astra 主题入门,再来看这篇文章,会学的更全面唷。

这篇文章主要会对 Astra 进阶版,进行功能教程。 从方案选择 > 购买安装 > 功能详解,让你全面掌握。 章节如下:

  • 1. Astra 主题是什么?
  • 2. 高级方案如何选择?
  • 3. 高级方案购买+安装
  • 4. 启用 Astra Pro Theme 功能
  • 排版样式 Typography
  • 色彩及背景 Color & Background
  • 间距 Spacing
  • 网站文章扩充功能Blog Pro
  • 手机页首 Mobile Header
  • 导览选单 Nav Menu
  • 固定式页首 Sticky Header
  • 页面页首 Page Headers
  • 自订版面配置 Custom Layouts
  • 网站版面配置 Site Layouts
  • 页尾小工具 Footer Widgets
  • 返回顶端 Scroll To Top
  • 电商功能 WooCommerce
  • 进阶模板 Premium Starter Templates
  • 作品集功能 WP Portfolio Plugin
  • 终极扩充功能 Ultimate Addons for Elementor
  • 白色标签 / 自定义品牌 White Label
  • Spectra 页面编辑器
  • Astra 进阶版方案,更多教程?
  • WordPress 学习资源

准备好了吗? 我们开始吧:)


1. Astra 主题是什么?

wordpress主题主题 :Astra 教程推荐wordpress主题主题 :Astra 教程推荐
wordpress主题主题 :Astra 教程推荐

Astra 是 Brainstorm Force 开发的主题,你无需会任何编码,就可完美的 WordPress 网站制作,有免费版&进阶版可使用。 更多 Astra 主题教程。

它是多功能的 WordPress 主题,不论是 Blog 建立、企业形象网站、电商购物网站、在线课程网站、预约网站 等 .. ,或是其他常见类型, Astra Theme 几乎都能帮助你完成。

Astra Theme 内建多种主题样板

Astra 有提供 Starter Templates 插件,里面有 70 多种样板风格,一键安装就能快速架站,非常的方便。 免费版也有 30 多种可使用。

Astra 的 Starter Templates 插件,提供多种样板安装
Astra 的 Starter Templates 插件,提供多种样板安装

Astra 会如此流行的原因,其中一点是它对主流的 WordPress 可视化编辑器,有着完美的兼容。

像是 Elementor、Beaver Builder、Gutenberg 等 .. ,可用这些页面编辑器搭配 Astra 主题,完整制作个人或公司品牌网站。 更多 Elementor 教程。

Astra 主题速度评测

有关于主题速度表现,轻量的主题主题、禁用 Jquery、优质的程序编码,都是 Astra 速度优于其他主题原因。

这让 Astra 在多个速度评测软件上,都获得了优异的表现。

Astra 主题,多种速度软评测,优异速度
Astra 主题,多种速度软评测,优异速度

Astra 多种布局调整功能

Astra 有多种自定义选项,可充分设定网页布局,让你的网站更像是定制的效果。

有提供网站页首/页尾修改、主视觉颜色调整、字体字型调整、菜单布局调整、各页面版面配置等 ..,轻量但精悍。

Astra Theme 輕量級 WordPress 主題

这意味着,你可以做大方向的调整,把网站设计成喜爱的样子。

Astra 也支持电脑、平板、手机的即时预览模式,加上有可视化编辑效果,编辑起来更快速。

简单来说,Astra 是多功能轻量级主题,支持主流页面编辑器,绝对是值得使用的一款优质主题!


2. 高级方案如何选择?

这章节是写给有 Astra 进阶版需求的读者,我会帮助你选择适合的方案,可在有限的预算内,最大化 Astra 主题价值。

首先,前往 Astra 的方案页面,往下滑会看到 Astra 进阶方案。

前往 Astra 方案页面

如果不知道如何选择最适合你,下面我会给你一些 Astra 的方案建议。

Astra Theme 高级版方案一览
Astra Theme 高级版方案一览

Astra 有提供哪几种方案?

Astra 进阶版 提供 3 种选择,分别是 Astra Pro 专业版、Essential Bundle 必备套装、Growth Bundle 成长套装。

一次看懂 Astra 进阶版方案的功能
一次看懂 Astra 进阶版方案的功能

依照不同的方案,全都享有 Astra Pro 所有功能,且能应用在无限数量的网站。

Astra Pro 功能,像是页面多种布局、颜色字体扩充、手机版功能扩充、页面间距控制、WooCommerce 电商功能扩充等 .. 。 (还有很多没列出来)

Astra教程 :Astra Pro 多种网页设计功能(仅部分功能截图)
Astra Pro 多种网页设计功能(仅部分功能截图)

而 Essential Bundle 方案,增加了 WP Portfolio 作品集插件、Ultimate Addons for Elementor 终极扩充功能、Premium Starter Templates 超过 180 种以上的高阶入门模板,这 3 种主要功能。

  • WP Portfolio:制作网站作品集、展示页面、服务案例等 .. 专用插件,可参考 WP Portfolio 教程。
  • Ultimate Addons for Elementor:在 Elementor 上新增 40+ 个元素功能、100+ 网站模板、200+ 区块模板,可参考 UAE 教程。
  • Premium Starter Templates:有更多 Astra 进阶模板可使用,可参考 Premium Starter Templates 教程。

这些是 Astra Pro 方案和 Essential Bundle 方案,之间最主要的差异。

要选择哪种 Astra 方案?

Astra 进阶版方案,有提供年费制和终身买断(只需付款一次,终身享有免费升级),点击按钮就可切换。

Essential Bundle 方案是优先选择,除了有更多页面编辑器元素可用,还多了作品集制作插件、更多专业优质模板,功能会来的更全面。

如果是预算有限的人,可先从 Astra Pro 方案入手,因为费用最便宜,且能使用大部分的 Astra 进阶功能。

前往 Astra 方案页面

选择好心仪的 Astra 方案了吗?

接下来我将示范如何购买+安装 Astra 进阶版,就能使用更多实用的主题功能啰:)


3. 高级方案购买+安装

选择好心目中的进阶方案,就可以来购买+安装 Astra 主题了。

下面会用年租制的 Essential Bundle 方案当范例,因为会教程的比较全面,分成 3 步骤完成(选择适合自己的就好)。

Step1:前往 Astra 购买主题

首先,前往 Astra 的方案页面,往下滑会看到 Astra 进阶版方案。

前往 Astra 方案页面

下图按钮可切换年租制 or 终身买断(只需付款一次,终身享有免费升级)。

Astra 进阶版方案一览
Astra 进阶版方案一览

选择常使用的页面编辑器,这边我选 Elementor。

选择 Mini Agency Bundle 的 Elementor 页面编辑器
选择 Mini Agency Bundle 的 Elementor 页面编辑器

然后输入购买信息,这里的 Email 是之后的登录帐号,Password 是登录密码,请妥善保存。

确认金额后送出。

Astra 结账信息
Astra 结账信息

这样就购买完成啰,Astra 也会寄封 Email 通知购买完成。

Step2:Astra 主题安装+启用

点击 Astra 官网 上方菜单的 My Account > Downloads,会前往到 Brainstorm Force(头脑风暴部队)网站的登录页面。

如果找不到路径,前往 Astra 官网滑到网站页尾(最底端)也会看到 Downloads 按钮。

前往并输入刚购买注册的账号&密码,然后登入。

前往 Astra 官网,找到 Download。
前往 Astra 官网,找到 Download。

備註:Brainstorm Force(頭腦風暴部隊)是 Astra 主題的開發商,公司旗下還有其他 WordPress 相關軟體。

用購買 Essential Bundle 方案來說,會看到幾種可下載產品(如果是購買 Astra Pro 方案,僅會看到 Astra Pro 產品)。

  • Premium Starter Templates:Astra 進階模板插件。
  • Astra Pro:Astra 專業版功能。
  • Ultimate Addons for Elementor: Elementor 功能扩充插件。
  • WP Portfolio: Astra 作品集制作插件。

这里仅示范安装 Astra Pro 功能,其他产品功能,可参考对应章节,进行安装&学习。

Astra Pro 的 Astra Theme、Astra Child Theme、Astra Pro Addon Plugin,是等下会用到的资源,可以先下载下来,下面有安装教程。

Astra Pro 购买后,可下载项目

Astra Theme 主题安装

先下载 Astra Theme 主题。 然后前往 WordPress 后台 > 外观 > 主题主题 」,点击安装主题主题 。

前往 WordPress 安装主题主题
前往 WordPress 安装主题主题

上传 Astra Theme 主题,安装后先不要启用,留着就好。

上传 WordPress 第三方主题
上传 WordPress 第三方主题

Astra Child Theme 子主题安装

再来,下载 Astra Child Theme 子主题,可任意命名子主题名称,也可参考我的命名。

点击 Generate 按钮下载。

下载&命名 Astra 子主题
下载&命名 Astra 子主题

使用子主题好处:

因为主题都会进行升级&维护,如果有些程序码改在原主题上,就可能会被还原掉。

所以有些人会使用子主题方式,保持住自己设定的代码(或功能设定),而不用再重新做一次。

跟上面安装主题流程一样,前往 WordPress 后台,把子主题上传安装,只是这次需点 启用

启用 Astra 子主题
启用 Astra 子主题

到此步骤,应该会看到有两个 Astra 主题,分别是 Astra 主题& Astra 子主题,而 Astra 子主题也有正常启用,这是完成图。

Astra 子主题顺利启用
Astra 子主题顺利启用

备注:原主题&子主题只能择一启用,上面示范的是启用子主题。

Astra Pro Addon Plugin 扩充插件安装

再来安装 Astra Pro 扩充插件的部分。

首先,下载 Astra Pro Addon Plugin 插件,需注意此套件是 WordPress 插件,而不是主题主题,所以安装地方会不一样。

然后,前往“ WordPress 后台 > 插件 > 安装插件 ”,点“ 上传插件 ”进行安装,安装后就直接“ 启用 。

安装 Astra Pro 扩充插件
安装 Astra Pro 扩充插件

这样 Astra Pro 插件就安装+启用成功啰。

Astra Pro 插件启用
Astra Pro 插件启用

Step3:输入 Astra Pro 凭证+启用功能

这步骤,需输入 Astra 启用凭证,确保是有真实购买 Astra 这款主题。

前往Brainstorm Force的 Account > Licenses (可从 Astra 官网 前往&登入会员,跟刚刚 Downloads 产品是同个网站)。

前往 brainstormforce 的凭证专区
前往 brainstormforce 的凭证专区

会看到刚购买的 Astra Pro 凭证(需是登录状态),把它复制下来。

Astra 复制使用证书
Astra 复制使用证书

前往后台点选 Astra,滑到最底部页面就会看到 Your License,输入 Astra 凭证& Activate 启用凭证。

Astra 证书启用成功!
Astra 证书启用成功!

证书输入完成后,再点选 Activate All,就可以使用所有的 Astra Pro 功能啰! 恭喜大家!

Astra 启用凭证&启用进阶功能

以上就是 Astra 进阶版主题,从「购买 > 安装 > 启用凭证」的完整流程。

有关于 Essential Bundle 方案的下载安装、凭证启用、功能使用,可参考 Astra Pro Theme 教程文章,找到对应章节学习:)


4. 启用 Astra Pro Theme 功能

启用 Astra Pro 功能前,请确保有购买 Astra 进阶版方案,下面的功能才能正常启用唷(免费版是不能启用的)。

还有,需完成相关安装&凭证激活,上面都有提到,照着流程走应该都没问题。

前置作业搞定后,前往后台直接点选 Astra,就会看到 Astra Pro 版 Modules,点 Activate All 启用全部模块,才能使用接下来的教程功能,可点击查看astra教程视频

启用所有的 Astra Pro 功能
启用所有的 Astra Pro 功能

接下来,我会对 Astra Pro 进阶版,进行相关的功能教程,不会百分百都介绍(怕篇幅太长),但大致上的功能都会进来。

然后后面章节,会特别介绍Mini Agency Bundle方案才有的功能,如果是购买此方案的,也可以学习的到。

那我們開始吧:)


排版样式 Typography

Astra 免费版就有许多文字样式可调整,前往「全局 > 排版样式 」,即可做设定。 相关教程可看 Astra 主题入门。

全局(Global)是指全站通用的文字设定,至于下面的文字设定教程,如果有设定就会覆盖上去,没有的话就会维持预设。

Astra Pro 进阶版的排版样式,则是对不同项目做了更多的文字样式的设定扩充,可以管理整个网站的字体,提供设定网站排版的完全控制权。

Astra Pro 教程:更多文字样式的设定扩充
更多文字样式的设定扩充

按钮文字设定

前往全局>按钮,这里可细调按钮文字的相关设定,更能设计出良好的行动呼吁按钮(CTA)。

按钮文字设定
按钮文字设定

内文字型&标题字体设置

前往全局 >排版样式 ,可以针对 H1 ~H6 字体进行详细调整。

如果想要针对单一文章的字体设定,直接点击该篇文章的编辑文章就能设定单一文章的标题文字样式。

信息栏的字体排版

前往信息栏 > DESIGN ,即可设定信息栏的标题字体、内容字形,还能细调尺寸大小。

进阶还提供外侧与内侧的间距调整,可以针对顶端、右侧、底端、左侧进行微调。

网站文章的字体排版

前往网站文章 > 网站文章/汇整> DESIGN 」,即可修改网站文章标题、元数据、页数的字体。

进阶版还能排版设定文章的外侧、内部、页数的间距。

Astra Pro 教程:网站文章的字体排版设定
网站文章的字体排版设定

单篇文章的字体排版

前往网站文章 >单篇文章 。 单篇文章最具特色的功能是「相关文章」,也就是阅读完整文章后出现的延伸阅读,在 DESIGN 区域可以设定色彩、字型、文章间距。

Astra Pro 教程:单篇文章的字型排版
单篇文章的字体排版

网站说明的字体设定

直接点击网站Logo的笔,就会跳出相关设定,可以调整上方的标题字体,以及下方的网站说明字体。

以上,就是大致 Astra Pro 进阶版的排版样式功能。


色彩及背景 Color & Background

前往后台 > Astra > 色彩及背景 > 自定义 」,即可快速前往设定区域。

快速前往色彩及背景的设定
快速前往色彩及背景的设定

Astra 免费版主题,原来就可以设定文字&背景颜色,而 Astra Pro 进阶版的 Color & Background 模块,则是开启了更多文字、背景可设置选项。

全局性颜色选项

点击全局>色彩,即可来到全局调色盘。

Astra 主题本身就提供了基本的全局性颜色选项,进阶则是可以针对个别标题调色,表层色彩也提供 Color 单色、Gradient 渐层、Image 图档,这 3 种背景选择。

导览标记的色彩设定

点击「导览标记 > DESIGN 」,即可设置导览标记的更多色彩细节。

导览标记的色彩设定
导览标记的色彩设定

信息栏的色彩设定

前往信息栏 > DESIGN ,即可设定信息栏的标题、内文、链接、背景的色彩。

信息栏的色彩设定
信息栏的色彩设定

网站文章的色彩设定

前往网站文章 > 网站文章/汇整> DESIGN > 内容色彩 」,即可设定文章标题、元数据的颜色。

有地球符号代表这是系统提供的色号,如果是自选色号就会消失这个符号。

网站文章的色彩设定
网站文章的色彩设定

间距 Spacing

Spacing 模块是一个 Astra Pro 进阶版功能,可以对指定区块调整距离,达到网站美化效果。

前往“ 后台 > Astra > 间距 > 自定义 。 可设定间距的地方有很多,下面我会挑几个范例,跟大家做分享。

前往间距的快速途径
前往间距的快速途径

网站Logo间距调整

前往页首编辑器 >网站标题及标志,也可以直接点击Logo的笔,即可快速前往设定。

标志宽度可设定Logo图片大小、间距则是设定Logo与上下左右的边界距离。

文章间距设定

前往网站文章 >网站文章/汇整> DESIGN 」,即可设定文章间距。

网站页尾内距设定

直接点击「 网站页尾的笔 > DESIGN 」,即可设定网站页尾小工具的内距。

在设定间距的数据时,只要输入其中1个字段,系统就会统一4个字段的数据,如果只想要设定上方和下方的间距,将右手边的连结取消,就能个别设定啰!

以上,就是间距的相关设定,其实各处的 DESIGN 区域,都有类似的间距设定,因为功能差不多就不多介绍。


网站文章扩充功能Blog Pro

Blog Pro 模块,是 Astra Pro 用来强化博客页面(网络文章&单篇文章),可设定的项目。

网站文章/汇整的扩充功能

  • 博客版面配置:提供 3 种版面配置,像是置中对齐、靠右、靠左。
  • 格状版面配置:如果你的文章数量很多,可以增加列数,如图下示范的3列文章。
  • 在两篇文章中间加入间距:启用这项功能,可以让每篇文章的间距,看起来更加宽敞。
  • 瀑布流版面配置:无需按下一页,页面便会不断的加载,让用户浏览更轻松,但这项配置比较适合图片居多的网站,大多应用在瀑布流相簿。
  • 强调第一篇文章:这项功能跟瀑布流只能 2 选 1,可突出最新发布的新文章,加宽设计更为显眼。
  • 启用日期框:显示这篇文章的发布日期,可以选择方形或圆形的样式。
  • 除精选图片的内距:请注意此选项,将不会动作于全幅宽版面配置。
网站文章的扩充功能
网站文章的扩充功能

小补充:如果你的格状版面配置设定为 4 列,画面中却只有出现 3 列文章,代表需要至后台调整阅读设定。 可以依照自己的需求,设定网站文章的每页显示数量。

设定网站文章的每页显示数量
设定网站文章的每页显示数量

网站文章的高级功能,还有提供内容宽度、文章结构、元数据… 等设定,我们挑几项重点介绍:

  • 文章内容显示方式:建议选择内容摘要,网站的视觉画面会更精简,除非本身内文不多,则可选完整内容。
  • 阅读全文文字:可以先搭配启动按钮,再更改按钮内的文字。
  • 文章页数&样式:可以选择数字、无限卷动的模式,以及 3 种外观样式。
网站文章的进阶功能
网站文章的进阶功能

单篇文章的扩充功能

针对单篇文章可以启用作者信息、相关文章,Astra 基础版就有提供“ 相关文章 ”的查询条件、数量上限、格状排列字段版面配置 … 等设定。

Astra 进阶版则是多了启用文章内容摘要,还能针对相关文章的标题与内容调整色彩、字型、间距排版。

单篇文章的扩充功能
单篇文章的扩充功能

以上,就是网站文章扩充功能的详细介绍。


手机页首 Mobile Header

Mobile Header 模块,是 Astra Pro 用来强化手机页首的可设定项目,这边举一些例子做分享。

手机版切换不同 Logo

前往页首编辑器 >网站标题及标志,或是直接点击Logo附近的笔,即可设定对手机版标志。

因为手机版的宽度较窄,或是手机页首的背景颜色不同,可能需切换不同 Logo 应对。

手机版主菜单调整

先在左下切换手机装置,直接点菜单附近的笔,左侧就会自动跳出相关设定,可以调整菜单的图标与按钮样式。

如果想要调整手机设备的菜单项目,可在下方的OFF CANVAS直接新增和拖曳项目,这是Astra的基础功能。 更多 Astra 基础教程。


Nav Menu 模块,是 Astra Pro Theme 用来强化菜单功能。

最特别的就是可制作 Mega Menu 超级菜单,新版 Astra 称为巨型菜单,这功能对有规模的网站,是很实用的功能!

除了简单版的Mega Menu,Astra还可以套用Elementor模板,完成客制化菜单设计(因为步骤比较多一点,我会额外写一篇文章教程)。

这章节,我会分 3 个步骤,教大家制作简单版 Mega Menu,可先看一下完成图。

Astra Pro Theme 主题 :制作 Mega Menu 的完成图
制作巨型选单的完成图

Step1:设定菜单层级

前往 WordPress 外观 > 菜单,先设定一个三阶层的菜单,相关教程可参考 WordPress 菜单。

设定 WordPress 菜单层级
设定 WordPress 菜单层级

Step2:设定最上层菜单

找到最上层的菜单,点击 Astra 菜单设定,英文接口则是 Astra Menu Settings。

备注:这里是选最上层的菜单唷,这样子菜单们才会套用巨型菜单的功能。

设定最上层菜单的 Astra Menu Settings
设定最上层菜单的 Astra 菜单设定

当你点击 Astra 菜单设定时,右侧就会自动跳出 Astra Menu Options 的设置选项,开启巨型菜单后,可以选择菜单的宽度,完成后记得保存变更。

开启 Astra Mega Menu 功能
开启 Astra Mega Menu 功能

如果想要针对个别菜单进行外观设定,点击 DESIGN 则设定背景类型、色彩、分隔线、强调标签色彩、字段宽度、内距与外距的排版设定。

特别的是背景类型提供 2 种模式可以切换,左边主要设定图片背景,右边则是设定渐层背景。

Astra Pro 巨型菜单的外观设计
Astra Pro 巨型菜单的外观设计

Step3:设定第二层菜单&Mega Menu 完成

点击第二层菜单的 Astra 菜单设定。

设定第二层菜单的 Astra 菜单设定
设定第二层菜单的 Astra 菜单设定

子项目的 Astra 菜单设定的功能会有些不同,可以设为 As Heading 作为标题、隐藏菜单标签、停用链接,其中最强的功能是设定图标,可以直接选用系统提供的 Icon 模板,高达 74 页可以随意挑选。

当然你也可以选择中间的上传选项,自己制图专属的子项目 Icon,进阶版还能设定图标间距、位置、大小 … 等细部调整,最后记得储存设定喔!

子项目的 Icon 图标设定

依照此流程,完成其他第二层选单的标签设定。 如果不设定标签也可以,依照自己需求调整即可。

最后来看一下成果,就会跟上面提供的巨型菜单成品图一样啰:)

Sticky Header 模块,是 Astra Pro Theme 提供的页首置顶功能,在页面滚动时,菜单会持续在顶端功能,可达到美观的效果。

前往 Astra > 固定式页首 > 自定义,也可以点击 页首编辑器 > 页首类型的固定式页首。

Astra Pro 教程:前往固定式页首的途径
前往固定式页首的途径

新版的 Astra Pro 可以调整固定式页首的呈现效果,功能说明如下:

  • 固定页首上方:将菜单固定在页首的上方。
  • 固定主页首:启用固定式页首的重要开关。
  • 固定页首下方:将菜单固定在页首的下方。
  • 启用收缩效果:将缩小固定页首高度、标志和菜单大小,以紧凑的尺寸显示,适合移动设备的功能。
  • 向下卷动时隐藏:网页往下滑动时,会隐藏固定页首; 网页往上滑动时,固定页首会自动出现。
  • 固定式页首使用不同标志:可针对固定式页首使用特定的标志,并不影响原有的标志。
  • 选择动画:当网页往下滑动的时候,固定式页首跳出来的动画效果。
  • 启用于:可以针对个别装置启动这项功能。

如果想要调整固定式页首的外观,直接点击笔,就会自动跳到 DESIGN,可调整固定定页首的背景色彩、边框间距和边界。

以上,就是固定式页首的详细说明,不仅可以美观网站,还能让用户在任一页面时,都能随时轻松找到选单。


Page Headers 模块,是 Astra Pro Theme 的页面标题功能,可以更明确的表示当前页面的目的,另一方面也有美观效果。

前往 Astra > 页面页首 > 设置 」,即可快速前往页面页首的设定。

Astra Pro 教程:前往页面页首的快速途径
前往页面页首的快速途径

这章节,我会分 3 个步骤,教大家制作页面标题,可先看一下完成图。

Page Headers 网站页面标题
Page Headers 网站页面标题

Step1:设定页面页首

当你前往页面页首时,点选最上方字段“ Add New ” 。

新增 Page Headers 区块

可以设定 3 种版面配置、标题色彩、背景大小,记得勾选显示导览标记,才能设定相关的色彩调整。

Astra Pro 教程:页面页首的相关设定
页面页首的相关设定

设置覆盖的背景颜色(调偏黑色),点击“ 选择图片 ” 即可上传背景图片,并打勾“ 覆盖背景颜色 。

视差 是设置不同设备是否要显示页面页首,如果想统一出现,就选择“ 桌上型设备+移动设备 ”

上传页面页首的背景图片
上传页面页首的背景图片

Step2:设定网站首页

如果你想要将页面页首与网站首页合并,前往中间栏位的「网站页首」将其功能打勾。

Astra Pro:勾选页首的合并功能
勾选页首的合并功能

Step3:设定显示规则

可以根据自己的需求设置显示条件,简单介绍显示规则的选项:

  • 添加显示规则:设定页面页首显示的位置,可设定在基本的全网站、特殊页面、Landing Pages、自定义版面配置… 等超多选项。
  • 加入排除规则:排除规则与显示规则的选项一样,可选择「特定页面 / 文章 / 自定义义分类 」针对特定的条件进行排除。
  • 添加用户规则:针对用户的身份进行显示设置,可设置全部、登入、注销的用户能否看到页面页首,进阶的设定则可针对订阅者、客户、作者 … 等特殊身份才能看到页面页首。
设定显示规则
设定显示规则

最后记得点选 发布&更新,到 WordPress 网站前台就会看到成果啰!

以上只是教程范例,你可参考流程并设计自己喜欢的样子。


自订版面配置 Custom Layouts

Custom Layouts 模块,是 Astra Pro Theme 的定制布局功能。

能自定义客制化的Header页首、Footer页尾、Hooks钩子,在指定页面上出现,达到真正定制网页的目的。

备注:Hooks 钩子的意思是,Astra 在网页的不同位置有设定标注代码,用户可自行客制化区块,并放入到指定的 Hook 位置上,就能达到多样化的网站设计。

接下来,我会示范自订版面配置的 Hooks 类型,并运用这个功能,在每一篇文章下方都加上联络表单,提升网站转化率。

下面是完成图。

Astra Pro Theme 主题 :使用 Hooks 钩子,在每一篇文章下面加上联络表单
使用 Hooks 钩子,在每一篇文章下面加上联络表单

Step1:前往 自订版面配置&设计区块

前往 WordPress 外观 > Astra > 自订版面配置,点 Add New。

前往 Astra 的自订版面配置

根据自己的需求选择版面,这边演示 Hooks 勾点的设计。

选择 Hooks 制作联络表单
选择 Hooks 制作联络表单

设计 Custom Layouts 区块内容,有 WordPress 默认编辑器、Elementor 页面编辑器、Code Editor 几种编辑可选。

这里我示范新增一个联络表单区块。

Astra Pro Theme 主题 :编辑 Custom Layouts 区块
编辑自定义版面配置的区块

Step2:自订版面配置的设定

首先,点选右上角的符号,就会跳出自订版面配置的更多设定。

Layout 选 Hooks 勾点类型,Action 置入位置选 entry_content_after,其余设定依照个人需求调整。

Custom Layouts 相关设定
Custom Layouts 相关设定
  • Layout:提供 5 种选项,像是页首、页尾、404 页面、勾点、内部文章/页面内容。
  • Actions:客制化区块置入位置,可参考 Astra 的 Hooks 位置,选择对应的即可。
  • Priority:数字越小,优先级越高,系统默认 10,可自行调整数字。
  • Spacing:可设定上下间距。
  • Display and User Conditions:设定显示版面的条件,如果没有特别要限制的条件,建议选择开放 All。
  • Device Visibility:可设定 Desktop 桌面、Tablet 平板、Mobile 移动设备的可见性。
  • Date &Time Conditions:如果自订版面为短期活动,可设定开放与结束的时段。

最后再进行发布,前往网站前台,就会看到上面的成果图啰:)

以上只是单一情况的示范,你也可新增电子报区块、商品营销区块等 .. ,并让它在指定页面出现,就能达成 Custom Layouts 定制布局。

很强大的 Astra Pro 功能吧,发挥你的创意吧!


网站版面配置 Site Layouts

Site Layouts 模块,是 Astra Pro Theme 的全站布局功能,提供 4 种版面可选择:全幅宽度、最大宽度、边框四边留白、流体版面配置。

前往「全局 >内容容器」,即可设定网站版面配置。 GENRAL 可配置网站版面配置、DESIGN 则可设置更详细的内外侧间距。

设定 Site Layouts 全站布局
设定 Site Layouts 全站布局

因为这功能要实际操作,才能比较明确感受差异,这里就大约说明在哪做更改。


Footer Widgets 模块,是 Astra Pro Theme 的页尾小工具功能强化。

直接点击页尾区域的笔,即可在 GENERAL 设置字段数量、页尾版面配置、内部元素版面配置 … 等设定。

DESIGN 则可以设定页尾的内部字段间距,以及边框与边界的间距,弹性调整页尾的留白空间。


返回顶端 Scroll To Top

Scroll To Top 模块,是 Astra Pro Theme 的回到顶端按钮,增加了可定制设置。

前往全局> 返回顶端,可设定 Display On 显示设备、显示位置(按钮在右侧或左侧)、图标尺寸。

Scroll To Top 按钮设置

DESIGN 区域则可以设计返回按钮的外观,像是调整颜色、框线圆角半径。

Astra Pro 教程:返回按钮的外观设计
返回按钮的外观设计

WooCommerce 电商功能

WooCommerce 模块,是 Astra Pro Theme 的 WooCommerce 电商功能强化。

前往 WooCommerce,会看到有不同项目可调整,像是 General 一般设定、产品目录、Single Product 单一商品等 .. 。

WooCommerce 商店功能设定
WooCommerce 商店功能设定

这边用产品目录当示范,因为这是 WooCommerce 的核心功能之一。

前往 WooCommerce > 产品目录,可调整商品排序方式、画面版型、商品字段&出现数量、文字样式 … 等完整的商品设定。

Astra Pro WooCommerce 的核心功能
Astra Pro WooCommerce 的核心功能

其他商品列表功能 & 更多 WooCommerce 页面设定,可参考 Astra Pro Theme 的 WooCommerce 电商功能,内有完整教程。


Premium Starter Templates 进阶模板

Astra 的 Premium Starter Templates 进阶模板
Astra 的 Premium Starter Templates 进阶模板

Premium Starter Templates 進階模板,是 Astra 的 Mini Agency Bundle 迷你代理商方案,才能使用的功能。 请参考 Premium Starter Templates 教程,有完整流程。

Premium Starter Templates 是 Astra 在免费基础模板上,新增多达 50+ 个多类型的进阶模板,适用于各种产业别,需用插件的方式安装。

可选择全网站模板导入,或是挑选喜欢的单一页面,进行模板导入。

除此之外,在 Elementor 编辑器中,也能导入 Premium Starter Templates 多种进阶模板&区块,不但美观也制作快速。

请参考 Premium Starter Templates 教程,内有完整安装+使用流程唷:)


WP Portfolio Plugin 作品集功能

Astra Pro Theme 教程:WP Portfolio 作品集功能
Astra Pro Theme 教程:WP Portfolio 作品集功能

WP Portfolio 作品集功能,是 Astra 的 Mini Agency Bundle 迷你代理商方案,才能使用的功能。 请参考 WP Portfolio 作品集功能 有完整教程。

你可以用它制作各类型的展示页面,像是网站、照片 / 图片、影片等 .. 多种作品类型。

不论是用来展示作品、制作个人 or 公司的服务案例,或是单纯觉得它会派上用场,都可以使用 WP Portfolio。

Astra 的 WP Portfolio 作品集展示
Astra 的 WP Portfolio 作品集展示

WP Portfolio 本身极为轻量,完全不会影响到网站速度,这跟 Astra 本身轻量快速的优点一样。

同时提供物品搜索功能、双层分类条件、滚动加载作品、Demo 演示作品导入、瀑布流展示等 .. 多种特色。

当然,WP Portfolio 同样支持主流的页面编辑器,像是 Elementor、Beaver Builder、Visual Composer .. 。

WP Portfolio 支持多种主流页面编辑器
WP Portfolio 支持多种主流页面编辑器

这代表能自由客制化网站页面,并当成展示页面的一部分,达成你的真正需求:)

有关 WP Portfolio 的安装启用、凭证激活、各作品类型的制作方法,我在 WP Portfolio 作品集功能 有完整说明,是篇完整的手把手教程。


Ultimate Addons for Elementor 终极扩充功能

Astra 的 Ultimate Addons for Elementor 功能插件
Astra 的 Ultimate Addons for Elementor 功能插件

Ultimate Addons for Elementor 终极扩充功能,是 Astra 的 Mini Agency Bundle 迷你代理商方案,才能使用的功能。 请参考 Ultimate Addons for Elementor 教程,有完整介绍。

除了 Elementor 编辑器,Astra 也有 Ultimate Addons for Beaver Builder 插件,帮 Beaver Builder 做了功能扩充(这在购买 Astra 方案时,就需选择)。

Ultimate Addons for Elementor 主要功能有,提供 49 种功能小套件、180+ 网站模板、多种区块模板。

Ultimate Addons for Elementor 插件特色
Ultimate Addons for Elementor 插件特色

像是内容切换、图片展示画廊、多变讯息框、多类型广告框(不同出现方法)、价目表功能、客制化文章布局等 .. 。 (下面仅列举几个)

  • Mega Menu Widget 超级菜单

客制化的大型菜单,如果你的网站是中大型网站,那会非常实用(也支持 WooCommerce 商品)。

多种交互式菜单效果、强化菜单&子菜单可控制项、多种菜单布局方式。

Ultimate Addons for Elementor 的超级菜单示范
  • Form Styler Widgets 表单设计

多种风格样式表格,可自定义输入字段、按钮、颜色背景,配置成功和错误消息。

Ultimate Addons for Elementor :Form Styler Widgets 表单设计功能
Ultimate Addons for Elementor :Form Styler Widgets 表单设计功能
  • Hotspot Tour Widget 动态热点互动

互动式网页效果,增加与访客接触机会。

动态热点互动功能

如果个人、公司或是相关的网页制作者,需要多种 Elementor 元素&模板样式,这绝对是非常足够使用:)

Ultimate Addons for Elementor 的多种 Elementor 功能扩充(仅部分截图)
Ultimate Addons for Elementor 的多种 Elementor 功能扩充(仅部分截图)

以上就是 Astra 的 Ultimate Addons for Elementor 插件简单介绍。 请参考 Ultimate Addons for Elementor 教程,有更多详细功能。

如果有兴趣使用,可参考前面的 Astra 进阶主题购买教程:)


白色标签 / 自定义品牌 White Label

White Label 翻译为白色标签,最强功能是可以将产品或插件重新命名,并改为自己想要的名称。

这代表你可以隐藏所用主题和插件的实际身份,自己定义品牌名称,因此又称为「自定义品牌 」,但请注意 White Label 不能更改文件夹名称。

Astra Pro 提供自定义品牌的选项,几乎可以更改网站内每个领域,好证明所有的网站产品属于自家品牌,这对于网站开发人员来说,是很重要的进阶功能!

转到后台点击 Astra > 自定义品牌 > 设置 。

前往 White Label 的途径
前往 White Label 的途径

下图列出 White Label 可以设定哪些细项,完成设定后,记得按 Save。

Astra Pro 教程:White Label 设定
Astra Pro 教程:White Label 设定
Astra Pro 教程:启用 White Label
Astra Pro 教程:启用 White Label

启用 White Label 就会删除 Astra 网站的任何链接,并在仪表板中更改身份,因此这个设定主要应用在 为客户构建网站的企业机构和开发人员使用,像是网站搭建公司、网页设计师。


Spectra 页面编辑器

Spectra 是一款加强 WordPress 页面编辑器的插件,搭配 Astra Pro 更能制作出更进阶的网站,列出 Spectra 的 3 大特色:

  • 适用新手: Spectra 直接整合在 WordPress 编辑器中,即使不会写程序,也能透过内部的可视化功能、flexbox 容器轻松设计响应式网站,操作过程中无需触碰程序,让你直觉操作。
  • 高阶网页建立: Spectra 提供了默认 WordPress 页面编辑器无法提供的高级网站设计选项,像是多了 Call To Action 移动呼吁按钮、Post Timeline 时间表 … 等丰富多样的专业功能,无需另外下载其他插件,就能一次满足。
  • 提高SEO排名 Spectra 在 CWV(用户体验核心指标)中得分 100% 的成绩,闪电般的网站加载速度和程序输入,有效提高搜索引擎优化。

稍微了解 Spectra 的优势后,接下来我们来实际操作这款插件! 下文介绍几项重点功能:

安装 Spectra 插件

前往后台的插件 > 安装插件 > 关键词字段输入 Spectra > 立即安装 Spectra。

安装 Spectra 插件
安装 Spectra 插件

新增Spectra页面

前往“ 设置 > Spectra > Create New Page 。

新增Spectra页面
新增Spectra页面

开启小工具以后,就会先看到Spectra的各种功能项目,预设的 WordPress 页面编辑器则排在后面,你可以一次拥有这 2 种页面编辑器的功能。

Spectra 页面编辑器的功能

Content Timeline 内容时间表

Spectra 有许多高级的功能,我们示范其中一个功能 Content Timeline,适合制作企业的发展历程,或是展现个人品牌特色的时间表。

操作过程中不需要接触程序码,直接输入想要的内容,右手边区块工具也能针对时间轴进行调整。

Spectra 提供简单且直观的操作界面
Spectra 提供简单且直观的操作界面

根据自己的需求输入内容与设定时间轴,点击“ 发布 ”即可看到成果!

如果日后想要继续调整 Content Timeline,前往后台的页面,即可再次编辑。


Astra 进阶版方案,更多教程?

有关于 Astra 进阶版,我写了多篇使用教程,方便你认识和上手 Astra 进阶功能,如下。

  • Astra Pro: Astra 进阶版方案,强化功能详细教程,可参考 Astra 进阶教程。
  • Astra Pro WooCommerce: WooCommerce 电商功能强化,可参考 Astra Pro WooCommerce 教程。
  • WP Portfolio:制作网站作品集、展示页面、服务案例等 .. 专用插件,可参考 WP Portfolio 教程。
  • Ultimate Addons for Elementor:在 Elementor 上新增 40+ 个元素功能、100+ 网站模板、200+ 区块模板,可参考 UAE 教程。
  • Premium Starter Templates:有更多 Astra 进阶模板可使用,可参考 Premium Starter Templates 教程。

如果都看完,相信你对 Astra 主题的整体掌握度,大概也就如鱼得水了吧,加油唷:)


 

原文链接:https://www.itaoda.cn/blog/9899.html,转载请注明出处。

0
使用和安装有任何问题
请加客服QQ:1442071397 或wechat:pufei889


免责声明

本站所发布的部分内容自网络,该部分内容限用于学习和研究目,有版权问题的,下载后的24个小时之内,从您的电脑中彻底删除。且不得将用于商业或者非法用途,否则,一切后果请用户自负,与本站无关。

评论0

请先
没有账号?注册  忘记密码?

社交账号快速登录

× 发送
微信扫一扫

温性提示

演示站服务器在国外,网站打开速度有点慢,请耐心等待

多功能、多行业外贸商城 wordpress商城WOOCOMMERCE

23+
行业模板