Avada主题全局设置Global Options详细介绍

Avada主题全局设置一般称为Theme Options、Global Options或 options。这里的设置修改会影响 avada主题全局参数，是很重要的设置选项。因此如果你打算学习 avada主题，Global Options是第一个要了解和熟悉的选项。本文内容是老魏学习 avada主题的心得分享，希望对同样学习 avada主题的你有所帮助。

这是目前老魏写过很长的文章内容了，干脆做一个文章目录方便大家查看感兴趣的部分。

本文目录

1. 1. layout 布局
   2. Colors配色
   3. Header网页头部
   4. Menu菜单
   5. Logo标志
   6. Page Title Bar
   7. Breadcrumbs
   8. Sliding Bar
   9. Footer 页尾
   10. Sidebars侧边栏
   11. Background背景
   12. Typography字体
   13. Blog博客页
   14. Portfolio产品页
   15. Social Media社交媒体
   16. Slideshows幻灯片
   17. Elastic Slider弹性滑块
   18. Lightbox灯箱效果
   19. Contact Form联系表单
   20. Search Page搜索页
   21. Privacy隐私
   22. Extra附加设置
   23. Advanced高级配置
   24. Performance性能
   25. Custom CSS自定义CSS
   26. Avada Builder Elements Avada元素
   27. 安装 Avada主题条件

目录是手动添加的，操作方法请看WordPress添加锚点定位。不爱手动添加的可以用wordpress目录插件实现，请看LuckyWP Table of Contents插件_WordPress文章目录插件详细使用教程，WordPress文章目录插件_Easy Table of Contents插件安装设置详细教程，这两个都好用。

安装国外主题前提条件

Avada主题Global Options全局设置

Avada 的强项在于提供了超多设置选项，各种你想要的功能都有，不用敲代码就能实现很多功能。

进入 wordpress后台，在左侧选项栏目中找到 Avada > Options 点击进入。在 7.02版本中，Global Options中一级菜单有 28项，如下图所示：

Avada主题Global Options全局设置

下面我们挨个选项查看一遍，看看哪些选项重要就详细说，哪些选项不重要的就忽略掉，减轻学习量。

在使用过程中遇到某些选项一时间找不到，可以在搜索栏search for options，搜索一下关键词就出来了。

这里面老魏依旧使用英文版本 wordpress+avada主题+chrome浏览器，好处是多熟悉英文环境，不懂的地方用chrome浏览器翻译成中文再理解（谷歌浏览器如何在线翻译中文）。

layout 布局

顾名思义就是整个网页布局形式。

• Layout布局：分为 boxed和wide两种形式。boxed就是像个盒子一样比较小的尺寸，wide是当前主流形式，把页面内容铺满全部网页。默认是 wide也是大部分时候选择的形式；
• site width网页宽度：7.0版本默认 1200px；
• Page Content Padding 页面内容距离：网页内容距离上面的top天和下面 bottom地的间距大小；
• 100% Width Padding 100%宽度距离：网页内容与左右的距离大小，特指 100% site width网页宽度, 100% width page template 页面模板宽度 or 100% width post option post页面宽度时。

Single Sidebar Layouts单侧边栏布局

• Single Sidebar Width单侧边栏宽度：只有一个 sidebar时的宽度，以百分比表示；
• Single Sidebar Gutter单侧边栏间距：主要内容区（文章内容）与单侧边栏的距离，以百分比表示。

Dual Sidebar Layouts双侧边栏布局

• Dual Sidebar Width 1双侧边栏宽度1：当双侧边栏存在时控制其中一个 sidebar1的宽度，百分比表示；
• Dual Sidebar Width 2双侧边栏宽度2：第二个侧边栏宽度；
• Dual Sidebar Gutter双侧边栏间距：主要内容区（文章内容）与单侧边栏的距离，以百分比表示。

如上图所示，Single Sidebar Width默认宽度24%，那么内容区域的宽度怎么算呢？不是100%-24%，而是100%-24%-6%，这个6%是内容区域和Sidebar区域的间距Single Sidebar Gutter，同理知道Dual Sidebar Layouts的计算方法是 100%-20%-20%-4%-4%。

