作为网站主,我曾购买过不少商业主题模板,用于搭建不同类型的商业网站。对比来说,Avada是我最满意,也是用的最多,最熟练的一套商业主题模板了。事实上,Avada也是全球销量最高的WordPress商业主题模板。关于Avada的优点一大堆,这里就不再赘述,想要了解的,可以阅读《全球销量第一的WordPress商业主题模板-Avada 化腐朽为神奇 用Avada打造专业跨境独立站》一文,也算是对Avada主题模板的一个基础认识。

然而,想要轻松驾驭Avada并不那么简单,特别是缺乏必要的基础知识培训,或者是对Avada设计原理的理解,即便尝试了一些实践操作,也会被Avada看似云里雾里的复杂功能模块给搞得蒙圈。别担心,这是正常现象。你也不是第一个被Avada的复杂设计给搞蒙的用户,坦白是,我也一样。在第一次使用Avada的时候,甚至无从下手。很多会员用户也向我反馈过类似的问题,Avada固然是好,但技术操作上实在是有些力不从心,很多人在尝试了几次之后,也就放弃了。

通常来说,在Avada的操作上,我会建议用户去阅读官网的原版英文视频,英文原版使用手册。在我看来,Avada的使用学习,最好的方式就Avada官网上的教程,不仅内容齐全,而且每个模块都也有对应的视频演示以及旁白解说。然而,我忽视了一点,并非所有跨境创业者都可以无障碍阅读英文教程,听懂英文视频教程。显然,英文是个卡脖子问题。怎么提升英文,这里就不赘述了,参考我的《英文不好怎么做跨境电商?我用实际经历帮你找到学习方法》和《为了提升英文水平 我参加了加拿大国际语言学院ILAC的在线课程 分享我的学习体验》这两篇文章,给自己一些压力去提升自己英文水平。

然而,当尝试去寻找Avada中文方面的教程,就尴尬啦。无论是百度还是Google,搜索结果中,大都是一些低质量的凑数内容,或者是那些 “Avada中文破解版” “Avada中文汉化版” “Avada中文免费版下载” 这样的内容。需要注意的是,Avada是一套付费的商业主题模板, 官方从来没有推出过任何的汉化版或者免费版本。换句话说,要使用Avada的完整功能,需要付费60美元购买授权,并且一次购买授权只允许一个网站,当你再建第二个网站时,还需要再另外购买授权。

既然没有可参考的中文教程,那就自己做吧。如大家看到的那样,这篇文章算是Avada模板中文系列教程的开篇。主要解读一下Avada设计原理,帮助新人搞清楚Avada是怎么构造网站的。

理解Avada设计原理

多数人对Avada的第一印象是太复杂了。想要轻松驾驭Avada,并不是嘴皮子说说那么简单的。在我看来,正确理解Avada设计原理,将会大大缩短你对Avada的学习过程。在我看来,Avada的核心设计有2个部分,一是Layout Builder,二是Avada Builder。

Layout Builder

Layout Builder,翻译成中文,可以理解为布局搭建器。应该说,这也是Avada设计原理的核心所在。如下图所示:

我们可以这么来理解Avada Layout Builder的设计原理。

一个网站是由无数的网页组成的。将网站简化后,会发现最基础的网站必然会有一个首页,一个文章页,一个产品页、一个联系我们页。而Avada的设计原理就是,无论你是什么网页,都拆分成四个部分sections,分别是1、头部,2、 页面标题栏部分,3、主体内容部分,4、底部。我们仍然以晨飞博客为例,对将这四个页面布局进行一一拆分解读。

首页,通常为单独页面,也是版面设计最复杂的页面。然后,按照Avada的设计原理,然后是先拆分成4个部分,然后进行组合。

如上图所示,先把头部和底部单独设计好。头部和底部的内容通常也会被其他页面,例如文章页、产品页、联系我们页进行引用。所以,我们只需要设计一次头部和底部,然后,在Global Layout的Global Header和Global Header关联上已经设计好头和底部内容。这样的话,所有页面默认情况下都会去统一调用这2部分内容。

Global Layout,虽然按照字面翻译叫做全球布局,但在这里,我们将Global称之为全局布局。也就是说,不管你怎么设计页面,如果不进行特别指定用哪个头部或底部设计,默认情况下,就会直接调用这里的全局布局里的设计布局。

其他页面的原理也是如此,分别由这四个部分组成。比如我们用到最多的文章页。

如Posts这张图先显示的那样,头部和底部呈现出灰色,右侧还由一个+号,意思是这里并没有进行特别指定,也就是默认套用全局布局里的头部和底部设计。而中间的页面标题栏和主体内容部则分别指定了Post PTB和Post Content。换句话说,网站上的文章页面在按照Posts这个部布局进行展示。

其他页面以此类推,无论什么页面,都是按照这个原理进行sections组合,比如跨境创业项目的选择页面,这里就单独创建了一个Business布局,其中头部、内容部分和底部都默认套用了全局布局,只有页面标题栏是单独创建了一个section。

理解了四个section组合之后,也就理解了Avada的网页设计组合原理了。接下来要做的就是根据自身需求创建对应的Section。

通常来说,头部和底部只需创建一次即可,并设为Global Layout全局布局。根据以往网页设计原则,网站上的绝大部分页面的头部和底部的作用主要提供网站导航、搜索框、网站背景信息和相关链接,保持一致性有助于访问者快速找到想要找的东西。

那么,如何创建Section部分,这就得靠Layout Section Builder了。

进入Layout Section Builder页面,你会看到演示模板默认已经创建好的一些Section,每个Section也都对应了类型。而在layout builder里面,四个部分只能去指定对应的类型的Section。每个Section也都可以点击edit进行编辑。

Section的编辑器实际上和文章编辑器、网页的编辑器是同一个编辑器。也就是Avada的另一个核心部分-Avada Builder。

Avada Builder

Avada Builder的用途就是用来设计与编辑网页内容的。我们在使用WordPress默认编辑器时,通常是这个样子。

这种编辑器用来进行文字编辑,加入一些图片,简单的排版倒是没什么问题,但用来进行复杂的网页设计,就爱莫能助了。

Avada Builder实际上就是将WordPress默认的编辑器进行了升级改造,变成了一个所见即所得的网页设计在线软件。Avada Builder分别提供了两种方式的设计展现方式,一是Avada Builder的默认方式,二是Avada live方式。

Avada Builder长这个样子:

Avada live的方式则更显而易见,直接以最终网页效果方式进行呈现,在页面上直接设计编辑。

至于想怎么设计,要不要加个按钮,字体大小,上下边距,要不要动态效果,你有足够的自由设计权限去完成所有设计工作。

事实上,Avada内置了50多种设计元素Elements,让网站主能够通过简单的点选,并配置元素基本信息,插入页面,即可创建好相关内容。

总结

理解了上述Avada的设计基础原理,再来进行网页布局,则会变得清晰了很多。只要能够让你知道,当拿到Avada手之后,第一步做什么,又该如何通过Layout去布局各个页面。

万事开头难,建议还不理解的读者可以先多阅读几遍。然后,再结合实践操作,去理解Avada设计原理。还是那句话,在Avada上花些时间,当你理解并掌握的Avada的原理和操作之后,不必说普通的电商网站,相信任何类型的网站,你都能够轻松驾驭了。

当然,如果你还没有Avada主题模板,在线订购一个,全球销量第一的WordPress主题模板并不是吹嘘出来的,没点真材实料,又如何让数十万网站主信服。

在线购买Avada主题模板

Leave A Comment

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据