如何用avada主题来搭建外贸网站首页DEMO安装使用教程

avada外贸网站

avada主题的良好,这里就不用多说了,为什么销量是最好的,卖出去48万份是有道理的。 许多人选择用wordpress+avada主题来搭建一个美丽大气的外贸网站,我这篇文章来具体的图解 下怎样使用avda主题来搭建外贸网站首页,留意下这篇文章只是说下怎么搭建外贸网站首页。



1,avada的安装
这个我之前有一篇文章写过,这里再简单的说下,网站后台-表面-主题-添加,把avada主题上传就可以了。

2,avada默认的demo
WordPress后台avada-demo,默认有avada自带的40余款首页模板,但是我个人提议不要使用,除非哪款你感觉特殊的合适。由于假如选择了demo内里的模板的话,要动手修改首页模板就会比较麻烦,很轻易错码,还不如不用demo,自己一步步重新开始结构设置。


不选择demo模板的话,默认的首页模板会比较简单点,我们越发轻易去添加修改它。


同时,我们需要先安装两块avada自带的插件,Fusion Core,Fusion Builder。在后台Avada – Plugins内里选择,下载安装就可以了。



下面我要先说的就是 Avada – Theme options内里的选项,

由于theme options内里的一些选项非常的重要,我这里先对这些选项解读下:
Layout:这个是针对网站整体的页面宽度设置,内里重要有Boxed,Wide两个选项。
假如你选择Boxed的话,整个网站的首页是这样的,全部内容似乎在一个盒子范畴内里。

假如你选择Wide的话,整个网页的首页如下,就是占满了整个屏幕的,个人感觉会比较大气一点。

Menu:菜单选项,在这里重要是对菜单的颜色,大小,气势派头,字体进行修改,留意添加菜单不是在这里添加的。
Responsive:相应式选项,一样平常都提议选择“on”打开相应式,这样网站加载速率会比较快。
Colors:颜色选项,重要是设置按钮颜色的而不是首页配景颜色,以是说可用性不大,可以忽略。
Header:这个选项是对首页的头部样式进行设置的,你可以从下面的样式内里挑选一个自己嘻歡的头部样式。

Logo:在这里可以换掉默认的主题logo,然后上传自己的logo,默认的尺寸是95*22 piex。

Page Title Bar:这个是单独页面产品标题表现位置的设置,默认“Show Bar and Content”这个选项就可以了。

Sliding Bar:这个就是顶部多一条滑动条,个人感觉没有实际用处,可以不管。
Footer:这里可以设置网站底部有几个板块,如下这个截图是设置了四个板块的。

Sidebars:侧边工具栏固定设置,当鼠标上下拖动,侧边工具栏也可以设置成固定。
Background:页面配景设置,在这里你可以给你网站的页面调整配景颜色。
Typography:这里是调整网站字体的,可以调整普通文本字体样式和颜色,也可以设置H1到H6的字体样式和颜色。

Portfolio:留意下,这个选项是比较重要的,由于我们背面上产品需要用到portfolio这个选项,以是设置的时间要留意一些地方。

Social Media:在这里可以添加交际平台网址。
Slideshows:这里可以对首页幻灯片进行设置,幻灯片的张数,转换速率等等。





Extra:这里可以设置相近产品,意思就是一个产品页面下方会主动建议一些类似的产品。
Advanced:这里可以放置跟踪代码,但是不是很实用,可以忽略。
Custom CSS: 通过输入自己的代码来修改整个网站的样式,合适懂代码的人来操作,新手无视就可以了。
Fusion Builder Elements:这里可以调整多个差别页面的样式,颜色,大小等等,一样平常用不到,可以忽视。
Import/Export:在这里可以导入要么导出一些文件。

4,首页的结构
我的计划的一个结构是,logo+顶部菜单,文字+图片,文字+视频, 产品分类,底部菜单栏,这个首页结构是比较简单的,我们先根据这个来就可以了。

5,首页的菜单栏怎样制作

我这里举例看下,一样平常外贸网站的菜单如下,有Home,产品页面,About Us,Contact 等等。
这里我们应该怎么添加上去呢?
我们先说Home,About Us,Contact页面,由于这三个是类似的。

