Theme Options简介

>>>Theme Options简介
Theme Options简介2018-05-27T08:38:19+00:00

Project Description

更新日期: 2017-10-14

Avada强大在于它提供的设置选项相当多,可以不通过代码就能自定义的功能也就相对更多了。

在5.2.2版本中,Theme Options中一级菜单就有25项,如下图所示:

下面我们来做些介绍,看看每项里面都有些什么功能,哪些常用,哪些可以不用太管它:

1. Layout

在这个选项中,主要可以设置:

  • 网站布局方式选择,可以选择Boxed或者Wide,不同选择,会有不同的设置,但都会有设置网页的宽度(默认值是1100px)、内容区域距离上面Page Title Bar和下面Footer的间距大小;
  • 单侧边栏或者双侧边栏时,侧边栏的Width,注意这里面是填写的百分比,是根据上面的 Site Width 设置的宽度来计算的。比如Single Sidebar Width设置的宽度是29%,那么内容区域的宽度是多少呢?不是(100%-29%),而是(100%-29%-80px),这个80px是内容区域和Sidebar区域的间距,调整这个间距目前还没有在Options中直接设置的地方,可以参考这篇文章

Boxed和Wide怎么选

Boxed限定了整个页面的宽度,包括header、page title bar和footer部分都是限定了宽度;

Wide虽然也有Site Width的设置,但是这个Width是指Content+Sidebar的宽度,header和footer部分还是适应浏览器宽度的;

个人比较建议选择:Wide的布局,看上去要显得好看和更符合潮流些。

至于选择了Boxed后,多出的几个设置项:

Boxed Mode Top/Bottom Offset,设置网站顶部和底部离浏览器的上沿、下沿的距离,默认是0px,可以把这数值改大点来看看这个选项的设置效果,记得最后改回来就好,比如100px,看上去就真的像是把网页放在一个“盒子”里了~

Boxed Mode Offset Scroll Mode,在上面这一项设置为默认0px的时候,切换Framed Scrolling和Full Scrolling,看不出区别,但是改成100px之后,再来切换这个选项试试,就很好理解了。下面左边动图是Framed Scrolling,右边动图是Full Scrolling,大家可以体会下两者的不同:)

2. Menu

Menu菜单下有6个子菜单可设置:

  • Main Menu
  • Flyout Menu
  • Secondary Top Menu
  • Mobile Menu
  • Mega Menu
  • Main Menu Icons

Menu这个设置其实应该放到Header设置之后会比较合理,因为在Header->Header Content->Select a Header Layout中有 7 种Header样式可以选择,不同的选择,在Menu中所体现的设置会不一样。

了解这部分设置之前,最好是先新建一些常规页面,比如每个网站可能都会有的Home、About us、Products、Contact us之类,然后就可以去创建Menu,再到设置中来做些调整,就可以比较直观的看到设置产生的效果具体是什么样子。

Main Menu

在这里面可以针对主导航栏做大量样式上的设置,主要的比如:

  • Main Menu Height,调整导航栏的高度,在设置logo之后,可能这个区域就看上去不太正常了,需要调整这个设置的数值,通常情况下,Logo图片的高度70px左右即可,然后这个区域设置为90(单位是px,但是这个地方填写的时候不要写px);
  • Main Menu Highlight Style,设置鼠标移到菜单上的效果,有3种可以选择,选择不同的style相对应会有不同的设置;
  • Main Menu Item Padding,设置2个菜单之间的间距大小,根据导航菜单的实际情况进行调整;
  • Main Menu Drop/Dropdown相关,主导航中的二级菜单的那个部分的一些样式,比如是否有阴影之类;
  • Main Menu Search Icon,可选择是否在主导航中显示搜索按钮;
  • Main Menu Typography,关于Menu部分的字体、字体大小的设置都在这里找,而其他部分的字体需要Typography中进行设置;

Flyout Menu

这个设置需要先在 Header->Header Content->Select a Header Layout 选择第六个,然后可以做些字体和颜色的调整,做出来的效果大概如下图所示:

