WordPress外贸建站,WordPress操作流程全攻略(详细图文教程)

2017-05-31发布在 建站3514 次访问

零基础三天学会WordPress建立外贸B2B英文网站

在前面文章中,我们介绍了如何用 Bluehost 自动安装 WordPress:

外贸建站新手指南:Bluehost主机安装WordPress

关于 Bluehost 上如何安装 WordPress,有两种不同的方式,这里都详细讲解一下。 自动安装方式 Bluehost 自动安装 WordPress 步骤 登陆 Bluehos...

当安装完 WordPress 之后,接下来我们要熟悉一下 WordPress 的基本用法。

本文主要基于虚拟主机 Bluehost 建站来讲解。鉴于料网的读者有虚拟主机建站也有 VPS 建站,有些步骤 VPS 建站也适用,比如 WP后台的设置,设置固定链接格式,WP主题使用,网站结构设计以及其他的一些建站步骤等等。因此每一步我会列出仅适用于 Bluehost 虚拟主机建站还是同时都适用。以 bh 代表 Bluehost 虚拟主机,bh/vps 代表都适用。

一、设置对搜索引擎不可见 (bh/vps)

这个应该第一步去做的。在 WP 后台左侧的功能菜单中,找到 Settings – 【Reading】 选项:

当你的网站还没有建好之前,建议不要鼓励搜索引擎来爬取。因为可能你的页面结构还会反复改动,页面还没有建全,关键词布局还没完成,甚至基本的 SEO 还没设置。考虑到这么多的因素,建议在建站期间,把这个“建议搜索引擎不索引本站”给勾上。等你完全建好,再把这个勾取消,并用谷歌站长工具自己去主动提交网站即可。

二、考虑网站标题 (bh/vps)

在安装 WordPress 时,我们随意填写了一个 website name/title。现在你可以想想,网站的标题要显示什么?

当然,由于现在暂时没有对搜索引擎开放索引,你也可以暂时不考虑这里 website title 怎么写才好。

到后面,我们说到网站的关键词布局策略时会再次提到网站标题怎么确定。

三、卸载 Bluehost 自动安装的 MOJO 和 Jetpack 插件 (bh)

MOJO 插件太流氓了,左侧顶部嵌入了 Bluehost 菜单不说,有它在,你都无法正常搜索 WordPress 中的插件。如果你不停用这个插件,你会发现很多大名鼎鼎的 WP 插件你在 Plugins 下就是搜索不到,其实这些都是 MOJO 搞得鬼。而且 Plugins 选项卡硬是比正常的 WP 多了个【premium】选项(付费),点击,就出现一堆 Bluehost 的 MOJO Marketplace 的插件。

图为输入 database,竟然一个插件都没搜到,当时我就震惊了。另外,选项卡中 Favorites 右边多了个 Premium。。点击以后,立即会转到左侧菜单的 Bluehost 菜单下。

说真的,这两年 BH 推自己的 MOJO Marketplace 真是用尽了手段。别光顾着竞争,稍微考虑一下用户体验吧!

删除 MOJO Marketplace 插件:Plugins – Installed Plugins 。找到 MOJO Marketplace,先点击 Deactivate,然后点击 Delete。世界终于清净不少。

顺便把 Jetpack 也删除,这插件没什么卵用。

四、接下来安装 WordPress 主题 (bh/vps)

建站新手比较推荐使用 Avada 主题。之前写过一篇 WordPress 英文主题的比较的文章。

总的来说 Avada 面面俱到,容易上手。Enfold 虽然运行起来比 Avada 快一些,但是缺点是设置不像 Avada 那么丰富,并且有的地方需要写一些 custom css 来达到必要的效果,所以新手来说还是用 Avada 更适合一些。还有一个主题 Betheme,也挺不错。

还是主要说 Avada 吧,作为全球销量第一的 WP 主题,国内英文建站的用户数也是非常多的。我强烈建议你们买正版的主题,在 ThemeForest 上买,这是非常值得花的钱,不用我多说了。

说明:如果自己没买主题,有其他人买了正版Avada主题分享出来,你装上也能凑合用,只是无法自动升级主题。另外,Demo 不能用,LayerSlider 这个组件也无法自动升级。所以如果你觉得打死都不可能再升级主题和相关组件插件,那么就用别人分享的主题也可以,否则还是建议自己购买正版主题。

五、购买 Avada 主题 (bh/vps)