Boxed和Wide选择

• Boxed限制页面宽度，包括header、page title bar和footer部分都被限制了，有点像 80/90年代的网页那种比较窄的设计风格；
• Wide主要依据Site Width设置好的尺寸，实际上 Width是指Content页面内容区域+Sidebar侧边栏的宽度，而网站 header头部和 footer尾部还是自适应浏览器宽度；
• 按照现在的流行趋势，老魏建议选择 Wide布局方式，更美观大气。

Responsive自适应

设置网站自适应的开关，当遇到不同尺寸屏幕时网页宽度的自适应变化设置。

默认开启，并且一般不需要改动。

Colors配色

这里是全局配色设置，部分特殊区域的颜色比如菜单颜色要去菜单选项卡中设置。

• Primary Color主要颜色：整个主题的高亮颜色。比如超链接hover效果的颜色。
• Predefined Theme Skin预定主题外观：设置主题皮肤浅色或深色。选择后所有颜色选项会随之更改。个别页面和 fusion页面的设置会覆盖这个选项，因为有些部分可能无法看到更改。比如说如果你变更一个页面为浅色但看到的还是深色，请使用 fusion编辑器编辑页面并查看每个container容器的背景色设置。
• Predefined Color Scheme，设置主题的主色调方案。选择一个方案，所有的颜色选项将变为自定义选择。

关于颜色设置这方面 avada主题DEMO都搭配的很漂亮，如果我们自己不懂这块的话可能设计出来的网站配色就会不协调。解决办法是大家多去参考国外网站是怎么配色的，从中汲取一些营养。

整体布局的详细解释请看通过Avada主题了解网页基本结构和页面布局，说的更详细了。

Header网页头部

包括4个设置项如下：

1、Header Content头部内容

• header position头部位置，可选 top，left，right。主菜单高度、头部间距和 logo边距将根据你选项自动调整到较美观的位置。这部分和下面Menu设置有关，会影响Menu的相关设置；
• Select a Header Layout选择头部布局：总的网页头部布局，共有7种头部形式供选择。第2个~第5个允许额外包含电话、邮箱和社交媒体图标的位置；
• Slider Position滑块位置：设置网页头部的默认绿色滑块在上面还是下面；
• Header Content 1和Header Content 2就是上面第2个~第5个的头部布局，左右分布选择项；
• Phone Number For Contact Info电话联系方式，Email Address For Contact Info电邮联系方式，用于填充上面提到的头部区域。

avada主题提供的默认header形式

2、Header Background Image头部背景图片

用于给 Header设置背景图，大家不要觉得简单，用图片做背景对图片要求比较高，很可能会导致图片与原来网页配色、布局等都不协调，除非万不得已，否则老魏不建议换背景图。

3、Header Styling头部样式

• Header Padding头部间距：设置页头上下左右间距；
• Header Shadow头部阴影：是否开启Header下面的阴影区域，增加美观度；
• 100% Header Width头部宽度：设置Header区域是100%屏幕宽还是跟随layout布局中设置的Site Width宽；
• Header Background Color背景颜色：修改头部背景颜色；
• Archive Header Background Color存档页头背景色：存档页、搜索页和404页中页头的背景色和不透明度。对于页头的不透明度设置小于1会完全删除页眉高度。对于侧边栏头部，设置低于1的不透明度将显示颜色覆盖；
• Header Border Color页头边框颜色：页头的边框颜色。如果使用左侧或右侧页头的位置则控制菜单分隔线；
• Header Top Background Color页头顶部背景色：仅在Header Content > Select a Header Layout选择了2~5的形式才会出现。调整Header 上面那一小条的背景颜色，具体可参考上图中放大的 header 绿色部分。

4、Sticky Header粘性页头

开启后网页往下滚动时导航栏会固定在最上面。用于设置固定导航栏的样式，设置在平板、移动端、动画效果（仅在页头形式的v1 - v3, v6~v7有效）、固定页头阴影效果（对 IE11以下版本无效）、字体颜色、大小、菜单之间的间距、背景颜色等。