Flyout Menu

通常,在PC端的网站,还是不用这种样式的菜单吧。

Secondary Top Menu

这个设置则是需要先在 Header->Header Content->Select a Header Layout 中选择第2~5的样式,也就是主菜单上面还有一小行,这一小行分为左右2个区域,可以用来显示联系方式、SNS图标、Navigation或者留空白,具体想显示什么内容,可以在 Header Content 1 和 Header Content 2 中选择。

Flyout Menu

比如Header Content 1 我们选择了 Contact Info,Header Content 2 选择了 Navigation,那我们需要在创建Menu的时候,在Menu Settings中“只”勾选 Top Navigation,所创建的Menu就能显示在 Header Content 2,也就是顶部右侧那个区域。

至于 Secondary Top Menu 中那一堆的设置,基本上都是关于这个导航的颜色、字体相关设置。菜单样式如下图所示:

Flyout Menu

Mobile Menu

这个是设置在Mobile端的菜单的样式的,可以设置颜色、间距和字号大小。

同样在创建Menu的时候,在Menu Settings中要勾选Mobile Navigation。

Mega Menu

Mega Menu也是需要在创建和编辑Menu的时候进行选择,然后再在这里的设置才会能看到效果。如果你希望在主导航中展示3个层级的导航,比如Products下面有3个分类,每个分类下面还展示数个产品的链接,那可以考虑这种菜单形式,大概如下图所示:

Flyout Menu

关于Mega Menu的宽度调整,详见文章《如何调整Mega Menu宽度》

Main Menu Icons

在这里,可以设置所有Menu中icons的一些样式,比如:

  • icon想放在菜单文字的上、下、左、右?
  • icon的大小、颜色,以及鼠标移到菜单上的效果(hover效果);
  • icon如果是自定义上传的图片,这个尺寸控制可以在 Mega Menu Thumbnail Size 中设置;

关于给Menu加Icons,详见文章《如何给菜单添加icon》

Flyout Menu

3. Responsive

设置网站是否要自适应,以及触发自适应变化时的网站宽度设置。

默认是开启自适应了的,这个选项我们不用去给他做任何修改即可。

4. Colors

Colors中有3个选项可以设置,相应也有英文说明,简单翻译下重点:

  • Predefined Theme Skin,控制主题皮肤是浅色或深色。选择一个皮肤和所有颜色选项将更改为自定义的选择。
  • Predefined Color Scheme,控制整个主题的主色调方案。选择一个方案,所有的颜色选项将变为定义的选择。
  • Primary Color,控制整个主题高亮颜色。比如默认的链接hover效果颜色之类的。

关于颜色的搭配,找专业设计师来给建议会比较好。

我自己在这方面也是不足的,不过我们可以找国外那些做的好的网站参考着来哦。国内不少教育机构从国外抄内容、抄网站,咱外贸人也可以“抄一抄”。

5. Header

Header菜单下面有4个子菜单,分别是:

  • Header Content,在关于Menu设置的部分已经提到过这里面的设置,这里面的设置会影响Menu的相关设置选项;
  • Header Background Image,给 Header区域设置一个背景图,但凡涉及到用图片做背景,对图片要求都会比较高,随便找的图片大概率会比较丑,所以…非必要情况下一般就不用背景图咯;
  • Header Styling,在这里面可以设置 Header区域的一些样式,主要包括:
    • Header Padding,上下左右的一个间隙距离;
    • Header Shadow,可选择是否开启Header下方一个阴影区域;
    • 100% Header Width,选择Header区域是100%屏幕宽还是设置的Site Width宽;
    • Header Background Color,背景图不敢乱用,背景颜色还是可以试着来?不满意再改回来默认就是:)
    • Header Border Color,Header这个区域的边框颜色
    • Header Top Background Color,这个选项只有在 Header Content -> Select a Header Layout 中选择了2~5,才会出现,选其他几个Layout是不会有这个设置选项的。调整的是Header Top那一小条的背景颜色。如下图所示:
  • Sticky Header,开启后,当网页往下滚动的时候,可以把导航固定在最顶端,开启后可以设置这个固定的导航栏的样式,比如字体颜色、大小、菜单之间的间距、背景颜色等;

