文本介绍如何通过基于SIteground主机使用Elementor页面编辑器实现B2B外贸建站的完整过程,从0开始手把手教你使用Elementor构建自己的外贸网站。Elementor V3.12版本之后的编辑器相比较之前的版本改动较大,Flexbox也已经成熟稳定,同时还有原生Mega Menu功能,V3.13版本还引入AI。
我重新对如何使用Elementor页面编辑器构建外贸网站以及Elementor许多功能特点重新进行梳理,希望能够帮助你理解和掌握使用Elementor搭建网站的过程。
本文较长,建议收藏阅读!
基于本教程B2B外贸建站的费用说明
域名:10.95美元/年(Namesilo注册)
主机:47.88美元/年(SiteGround GrowBig套餐 19周年特惠价格,购买主机需要准备一张外币信用卡)
主题:免费(Hello Elementor)
插件:本站购买 Elementor Pro 49元/年、RankMath SEO Pro 59元/年、Unlimited Elements for Elementor 49元/终身,ACF Pro 99元/终身
合计约:600元人民币左右
另外,还有你花费在其中的时间和精力,这部分其实是最高的成本投入。
说明:本教程中你会发现我使用的域名不一样,这是由于我多次操作所导致,但不影响你阅读教程并按照教程执行的结果,所有体现域名的地方你只用你自己的域名即可。
1、注册域名
注册域名的平台有很多,我喜欢用Namesilo,它付款方式多样,支持支付宝付款。
你也可以选择其他平台注册,通常一个普通的.com域名的价格差不多在人名币80元左右。
本教程是基于SiteGround主机,需要修改域名的DNS服务地址才能绑定到网站,不建议在Cloudflare注册域名,因为Cloudflare注册的域名无法修改DNS服务。
访问Namesilo官网,点击【sign-up】进入注册页面

输入用户名和邮箱地址,以及密码,身份验证,然后点击【Create Account】创建账号

自动跳转并登录Namesilo,同时提示账号创建成功。

Namesilo目前一个普通的.com大概在10.95美元/年。如果你是新注册的用户在购买时输入优惠码:NUTSWP,即可享受立减1美元优惠。
回到Namesilo首页,在输入框中搜索你想注册的域名。

优先选择.com后缀的域名,点击【Add】添加域名到购物车,

点击【checkout】进入结账页面

输入优惠码:NutsWp,将会有1美元的优惠,点击【checkout】结账

选择支付类型,namesilo支持支付宝支付

勾选条款,【pay】付款

跳转支付,支付金额根据汇率计算成人名币。

付款之后返回购物车页面。

找到【Manage Domian】按钮,进入管理域名的界面之前,如果你还没有填写个人资料,会要求你填写一下个人资料,输入带星号的信息以及验证码,然后点击【Create My New Account】保存。

完成之后即可跳转到域名管理界面,可以在域名列表中看到你购买的域名。

你也可以通过其他平台注册域名,比如Cloudflare(本教程基于Siteground主机需要修改DNS服务地址不推荐在Cloudflare注册域名)、NameCheap、阿里云等等。
2、购买主机
新手学习入门的话推荐SIteground的GrowBig套餐,目前有19周年活动,第一年的费用大概48美元。

SIteground第二年会以原价续费,如果第二年预算不够需要提前有计划。欢迎向我咨询外贸网站主机购买方案。
访问SIteground官网,点击开始按钮。

选择GrowBig套餐计划。

SIteground也提供域名,但是价格比较贵,我们选择第二个选项,输入自己购买的域名。

输入我们自己的域名,点击下一步。这里输入域名实际上是将域名绑定到主机的默认应用中。

根据自己的实际情况创新一个新的账号,并输入客户信息和付款信息,填写必填项目即可,不必所有都填写。然后确认套餐内容和付款金额,勾选服务并点击付款。
注意站点扫描是额外收费的项目,勾选之后会增加付款费用,如果你不需要可以暂时先不勾选该服务。


创建成功提示,点击右上角的登录按钮,登录你SitGround账号。

登录之后点击Websites菜单,进入你的网站列表。

在网站列表中可以看到你的第一个网站,点击完成安装按钮,完成网站的安装步骤。

这里默认即可,点击继续按钮。

这一步是让你创建新的应用或者迁移应用的,我们可以点击跳过按钮,跳过这一步,然后再管理页面中安装。(在这里点击Start New Website直接安装WordPress也是可以的,按照提示操作即可)

跳转页面直接点击完成按钮。

然后开始创建你的网站。

创建完成之后点击网站工具按钮,进入网站管理。

在管理界面中点击安装和管理WordPress。

本教程不需要安装Woocommerce插件,所以直接选择WordPress即可。

输入管理员信息并点击安装。

安装完成。

这时候我们还不能访问网站,我们还需要修改域名解析。
3、域名解析
由于Siteground必须要切换域名的DNS服务,解析才能生效,所以我们需要根据SIteground提示,在域名管理平台修改域名的DNS服务地址。
在SIteground仪表盘中找到并复制DNS服务地址。