访问 Themeforest 上的 Avada 主题页面。(如果你没有注册过账号,还是需要先 注册平台账号 的)

打开主题页面之后,会发现右侧有个 Buy Theme 的按钮。别急着点击,在上方,还有个蓝色字体的链接 more ↓ 。


通常 Avada 主题默认的作者技术支持期限是 6 个月。如果你要延期到 12 个月,那么就多付 18 美金。至于是否需要延期,这个就见仁见智了。如果你最近建站时间比较紧,不一定会在近期完成建站,那么你可以延期到 12 个月保险一点。如果你最近就忙着建站,有时间好好把网站做一下,那么这里的话默认的 6 个月也够了。

另外,Avada 建站的一些常见的小问题,你可以自己百度,我有空也会整理出来。

下一步,来到购物车,准备结账付款。

点击 Checkout 之后,会让你选择 Payment 方式。有 信用卡/Paypal/Envato Credit 三种方式。作为外贸人,通常信用卡和Paypal 都是很容易搞定的!如果你还没有外币信用卡,那么用 Paypal 也可以(可以绑定国内银联卡),这两种方式都会收取2美金的额外手续费。

支付成功之后,界面如下:

点击 Download,下载 Avada 主题压缩包。你可以选择 All files & documentation 或  Installable WordPress file only。

如果选择下载所有文件,那么整个压缩包大概有 200多M,耐心等吧,不 FQ 或者 SS 没加速的话,下载1个小时也是正常的~ 要想快的话,把 SS 加速,然后代理模式用全局模式,速度可以跑到 2-4 M/s,几分钟下载完)

为了操作的流畅连贯,你也可以选择 Installable WordPress file only。只下载主题文件,不下载其他文件。毕竟有些文件如 psd 等都是主题作者供给一些专业的设计师用户用的,我们用不上。

下载完压缩包之后,本地解压。在主题文件夹下找到 Avada 和 Avada Child 压缩包。一个是主题压缩包,一个是主题的子主题压缩包。

六、什么是子主题(Child Theme)(bh/vps)

当你使用主题时,必然会根据一些需要做一些修改。好不容易修改折腾好了,而主题升级版发布了。要不要升级呢?如果升级,那么修改的文件要先做备份,否则就白修改了,主题升级之后会覆盖掉之前的文件。所以备份了修改后的文件,然后再次去在升级后的主题文件中修改一遍。很麻烦!因此就有了子主题。

子主题通常包括 css文件和 functions.php 等少量文件,实际上,子主题相当于多挂载了额外的 CSS 和 functions 功能代码。

在子主题的 css 或者 functions.php 做修改,修改后会立即作用于主题,但并不会修改主题的相关文件。主题即使升级之后,子主题修改的内容仍然存在,不需要再次修改,很方便。很多国外WP主题都会带有子主题,方便用户进行自定义个性化的修改。

当我们上传主题时,必须把主题和子主题一起上传到 wp-content/content/themes/ 目录下。然后在后台 Appearance – Themes 下启用子主题即可。

七、上传主题 Avada Theme 和 Avada Child Theme (bh)

上传安装主题的方法有很多,这里我们有三种方式:

  • 通过 WordPress 的上传主题压缩包的按钮来安装(bh/vps)
  • 通过 Bluehost 的 File Manager 来安装
  • 通过 FTP 工具来安装

第一种方式最简单,推荐首选此方式。直接在 WP 的后台的【Appearance 外观】- 【Themes 主题】页面点击 Add New,然后在 Add Themes 的页面上,有个 Upload Theme 的按钮。点击按钮,依次选取 Avada.zip 和 Avada-Child-Theme.zip 主题压缩包上传。WordPress 会自动解压主题压缩包文件,并安装两个主题。

万一这种方式失败,那么可以选择第二种方式:

从 Bluehost 后台 【File】- 【File Manager】,访问网站文件目录:

来到网站文件管理器窗口。在左侧,Public_html 左边有个 + 号,点击,会展开下一级目录。依次点击 wp-content – themes,到达主题文件夹。

点击上方的 Upload(上传),然后转到文件上传窗口。首先在文件权限那里改数字为 7 5 5,然后点击“选择文件”按钮,在本地电脑硬盘上找到 Avada 主题压缩包 Avada.zip。

上传之后,右下角会有上传完成提示!

再次点击选择文件,点击 Avada-Child-Theme.zip 文件。上传完成后,提示:

关闭文件上传的窗口,回到文件管理器窗口,在左侧重新点击 themes 目录,此时在右侧文件列表中出现刚才上传的两个压缩包。