直接点击页面-新建页面

然后我们需要把这几个页面添加到首页的菜单栏上面去,

点击表面- 菜单 – 创建新菜单,菜单名称自己取一个,然后把刚建的三个页面添加到菜单内里,留意在下方的 Main Navigation要打勾,然后保存下菜单。




我们可以看下效果怎样:

在表面-菜单内里,新建菜单,表现位置这里,Main Navigation要打勾,这样菜单会表现在网站的首页上方。

6,首页怎样添加文字+图片
再下面,我们就来看下首页怎样展示文字+图片的这种效果,例子如下:

我们怎样来做出这种效果呢,首先网站后台 – 页面 -Home页面,点击编辑,选择“Use Fusion Builder”。




然后点击“Container”,这个单词的字面明白就是容器的意思,添加一个容器,接着选择1/2: 1/2的这个比例,这样左右各自有一个小容器,点击Element,这个单词的意思是元素,有了容器我们还需要添加元素进去。
左边的元素选择“Text Block”,右边的元素选择“Image”。
这样就可以制作出来一边是文字,一边是图片的效果了。

7,首页怎样添加文字加视频
实在这个的方法跟添加文字加图片差不多,先添加一个 1/2:1/2的容器,然后一边添加文字的元素“Element”,一边添加Youtube要么Vimeo就可以了。


8,首页怎样添加产品分类
可以看下下图,假如我们要的是这种效果,就是一张图片,然后下面一段文字,点击进去就是一个分类的全部产品。


首先我们也是添加一个容器“Container”,选择1/3: 1/3: 1/3,如下

接着我们先从左边开始,点击“Element”,这里要留意下了,再点击“Nested Columns”然后选择1/2 : 1/2。


为什么 要这么做呢,由于可以看到它是由上面一张图片,下面一段文字构成的,我们可以明白成有两个部分构成,以是我们要这么做。


然后我们再点击,添加两个“Element”元素,一个是图片,一个是文字。
这样我们就可以做出我们想要的效果了。


9,首页怎样添加海报图片

这里要留意下,首先要点击Avada – plugins ,下载插件LayerSlider WP。
安装完后,在网站后台左侧最下方找点LayerSlider WP,点击Add – Ons,然后add slider。
LAYOUT,选择Responsive(相应式),这样的话图片可以在pc,移动端都可以主动顺应屏幕大小,宽高的尺寸就根据你自己预备的图片尺寸来设置。

接着点击上方的SLIDES。

如图,1是添加第二张大图,2是上传大图。 每个 slide 的 Slide Timing 都要设置一下,提议设置为 duration:3000,shift:1000。然后保存。这样 homepage slider 就创建成功了。


然后回到网站的后台,点击Page- all pages,Home页面点击编辑,在 Fusion Page Options 的 sliders 中选择 LayerSlider ,在列表中选择之前创建的 homepage slider



留意下我的网站背面默认设置的是中文,假如你对英文感觉不认识的话,可以在装修网站的时间先对后台的语言设置成中文。


10,首页的footer怎样制作 首先我们要参考下别人网站的底部菜单是怎么样的:

然后我们在网站后台,Avada – Theme Options – Footer
我们可以看到上面的图片有四竖,以是Number of Footer Columns这里设置成4。

接下来,在网站后台,找到 表面 – 小工具,可以看到已经有Footer Widget 1 – 4, 根据上面截图的案例看,它有四个栏目,“Why Alagobx”,“Recent
Projects”,“Contact Information”,“Smile with Alagobox”。

我们首先在Footer Widget 1内里添加文本(Text),然后输入标题和文字就可以了。


在Footer Widget 2 内里添加“近期文章”要么Avada:Recent Works
在Footer Widget 3 内里添加 Avada:Contact Info
在Footer Widget 4 内里添加 Avada: Social Links
出来的效果就基本是案例上面的这种底部菜单了,只是需要细节上面再修改下。
上面的这些步骤是可以让你搭建!出来一个初具容貌的网站首页,固然细节方面还是需要修改的,比方字体的大小,图片的大小等等。
等我背面有空我再来更新下这篇文章。