登录到Namesilo的域名管理,找到对应的域名修改DNS服务地址。
勾选要修改DNS服务地址的域名,点击上方的Change Nameserver按钮。

删除原理域名的DNS服务地址,粘贴SiteGround提供的DNS服务地址,并点击保存按钮。

然后自动跳转到域名列表,可以看到提示信息,域名的DNS服务迁移大约需要1-48小时才会生效。

通常并不需要这么久,大概十几分钟之后,刷新域名列表,如果Nameservers变成了SiteGround的DNS地址,即代表DNS已经迁移完成。

我们返回SiteGround访问网站。
进入SiteGround的网站管理,点击域名后面的箭头即可直接访问网站。

到此一个新的WordPress网站创建完成。

接下来需要给网站安装SSL证书。
4、安装SSL证书
新网站创建之后,我们在访问时会有不安全提示。

所以需要给网站安装好SSL证书服务。
进入SIteGround站点工具。

进入安装菜单下的SSL管理

选择选择Let’s Encrypt证书,点击get安装。

安装完成之后开启强制HTTPS。

该设置用于强制你的网站通过加密和安全的HTTPS连接。

完成之后刷新网站,可以看到网站通过加密访问了。

到此你的WordPress网站已经安装完成,接下来你需要了解WordPress的一些基础功能,以便后续的操作。
5、WordPress常用的初始化基础操作
在网站创建之后,我们需要对网站做一些初始化的基础操作,同时你帮你主理解一些WordPress常用的基础功能。
1)登录后台访问仪表盘
如何登录网站后台?
方法一:通过SiteGround网站管理的WordPress Admin按钮直接登录(注意这里需要你讲浏览器弹出新窗口设为允许),此登录无需输入用户名密码。

方法二:WordPress网站默认的登录地址是/wp-admin,你只需要在地址栏域名后面输入该路径即可访问网站后台登录页面。输入用户名密码即可登录。

登录之后可以看到后台仪表盘,左侧是后台的功能菜单项目,右侧是SiteGround定制的仪表盘界面。

你可以点击仪表单下方的切换按钮,切换到默认仪表盘界面。

默认的仪表盘界面将不再显示SiteGround内容。

在仪表盘中你可以通过右上角点开Screen Option设置,勾选设置取消或者设置想要展示在仪表盘中的内容。

并且可以通过鼠标拖拽模块的方式改变仪表盘的内容布局。

2)修改网站标题和默认语言
在网站后台Setting菜单下面常规设置页面可以修改网站标题和网站的默认语言。

另外,该页面中的WordPress Address和Site Address轻易不要直接在后台修改,修改之后很可能网站直接无法访问。
如果你不需要用户能够注册你的网站账号,也不用勾选Membership选项。
3)关闭和开启搜索引擎可见性(必看)
新网站启动之后,还没有内容,建议先取消搜索引擎可见性,等到内容准备差不多上线时再打开搜索可见性。
在后台Setting菜单下面的Reading页面中,你可以看到Search Engine visibility选项,默认情况下是不勾选,勾选Search Engine visibility即代表网站对搜索引擎不可见。

4)设置网站首页
网站首页是用户通过网站域名直接访问的第一个页面,通常一个新的WordPress网站的默认首页为最新发布的文章页面。
通常在Setting菜单的Reading设置页面可以修改。

如果你想设置一个特殊的页面作为网站首页,比如你创建了一个Home页面,想要设置为网站的默认首页,切换Your Homepage Displays选项为 A static Page,并在Homage选项中选择对应的页面即可。

Homage选项下面的Posts page是用来选择默认博客页面的,比如你创建了一个Blog页面,然后在这里的Posts Page中选择Blog页面,那么Blog页面将为作为默认的博客页面,你无法通过页面直接编辑Blog页面,只能通过主题设置或者模版设置来修改Blog页面的展示效果。
这种默认博客页,和Woocommerce中默认的Shop页面一样,一旦被设定,对应的页面将成为系统默认页面,将不能自定义编辑,只能通过主题或者模版来修改编辑。
5)关闭网站博客评论的功能
通常B2B网站不会开启博客评论,在Setting菜单下面的讨论设置页面,取消第一个勾选项目即关闭评论。

6)网站页面的固定链接设置
在Setting菜单下的固定链接设置页面设置。
固定链接的结构建议设置为【 /分类/内容标题 】的形式,这种链接结构对SEO友好,并且用户也容易理解。

7)上传和管理媒体库文件
在Media菜单中管理媒体库文件。

你可以上传、编辑、删除媒体库文件。通过点击Add New向媒体库中添加图片。建议上传图片之前进行一些基础优化操作,不要这几上传几M的图片文件,图片过大在页面加载时会减慢页面的加速速度,不利于SEO。

你还可以编辑媒体文件,对于图片来说你可以编辑图片的alt属性、标题、说明、描述等内容,这些都有利于图片的SEO优化。