解压完之后,可以看到左侧 themes 目录下多了一个 Avada 文件夹。点击之后,里面是主题文件。

再次点击到 themes,对子主题压缩包也执行上面解压步骤。

八、启用Avada主题 (bh/vps)

注意:由于子主题的存在,我们选择启用子主题即可。后台 Appreace – Themes,选择 Avada Child Theme。

此时页面会跳到 Avada 主题信息页面,如下图所示。先点击 Registration 选项卡。

九、注册 Avada 主题 (bh/vps)

点击之后,跳转到 Envato 网站,重新登录一下。然后跳转到创建 Token name 的页面:

点击创建提交。这时会跳到成功页面:

把你刚刚起的 Token name 和 这个自动生成的 Token 口令码都记录下来。然后点击 I confirm,点击 Got it。

回到 WordPress 的 Avada Registration 选项卡那里,填入 Token,点击提交。正确无误的话,会提示:Congratulations! Your product is registered now.

十、安装激活主题相关的插件 (bh/vps)

注册完之后,点击右侧的 Plugin 选项卡,会出现一些推荐安装的插件。

建议安装的插件:

  • Fusion Core(主题必装的核心插件,)
  • Fusion Builder(主题必装的页面构建器)
  • LayerSlider WP (幻灯片自动切换插件。也有人选用 Slider Revolution。那样也行,两个任选其一)
  • Contact Form 7 (表单插件)

安装这 4 个插件就够了,其他的不需要安装。

十一、解决一个疑问:是否导入 Demo? (bh/vps)

在 Avada 信息页面的 Tab 选项卡上有一个 Demo,在这里你可以查看各种主题 Demo,有合适的 Demo 也可以选择导入。但我强烈建议你不要考虑去导入 Demo!

导入 Demo 演示数据和设置,似乎你觉得更简单了,网站内容和结构瞬间丰富起来了,但其实很多 Demo 都并不实用,而且加载起来还比较慢。当你导入了 Demo 演示数据之后,你可能会瞬间晕了,好多设置可能一下子完全搞不明白。

就好比你一想到写作文,觉得从零开始写作好累,何不照抄别人现成的作文,然后修改润色一下即可呢?于是你看了别人的作文,发现虽然写得都很好,但是别人的写作的主题,行文风格特色什么的,跟你并不是那么搭配。因此可能你稀里糊涂地抄了一篇牛逼的作文之后,越看越觉得有点离题,你知道你的风格和水平跟这些相差太多了,你实际想写出来的作文也跟这些根本并不一样,你只是想让自己的作文别人读起来感觉你写得很牛逼,但照抄上来之后,感觉终究是不适合自己,总之越看越不舒服,不停地修改,最后累得不想再改了。

因此,除非正好某个 Demo 100% 匹配你的建站需求,否则 Demo 这个东西看起来用他会让你建站更简单,实际上会变得更复杂和麻烦。因此我建议不要尝试导入 Demo。

十二、网站前台页面显示 Website Comming Soon (bh)

可能你访问你的网站,发现网站前台页面如下图所示,显示 Website Comming Soon 的提示(妹的BH,又一次推广了一次自己的 MOJO Marketpalce)。

此时你可以在 WordPress 后台右侧页面的顶部发现这么一条提示:

点击这个链接,会提示:Congratulations. Your site is now live, click here to view it.

刷新网站首页,一般立即就可以正常显示出来主题的页面了。如果还是上面截图页面,使用 CTRL + F5 强制刷新页面即可。

十三、设置Wordpress的固定链接格式 (bh/vps)

在 WordPress 后台左侧,点击 Setting – Permalinks,选择 Postname,然后点击 save changes 按钮。

十四、Avada 主题的基本设置 (bh/vps)

在 WordPress 后台左侧,点击 Avada – Theme Options,会出现 Avada 主题设置界面:

看了这么多设置,可能你会觉得头都大了。但是相信我,该头大的绝对不是你,反而是我,因为我要图文讲解清楚具体怎么设置,编辑很累的!

布局【Layout】:建议不要修改,保持默认即可。

两种布局方式的不同:

  • Boxed:通常页面会有个灰色或者其他颜色的底色,网页主体部分有边框且背景色为白色。通常称之为盒状布局。
  • Wide:通常页面呈现超宽布局,没有明显的网页主体的位置边框线。英文建站多用这种布局方式,显得大气一些。