今日我要和大家分享的是Avada主题DEMO的安装和使用教程,DEMO也就是WP主题的演示数据,中文名叫模板,使用DEMO的好处是建站时间短,耗费本钱低,0底子也能自行完成。

而且在建站前你就能知道网站的最终效果,绝不浮夸的说,你可以用它在10分钟之内搞定一个外贸网站。

大多数建站公司也是靠预先做好的DEMO来给用户建站,但这些DEMO由于建站程序不一样,用户是无法自定义修改的,最多只能更换一下文字图片logo,在自定义方面和WP主题DEMO比起来可谓是差了十万八千里。

假如要使用WP主题DEMO来快速建站,肯定要选一个及格的主题,我首推Avada主题,它的销量和功能在环球来说都是数一数二的。

为了方便WP新手建站,Avada主题开发者预设了30个西欧气势派头的DEMO,可以用来做B2B或B2C外贸网站,最经典的Avada Classic包括30个主页DEMO,23个分页DEMO(包括about us,services,contact us等等)。

总之可选性和可用性非常大,你可以直接使用这些DEMO来建站,也可以鉴戒这些DEMO来自定义你的外贸网站。

avada demos 2 avada demos 1

关于Avada DEMO的安装和使用一种有三种方法,分别是WP后台在线导入,页面编辑器导入和插件导入。

我个人以为使用这些DEMO是学习建站的出发点,你可以根据喜欢对DEMO数据进行调整或删除,以是在我的Avada教程里,我会先介绍DEMO的使用,再介绍详细怎么编辑页面,这样做的话会收缩你的学习时间,降低你的时间本钱。

WP后台在线导入Avada主题DEMO的教程

此方法仅实用于购置了Avada主题的用户,也是导入DEMO几个方法里最简单的一个。

在导入DEMO之前,请先激活你的 Avad主题正版使用权限 ,并安装好Avada配套的两个插件,Fusion Core和Fusion Builder,这两个插件是必须要安装的,如下图所示。

Fusion Core and Fusion Builder plugins

然后找到你要导入的DEMO(WP后台菜单栏Avada —> Demos),点击import,这时会提示你有哪些其他的配套插件需要安装。

根据提示去逐一安装就行(WP后台菜单栏Avada —> Plugins),都安装完了再重新点击import,并在跳出的弹框中选择确定,就开始导入DEMO了,如下图所示。

avada demo requirements 使用Fusion Builder页面编辑器导入Avada主题DEMO的教程

这个方法合适导入某个详细页面的DEMO,也就是单个页面DEMO,不是整体的DEMO演示数据。

详细方法如下,先在你需要导入DEMO的页面,打开Avada配套的Fusion Builder页面编辑器,点击Library —> Demos,如下图所示。至于你想导入哪个页面的演示数据,自行选择即可。

fusion builder library avada library demos

使用Fusion Builder页面编辑器导入Avada主题DEMO大概会!与DEMO演示站的页面有一些差异,由于Avada Theme Options和配套插件的设置差别。

另有就是这样做的话,一些图片和插件的数据无法表现。以是不提议新手使用此方法,还是选择一次性导入全部DEMO数据的方法,好比WP后台在线导入和插件导入。

使用插件一键导入Avada主题DEMO的教程

假如你没有购置Avada主题,使用的是Avada主题的免费版本,你又想导入全部DEMO演示数据,你可以使用All-in-One WP Migration这个插件。

提议你把Avada主题升级到最新版本,好比5.1.6,假如想要主题文件可以向我索取,假如不会升级可以去看我写的 Avada主题升级教程 。

首先安装All-in-One WP Migration,如下图所示。

all in one wp migration

安装完在WP后台菜单找到All-in-One WP Migration —> Import,点击File,从你电脑上上传DEMO数据到你的WordPress外贸网站,如下图所示。

All-in-One WP Migration import file

Avada Demo的演示数据,官方已经给出了链接,需要哪一个就去下载哪一个,下载链接如下,不谢。

使用此方法导入DEMO数据,由于没有正版使用权限,主题配套的两个高级插件Slider Revolution an!d Layer Slider无法正常使用,假如真心嘻歡Avada就去买个正版吧。