Header是网站相当重要的组成部分，这里面的设置大家可以挨个设置一下，同时查看前台页面效果就明白了。

5、Header菜单高度主要取决于 logo图片高度和上下边距。控制好 logo高度然后 header菜单高度就好了，把 logo上下边距调好也能控制 header菜单高度。

6、老魏分享过Avada主题制作header页头/页眉详细过程把以上内容综合应用了，属于实操教程。

Menu菜单

有 6个子选项供设置，Menu和 Header关系比较紧密，在Header->Header Content->Select a Header Layout中有 7 种不同的 Header样式选择，不同选择在 Menu对应的设置也不同。

为了查看 Menu设置完毕的效果，老魏建议大家在 avada主题中新建 home，about us，products，news，contact us等page页面，并且在 wordpress后台的 Appearance外观 > Menus > Menu structure 菜单结构中添加 avada主题menu菜单进去。然后再去调整 Menu 就能看到更直观的结果了。

1、Main Menu

设置主导航栏样式。

• Main Menu Height主菜单高度：默认单位像素，这里根据 logo高度进行调整，比如logo高度75，这个高度设置为 90就行；
• Main Menu Highlight Style主菜单高亮样式：主菜单链接的高亮样式，共有5种不同样式供选择。其实就是鼠标放到菜单之前和之后的效果，还同时影响菜单下拉列表外观。top bar 和 bottom bar 分别是滑块在菜单上面和下面，那 3种样式大家自己试试就知道了，都挺美观的。Arrow箭头样式不能在透明标题背景下使用，bar高亮会垂直显示在侧标题布局上。重要提示：Arrow箭头和 Background背景样式可能需要根据所需效果配置其他选项。
• Main Menu Item 这里面有很多选项，设置主菜单间距、移动端间距、主菜单阴影效果、主菜单下拉菜单，二级菜单等的动画效果：包括 fade淡入、slide幻灯片两种效果、主菜单下拉宽度、主菜单下拉项宽度、主菜单下拉分隔符、主菜单下拉指示器、主菜单搜索图标、主菜单搜索布局、主菜单图标圆形边框、菜单高亮显示标签半径、主菜单下拉背景颜色及悬停颜色、主菜单下拉分隔符颜色、
• Main Menu Typography主菜单字体：包括字体选择，颜色，主菜单文本悬停和活动状态、高亮显示栏和下拉边框的颜色，主菜单下拉字体颜色，主菜单下拉式字体大小，总而言之Menu字体、大小都在这设置，网页其他部分字体去 Typography选项卡设置；

2、Flyout Menu弹出式菜单

前提是在 Header->Header Content->Select a Header Layout 选择第 6个header形式，然后在这里设置字体和颜色，效果和手机浏览器打开网站栏目有点类似，老魏不太推荐这种菜单形式，不过你可以试试再决定取舍。

3、Secondary Top Menu辅助顶部菜单

需要先在 Header > Header Content > Select a Header Layout 中选择第2~5的 header形式，就是主菜单上面还有一行内容，这一行内容分为左右2个区域，显示联系方式、SNS图标、Navigation导航栏或者 leave empty留白。具体显示内容在 Header > Header Content 1 和 Header Content 2 中选择。

比如Header Content 1 选择 Contact Info，Header Content 2 选择 Social Links，在创建Menu的时候，在wordpress后台的 Appearance外观 > Menus > Menu Settings中只勾选 Top Navigation，这时在顶部右侧区域 Header Content 2那里就看到结果了，如下图所示从上到下是整个设置过程。

Secondary Top Menu 中那么多设置都是关于导航的颜色、字体、宽度、间距、背景色、分隔线颜色、悬停颜色等相关设置。大家可以执行一个个修改测试过去，同时查看前台页面效果。

4、Mobile Menu

设置Mobile移动端菜单样式，包括设计样式、搜索图标、背景色、移动端菜单字体、颜色、字号、悬停颜色等。

前提是创建和编辑avada主题menu菜单的时候，在wordpress后台 Appearance外观 > Menus > Menu Settings中勾选 Mobile Navigation。

5、Mega Menu

