启用AstraPro功能前,请确保是AstraPro版(免费版是不能启用的)。前往后台直接点选Astra,就会看到AstraPro版Modules,点ActivateAll启用全部模组,才能使用接下来的高级功能。
然后后面章节,会特别介绍MiniAgencyBundle方案才有的功能,如果是购买此方案的,也可以学习的到。
Astra免费版就有许多文字样式可调整,前往「全局>排版样式」,即可做设置。
全局(Global)是指全站通用的文字设置,至于下面的文字设置介绍,如果有设置就会覆盖上去,没有的话就会维持预设。
AstraPro专业版的排版样式,则是对不同项目做了更多的文字样式的设置扩充,可以管理整个网站的字型,提供设置网站排版的完全控制权。
按钮文字设置
内文字型&标题字型设置
前往「全局>排版样式」,可以针对H1~H6字型进行详细调整。
资讯栏的字型排版
前往「资讯栏>DESIGN」,即可设置资讯栏的标题字型、内容字形,还能细调尺寸大小。
进阶还提供外侧与内侧的间距调整,可以针对顶端、右侧、底端、左侧进行微调。
网站说明的字型设置
以上,就是大致AstraPro专业版的排版样式功能。
前往「后台>Astra>色彩及背景>自订」,即可快速前往设置区域。
Astra免费版主题,原来就可以设置文字&背景颜色,而AstraPro专业版的Color&Background模组,则是开启了更多文字、背景可设置选项。
全局性颜色选项
点选「全局>色彩」,即可来到全局调色盘。
Astra主题本身就提供了基本的全局性颜色选项,进阶则是可以针对个别标题调色,表层色彩也提供Color单色、Gradient渐层、Image图档,这3种背景选择。
导览标记的色彩设置
点选「导览标记>DESIGN」,即可设置导览标记的更多色彩细节。
资讯栏的色彩设置
前往「资讯栏>DESIGN」,即可设置资讯栏的标题、内文、连结、背景的色彩。
有地球符号代表这是系统提供的色号,如果是自选色号就会消失这个符号。
Spacing模组是一个AstraPro专业版功能,可以对指定区块调整距离,达到网站美化效果。
网站Logo间距调整
前往「页眉编辑器>网站标题及标志」,也可以直接点选Logo的笔,即可快速前往设置。
标志宽度可设置Logo图片大小、间距则是设置Logo与上下左右的边界距离。
网站页脚内距设置
直接点选「网站页脚的笔>DESIGN」,即可设置网站页脚小工具的内距。
在设置间距的数据时,只要输入其中1个栏位,系统就会统一4个栏位的数据,如果只想要设置上方和下方的间距,将右手边的连结取消,就能个别设置啰!
手机版切换不同Logo
前往「页眉编辑器>网站标题及标志」,或是直接点选Logo附近的笔,即可设置对手机版标志。
因为手机版的宽度较窄,或是手机页眉的背景颜色不同,可能需切换不同Logo应对。
手机版主选单调整
如果想要调整手机装置的选单项目,可在下方的OFFCANVAS直接新增和拖曳项目,这是Astra的基础功能。
NavMenu模组,是AstraProTheme用来强化选单功能。
最特别的就是可制作MegaMenu超级选单,新版Astra称为巨型选单,这功能对有规模的网站,是很实用的功能!
除了简单版的MegaMenu,Astra还可以套用Elementor模板,完成客制化选单设计。
这章节,我会分3个步骤,教大家制作简单版MegaMenu,可先看一下完成图。
Step1:设置选单层级
前往WordPress外观>选单,先设置一个三阶层的选单。
Step2:设置最上层选单
找到最上层的选单,点击Astra选单设置,英文介面则是AstraMenuSettings。
备注:这里是选最上层的选单唷,这样子选单们才会套用巨型选单的功能。
当你点选Astra选单设置时,右侧就会自动跳出AstraMenuOptions的设置选项,开启巨型选单后,可以选择选单的宽度,完成后记得储存变更。
如果想要针对个别选单进行外观设置,点选DESIGN则设置背景类型、色彩、分隔线、强调标签色彩、栏位宽度、内距与外距的排版设置。
特别的是背景类型提供2种模式可以切换,左边主要设置图片背景,右边则是设置渐层背景。
Step3:设置第二层选单&MegaMenu完成
点选第二层选单的Astra选单设置。
子项目的Astra选单设置的功能会有些不同,可以设为AsHeading作为标题、隐藏选单标签、停用连结,其中最强的功能是设置图示,可以直接选用系统提供的Icon范本,高达74页可以随意挑选。
当然你也可以选择中间的上传选项,自己制图专属的子项目Icon,专业版还能设置图示间距、位置、大小…等细部调整,最后记得储存设置喔!
依照此流程,完成其他第二层选单的标签设置。如果不设置标签也可以,依照自己需求调整即可。
最后来看一下成果,就会跟上面提供的巨型选单成品图一样啰:)
StickyHeader模组,是AstraProTheme提供的页眉置顶功能,在页面滚动时,选单会持续在顶端功能,可达到美观的效果。
前往Astra>固定式页眉>自订,也可以点选页眉编辑器>页眉类型的固定式页眉。
新版的AstraPro可以调整固定式页眉的呈现效果,功能说明如下:
如果想要调整固定式页眉的外观,直接点选笔,就会自动跳到DESIGN,可调整固定定页眉的背景色彩、边框间距和边界。
以上,就是固定式页眉的详细说明,不仅可以美观网站,还能让用户在任一页面时,都能随时轻松找到选单。
PageHeaders模组,是AstraProTheme的页面标题功能,可以更明确的表示当前页面的目的,另一方面也有美观效果。
前往「Astra>页面页眉>设置」,即可快速前往页面页眉的设置。
这章节,我会分3个步骤,教大家制作页面标题,可先看一下完成图。
Step1:设置页面页眉
当你前往页面页眉时,点选最上方栏位的「AddNew」。
设置覆盖的背景颜色(调偏黑色),点选「选择图片」即可上传背景图片,并打勾「覆盖背景色彩」。
视差是设置不同装置是否要显示页面页眉,如果想统一出现,就选择「桌上型装置+行动装置」。
Step2:设置网站首页
如果你想要将页面页眉与网站首页合并,前往中间栏位的「网站页眉」将其功能打勾。
Step3:设置显示规则
可以根据自己的需求设置显示条件,简单介绍显示规则的选项:
最后记得点选发布&更新,到WordPress网站前台就会看到成果啰!
以上只是教程范例,你可参考流程并设计自己喜欢的样子。
CustomLayouts模组,是AstraProTheme的客制化布局功能。
能自订客制化的Header页眉、Footer页脚、Hooks钩子,在指定页面上出现,达到真正客制化网页的目的。
备注:Hooks钩子的意思是,Astra在网页的不同位置有设置标注代码,使用者可自行客制化区块,并放入到指定的Hook位置上,就能达到多样化的网站设计。
下面是完成图。
Step1:前往自订版面配置&设计区块
前往WordPress外观>Astra>自订版面配置,点AddNew。
根据自己的需求选择版面,这边示范Hooks勾点的设计。
设计CustomLayouts区块内容,有WordPress预设编辑器、Elementor页面编辑器、CodeEditor几种编辑可选。
这里我示范新增一个联络表单区块。
Step2:自订版面配置的设置
首先,点选右上角的符号,就会跳出自订版面配置的更多设置。
Layout选Hooks勾点类型,Action置入位置选entry_content_after,其余设置依照个人需求调整。
最后再进行发布,前往网站前台,就会看到上面的成果图啰:)
以上只是单一情况的示范,你也可新增新闻区块、商品行销区块等..,并让它在指定页面出现,就能达成CustomLayouts客制化布局。
很强大的AstraPro功能吧,发挥你的创意吧!
SiteLayouts模组,是AstraProTheme的全站布局功能,提供4种版面可选择:全幅宽度、最大宽度、边框四边留白、流体版面配置。
前往「全局>内容容器」,即可设置网站版面配置。GENRAL可设置网站版面配置、DESIGN则可设置更详细的内外侧间距。
因为这功能要实际操作,才能比较明确感受差异,这里就大约说明在哪做更改。
FooterWidgets模组,是AstraProTheme的页脚小工具功能强化。
直接点选页脚区域的笔,即可在GENERAL设置栏位数量、页脚版面配置、内部元素版面配置…等设置。
DESIGN则可以设置页脚的内部栏位间距,以及边框与边界的间距,弹性调整页脚的留白空间。
ScrollToTop模组,是AstraProTheme的回到顶端按钮,增加了可客制化设置。
前往「全局>返回顶端」,可设置DisplayOn显示装置、显示位置(按钮在右侧或左侧)、图示尺寸。
DESIGN区域则可以设计返回按钮的外观,像是调整颜色、框线圆角半径。
WooCommerce模组,是AstraProTheme的WooCommerce电商功能强化。
前往WooCommerce,会看到有不同项目可调整,像是General一般设置、产品目录、SingleProduct单一商品等..。
这边用产品目录当示范,因为这是WooCommerce的核心功能之一。
前往WooCommerce>产品目录,可调整商品排序方式、画面版型、商品栏位&出现数量、文字样式…等完整的商品设置。
PremiumStarterTemplates进阶模板,是Astra的MiniAgencyBundle迷你代理商方案,才能使用的功能。
PremiumStarterTemplates是Astra在免费基础模板上,新增多达50+个多类型的进阶模板,适用于各种产业别,需用插件的方式安装。
可选择全网站模板汇入,或是挑选喜欢的单一页面,进行模板汇入。
除此之外,在Elementor编辑器中,也能汇入PremiumStarterTemplates多种进阶模板&区块,不但美观也制作快速。
WPPortfolio作品集功能,是Astra的MiniAgencyBundle迷你代理商方案,才能使用的功能。
你可以用它制作各类型的展示页面,像是网站、照片/图片、影片等..多种作品类型。
不论是用来展示作品、制作个人or公司的服务案例,或是单纯觉得它会派上用场,都可以使用WPPortfolio。
WPPortfolio本身极为轻量,完全不会影响到网站速度,这跟Astra本身轻量快速的优点一样。
同时提供物品搜寻功能、双层分类条件、滚动加载作品、Demo演示作品汇入、瀑布流展示等..多种特色。
当然,WPPortfolio同样支援主流的页面编辑器,像是Elementor、BeaverBuilder、VisualComposer..。
这代表能自由客制化网站页面,并当成展示页面的一部分,达成你的真正需求:)
有关WPPortfolio的安装启用、凭证激活、各作品类型的制作方法。
UltimateAddonsforElementor终极扩充功能,是Astra的MiniAgencyBundle迷你代理商方案,才能使用的功能。
除了Elementor编辑器,Astra也有UltimateAddonsforBeaverBuilder插件,帮BeaverBuilder做了功能扩充。
UltimateAddonsforElementor主要功能有,提供49种功能小套件、180+网站模板、多种区块模板。
客制化的大型选单,如果你的网站是中大型网站,那会非常实用(也支援WooCommerce商品)。
多种交互式选单效果、强化选单&子选单可控制项、多种选单布局方式。
UltimateAddonsforElementor的超级选单示范
多种风格样式表格,可自定义输入字段、按钮、颜色背景,配置成功和错误消息。
互动式网页效果,增加与访客接触机会。
以上就是Astra的UltimateAddonsforElementor插件简单介绍。
WhiteLabel翻译为白色标签,最强功能是可以将产品或插件重新命名,并改为自己想要的名称。
这代表你可以隐藏所用主题和插件的实际身份,自己定义品牌名称,因此又称为「自订品牌」,但请注意WhiteLabel不能更改资料夹名称。
AstraPro提供自订品牌的选项,几乎可以更改网站内每个领域,好证明所有的网站产品属于自家品牌,这对于网站开发人员来说,是很重要的进阶功能!
前往后台点选「Astra>自订品牌>设置」。
下图列出WhiteLabel可以设置哪些细项,完成设置后,记得按Save。
启用WhiteLabel就会删除Astra网站的任何连结,并在仪表板中更改身份,因此这个设置主要应用在为客户构建网站的企业机构和开发人员使用,像是网站架设公司、网页设计师。
Spectra是一款加强WordPress页面编辑器的插件,搭配AstraPro更能制作出更进阶的网站,列出Spectra的3大特色:
稍微了解Spectra的优势后,接下来我们来实际操作这款插件!下文介绍几项重点功能:
安装Spectra插件
前往后台的插件>安装插件>关键字栏位输入Spectra>立即安装Spectra。
新增Spectra页面
前往「设置>Spectra>CreateNewPage」。
开启小工具以后,就会先看到Spectra的各种功能项目,预设的WordPress页面编辑器则排在后面,你可以一次拥有这2种页面编辑器的功能。