Logo菜单下还分Logo和Favicon。

  • Logo,可以设置默认的Logo、Sticky Header的Logo还有Mobile Logo,一般情况,设置了Default Logo就OK了。在上传Logo后,可能会遇到整个菜单的文字不是上下居中了,这个时候,可以在Logo Margins中调整上下的间距(默认是31px,有点太大了),并且,记住,去Menu -> Main Menu -> Main Menu Height 中调整导航菜单的高度,主题会根据你的Logo和设置的Logo Margins有个推荐数值。
  • Favicon,浏览器标签栏中的一个小图标(如下图所示),推荐大家一个 生成icon小图标的工具,更多工具可到“工具导航”中查看。

7. Page Title Bar

这个选项可设置的区域为上图所示区域,有2个子菜单:

  • Page Title Bar
    • 可以选择是否隐藏标题,只显示右侧面包屑的区域
    • 可以设置Ttitle Bar区域的高度、字体颜色、字体大小、背景图片或者背景颜色
    • Subheader的字体大小
  • Breadcrumbs
    • 可以选择是否展示面包屑导航的区域
    • 可以选择这个区域展示面包屑导航或者是搜索框
    • 可以设置面包屑导航的字体大小、字体颜色以及中间的分隔符

每个Portfolio、Page页面,都可以单独进行这些设置,具体设置的地方是在编辑的时候,有个 Fusion Page Options -> Page Title Bar 中有这些设置选项。另外,Subheader的文字也是在这个菜单中可以找到 Page Title Bar Custom Subheader Text 进行添加,加了Subheader Text 如下图所示效果:

8. Sliding Bar

Sliding Bar所在的位置大概如下图所示:

这个 Sliding Bar,建议关闭。因为在那个 + / – 图片中有文字 “Toggle SlidingBar Area”,而这个文字大概率是会被Google展示到你的搜索结果中的。就像下图所框出的部分:(随便搜了个是Avada做的站,这个站和我没半毛钱关系哈)

关于底部Footer区域的相关设置,都在这个菜单中。

有3个子菜单:

  • Footer Content,主要可以进行以下设置:
    • 开启或关闭Footer区域
    • Footer区域栏目数设置,可设置数值范围1~6,通常3、4栏比较常见
    • 开启或关闭Copyright区域
    • 设置Copyright区域的文字
    • Footer的一些特殊效果选择
  • Footer Background Image
    • 设置整个Footer区域的背景图片
  • Footer Styling
    • 设置Footer宽度是屏幕宽度的100%还是根据Site Width设置的宽度来
    • Footer离上下左右的间距
    • Footer背景颜色
    • Footer区域边框的大小和颜色
    • Footer中标题、正文的文字字体、颜色、字号
    • Copyright区域中的文字字体、颜色和字号

在编辑Portfolio、Page的时候,可以单独设置每个页面是否显示Footer、Copyright区域以及是否是100%的屏幕宽度。

具体设置在 Fusion Page Options -> Footer 中,可以覆盖在 Theme Options -> Footer 中的设置。

10. Sidebars

在Sidebar菜单下面,有7个子菜单,包含侧边栏总体的样式设置以及分别对6种类型的页面的侧边栏做设置

  • Sidebar Styling,在这里面可以做如下设置:
    • 选择是否要Sticky效果的侧边栏
    • 侧边栏背景颜色
    • 侧边栏上下左右的间距,Sidebar Padding这一个设置同时调整上下左右的间距
    • 侧边栏中的标题部分的文字大小、文字颜色以及标题区域的背景颜色
  • Pages
  • Portfolio Posts
  • Portfolio Archive
  • Blog Posts
  • Blog Archive
  • Search Page