Mega Menu需要在创建和编辑Menu时提前进行设置，一般用于有一级分类和二级分类及更多级分类的菜单使用。然后再在这里设置才能看到效果。如果想要在主导航（一级导航）中展示第二层级的导航（二级导航也就是二级page页面），比如Products下面有3个分类，每个分类下面包括多个产品，就可以使用这种菜单形式。

如下图所示就是 avada主题 Mega Menu超级菜单的展现形式，大家还可以加以变化，在二级分类中添加图片，让二级导航栏变的更丰富多彩，客户看着也很容易分辨和查找不同产品类别。

关于mega menu超级菜单的宽度如何调整，请看Avada主题Mega Menu宽度如何调整，内容较多就不放这里了。

avada主题的Mega Menu

6、Main Menu Icons

设置所有Menu菜单中 icon 图标样式。

• Main Menu Icon Position：主菜单icon图标放在菜单文字的上、右、下、左哪个位置；
• Main Menu Icon Size，Icon Color，Hover CLolor：icon图标的大小、颜色，鼠标悬停（hover）在菜单上的颜色；
• Mega Menu Thumbnail Size：如果是自定义上传图片，设置顶级mega menu 缩略图的宽度和高度。

下图是老魏随便选择了几款内置图标，绿色是当前页面和鼠标悬停颜色，粉色是展示颜色，还可以按个人喜好把图标放到文字上下左右位置，这个在上面都有叙述。更详细内容请看Avada主题导航菜单icon图标如何添加。

avada主题的icon图标展示

Logo标志

Logo菜单包括 Logo和 Favicon 标志。

Logo就是网站左上角的品牌标志，这里可以设置默认Logo、Sticky Header跟随页头Logo还有Mobile Logo ，大部分时候设置默认Default Logo就可以了。

如果上传Logo导致菜单文字上下不居中走形了，可以先调整 logo尺寸，再去 Logo Margins调整上下间距，同时去Menu -> Main Menu -> Main Menu Height 调整导航菜单高度，主题会根据你这两处的调整推荐参考数值。

Favicon标志是浏览器标签栏的小图标，老魏在之前的文章中重点说过Avada主题网站favicon图标设置详细图文教程。

Page Title Bar

设置网站logo 和网页内容中间区域，也就是上图所示 Blog那一条位置。

• Page Title Bar：可以选择显示标题和内容、只显示内容、隐藏三种形式。是否显示面包屑、搜索栏，是否显示标题；
• Page Title Bar Styling：设置Ttitle Bar区域宽度、高度、移动端高度、背景颜色、边框颜色、字体大小、标题行高度、字体颜色、字体位置；
• Page Title Bar Background Image：添加标题栏背景图片，是否100%宽度，淡入动画；
• Portfolio、Page页面可以对每一篇进行 page title bar设置，在编辑时页面最下面的 Avada Page Options -> Page Title Bar 中有对应选项

Breadcrumbs面包屑导航

设置面包屑导航。移动端是否开启面包屑导航，面包屑前缀文字，分隔符，文字大小，文字颜色，文字悬停颜色，面包屑路径上是否展示post分类及post存档。

Sliding Bar

建议关闭。Sliding Bar是一种滑动特效，包含 “Toggle SlidingBar Area”文字，会被Google展示到搜索结果中，正好位于谷歌抓取结果最前面，会干扰正常网站 seo。

Footer 页尾

页尾底部Footer区域的设置，包括3个子菜单。

• Footer Content开启或关闭Footer区域；
• Number of Footer Columns 页脚栏目数量范围1~6，一般我们用3、4栏的时候较多；
• Center Footer Widgets Content 开启或关闭小部件区域；
• 页脚Footer添加特殊效果；
• 是否开启copyright，开启后是否居中，也可以修改、输入版权文字。
• Footer Background Image页脚背景图，额外上传图片，设置100%图片宽度，是否铺满整个页脚，及背景图片位置。
• Footer Styling页脚样式是否100%页脚宽度还是跟随Site Width宽度，页脚上下左右的间隔，背景颜色，页脚边框大小和颜色；
• 页脚小部件区域垂直分隔线、大小、样式、颜色、间隔；
• copyright区域的间隔、背景颜色、边框大小、边框尺寸；
• 页脚字体、颜色、链接颜色、悬停颜色；
• copyright文字颜色、字体大小、链接颜色；
• 编辑Portfolio、Page内容时可以单独设置是否显示Footer、Copyright及是否是100%宽度。在每个页面下面的 Avada Page Options -> Footer 中的设置可以覆盖 Options > Footer 设置；
• 更多详情看Avada主题页脚Footer设置过程详细讲解。

