这篇文章是一篇，使用 WordPress 的 Avada 主题主题，从 0 到 1 的完整「 Avada教程 」。
跟着文章动作，你将学会 WordPress 网页制作，不但是定制化且支持响应式（手机版）。
若有任何操作上问题，欢迎在下方留言区发问，我会尽力的为你们解答，文章教程如下：
- 1. 如何搭建网站？
- 2. Avada WordPress 主题介绍
- 3. 购买 Avada 主题
- 4. 安装 Avada 主题
- 5. 套用默认模板
- 6. 更改 Header（网站页首）
- 7. 更改网站菜单
- 8. 页面布局观念
- 9. Avada Builder 页面编辑器
- 10. 添加或编辑页面（使用 Avada Builder）
- 11.页面标题栏调整
- 12. 添加或编辑文章
- 13.首页轮播图调整
- 14. 更改 Footer（网站页尾）
- 15.储存网站布局
- 16. 客制化网页设计
- WordPress 学习资源
好，话不多说，我们开始学习之旅吧：）
1. 如何搭建网站？
如果你是新手入门，第一次学习自架网站，可参考 Bluehost 主机教程，完成个人域申请+主机租用+WordPress 网站建置。
使用 Bluehost 的好处，一来是费用便宜比较没负担，二来是接口简单容易上手，是最推荐新手使用的一款入门主机。
假设你对网站速度 or 稳定性有更高的要求，可参考 A2 Hosting 的 Turbo Boost 方案，或是 Cloudways 云代管主机（VPS 主机），虽然费用会稍微高一些，但这两台的速度会更快。
这些都是优质 WordPress 主机，各有不同的使用场景，相关比较可参考 WordPress 优质主机。
个人域名申请+主机租用+WordPress 网站建置，都处理完毕之后，就能来进行本文的教程啦：）
2. Avada WordPress 主题介绍
Avada 是一款超热门 WordPress 综合型主题主题，它在 ThemeForest 主题森林中，狂销 60w+ 是目前销售数量的 No.1，这是极为惊人的。 更多 Avada 完整教程。
你不需任何编码知识，Avada 几乎可设计任何风格的网站，只需发挥想象力。
不论你想搭建博客、形象官网设计、搭建网络开店平台 .. ，对 Avada 都不是难事。
超过 60+ 个展示网站，可直接一键导入，再修改成自己的网页设计即可。
网页可使用组件高达 70 多种，能客制化网站搭建，组合成任何你想要的网站设计。
Avada Builder 是 Avada 的页面编辑器，所见即所得的方式，用拖曳直接就能网页制作，得来全不费功夫。
且能帮助你修改网站头部、尾部、侧边栏、网站页面，几乎你看得到的地方，交给 Avada 就对了。
同步支持手机页面呈现、优质的主题速度、SEO优化 .. ，这是很正常的事。
Avada 是专家网页设计的绝佳拍档，也可以成为你的好伙伴。
3. 购买 Avada 主题
这章节会示范，如何在 themeforest 主题森林购买 WordPress 主题主题，详细流程请继续学习。
首先，前往 Avada 主题主题，点击「 Buy Now 」进行购买流程。
用户信息需都填写英文，姓名可到外交部查询，完成后点 Next。
填入账单信息，如果没有公司可以空白，地址需填入英文，邮递区号需填国际码（4 – 9 码），可用 中华邮政 翻译查询，没有洲所以输入 Taiwan 就好，完成后点下一步。
输入付款信息，常用的有信用卡或 PayPal 付款，这里用信用卡示范，确认金额正确后，点击按钮确认付款。
这样一来 WordPress 主题主题就购买完成啰！ 下一章节，我们会进行主题安装教程。
4. 安装 Avada 主题
这章节会示范如何把第三方主题，安装到 WordPress 网站上，我们开始吧。
主题购买完成后，点击右上角图像前往downloads页面。
在购买列表，会看到刚买的主题，点击 Download > Installable WordPress file only，单纯下载 WordPress 主题安装文件。
接着，前往并登入 WordPress 后台，到 外观 > 主题主题 > 安装主题主题 > 上传主题主题。
上传刚下载的 Newspaper WordPress 主题文档（副档名是zip），安装成功后就直接启用，或参考 WordPress 主题安装 有详细教程。
安装启用完成，我们需填入 Avada 的产品序号，这是预防盗版用的，前往 Dashboard 照着下图操作，点击链接前往 Envato 设定 API。
接着命名凭证，然后照下图“ 勾选允许权限 ”，完成后就确认发送，开始生成凭证号码。
成功生成后，记得复制凭证密码，打勾确认会妥善保管凭证，最后点击确认。
回到 WordPress 后台，把刚复制的凭证密码贴至注册框，点击 Submit，完成后会出现打勾的符号，代表凭证已经注册成功。 此时，Avada 功能就正式被激活。
接着，我们需安装 Avada 必备插件，才能帮助它运作，前往 Avada > Maintenance > Plugins / Add-ons，把插件上有标注 Required 都安装。
这样一来，WordPress Avada 的前置设定就都完成了。
5. 套用默认模板
Avada 有内置许多高质感的模板，可以直接引入使用，节省要重新设计的时间。
首先前往 Avada > Websites，会发现有非常多模板，可以先跟着我用同样板练习，点 import 安装（之后都可以再换）。
接着，安装样板必备插件和导入样板资料，好了就点 Import 导入。
导入完成后，如果没看到网站菜单，可前往 WordPress 外观 > 菜单，设定菜单位置到主菜单即可。
前往网站前台，会发现预设样板安装好了，太棒了。 接下来，只要修改里面的内容，很快就有网站可以用了。
6. 更改 Header（网站首页）
有照着 Avada教程流程，默认样板应该已经安装完成了，接着就来更改网站页首，这里主要教如何更改 Logo 和一些版型调整。
首先点击 WordPress Avada 插件内的 Avada Live，就可以前往页面编辑器。
或是到网站前台任一个页面，点击 Edit Live 就能编辑当前页面。
接着，把鼠标移至页首，会出现 Edit Logo 点击就可编辑 Logo，左侧就会出现可修改内容。
因为可修改的很多，大概就是设定 Logo 间距、链接、电脑和手机版 Logo，完成后点 Save 储存。
左侧Logo设定好了回到上一页，也有网站图标可以做设定。 接着，我们可以更改页首布局和样式。
- Header Content（页首布局）：调整页首Logo和菜单排法，更动幅度最大。
- Header Styling（样式设置）：调整页首内距、背景颜色 ..
- Sticky Header（置顶页首）：调整是否置顶页首、不同装置是否置顶、置顶相关的颜色表示 ..
这样一来，你就能自由客制化网站页首，修改完毕后别忘了点 Save 储存，设计成你喜欢的样子吧。
7. 更改网站菜单
这章节会教如何调整网站菜单，鼠标移至页首会出现工具栏，点击 Edit Main Menu（编辑主菜单）。
可以把任一个页面、文章、分类等 .. 放入到菜单里，菜单可以拖放排序。 可以参考 WordPress 菜单设定，有更多教程。
这边示范新增一个子菜单，然后确认菜单出现的位置（下面是设定主菜单），完成后储存。
来到前台看一下，果然刚设定的子菜单出现了。
Main Menu（主菜单） & Mobile Menu（手机菜单），这两个是菜单样式，主要更改的地方。
Main Menu（主菜单）调整
首先，点击侧边栏的“ 菜单 > Main Menu ”，这里可修改主菜单样式，内容满多种的，如：间距、字体大小、颜色等 .. 。
我把几个功能标示出来，还有文字字体、大小、间距（这下图没列出来，需自己找一下），调整的数据不一定要跟我一样，修改完成后记得储存，如下图：
Mobile Menu（手机菜单）调整
点击侧边栏的“ 菜单 > Mobile Menu 」，这里可修改手机版菜单样式，如：菜单风格、项目高度、字体大小（Font Size）、颜色（Font Color）等 ..。
可以切换成手机版浏览状态，修改完成后Save储存即可。
以上就是 Avada教程 有关网站菜单的调整，希望有帮助到你。
8. 页面布局观念
想使用 Avada教程 ，进行客制化网页设计页面吗？ 一个页面的组成，主要由这 3 个组合而成，由大到小层层包裹，依序是：
- Container（容器）：一个区块的最外层，里面会包不同数量的 Column。
- Column（字段）：包在 Container 内，可自订多个 Column，数字凑成 1，即形成一排。
- Element（元件）：包在 Column 内，可自订多个 Element，如：文字、图片等 .. 工具。
可以把它想成一部车子，最外层有车壳（Container），里面有 4 个位置（Column），位置上有人（Element），是不是容易了解许多：）
也可以随意找个页面，然后点击上方「Toggle WireFrame 」即可切换模式，方便浏览网站架构，如下：
上图的 Column 字位比例，如果数字加总为 1，就会形成一排，超过则会往下排列，以此类推。
一个新的布局新增，流程会是 Container > Column > Element 」，如果有套用预设样板， Avada 都大致做好了，当然你也可以自行新增或删除多余的区块，如下：
或是切换回所见即所得模式，直接在想要添加的区块，点击 Add Container 也能够新增页面布局。
这章节的网页制作课程 ，大家应该学了不少布局观念了，这样如果需客制化网页设计，相信也容易上手许多。
9. Avada Builder 页面编辑器
Avada Builder 是 Avada 的所见即所得编辑器，可加速网站设计流程，这章节会做个介绍。
首先，任意选择一个页面 or 文章，进入后会发现面板有变化，有 Avada Builder（布局编辑器）& Avada Live （视觉编辑器）两种。
我自己的使用方式，主要是使用 Avada Live 设计（比较直觉），Avada Builder 当作辅助使用。
点击上图 Avada Live 按钮，会看到顶端有一排的工具栏。
由于功能满多的，可依照号码，对照下面说明，如下：
顶端工具栏，功能介绍：
- 切换侧边栏（Toggle Sidebar）：有分全局/页面/组件，可供页面调整。
- 引用排版&组件（Library）：可引用公版&自订布局，和自订组件。
- 装置切换（Responsive）：切换不同装置浏览。
- 模式切换（Toggle WireFrame）：有一般版&线上版，可供网页制作设计。
- 线上预览（Preview）：发布文章前，可以先预览一下。
- 发布&草稿（Publish & Draft）：切换页面模式。
- 储存（Save）：保存内容。
这边对侧边栏（Toggle Sidebar）做个介绍，当点击它后，会有 3 个分页可以切换：
分别是全站样式（更改整个网站）、页面样式（更改当前页面）、组件调整（更改指定元件）。
这是重要观念唷，整个网站页面编辑都环绕在这。
以上是介绍 Avada 的页面编辑器介绍，有了它定制网页设计会变得很容易。
10. 添加或编辑页面（使用 Avada Builder）
在这篇，会分享如何引入其他 Avada 模板的页面布局，并改成自己想要的内容，这样可以加快网页设计速度，分几个小步骤进行 Avada教程 。
Step1：导入布局
首先前往 WordPress 后台，使用 Avada 的 Avada Live 」新增一个页面。
点击上方的 Library 资源库，可以任意导入所有 Avada 指定页面，这边我先导入 Avada Agency 的 About us 页面。
Library 」，选取「 Avada Bakery 」主题模板，并导入「 About 」页面布局，如下：
Step2：修改内容和删除多余的布局
试着改看看内容，首先滑到想更改的区块，点选中间的笔做修改，右侧会出现可修改选项，你可以填入标题、文字图片，丰富网站页面。
如果想要删除多余的布局或区块，一样移到该区块点删除即可。
备注：删除 Container（容器）、Column（字段）、Element（元件）是不一样的唷，上面章节有解释差异。
Step3：新增功能组件
再来更改一下右边的区块，模板默认没有元件，所以我们来新增一个元件，如下：
点击后会出现，超多种 Avada 功能组件，可以自由使用客制化网页设计。
Step4：页面设定和发布上线
页面设计完成后，可以做些基本设定，再放置网站菜单中，这样 WordPress 前台画面就会出现啰。
首先，在侧边栏点击Page Options>Settings前往页面设定，帮页面取个标题&设定链接，页面模式改成Publish（发布状态），最后进行储存。
前往 WordPress后台“ 外观 > 菜单 ”，Avada 样板默认有帮我们添加几个菜单（像是页首选单、页尾菜单 .. ），先切换成 Main Menu 主菜单。
然后把刚新增的页面放入到菜单列表中，并选择出现的位置，最后记得储存。 也可以参考 WordPress 菜单制作，有更多相关教程。
回到 WordPress 网站前台看一下成果，Great！ 果然页面顺利出现了。
这样你就可以照着流程，慢慢设计出不同的网站页面，如果想调整菜单字体大小、间距等 .. ，刚上面章节也有教程。
简单来说，善用现成的布局，会帮助你节省时间唷。
11.页面标题栏调整
这章节满容易上手的，来教大家如何调整页面标题栏，接着来学习。
前往刚添加的页面，滑到展示栏上方点 Edit Page TitleBar，里面可调整是否开启、文本内容、文字大小、字段高度、背景设置 .. 。
左侧边栏往下滑，可以调整文字对齐、文字内容、大小 .. ，还有许多功能可调整，可自己玩玩看。
刚刚我们都是调整当前页面，如果想要一次更改全部的页面，要如何操作呢？
左侧边栏切换到 Global Options 全局选项，这里面的任何修改，都会影响到全部页面唷。
如此一来，这章节「Avada教程」就能自由修改 WordPress 页面标题栏，变成自己喜欢的样子了。
12. 添加或编辑文章
WordPress 默认样板会填充许多英文文章，有很多是使用 Avada 页面编辑器设计，如果不习惯也可使用 WordPress 默认的 Gutenberg 区块编辑器。
前往 WordPress 文章 > 全部文章，点 Gutenberg Editor 新增文章。
接着编辑文章内文，可以点左上角加号，可带入多种不同的区块功能。
如果文章编写完毕后，需进行一些简单的内容设定，像是网址更改（可改成与文章内容有关的，建议用英文）、设定分类、设定精选图片、设定内容摘要等 .. 。
设定完成后，点 新增 或是 更新，即可发布文章。
接着，前往 WordPress 网站前台，找到刚放置在分类下的文章。 Great！ 这就是我们刚修改的样子。 你也可以参考 WordPress 新增文章，有更多文章编辑教程。
13.首页轮播图调整
来到首页，会发现最上面有一个张大图，这是 Avada 预先帮你安装的 Slider Revolution 轮播图插件，这章节会教如何更改。
把鼠标移至区块上，点 Edit Slider 编辑轮播图。
会询问是编辑整个轮播图结构（Edit Slider），还是单张轮播图（Edit Slide），这边点击 Edit Slide。
接着，就会进入到 Slider Revolution 轮播插件里面啰。
这里面有多组轮播图组合，因为目前想更改的是首页轮播图，所以找到 Home 的轮播组合，进入编辑。
Slider Revolution 插件非常多功能，可以做到很细微的轮播图呈现，包括动画特效等也能做到。
这边先简单介绍主要功能区块，其他部分可以自己玩玩看。
- 全局选项：该区块的修改内容，会影响到整个轮播。
- 导航选项：可增导航控制，如箭头、圆点等 .. 选项。
- 轮播图选项：该区块的修改内容，会影响当页轮播。
- 布局选项：该区块的修改内容，会影响当页轮播的某个元件。
- 切换装置：可对不同装置进行调整。
- 添加部件：可添加文字、图片、按钮、形状等 .. 组件。
- 新增《选择轮播：可新增新的轮播，或切换到指定轮播。
如此一来，你就能自由编辑网站轮播图啰！ 要记得编辑到对的轮播图组合，前台才会正确显示出来唷。 还有编辑过程可先预览，编辑完成记得存档。
14. 更改 Footer（网站页脚）
这章节，我会分享如何修改 Footer 网站页尾，协助你定制网页设计，我们开始啰。
首先鼠标移至到任一页面尾端，点击 Edit Footer > Footer Content 进行内容编辑。 至于 Footer Styling 是编辑颜色、内距、字体相关等 .. 样式部分。
可依照个人需求修改页尾，下面我有把一些功能用中文栏出来，编辑完后储存即可。
接着，可以来编辑页尾小工具，在 Footer 页尾新增一些区块功能。 点击 Edit Footer Widgets，会前往 WordPress 外观 > 小工具。
你可以把想使用的功能，放到右侧的 Footer Widget 里面，回到前台看就会有变化了。 更多教程，可参考 WordPress 后台，有完整教程。
以上就是网站页尾（Footer）的更改，文章页面的侧边栏（Sidebar）更改方式，也跟这个流程一样。
15.储存网站布局
假如今天辛苦完成了网页制作的布局，但是 .. 在其他页面也想使用，要怎么做呢？
其实 Avada 的每一个网页设计页面、容器、字段、元件等 .. ，都能够进行储存，并重复使用。
这章节，我会分成 2 个小教程，带领大家上手这功能，如下：
- 整个页面储存&套用
- 单一块储存&套用
Step1：整个页面储存&套用
在想要储存的页面，点击 Library（功能库） > Templates（样板），取个页面名字后，点击 Save Template，即可把整个页面储存下来。
如果哪天网站设计时，刚好需要一样的网站布局，就到新页面进行导入即可，如下：
Step2：单一区块储存&套用
除了储存整个页面样式外，也可以对个别的 Container（容器）、Column（字段）、Element（元件）进行储存，这边用 Container 做示范。
首先在想储存的容器，点击 Save Container，如下：
接着一样取个名字，最后进行存储，如下图：
- 须留意一下上图的 Save As Global，若是有勾选，之后这个容器内有任何修改，所有套用这容器的页面，都会进行修改。
- 如果没勾选，每个套用的页面容器，是各自独立的，不会互相影响。
如果之后网站设计有需要，就可以到 Library > Containers 拿来套用，且全局样式的颜色 .. 是不太一样的，是不是很酷：）
16. 可视化网页设计
Avada 在 WordPress 也有一个功能面板，可供我们调整网页设计，可修改如：网站布局、网站页首、网站菜单、Logo、社群链接等 ..，多个网站调整选项。
网页视觉化制作可用 Avada Live 设计（也能调整全局布局），左侧面板可调整网站全局布局，前往 WordPress Avada > Options 即可调整。
编辑完成可点击 Save Changes 储存。
备注：Reset 重置按钮，会把样式还原到最初状态，请妥善使用。
有关网站社群更改，也可以在这做修改。
经过本文多个教程练习，相信你也对形象网站设计，也了解更多了。 随着网页设计的 Avada 到了尾声，你是不是也成长不少呢。
原文链接：https://www.itaoda.cn/blog/10624.html，转载请注明出处。
评论0