菜单【Menu】:这里是设置菜单相关的内容。暂时不用设置。

响应式【Responsive】:这里设置一些页面针对不同设备浏览时的宽度和样式响应。暂时不用设置。

颜色皮肤【Colors】:网站的主体颜色。里面有三个选项:Predefined Theme Skin(预设的主题皮肤)、Predefined Color Scheme(预设的配色方案)、Primary Color(主色/高亮色)。暂时可不设置,后面根据需要修改颜色设置。

头部【Header】:在这里面先选择一下 Header Content 的布局,从下面这 7 种 Header Content 布局中选择一种适合你的。

一般 1,2,3,5 使用比较多。我们暂时不改动,默认的即可。

接下来要说说怎么在 WordPress 中创建菜单了。

十五、创建导航菜单 (bh/vps)

在上面 Avada Options – Header 的部分,我们等于是设置了 LOGO 和 菜单的位置,但还没有创建菜单。下面说一下怎么创建菜单:

在 WP 后台左侧的黑色背景菜单中找到 【Appearance】(外观) – 【Menu】(菜单),先创建网站主菜单。

点击 Create Menu 之后,你就可以开始创建菜单了。

在 WordPress 中,最常见的两种类型是 Post(文章) 和 Page(页面)。由于 WordPress 本身是从博客系统发展成 CMS管理系统的,因此,在 WP 中最重要的类型就是 Post,而且多数的 WP 函数也是基于 post。

可以这么说,Page 也是一种 Post,它是一种特殊类型的 Post (不理解可忽略此句)。

在下面的截图中,你可以看到四种类型:1)页面  2)文章  3)自定义链接  4)文章分类。有时候你还会看到第五种类型:文章标签(Tags)。

尽管 Post 类型很重要,但它一般用于 Blog 文章展示。在我们建企业展示站的初期,我们还不需要开通 blog 频道做内容营销,所以我们可以先忽略文章类型的内容。即我们可以暂时忽略 Posts, Categories, Tags 这三种类型的内容。要创建菜单,就用 pages 和 Custom Links 就够了。

Custom Links 的实质就是创建链接锚文本,链接地址可以为外部网站页面地址,也可以地址为空,作为下拉菜单的指引文字,点击并不跳转。
比如:本博客网站的顶部菜单的“分类” 和 “音乐” 就是自定义链接,但地址处留空,所以无法点击,只是作为下拉菜单的指引。

由于你还没有创建新的页面,你的菜单没有更多的内容可以展示。我们就先对 WP 系统自动创建的 Home, Hello Word, Sample Page 这些做个菜单雏形展示,后面再修改。

暂时,你的网站 Header 是这样的:

很怪,是吧?别急,等我们创建好多一些页面就好了。

另外,你是否觉得浏览网站的时候,总是在顶部有条黑色的 admin bar 很烦人?我们可以让它不显示。

在【Appearance】(外观) – 【Editor】里我们可以添加代码屏蔽。在右侧的 Templates 那里点击 functions.php 文件,然后按照下图粘贴下面代码:

// hide admin bar
add_filter('show_admin_bar', 'hide_admin_bar');
function hide_admin_bar($flag) {
 return false;
}

我们在网站首页刷新一下页面,OK,顶部那个烦人的黑色 admin bar 消失了。

十六、网站页面结构设计(bh/vps)

如果你建站素材准备得充分,那么现在可以好好考虑一下你的网站的页面和目录结构了。

网站主菜单和页脚菜单

顶部菜单准备放哪些,哪些下面有二级菜单,这些都先想好。如果有时间的话,你应该至少在纸上或者 Xmind 文档上做过结构图,这样可以帮助你清晰地创建网站结构,你的网页 URL  结构也会很清晰。

在做网站之前,最好你已经在网页收藏夹中收藏了5-10个非常不错的国外同行的网站了。你可以多看多借鉴一下页面结构,菜单频道和页面风格等。

网站的网页结构分成几类:

)常规页面(Home, About, Products, Support/FAQ, Resource Center, Why Xyz, Contact etc..)所有用于 Header 一级 menu 的页面

)附属页面(Factory tour, Certificates, Trade Terms, Policy etc..)一些 Header 二级菜单页面和 footer menu 的页面

)分类页面(比如:Interior Led Lights, Exterior Led Lights)

)产品页面(产品分类下的具体不同产品页面)

比如:Exterior Led Lights 类别下有这些产品页