Sidebars侧边栏

有7个子菜单，包含侧边栏样式设置以及分别对page、portfolio、blog、搜索页等类型的侧边栏设置。

• Sidebar Styling从多个Sticky效果侧边栏中选择，侧边栏上下左右的间距，侧边栏背景颜色，侧边栏标题文字大小、文字颜色以及标题区域的背景颜色，Pages / Portfolio Posts / Blog Posts 这3种页面设置选项相同；
• 是否强制开启全局侧边栏，对上面四种页面都生效。开启后覆盖具体页面中Sidebar设置项，如果想要不同页面间显示不同侧边栏，就别开启这里；
• 选择 Global Sidebar 1 和 Global Sidebar 2这两种全局侧边栏的小部件样式，2只有在 1选择具体小部件之后才能生效；
• 设置 Global Sidebar在页面左侧还是右侧，如果2也选择了那么会在另外一边显示，Archive页面的左右设置也在这里；
• Portfolio Archive / Blog Archive只能选择使用哪个小部件；
• Search Page也有 1和2两条，以及左右位置选择。

Background背景

• Page Background 添加页面背景图，背景颜色，是否展示背景图案；
• Main Content Background 主内容背景颜色，图片；

Avada主题demo中的背景图片，往往比较美观大气，颜色搭配也很好。自己上传的往往缺乏专业设计，与整个网站格格不入，再就是的图片尺寸往往会达到 1900px*1200px，尺寸过大会严重影响网站打开速度。大家根据自己业务需要选择吧。

Typography字体

这里是全局字体设置，具体的字体设置比如菜单字体在菜单选项卡中能找到。

• Body Typography 网站正文文本字体、字体颜色、字体大小、字体宽度样式、字体高度、文字间隔。大家可以在这里选择合适的字体使用；
• Headers Typography指的是h1~h6的字体参数设置。同样的具体某个参数可以在对应的选项卡中设置；
• Custom Fonts 上传自定义字体，一般不使用。

Blog博客页

一般用于 Post页面及Post Category，Post可以用来做 blog 或 news页面。

• General Blog，Post页面设置一般都默认不改动。唯一能改动的是 Excerpt Length调整摘要文字多少。一般在编辑页面的 avada fusion builder中增加Blog Elements，在那里面进行设置；
• Blog Single Post单独Post页面设置，是否100%全宽，是否展示特色图片/视频，是否显示上一页下一页，post标题显示在特色图片上、下还是禁用，对于企业网站来说Author Info Box，Comments设置成off，Social Sharing Box，Related Posts则根据业务情况选择是否展示；
• Blog Meta设置作者、日期、分类、评论、阅读更多等各种信息是否显示。企业网站中一般 除了日期、阅读更多之外其余都关闭掉。包括post标签也关闭。文本字体大小和日期格式设置。

Portfolio产品页

与Blog差不多的意思，一般用Portfolio 产品详情页。

• General Portfolio大部分选项都不用改，最重要的设置项是 Portfolio Slug ，默认url是 portfolio-items，导致产品详情页面URL是域名/portfolio-items/telephone/，按照惯例会把这里改成 product。相应的post、portfolio、page的页面URL，都不能再用 product了。打开页面时如果报404错误就去 Dashboard > Settings > Permalinks固定链接中点击保存，就是说重新设置一遍固定链接就正常了；
• Portfolio Single Post设置 portfolio的具体页面，包含上一篇下一篇，100%页面宽度，特色图像是半宽还是全宽，Featured Images是否显示、是否显示标题及内容，超链接打开方式，Author、Social Sharing Box、Related Projects、评论是否显示。

Social Media社交媒体