对于后面6个菜单,在都仔细查看后,会发现有些设置是雷同的。

  • Pages / Portfolio Posts / Blog Posts,针对这3种类型的页面分别可以做侧边栏的设置,这3个菜单进去的设置都是4项,分别可以设置:
    • 可选择是否激活针对某类型页面的全局侧边栏,注意这个如果开启了,是会覆盖掉具体每个页面中关于Sidebar的设置的,也就是说比如如果我们希望不同的产品页面之间会有不同的侧边栏,那么就不要开启这个全局的设置;
    • 如果开启后,再设置 Global Sidebar 1 和 Global Sidebar 2
    • 设置默认的  Global Sidebar 1 是在页面的左侧还是右侧,注意这个左或者右的设置针对相应的Archive类型页面也生效
  • Portfolio Archive / Blog Archive,这些Archive页面不可以具体的编辑,也就是这里设置了, 默认就是全部这类型页面都设置了,所以只有具体设置2个侧边栏的具体内容是什么,不过通常我们的产品分类页并不打算用这个默认的Archive页面,那这个设置就不用管它了。
  • Search Page,3项设置,只是相比Pages少了个是否要开启全局,因为Search Page就一个页面,不存在要不要全局的问题了

这个设置中最需要注意的地方就在于:开启全局设置会覆盖具体编辑页面中的Fusion Page Options -> Sidebar 的设置,这和其他的一些设置的覆盖逻辑是反过来的,通常是具体页面的设置会覆盖掉Theme Options中的设置。

Avada团队如果以后能把这个逻辑矛盾改统一了就更好理解了。

11. Background

针对整个站点的背景图片或者背景颜色的设置。要出效果,得非常高质量的大图片,但是可能因为图片太大又会影响网站的打开速度。

这权衡和取舍需要根据各自的产品和实际需求来定夺。

12. Typography

在Typography中可以设置网站中文字的字体格式,当然具体的Menu、Footer区域的相关字体可到具体的相关菜单中设置,之前有提到。

3个菜单:

  • Body Typography,正文文本的字体、字体颜色、字体大小相关设置,主要可以从中选择Google Fonts。默认的字体确实很一般,可以在这诸多字体中挑选适合阅读的好看的字体
  • Headers Typography,这个Headers不是指Header区域,是指H1~H6标签。比如Page Title Bar中的那个标题就是H1标签,Sidebar中的标题H4标签,如下图所标识:
  • Custom Fonts,高级功能了,可以上传自定义字体,咱一般情况下就不用折腾这个了

13. Blog

其实这个设置是针对Post类型页面及Post Category的设置,不过通常,我会用Post来做News页面。

3个子菜单:

  • General Blog,Post分类页中的一些设置,最可能修改的一想设置是:Excerpt Length,调整摘要文字多少,基本上其他设置可以不需要调整,而且我们新建News汇总页面的时候,是采用的在Fusion Builder中增加Blog Elements,可以在其中调整布局、摘要长度等;
  • Blog Single Post,针对单独的Post页面中的设置,通常我会将Author Info Box,Social Sharing Box,Related Posts,Comments设置成off。各自可以自行选择是否展示这些信息。
  • Blog Meta,作者、分类、日期、评论等各种信息是否展示的设置,在外贸网站中,通常我就设置Post Meta Date是On的,其他信息可以不用展示。

14. Portfolio

和上面的Blog类似,只不过相关的设置是针对Portfolio类型页面及其分类的,我们常用Portfolio来做产品详情页面。

有2个子菜单:

  • General Portfolio,这里面最常用的设置是 Portfolio Slug ,这个设置非常重要,因为默认的是 portfolio-items,也就意味着产品详情页面的URL会是类似 www.domain.com/portfolio-items/extruder/ 这种,而通常,我们会把这个地方改成 product , 而务必需要注意的地方是:
    • 当Portfolio Slug改成了product ,那么不论是post、portfolio还是page中新建的页面,其自定义URL,都不能再用 product !
    • 设置完这个地方之后,打开页面可能还会报404错误,这时需要去 Dashboard -> Settings -> Permalinks 中重新点下 Save Changes。
  • Portfolio Single Post,包含Featured Images是否展示、Author等Meta信息、Social Sharing Box是否展示、Related Projects是否展示等等,在USEON案例网站中,所有这个选项下的,我都设置的是Off。