比如:Interior Led Lights 类别下有这些产品页

创建网页的顺序:先建立产品分类页面,然后建立每个具体的产品页面,常规页面和附属页面最后创建。相当于 分类-产品-单页 的顺序。

产品其实也属于单页,但是这里就把它标记为产品吧,而公司简介,联系我们这些独立的页面我们这里称之为“单页”。

按照这种顺序来创建网页,会让你节省很多时间精力。如果你按照先所有菜单导航的页面逐个创建,后创建分类页面,最后再创建分类页面。否则,你可能要反复修改几次菜单结构,最主要的是,首页你建好了但是产品页和分类页没有建立,你首页没什么内容可展示调用。

当然,这个顺序不是死的,我只是根据我的习惯来建议。你也可以先把所有产品页都创建好,然后创建产品分类页,最后创建常规页面和附属页面,那么就相当于 具体-分类-单页 的顺序。

产品页面的 URL 是 http://www.domain.com/interior-led-lights/led-high-bay,非常清晰明了的 URL 结构。

那么怎么创建网页呢?

在 WP 后台左侧菜单 【Page】->【Add New】,然后输入页面的标题,在编辑区域加入图片文字,完成页面创建。

如果有需要,你也可以使用 Fusion Builder 来创建页面。

产品页面用 Page 还是 Portfolio 来创建?

如果产品页面较少(<10),用 Page 即可。如果产品较多,用 Custom Post Type。

Portfolio 的本来含义是作品集的展示,如设计师的设计作品展示。从 SEO 角度来说,用 Portfilio 来展示产品,URL 会有点问题。

比如:如果产品分类,WP 系统对 portfolio 的分类默认为URL:/portfolio_category/产品类别/,那么如果想要展现 域名/产品分类/具体产品 的 URL 结构就很麻烦。

用 Page 来创建产品页面,URL 会更简洁清晰。那么层级关系怎么体现呢?

产品分类页:

具体产品页:

点击 Publish 发布之后,页面会刷新一下,URL 这里自动在 Interior Led Lights 分类下面了。

但是,用 Page 来作为产品页也有一个问题,那就是产品分类页如何能把该产品分类下的产品全部列表展示出来?

很简单,我们可以用至少十几种插件来实现。比如:Content Views, CC Child Pages 或 Display Post Shortcodes 等插件都可以完成。

以 Content Views 为例。在 WP 后台搜索 Content Views,

安装并且激活。之后在 WP左侧菜单栏里找到 CV,选择 Add New。

说明:上图中 Parent page 的 ID 为何是 24?这24从哪里得来的呢?

其实 page 也是一种 post type,本质上 page的ID号就是 post ID。

Filter Setting 设置完之后,点击 Display Setting:

注意:Pagination(分页导航)当产品子页数小于你设置的每页显示多少产品数 时,会不起作用。因此如果改分类下产品子页数量不多,就不用勾选分页了。

在设置的过程中,你还可以随时点击 Update Preview 预览。如果OK 的话,点击 Save,然后会自动生成一个短代码(shortcode)。

OK,我们来看看产品分类页 Interior Led Lights 吧,效果还可以,是吧?

此时我们可以稍微修改一下导航菜单了。

十七、创建首页 (bh/vps)

到了这一步,你会发现简单的网站雏形建立了。但是仍有些问题,比如,菜单里的首页只是一个自定义链接,并非真正的首页。并且,网站的首页始终显示的是 Blog,如上图所示。

而我们需要建立大气的企业网站首页,你肯定也不希望展示的是 Blog 文章。这是因为 WordPress 是以最强大的博客建站系统的身份打出江山的,最后扩展到 CMS 丰富的网站内容管理系统,它默认会以动态的 Blog 最新文章为首页。此时我们需要重新设置一下。

首先我们先建立首页,点击 Page,Add New,在标题框中输入 Home,然后点击顶部黑色 admin bar 下的 Screen Options,勾选上 Fusion Builder Setting。然后,再次点击 Screen Options 收起选项,点击页面编辑区域上方的按钮:Use Fusion Builder。

此时你可以看看 Avada 主题的编辑器 Fusion Builder 了。这个编辑器功能还是挺多的。想要用好 Fusion Builder 来编排网页内容,至少你需要熟悉 Layout(布局) 和 Element(元素)。

为了让大家熟悉 Layout 和 Element,我们先点击 +container 添加一个 1/1 的 Container (布局容器),然后在里面点击 Element,在弹出的元素类型窗口中拉到下方,添加一个 Text Block,在其中输入一段文字,然后确定。