• Social Media Icons中的设置是下面3个设置的前提，先要在这里面添加Social Media，比如Facebook、Youtube。
• Header Social Icons、Footer Social Icons、Social Sharing Box用来设置文字颜色、大小、样式等。分别是对Top Bar(Header Top)、Footer Copyright Bar、以及Portfolio产品详情页中展示的Social Icons设置，这里根据具体情况自行选择是否开启及设置。

Slideshows幻灯片

这里默认也不影响幻灯片使用。Avada主题幻灯片一向比较霸道，对访客的系统资源要求较高，很多网站打开速度慢就是因为开启了幻灯片导致的，关掉之后首页打开速度立马快了。

Elastic Slider弹性滑块

做Slider较多人会用 Layerslider实现，所以说除非你打算用 Elastic Slider做，否则请忽略掉。

Lightbox灯箱效果

进入产品详情页（portfolio）页面设置第一个 Featured Image特色图片，前台打开详情页点击图片会出现图片弹窗效果，俗称“灯箱”。

这里设置是否开启灯箱效果，单独blog和portfolio灯箱显示内容，灯箱皮肤样式，灯箱缩略图位置，动画速度，是否显示箭头，是否显示多媒体start/stop按钮，是否自动播放灯箱效果，幻灯片放映速度，背景不透明度，是否显示图像标题，社交分享按钮，是否启用灯箱深度链接图像，是否显示post图片，幻灯片放映视频宽度和高度。

Contact Form

• 多数人会用 Contact Form 7插件做询盘表单，功能更全面和强大。因此这里一般会忽视掉；
• Google map，输入 Google map API key在 contact页面添加谷歌地图，地址，边距，地图缩放级别越大，分辨率越高。地图旋转等选项；
• Google Map Styling可以选择及设置谷歌地图样式，选择自定义样式要添加颜色、内容等；
• 更多详情看Avada主题Contact页面制作详细图文教程。

Search Page

搜索结果页面设置，将搜索结果设置为可选择的页面类型，是否仅发布标题，搜索表单设计，在菜单搜索字段和其他合适的搜索表单上是否启用实时搜索结果。

Privacy隐私

• Google & Font Awesome Fonts Mode 设置为 local时这两款字体会下载到服务器上。设置为“CDN”可以使用Google和FontAwesome的CDN；
• 隐私同意书启用此选项可在获得用户同意之前阻止加载嵌入和脚本；
• 隐私栏打开以启用页面底部的隐私栏。

Extra附加设置

额外附加的选项，如果上面那些设置还解决不了的问题，在这里面也许能找到解决办法。

需要手动修改的是开启在社交链接中添加“nofollow”属性，这个有利于网站seo权重不流失。

其中下面这两个项目会常用，可以多留意，其他项目默认。

• Related Posts / Projects 产品页面（portfolio）是否开启相关产品；
• Featured Image Rollover 产品分类页（page 调用了 portfolio element ）中产品大图动态效果；
• Google reCAPTCHA要用，不然垃圾机器人太烦人了，天天把你的 contact form充满。

Advanced高级配置

• Tracking Code网站跟踪代码，把Google Analytics跟踪代码放进去；
• Theme Features默认就行了。

Performance性能

• Enable Lazy Loading为网站的图像启用延迟加载以提高性能，推荐开启。很多插件中的这个功能就可以关闭了；
• Reset Avada Caches重置 avada css 和 js缓存。解决主题升级后网站样式错乱的问题；
• 其他选项默认就行。

Custom CSS自定义CSS

自定义样式表，有些地方实现功能要依靠手动添加样式表代码来实现。

Avada Builder Elements Avada元素

这些选项会全局影响Avada Builder元素。当你单独编辑post，portfilio时全局设置会被每个元素的单独设置覆盖。

老魏总结

Avada主题全局设置Global Options是一个特别重要的设置中心，管辖着 avada主题大部分设置内容。如果设置参数相同，这里面的内容会被具体设置页面所覆盖，在设计网站时经常需要来这里修改参数，所以大家要对这里有一定的了解。新手、小白也不要怕麻烦，用到的时候这里多改几次再前台看看效果就明白是怎么回事了。