你还可以通过Edit images按钮修改图片的尺寸,对图片进行裁剪等简单图片处理。

8)安装、更新和删除主题
主题你可以理解为网站的皮肤,一个网站可以安装多个主题,但是启用的主题只能有一个。
主题会预设好一系列的网站外观,同时还会提供一些额外的功能,并且开放一些设置项给你修改,但是不同的主题之间差异较大,有一些主题会把设置菜单做在外观自定义中,也的主题会在仪表单左侧添加主题设置菜单。所以针对主题的设置和操作不具有通用性,你需要去参考和阅读你使用主题对应的文档来进行维护和管理。
我之前用过Avada主题、Astra主题、还有其他一些主题,最后发现如果不断更换主题,只会让自己陷入无尽的学习当中。
我在使用了很长一段时间的Elementor页面编辑器之后,最终选择了Elememtor原生主题Hello Elementor。掌握越多的Elementor页面编辑器技巧之后,你会发现你的主题很多余。
当然也有非常多好用的主题适合新手,如果你对自定义要求不高,主题就能满足你的需求,用自己擅长的主题也是非常好的选择。
通过点击Add New可以安装主题。

你可以直接安装在线主题,也可以通过上传主题安装包的方式安装主题。
在线插件库通常都是免费主题,功能有限制。你可以购买付费主题并下载主题安装包通过上传主题的方式进行安装。

如果你想删除网站中没有被启用的主题,可以点击主题,在弹出的主题详细里面点击删除按钮,删除该主题文件。

5)安装、更新和删除插件
插件你可以理解为网站的功能,有点类似手机里面的Apps,一个网站可以同时安装和启用多个插件。
如果你需要给网站添加一些功能,比如我想实现网站可以实现SMTP邮件转发服务,那么我就可以通过安装插件并配置来实现这个功能。
但是不推荐在网站无限制的安装插件,或者安装很多功能重复的的插件,这样很容易导致网站出现BUG,不同的插件之间会存在兼容性的问题。
另外,也不建议安装来历不明或则破解版的插件,选择安装插件有几个建议你可以参考:
- 安装近期一直在更新迭代的插件,代表这个插件一直有人在维护;
- 安装用户较多评价较高的插件,代表这个插件已经有很多人帮你做验证;
- 不要安装来源不明的插件,避免插件包文件被篡改植入病毒;
- 安装正版授权的插件,能够在线更新,避免插件长期不更新出现漏洞或者兼容性问题。
你可以通过Add New按钮安装插件。

和主题一样,你可以直接在插件库中搜索安装插件,也可以通过上传插件包的方式安装插件。

你可以在已安装插件列表中查看安装和启用的插件,也可以停用对应的插件,给插件升级等。

6)用户管理
在仪表盘的Users菜单中你可以管理网站的用户。
通常B2B网站是不开放注册的,如果需要添加用户,需要管理员在Users菜单下添加用户一个新用户。
添加用户时注意角色的选择,如果你需要用户可以编辑网站后台的内容,就授权管理员权限,如果值是想要用户可以编辑发布文章,就授予编辑的角色即可。

7)文章管理
通过仪表盘的Post菜单,你可以管理网站的文章,及文章分类和标签。
All Posts可以查看所有文章列表,并对列表中的文章进行修改,编辑,删除等操作。

通过Add New按钮可以添加新的文章。

WordPress文章使用的默认编辑器是古腾堡,通常我再编辑文章的时候只用古腾堡编辑器,因为它可以让我更加专注于内容。当然如果你安装了Elementor页面编辑器也可以使用Elementor来编辑你的文章,但是我觉得使用Elementor编辑文章效率太低,我自己一般在编辑文章时不会使用。

通过Categories菜单你可以为文章添加分类。

通过Tags你可以为文章添加标签,为不同文章添加不同的标签,方便用户通过标签来检索内容。

8)页面管理
通过仪表盘的Pages菜单可以管理网站的页面,你可以添加,删除,修改页面。
在All Pages中可以看到网站所有页面的列表。

通过Add New 按钮你可以添加页面。
9)菜单管理
如果的网站是一个新创建网站,并且主题为默认主机的清下,是没有菜单功能的,因为默认的主题没有提供菜单功能,等你安装了其他主题或者Hello Elementor主题之后可以返回来看如何管理网站的菜单。
10)工具
5、安装Hello主题和Elementor编辑器
6、B2B外贸建站必备和常用插件
本教程的产品管理将通过ACF插件的
1)ACF 高级自定义字段(必备)
2)Elementor可视化页面编辑器(必备)
3)SMTP邮件转发(必备)
4)RankMath SEO工具(必备)
7、使用Elementor构建B2B外贸网站
在使用Elementor构建B2B外贸网站之前,建议先对Elementor做一个系统全面的了解,你可以阅读
1)Header模版制作
2)Footer模版制作
3)
9、页面TDK设置(RankMath SEO)
10、网站上线和数据分析
1)开放搜搜引擎可见性
2)RankMath生成站点地图
3)URL 检查
4)