此时,Home 这个页面中已经有内容。至少,已经有了这段 Text Block。接着,在页面的右侧点击 Publish。这样即创建了首页的页面。

接下来,我们要把网站的默认首页改成这个页面。

我们在 外观 – 主题 下,点击 Customize (自定义) 菜单,此时会来到一个自定义的左侧栏。点击 Static Front Page,取消勾选 Your latest posts, 勾选 A static page。在页面列表中选择 Home。或者,你也可以在后台左侧菜单【Setting】- 【Reading】中设置首页为静态首页 Home。

接着,我们要修改更新一下网站菜单。【外观】-【菜单】,把之前菜单里的 Home (custom link) 删除,从左侧 Page 中找到 Home,添加到菜单中,并且将其拖拉到最顶部。点击保存菜单。

此时重新访问网站首页,可以看到网站首页已变成我们之前创建的首页 page。为了让首页更加丰富,接着我们可以利用 Fusion Page Options 对首页显示的内容进行设置显示还是隐藏,然后再用 Fusion Builder 来编辑布局,布局完之后再每个宽度区域添加 Element。

十八、认识 Fusion Page Options

在 Home 页面的编辑器下方拖到底,可以看到一个区域,区域标题为 Fusion Page Options。

这里可以控制页面上各种类型的布局和元素的设置。比如:Sliders, Page, Header, Footer, Sidebar, Background, Page Title Bar。

我们首先在 Page Title Bar 那里选择 Hide,不显示。

这个区域在首页上完全是多余的,除了显示一条明显的 page title block 块级元素之外,没任何卵用。如下图所示:

接着在 Sliders 选项卡中,我们可以看到,默认的 slider type 是 No slider。我们点击下拉菜单,出现几个选项:

  • No Slider
  • LayerSlider
  • Fusion Slider
  • Slider Revolution
  • Elastic Slider

我们安装了 Layer Slider,但是还没有创建首页的轮播 banner slider。我们先去创建 Banner Slider 再来设置。

十九、用 LayerSlider 创建 Home Banner Slider

点击 WP 后台左侧下方 LayerSlider WP -【All Sliders】, 点击 add new slider。接着跟着提示输入 slider name:homepage slider。点击创建按钮。接着页面会跳转到设置页面。

该页面上方有个 tab 选项栏,有 SLIDER SETTING(设置)/ SLIDES(添加幻灯片)/ EVENT CALLBACKS(回调事件)

在左侧的菜单 Layout 这里,默认的模式是 responsive(响应式)。这种模式会随着不同的设备屏幕宽度来缩放尺寸,高度随宽度而变化。通常我们就选这种,但是尺寸修改一下。

宽度根据你想呈现全宽还是非全宽而定。并且,你需要设定一个 slider 区域的高度。

比如,我们之前在【Avada】 的 【Theme Options】- layout 中设置了 1100px 宽度,wide(无边框线风格)。如果这里 slider 我们想做成全宽效果,这里我们把宽度设置为1920,高度则根据我们准备好的 banner 图尺寸,比如420,然后点击 save changes。由于是响应式,因此,当设备屏幕宽度为 1920 px 时,高度为 420px。如果屏幕分辨率没那么大,或者是平板,手机界面,高度值会随着宽度等比例自动缩减。

总而言之,这里高度和宽度请按照你实际想要呈现的效果来定。

比如,如果你不需要 banner 全宽,你也可以用 1100 宽的 banner 图,那么这里宽度和高度就按照实际你的 banner 图的宽度和高度填写。如果你不太理解,没关系,直接不修改尺寸,用默认的尺寸值先看看效果也可以。

接着,我们点击上方的 SLIDES,准备添加 banner slide images

添加 slide #1 之后,点击绿色的+号,继续添加 slide #2。。

每个 slide 的 Slide Timing 都要设置一下,建议设置为 duration:3000,shift:1000。然后保存。这样 homepage slider 就创建成功了。

此时,再次点击【Page】- all pages,在页面列表中找到【Home】点击编辑,然后在 Fusion Page Options 的 sliders 中选择 LayerSlider,在列表中选择之前创建的 homepage slider

然后,在右边侧栏上方,点击 Update 按钮,更新页面。

然后,刷新网站首页,首页幻灯显示 OK!效果还是相当不错的。





这样,首页就建立了 Banner Slider 幻灯轮播图片。