DEMO导入后需要留意的是WP后台登录名和密码都市变成admin,假如想要变动登陆名和密码,登陆后自行修改就行,登陆后请记得去Avada Theme Options点一下保存全部设置,牢记。

总结

用WP模板建站,网上有许多误解和谣传,我以为在介绍本教程之前很有有须要和新手们讲明下。

网上说模板做出来的网站由于源代码都一样,网站布局重复率高,倒霉于SEO优化。我想说的是,就算是重复的代码也要看代码的质量,阿里和亚马逊全部的子页面都是一样的,为什么它们排名那么高?

而且由于建站程序不一样,WP不会有这些问题,WP程序代码本身对SEO很友爱,不然环球1/4网站的占据量从何而来,你以为外国人都是傻帽?而且SEO的问题重要是和内容、标题、!KeyWords、URL、外链等因素有关。

网上有人以为只要是模板建站就不能自定义修改,不能增长新功能,这样以为的人多数都是只知道建站公司的模板建站,由于他们的模板确实是不能自定义修改的。

但WP模板差别,由于WP程序本身的开源性,你想怎么改都可以,从表面来说,你可以调用主题的模块做出只属于你一个人的网站,从功能方面来说,想实现什么功能添加插件即可,从SEO到网站安全包罗万象。

网上另有一部分建站公司在黑WP,详细是哪家公司不提了,随处都可以见到它的广告,大概宣传语就是它们比WP还好用,还简单,说WP建站本钱高,操作难。

我不知道这位公司的负责人从哪来的自信,假如真以为自产业品不错,不妨去海外宣传一下,打败了WP,环球1/4的建站市场将都市是你们公司的。

看完以上几点,对WP建站另有一丝犹豫的小伙伴,你内心应该有答案了,与其耗费几千几万去找国内建站公司建站,不如自己使用WP来建站,在建站前你只需要选择一个及格的WP主题就行。

好比Avada主题,它后台功能强盛,在使用方面和定制网站只差了一点,你要知道用代码定制出一个类似Avada的网站是有多贵,Avada主题的销售额超越1个亿人民币,你自己想想它的价值和背后的技能。

要想用Avada快速建站,就用它们的DEMO,关于本文介绍的3种方法,选择合适你的那一个就行。

假如你另有什么疑问可以给我留言,我会努力解决你的问题。实在正版Avada主题价格并不贵,秒杀许多国内公司给你的建站报价,购置一个正版也算是支持主题开发者了,主题开发者有钱了才能更好的为大家服务,造成一个良性循环

Avada 价格:$ 60 | 直达链接

Avada主题WordPress外贸网站速度优化-设置篇

本文系统介绍一下使用Avada主题建设 WordPress外贸网站 时,针对速率优化方面的一些主题选项设置心得。同时Avada作为风靡Themeforest平台的多功能型WordPress主题,它除了在功能模块和易用性方面不停在渐渐提高之外,其底层代码和整体架构上的优化程度也日趋美满,这也是它能常期霸占主题销量榜首的重要缘故。

假如你的WordPress外贸网站托管在一款 性能良好的服务器 上,并且已经对多少重要的方面进行了优化,基本上Avada主题不会对网站的欣赏速率有太大的影响。但是假如你对我们所说的“优化”没有很明白的观点,那么在这篇文章中你将可以或许找到并领会一些条理,重要是针对 Avada主题选项 中你大概没有重视的参数设置。固然针对WordPress网站的速率优化涵盖许多范畴,好比图片加载速率的提高、缓存机制的运用等等,这些我们将在后续的文章中渐渐睁开解说。

1. 禁用Avada主题中未使用的元素

Avada主题的开发目的是可以或许应对全部种类网站的搭建,以是在其内置的Fusion Builder编辑器中集成了丰富的版面元素以供调用。现阶段看起来效果还不错,许多 WordPress外贸建站服务 都常常性使用到这个主题,但是从最终的效果出现来看,没有太大的类似甚至能做到完全不露陈迹。

