Theme Options简介

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

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

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

在这个选项中，主要可以设置：

• 网站布局方式选择，可以选择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，大家可以体会下两者的不同:)

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 选择第六个，然后可以做些字体和颜色的调整，做出来的效果大概如下图所示：

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

Secondary Top Menu

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

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

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

Mobile Menu

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

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

Mega Menu

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

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

Main Menu Icons

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

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

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

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

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

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

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

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

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

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小图标的工具，更多工具可到“工具导航”中查看。
  

这个选项可设置的区域为上图所示区域，有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 如下图所示效果：

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 中的设置。

在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团队如果以后能把这个逻辑矛盾改统一了就更好理解了。

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

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

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

3个菜单：

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

其实这个设置是针对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的，其他信息可以不用展示。

和上面的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。

在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。

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

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

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

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

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

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

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

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

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

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

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

（产品页 指 portfolio，产品分类页 指 page 中调用了 portfolio element ）

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主题升级后样式不对》。

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

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

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

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

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

导入导出Theme Options的设置。

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

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