Banner Slider 的下方,由于我们只用了一个 1/1 Container + Text Block,因此有点单调,只有几行文字,和别人高大上的首页好像还相差很远。

别急,只要你已经知道怎样用 Container 容器来占位布局,然后在容器内添加你所需要展示的内容元素即可。比如,你可以放图片,放视频,放文本,放按钮,放图文混排,放图片相册,放客户评价……。

前面我们说过,当你准备建站之前,你至少应该在收藏夹内收藏了几个非常不错的参考网站。看看他们网站的布局,然后利用 Fusion Builder 编辑器去实现吧!这一点都不难,起码,你已经入门了。

二十、LOGO 设计

当你已经初步入门并且找到建站的感觉之后,可能你最想换掉的就是 Avada 的 LOGO 了。关于网站 LOGO 的设计我强烈建议应该外包。

关于外包设计的资源,可以查看一下这篇文章,里面对外包有介绍:料网推荐:超实用的外贸网络营销工具

引用好友 tudou 的一段话:

不要自己设计 Logo ,除非你是设计师,或者你的网站像个博客一样无关紧要。

即便是普通的设计师,在配色、联想、运用设计工具上也比普通人要熟练的多,做出的 Logo 更好看,放在网站上直观的感觉就是更有设计感,更“高大上”。

选择自己设计 Logo 或者使用在线网站生成 Logo ,通常没注意到一个山寨气息浓厚的 Logo 对网站整体设计的严重破坏,更没意识到 Logo 对品牌建设起的重要作用。Logo 可以用在很多地方,不仅仅是名片,信纸,产品画册,工作服,挂牌等方面……

关于 LOGO 外包设计,你可以考虑 logo123.net 或者 99designs.com。当然,如果你觉得这一步可以先略过,暂时用 avada 的 LOGO 先占个位也行。但无论你是最后再去考虑制作 LOGO 还是一开始就打算解决,我都建议你不要自己去制作 LOGO。

 

未完待续~~

分享到微信朋友圈

LiaoSam
LiaoSam
外贸综合症患者

28条评论

发表我的评论

取消评论

邮箱白名单说明:最近料网自动提醒邮件经常会被一些邮件服务商拦截。为了您顺利并及时地收取留言被回复的提醒邮件,请在您邮箱中把料网 liaosam.com 加入白名单域名。

已读说明
设为私密评论
添加表情

Hi,您需要填写昵称和邮箱!