15. Social Media

在Social Media菜单下有4个子菜单:

  • Social Media Icons
  • Header Social Icons
  • Footer Social Icons
  • Social Sharing Box

这4个菜单的设置,不是并列关系,在Social Media Icons中的设置是另外3个设置的前提,也就是先要在这里面添加我们想要添加的Social Media,比如加个Youtube、Facebook之类的。

Header、Footer和Sharing Box的设置,分别是针对在Top Bar(Header Top)区域、Footer的Copyright Bar那个区域、还有Portfolio(产品详情页)中 展示的Social Icons的样式做设置,在useon案例中,我关闭了Footer、Sharing Box区域的Social Icons。

16. Slideshows

这里面的设置,你完全不去动他,也是能用的。

后面在关于产品详情页以及Elements的使用的时候,可能会再提到这个设置选项。

17. Elastic Slider

一般做Slider,我们可能会选用Layerslider之类,所以这个设置,不用管它,除非自己想要用Elastic Slider来做。

18. Lightbox

在产品详情页(portfolio)页面,设置第一个Featured Image,然后到详情页中去点击下那个图片,如下图所示,就是这个图片弹窗的效果。在这个设置选项中可以对这个效果做一些调整。

(因为在useon这个案例中,我并没有使用Featured Image的这个效果,所以找了另外一个Avada做的网站做示意,截图的gif不是居中的,所以看上去效果有点怪。)

19. Contact Form

通常,我们使用Contact Form 7来做询盘表单。这个选项不用管它。

关于询盘表单,还有一些第3方的,比如wufoo之类,有免费版和付费版,不过基于Contact Form 7的强大,基本上也可以不用第三方表单了。

20. Search Page

搜索结果页面的布局、搜出结果包含哪些内容、搜索结果中的搜索框的位置 等设置。

21. Extra

一些附加的设置选项,有6个子菜单,一些前面那些设置还解决不了的问题的设置,可以尝试去这里面找找看有没有希望。

其中可能有2个菜单中的设置可能会比较常用,其他的大多情况下默认就好:

  • Related Posts / Projects,产品页面是否开启相关产品,在这里面设置;
  • Featured Image Rollover,产品分类页中产品大图的那个动态效果,可以在这里设置;

(产品页 指 portfolio,产品分类页 指 page 中调用了 portfolio element )

22. Advanced

Advanced菜单中有3个子菜单:

  • Code Fields (Tracking etc.)
  • Theme Features
  • Dynamic CSS & JS

平常大家最可能用到的就是在Cold Fields中去添加Google Analytics的跟踪代码之类的了。

Theme Features默认的设置就OK,不过其中有一个设置:WordPress jpeg Quality会解决图片上传被自动压缩的问题。

Dynamic CSS & JS中的Reset Fusion Caches,可以解决部分样式不对的问题,比如《Avada主题升级后样式不对》

23. Custom CSS

这里就是涉及到自定义样式,有些样式再Options中没地方去自定义,那就只能自己写点css代码来调整。代码加这里面。

有些效果想要但是没法后台设置,自己又不会CSS就需要找人来去自定义样式了。

24. Fusion Builder Elements

这个里面的设置主要是针对Fusion Builder Elements的样式做一些个性化调整。

一般来说,里面的Button Element是最常见的需要修改的,其他大部分的Elements用默认的样式就能满足需求。

关于具体每个Elements的修改调整,后面再单独细说。

25. Import / Export

导入导出Theme Options的设置。

点击Download Data File,会导出一个json文件,文件名为:fusion_options_backup_xx-xx-xxxx.json,其中xx-xx-xxxx 是导出当天的日期。

主要用来备份当前的这些设置,建议在上线后备份一次存到自己本地或者云盘中。一般情况下,也不用管这个选项。