手把手教你搭建一个简单外贸B2B网站
新的一年，你是否想搭建一个外贸网站来宣传销售你的产品。如果你有这样的想法，并且还不知道如何下手，那么你就来对地方了。今天这篇文章Hoan就从零开始教你搭建一个简单B2B网站。所有的页面设计都是通过拖拽形式完成的，无需任何代码知识。
除了需要购买域名和主机，网站中的主题和插件全部都是免费。同时希望大家能够在教程中举一反三，这样我们无论搭建什么样的网站都能做到游刃有余。
当然如果你在实操过程中遇到了任何问题，都可以在文章下面留言。我会第一时间回复大家。
OK，我们开始吧！
购买域名和主机,安装Wordpress
域名和主机是我们搭建外贸网站的必要条件。对于英文网站，Hoan强烈选择国外服务商，一方面国外的主机性价比高，另一方面国外主机可以免去备案的麻烦。
域名主机的服务商有很多，这里不做对比，Hoan推荐域名在Namesilo上购买，主机选择在Siteground主机商购买，如果你是新手不知道怎么操作，那么请查看我之前文章
安装Hello Elementor主题和子主题
Hello Elementor是Elementor官方推出的主题，这个主题最大的特点就是几乎没有什么样式，能够和Elementor完美结合。也算是适合新手操作的一款优秀主题。
安装Hello Elementor主题可以在Wordpress后台Appearance –>Themes–>Add New,搜索Hello Elementor，点击安装并且启用。
安装子主题，需要在谷歌搜索hello elementor child theme。到Github官网下载子主题压缩包，然后同样Appearance –>Themes–>add new–>Upload theme,上传安装压缩包.
点击Install Now,安装成功后，点击启用。
注意主题安装顺序，先安装主题，然后安装子主题。子主题的作用就是保护我们的自定义设置在主题更新之后不被清除。
安装需要的所有插件
同样到Wordpress后台，依次点击Plugins –>Add New，搜索我们需要安装的 插件，找到插件之后点击Install Now，安装成功之后点击Activate启用。
这个教程中需要的插件如下：
- Classic Editor
- Classic Widgets
- Elementor
- Elementor Header & Footer Builder
- Exclusive Addons Elementor
- WooCommerce
- WPForms Lite
- Yoast SEO
依次安装所有需要的插件。
网站基本设置
网站标题
点击Settings–General，在Site Title中填写自己网站的标题，这个标题一般使我们的的品牌名称。Tagline是我们网站的副标题，这个我们一般选择留空。
URL
点击Settings–Permalink, 在Permalink structure中，我们选择Post name类型，这是对谷歌排名最友好的URL结构。
禁止谷歌收录
如果你在线上操作搭建网站，这个功能Hoan强烈建议开启，因为刚开始搭建网站，网站还没有内容，谷歌如果抓取你的网站，会留下一个很差的印象，甚至会收录一个空壳网站。所以强烈建议开始谷歌禁止收录功能。
点击Settings-Readings，在Search engine visibility，勾选Discourage search engines from indexing this site功能。然后点击save changes保存。
创建Page页面
在WordPress后台，点击Pages–>add new ,输入页面的标题，然后点击Publish发布，注意我们不需要在编辑器中填写任何内容。
这里，我们依次创建Home, About Us, Products, Contact Us, Blog页面。
创建成功后，我们进行下一步。
搭建Header（头部）
网站的头部和脚部是网站通用的部分，所以我们先来搭建头部和脚部，免费的Elementor是无法编辑Header和Footer的，但是可以通过插件Elementor Header & Footer Builder开始编辑功能。
点击Appearance–>Elementor Header & Footer Builder–>Add New, 在新页面我们填写标题Header, 在Type of Template选择Header,在Display On选择Entire Website（意思就是让创建的header应用到整个站点）。
然后点击Publish发布。发布成功后，页面标题下方会出现Edit with Elementor按钮，点击这个按钮。
然后就是跳转到Elementor编辑器页面。
点击右侧+号按钮（填写新区域）， 选择我们想要的结构，我们选择三列。
添加背景色
添加结构好之后，当我们鼠标划上去之后，在区域上会出现三个图标，分别是添加新区，编辑当前区，删除当前区。我们点击中间编辑当前区，在左侧对应会出现编辑区，分别有三个选项layout,style, advanded,
我们选择Style, Background–>Normal–>Color, 点击颜色icon,调用出调色板，选择纯黑色#000000,（根据自己的审美选择颜色)
选择好颜色之后，点击Update
添加Logo
第一列我们想要添加网站的Logo, 在Elementor小工具区（左侧面板），我们选择Image小工具然后鼠标拖拽到第一列。拖拽到第一列后，我们的Image小工具就变成编辑状态。在Choose Image下方，我们点击+,上传Logo图。
上传成功之后，底下Alignment，我们选择居左对齐方式， Link选择Custom URL,填写网站链接(网站的logo添加链接有利于用户体验)。
点击Style选项，我们通过调整Width来调整Logo的大小。在数值框上方会有单位选项，我们可以选择PX像素。当我们调整好Width后，我们可调整Max Width和Widht保持一致，这样我们的Logo大小会锁定，不管Logo区域占比是多少。logo的大小也会保持不变。
添加菜单
添加菜单之前，我们需要Wordpress后台创建菜单，新建一个窗口，打开后台点击Appearance–>Menu,在新页面点击create a new menu，命名新菜单的名称Main Menu, 底下Display location勾选Header，然后点击创建菜单，创建菜单成功之后，在左侧Add menu items，勾选前面创建的page 页面，勾选好之后，点击底下按钮Add to menu,添加页面到菜单，然后鼠标拖拽菜单调整菜单的展示顺序。
然后返回到Elmentor编辑页面，在Elementor小工具区域搜索Menu, 我们选择Navigation Menu并且拖拽到第二列，完成后在Elementor小工具区域就会自动跳转到Navigation Menu的设置界面。
调用菜单
我们点击Menu选项右侧下拉选项，我们选择我们刚才创建的菜单Main Menu，这时候在右侧预览区域就可以看到Main Menu菜单就会被调用出来。
调整菜单样式
接下来，就是调整菜单的样式，我们根据美工的效果图或者自己的审美来调整菜单的样式。Elementor设置小工具的样式有很多。根据Hoan经验，我们一般会设置以下选项：
对齐方式：Layout–>Alignment, 我们可以选择居左，居中，居右
菜单间距： Style–>Space Between.通过调整数值的大小来调整菜单之间的距离。
鼠标划上去效果： Link Hover Effect里面有同的选项，分别对应不同的效果。大家可以逐一测试。‘
字体： Typography点击后面的小铅笔，进入字体的设置界面，我们可以调整字体Family,字体大小，字体Weight,字体样式等等
鼠标效果： Normal普通状态，Hover鼠标 划上去，Active激活状态（假设我们访问网站首页，那么Home菜单就是激活状态）
当然，Elementor还有很多设置选项，对于摸索Elementor功能的可以逐一探索。
和Header一样，Footer也是属于网站的所有页面的通用部分。所以在创建Footer的时候我们也要应用在整个站点
和创建Header同理，在后台点击 Appearance–>Elementor Header & Footer Builder–>Add New, 在新页面我们填写标题Footer, 在Type of Template选择Footer,在Display On选择Entire Website。
创建好之后，我们点击Publish发布，随后点击Edit with elementor,就会跳转到Footer的Elementor编辑器页面。和创建Header原理一样，先根据自己预想的添加区域Section，选择列数Column.
根据Hoan经验，我们来分析下底部大概需要添加什么元素和使用什么小工具。
文本–单纯的想添加文字，那么我们拖拽Text Editor小工具到对应的列Column里面，拖拽进去后，Elementor区域就自动切换成Text Editor小工具的编辑区域，在这里我们添加我们想要添加的内容，并且设置样式。
链接–第一种方式就是在Text Edito小工具本身包含添加啊链接的功能。第二种如果我们想添加菜单，我们需要现在Wordpress后台菜单功能页面创建想要添加的菜单，然后将Navigation Menu小工具拖拽到对应的列Column里面，然后选择创建的菜单，并调节样式。
图片— Image小工具
社交–Social Icons
总之，你想要添加什么元素或者版块就要找到对应的Elementor小工具，然后对其内容和样式进行设置。
ELementor 小工具是在有很多，这也是Elementor强大的原因之一，当然这里Hoan就不一一列举了，需要大家自己去探索。
搭建网站首页
相信通过对网站Header和Footer的搭建，我们就能掌握Elementor设计网站的基本原理，那么对于初学者，我们就要熟练掌握各种小工具的用法，这样我们在设计网站上游刃有余，而不是单纯的只会添加文本和图片。
对于网站首页，我们还需要一步关键的设置，就是将我们创建的Home 页面设置为网站的首页。因为Wordpress本身是个博客系统，所以你安装的任何主题的首页都是以展示博客为主。所以对于企业类型的网站，我们需要指定对应的页面为首页
指定Home页面为网站首页
进入Wordpress后台，依次点击 Settings–>Readings, 在Your homepage displays选项勾选 A static page，在下来选项中，我们选择Home,然后点击Save Changes保存设置。
然后，后台点击Page，找到Home页面，点击Edit编辑。 进入Home编辑页面之后，我们点击标题下面的Edit with Elementor按钮，然后就会进入到Home页面的Elementor编辑页面 。
禁止 页面标题（或者其他）
当我们使用Elementor编辑任何Page页面的时候，Page页面的标题默认的会出现在页面上，我们需要禁止Page页面的标题。让页面变成完全空白的页面。
在Elementor小工具区域，点击左下侧齿轮设置选项，在新的页面，点击Hide Title按钮启用，然后点击Update更新。
假设你用的Astra主题，Astra主题默认的页面会有标题和面包屑导航，或者sidebar。那么你需要在后台 Page页面右侧选项中找到禁止的的选项。
接下来，我们就可以使用Elementor来编辑首页了。其实，掌握了Elementor设计网站的逻辑，剩下就需要熟练运用各种小工具的事情了。
所以，同理，像About Us， Contact Us, 这样单独的页面都和Home页面一样使用Elementor设计即可。
搭建Products页面
如果你的产品比较多或者超过20个，那么强烈建议你使用Woocommerce插件来管理你的产品，那么如果你安装了Woocommerce插件，那么我们把Woocommerce的产品页面和我们前面创建的Products页面关联。
关联Products页面
在wp后台，点击Woocommerce–>settings，在设置页面选择Products选项，Shop Page选项我们选择我们创建的Products页面。然后点击Save Changes保存.
这样我们在Products里面发布的产品都会在我们创建的Products页面显示。
创建产品分类
我们的产品一般都是有产品分类的，所以在发布产品之前，我们要先创建产品分类，在Wordpress后台，点击Products–>Categories,在创建产品分类页面我们就填写Name即分类名称。然后点击Add New Categories.
发布产品
发布产品应该是建站过程中最简单的事情了，因为我们自从接触互联网以来就或多或少的接触过在平台发布东西的经历，这也是Wordpress的本质，Wordpress是一套CMS（内容管理系统）。
发布产品几个点
- 产品标题Product name
- 产品描述Product description
- 产品主图Product image
- 产品子图Product gallery
- 产品分类Product categories
一切设置好之后，我们点击Publish发布即可。发布成功之后我们点击菜单中Products，在产品页面我们就可以看到我们发布的产品。点击产品就是产品的详情页。
产品分类页面和产品详情页都是可以使用Elementor编辑的，但是你需要升级Elementor到Elementor Pro才可以。通俗的讲免费的Elementor没有权限编辑，付费的Elementor有权限编辑。
搭建Blog页面
文章可以为Wordpress网站引流和提升权重。所以开通Blog频道是很有必要的。
首先我们要明白，发布文章是在Wordpress 后台Post菜单中发布，假设我们发布了一篇文章，那么怎么在前台显示呢！
第一种方法
先创建一个文章分类，假设分类明后才能叫做News，然后在后台Appearence–>Menu，菜单页面将Blog添加到主菜单Main Menu。 这样我们在前端点击Blog,就相应的看到文章列表，再点击文章进入文章详情（跟products性质相同）
第二种方法
创建一个Blog的page页面，然后用Elementor编辑页面，找到Elementor关于调用Post的小工具。
哪种方法更适合你，我们需要亲自测试才能懂。
添加表单
网站表单是网站最核心的内容，也是国外人发送询盘的主要方式。在Elementor小工具中同样提供了表单的小工具，但是只有升级Elementor Pro才能使用Elementor的表单小工具。这里我们依然可以使用插件来添加表单
安装WPForms插件
在Wordpress网站后台，点击Plugins–add new,搜素安装WPforms，安装并且启用.启用成功之后我们在WPForms中创建一个新表单。
创建表单成功之后，我们点击保存，WPForms会生成一段短代码.
我们复制这个短代码。然后来到Elementor编辑页面，在我们想要添加表单的区域（列）里面添加Shortcode的小工具。然后将短代码复制进去。 这样页面就可以出现我们创建的表单。
总结
以上这就是Wordpress搭建外贸网站的最常见的一种方式。其中最重点的还是要熟练掌握ELementor的使用技巧。Elementor之所以强大，是因为Elementor涉及到了很多网页HTML的代码知识。所以虽然Elementor是拖拽的形式来设计网站，但对于新手，还是得掌握一些代码知识才能掌握好Elementor。
如果你在建站过程中遇到了任何问题，都可以在文章下方留言。我会尽快回复帮助大家解决问题.