您的邮箱地址不会公开,仅仅用于收取回复。建议填写QQ邮箱,不宜填写工作邮箱。
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址 (没有就留空)
呃,评论有点多呢... 料网小秘书为您玩命加载中...
  1. #19
    jenny

    看了很多教程,头大,忍不住在料课求助,还是料神的最清楚,小白也能看懂。又更新了一些,激动 :cry: 几乎天天要来这里转一圈,跟着步骤把首页和banner 建好了,要请料神中午来碗牛肉面 :roll:

    2天前回复
  2. #18
    虾虾

    老师 等更新啊

    6天前回复
  3. #17
    李月乐

    老师,我也是按照这个步骤来的。
    但是Content Views预览的时候没有图片,update后也没有图片,只有产品名字。
    在网上也没有找到教程,请问是怎么回事呢?
    其他的朋友,有遇到过类似的问题吗?

    1周前 (07-14)回复
  4. #16

    该评论为私密评论

    2周前 (07-08)回复
    • LiaoSam
      Liaosam,外贸综合症患者。
      @小璞叔叔 该评论为私密评论
      6天前回复
  5. #15

    该评论为私密评论

    2周前 (07-06)回复
  6. #14
    caimuhai

    您好,请问下,在你推荐的买了域名和主机,主题,然后按你说的步骤在启用Avada主题创建私人口令时,跳转到 Envato 网站,然后一直没法跳转到创建 Token name 的页面该怎么做?小白求解救

    4周前 (06-25)回复
    • LiaoSam
      Liaosam,外贸综合症患者。
      @caimuhai 换个浏览器试试。或者如果网页响应太慢的话,尝试用用翻墙工具。
      6天前回复
  7. #13
    sueinzhang

    我想来想去还是准备好素材外包去给老外快一点,完全懵逼啊不懂装修。哭笑不得。。

    4周前 (06-24)回复
  8. #12
    Wendy

    Sam, 您好! 我刚开始尝试建网站,有些问题想向您请教的。

    我的产品较多,会打算用Protfolio做产品的内页。用Portfolio 做的产品内页在导航菜单里是显示在Product,然后再到产品分类页面,再到portfolio的产品详细内页吗?请问是可以通过Menu把Portfolio做的产品的详细内页关联到 产品分类页,产品分类页做为portfolio详细内页的父级,这样理解的话,对吗?

    如果想要把该产品分类下的产品全部列表展示出来的话,还是可以通过Content Views,然后按照您的教程的说明来进行操作吗?

    另外,是否在网站创建的初期要把相关的产品的关键词设定好?

    4周前 (06-24)回复
  9. #11
    李月乐

    老师米课可以只报名建站部分,或是可以把建站部分单独提出来另外收费吗?

    一枚非外贸行业却又极想学习建站的学员的真诚的咨询和建议。

    4周前 (06-22)回复
  10. #10
    Ryan

    料神你好,关于 Content Views 的 设置 read more text,后面不填任何东西,保存后还是出现了那个绿色按钮,里面还是默认的文字,这是什么问题?需要收费版才能留空吗?

    1个月前 (06-21)回复
  11. #9
    An

    老师,什么时候更新呢?

    1个月前 (06-17)回复
    • LiaoSam
      Liaosam,外贸综合症患者。
      @An 写了这个帖子才觉得,每个地方都可以展开写一篇单独的文章。比如,网站内容的安排和布局,Logo找人设计制作,Slider 的设计。。Footer 的设置,具体产品页的布局,都是实操的东西,都要靠文字写,头好大啊!我尽量早点更新啊。
      话说如果有预算不如报米课系统学习一下了,毕竟我的课程建站只涉及一小部分。
      1个月前 (06-18)回复
      • 虾虾

        @Liaosam 老师 等更新啊啊啊 :oops:

        6天前回复
  12. #8
    柱子

    这篇迟来的教程。。。之前看了新手指南之后就脑子一热按照教程花了几百大洋轰轰烈类开始了,然后发现竟然没教程了,但是牛逼已经吹出去了(对我老婆说我可以零基础建站),于是一边百度一边折腾,花了近一个月搞了一个很凑合的网站。说到底,网站还是要靠各种图片,文字素材。

    1个月前 (06-14)回复
  13. #7
    sueinzhang

    建议老师增加评论可贴图功能~~

    1个月前 (06-13)回复
  14. #6
    Fred

    请问:常规页面和附属页面用 page 还是 post ?

    1个月前 (06-07)回复
    • LiaoSam
      Liaosam,外贸综合症患者。
      @Fred 用 page。
      1个月前 (06-07)回复
      • Fred

        @Liaosam 谢谢Sam。
        有空的时候 能不能写一篇 WP 用子目录搭建多语言网站 ?
        然后如何把这几种语言的网站链接/整合到一个页面?

        1个月前 (06-08)回复
  15. #5
    Jack

    hi Sam,已经收录的网站是不是最好不要去“设置 Rewrite 伪静态”和“设置固定链接格式(Permalinks)”了?

    1个月前 (06-06)回复
    • LiaoSam
      Liaosam,外贸综合症患者。
      @Jack 可以不做这些设置。自定义的固定链接格式 .html 也只对文章类型的 post 页生效,对 page 页并不生效。
      1个月前 (06-07)回复
  16. #4
    sueinzhang

    一步一步看下来,深刻体现到了老师贯穿课程始终的X-Mind思维,没有长期使用训练的一个思维习惯,做不到这么细致的!

    2个月前 (06-06)回复
  17. #3
    holysniper

    请问大神,我按照您的步骤一步一步的设置,要把网站设置成伪静态,怎么url链接还是变不了?是不是我装了wp super cache的问题

    2个月前 (06-06)回复
    • LiaoSam
      Liaosam,外贸综合症患者。
      @holysniper 刚开始建站,没完成之前先不要装缓存插件,可能会出现各种让你烦心的问题。
      1个月前 (06-07)回复
  18. #2
    Jeff

    请问Linode怎么装wordpress?

    2个月前 (06-04)回复
    • Fred

      @Jeff https://www.liaosam.com/linode-vps-greenhand.html

      https://www.liaosam.com/guide-for-wordpress-newbees.html

      这2篇教程应该对你很有用 :)

      1个月前 (06-08)回复
  19. #1
    Brooks

    这个写的漂亮,很受用。

    2个月前 (06-02)回复
  1. A Thousand Year Christina_Perri
  2. And the winner is Gerard Darmon