问题在于主题功能过于美满的话,作为行业和产品针对性很强的个体WordPress外贸网站而言,会有许多内容元素用不上,好比Timeline时间线、Chart图表要么WooCommerce商城模块等等,这些元素假如没有进行清理,就算在网页中没有使用也会增长一些分外的脚本,以是首先要做的一件事情就是针对性的元素禁用。

在后台进入左侧菜单” Fusion Builder – Settings ”界面,把未使用的元素取消勾选即可,你也可以针对差别的栏目种类进行全局禁用,好比一样平常用于公布新消息资讯的Posts等,这样在前台加载的页面时间就不会调用分外脚本了:

禁用Avada主题中未使用的元素

2. 禁用Avada Sliders幻灯模块

Avada主题内置了简便明快气势派头的幻灯轮播模块,个人体验相比Revolution Slider等第三方插件而言,它偏重于代码简便的轻量级幻灯制作,可以基本满意简单幻灯计划的需求,只不外在出现情势和动画效果上没那么丰富。假如你对它不是很心水,甚至压根就没思量去使用的话,可以直接在主题选项中禁用。

在后台进入左侧菜单” Avada -> Theme Options -> Advanced -> Theme Features ”界面,把内里的”Elastic Slider”和“Fusion Slider”切换到Off状态即可:

禁用Avada Sliders幻灯模块

3. 封闭手机端CSS Animations动画效果

Avada主题的大部分Fusion Builder元素都支持CSS Animations动画属性,你可以通过它丰富页面各版块元素加载时的视觉体验,但是在移动手机端上许多效果就失去了意义,甚至根本就不支持,以是反而在肯定程度上拖累了欣赏速率。

在后台进入左侧菜单” Avada -> Theme Options -> Advanced -> Theme Features ”界面,你可以针对它进行选择性地启用,固然假如完全没有思量使用也可以选择全站禁用。

关闭手机端CSS Animations动画效果

4. 禁用无关的API Scripts脚本支持

通常API Scripts脚本都市在肯定程度上影响速率,Avada主题集成了丰富的脚本支持,但在实际的建站過逞中需要有针对性的筛选。好比在线视频嵌入可以同时支持Vimeo和YouTube,通常环境下我们最好就使用其一即可。类似另有Google地图等,假如没有使用 Fusion Builder 内里的 Google Map元素,而是直接内嵌官方地图代码的话,也可以直接禁用以节流资源。

在后台进入左侧菜单” Avada -> Theme Options -> Advanced -> Theme Features ”界面进行设置,在这里To Top基本提议在Moblie移动装备中禁用:

禁用无关的API Scripts脚本支持

5.当地托管Google Fonts字体

WordPress外贸网站一样平常都市或多或少使用Google字体以提高阅读体验,在Avada主题中提供两种加载Google Fonts的情势。在使用Google字体时提议全站统一成1-2种即可,一方面是为了网站的文本视觉版式气势派头的高度同等,别的也尽量淘汰资源调用的历程数和体积。实在大部分的Google Fonts文件本身材积不是很大,对于当地服务器而言也仅仅是很少的占用,更重要的是省去了长途调用的一些不确定因素,提高了网站访问的稳定性。

在后台进入左侧菜单” Avada -> Theme Options -> Privacy ”界面,将Google Fonts Mode切换设置成Local即可:

本地托管Google Fonts字体

最后需要再次夸大的是,Avada选项优化只是提高WordPress网站速率的途径之一,随着版本的不停更新Avada主题改进并细化了众多的选项参数,在 WordPress外贸建站 的過逞中公道科学地进行遍历和调整,对网站的速率性能会有很好的增益。详细设置尺度也要根据网站的环境各取所需,好比Related Posts相关文章、JPEG Quality压缩质量等等,固然也有一些参数我们是有选项建议的,好比开启JS Compiler脚本归并压缩等。

作者: ximicc

西米CC不停致力于研讨和学习WordPress外贸建站技能和行业应用,以专心雕琢、字斟句酌的服务理念,专业提供优质WordPress企业建站服务和相关技能支持,注意把用户体验和SEO优化理念深入落实到B2B WP外贸网站建设的每个细节!

本文网址: http://www.fakeoakleyss.com/p/2020529121037_1518_4142416861/home

推荐阅读

tags

最新发布