使用Elementor WordPress Hosting搭建独立站完整教程

早些年有接触过WordPress的朋友基本都听过Elementor吧，它可以说是wordpress最好的页面编辑器，但随着wordpress自家的Gutenberg编辑器出来后，elementor被抢占了很大的市场，首先Gutenberg是完全免费的，而且官方自带，elementor要付费肯定是搞不赢的，所以他们另辟蹊径，开始发展全托管wordpress主机服务，把自己的Elementor PRO完整整合进他们的主机，通过主机服务来实现盈利吧。

Elementor对新手非常友好，使用非常容易，现在应该还有很多用户是Elementor的粉丝，做外贸和跨境电商的朋友，如果也有喜欢Elementor的，那Elementor WordPress Hosting是最好的主机，没有之一，跟随这篇文章学习如何使用Elementor WordPress Hosting搭建独立站吧。

第1步. 购买订阅Elementor WordPress Hosting

虽然很多人看这个教程主要是因为Elementor而来，也就是说大部分人都应该是知道Elementor是什么的，但我还是建议新手了解一下Elementor。

先了解一下Elementor

在使用Elementor WordPress Hosting搭建独立站之前，我觉得应该先稍微了解一下elementor。

Elementor实际是wordpress的一个页面编辑器，它是基于wordpress系统上使用的，也就是说使用elementor你可以创建并且修改你的wordpress网页，他是一个可视化可拖曳模块的网页编辑工具，对于不懂代码的朋友，这是非常方便友好的，你只要拖动他们现成的模块元素(elements)到右边的界面，然后修改模块内容，页面什么样的效果即时呈现在你的面前。

在wordpress的Gutenberg编辑器还没出来，Elementor是用户最多也最方便的页面编辑器，得到广大新手的热爱，使用起来真的非常简单。以前因为Elementor的付费版Pro非常贵，很多用户用不起，所以大部分人使用免费版，少了很多功能，但是现在Elementor开启了一项新业务，也就是Elementor wordpress hosting，你只要订阅这个主机，不需要另外购买付费pro版，就可以使用完整的elementor PRO所有功能。

选购一个主机计划

Elementor wordpress hosting是从2022年才开始一个项目，那时候还叫elementor cloud website，也只有一个主机套餐计划，可查看我早期的介绍文章：使用Elementor cloud website自建跨境独立站，更省力优秀。现在已经有4个档次的套餐计划，以面向不同需求的用户。

新手建站请根据你自己的网站大小来选择套餐，这些套餐最大的区别主要还是主机空间和流量的区别，也就是说级别越高，主机可存储空间越大，用户访问量也可以更大。

实在不确定就Basic开始吧，首年只要119.88美金，你可能看到其他便宜一些的主机，但那大部分都是共享虚拟主机，而Elementor wordpress hosting是全托管wordpress主机，主机的运营维护优化你都不需要管，elementor会保障你的网站速度，而且你还能使用elementor Pro完整版。

购买过程就是点击Buy Now，然后设置自己的账号资料，如果其他有任何附加的东西都不要选择，然后选择付款方式，支持信用卡(外币)和paypal，然后对照金额无误后，点击pay now就行了，你会收到几封邮件告诉你订购的主机资料。

当然如果你觉得不好用，购买当日起的30天内随时可以退款。

第2步. 初始化设置

这里会是一个可视化向导，从提问开始，然后你按照他们的步骤一步一步选择或者输入必要的资料，完成初始化设置

1. Is this your first time building a website? 是否是你第一次建站，随便选择
2. My website’s name is：输入你的网站名称，之后还是可以改的
3. Choose a Website Kit to start with，选择一个网站工具套装开始建站，这个其实是一个主题，你如果觉得哪个不错可以，选择并开始，但我建议先不要选，之后也是可以选择的，点击右下角I‘d rather start from scratch，意思就是从零开始。
4. 系统会完成你的初始化设置，也就是创建一个空白的wordpress网站，可能需要几分钟，但实际很快，一分钟不到。完成之后你会收到一份邮件，里面包含你的网站信息。

完成初始化设置，页面会回到你的elementor账号后台，选择刚刚给你创建网站，你可以对网站进行多项设置，当你滑动鼠标到网站上时主要有两项：Edit with Elementor和Manage This Website。前者当然是使用Elementor编辑网页，后者是设置网站的域名、备份等一些信息，相当于主机面板的一些操作，不过这两项都可以放在之后来操作。

如上文所说elementor是基于WordPress，所以对wordpress比较了解的朋友可以先进入wordpress后台看看，很多设置可能在wordpress后台操作会比较好，在wordpress后台你能做很多事，比如安装插件，安装主题，设置账号，还有比如语言日期等等设置。wordpress后台如何操作，具体请看这里：不知道如何对WordPress后台设置，这篇文章告诉你。

你可以点击你的网站右下角的三点下拉菜单，然后点击Open WP dashboard就进入了wordpress网站后台。

第3步. 网站设置

进入到wordpress后台，除了我上文的提到的先对wordpress后台做一些设置(这个也可以之后再来)，然后再通过elementor对网站进行一些设置。

看图片中的Edit with Elementor，这个和上文在elementor后台website的Edit with Elementor意思是一样，不过这里点击后你需要选择一个page或者一个post，我为什么非要绕到wordpress中，是因为elementor基于wordpress，你还是需要了解wordpress才能更好的建站，毕竟之后安装woocommerce都是在wordpress后台完成。

好了，我们还是从Pages选择一个页面来开始进入Elementor的编辑页面吧，直接点击此处的Edit with Elementor也行，不过还是会跳到pages或者posts页面。比如从pages选择Sample Home Page，这是安装后默认的唯一页面。

看到顶部左上角加号后面那个图标吧，这就是Site Setting了，点击这个就可以进入到Site Setting，这个Site setting包含三个部分：DESIGN SYSTEM(设计系统)、THEME STYLE(主题风格)、SETTINGS(设置)，做跨境电商的应该看得懂，看不懂的用翻译软件吧。

我分别介绍一下每一项设置的意思，具体怎么设置还得各位自己去使用才能熟悉：

• DESIGN SYSTEM
  • Global Colors – 设置全局颜色，也就是整个站点的颜色基调
  • Global Fonts – 设置全局字体，站点各个页面不同位置的字体，这两项设置后，所有页面都是通用的
• THEME STYLE
  • Typography – 排版，其实也是设置字体，主要是标题的字体和正文字体，假如不改变就医全局字体为准
  • Buttons – 按钮设置，包括颜色大小字体
  • Images – 全局图片设置，包括对图片加不加边款，阴影等一些特效设置
  • Form Fields – 这里Form是指邮件提交表单这类，并不是我们通常见到的excel那种表，excel那种表叫table，那这里的设置就是对提交表单各个区域的颜色字体设置了。
  • Header – 设置页头颜色字体，也可以在这里创建header模板，然后把模板套入到所有页面中，
  • Footer – 类似Header设置
• SETTINGS
  • Site Identity – 网站表示，这里可以设置网站标题，网站副标题以及网站logo
  • Background – 设置网站页面背景，可以是颜色也可以是图片
  • Layout – 网站布局，比如网站内容整体宽度，边框空白等等
  • Lightbox – 这个是对图片的一个灯箱设置，也就是说点击图片，会弹出图片，然后你可以放大缩小图片，上一个，下一个图片这种类似弹窗
  • Page Transitions，Custom CSS，Additional Settings，页面过度，层叠样式代码和额外设置，不懂都可以不用管

这里的设置你都可以通过在右边打开一个有相关元素的页面来设置，比如你要修改buttons的外观，你就打开一个带有按钮的页面，一边设置一边查看右边的变化，直到达到自己想要的效果。

第4步. 用Elementor编辑或者创建新页面

完成对网站的设置，就可以开始编辑或者添加新页面了，还是可以以上一步的Sample Home Page为例，你可以直接编辑当前页面，如果要添加新页面可点击顶部中间页面名称，下拉菜单可以添加新页面，如下图所示。

因为是举例介绍，所以我们以当前页面为例。

新建页头页脚Header/Footer

1. 新建header，上文已经提过，从Site Setting里面点击Header，然后拉到下面，点击Create Header, 在心跳出页面点击Add new，你可以选择现成的模板，或者完全自己设置：

以下是一些模板，新手可以选用其中之一，就比如第一个，然后导入

2. 编辑Header，这是导入后的Header效果，这个页头分两层，上一层显示一些联系方式，下一层是logo，menu这些。你可以点击其中任意元素，然后点击Edit，在左边就能对这个元素进行设置。

比如点击LOGO，你就可以在左侧开始编辑Logo，点击Change Site Logo就可以上传自己logo，然后再style和Advanced中还可以设置大小边框等等，每一个人建站都应该这些一项一项试用，这样你才能熟悉他的原理和用法，记得点击save保存。

3. 发布页头header，设置好页头，你需要点击右上角的粉色的Publish才能把页头应用到你的页面中去，这个页头会自动保存为一个模板，以后可以随时调用。

点击publish之后会跳出对话框，再点击Add Condition，这个意思是让你选择你想把页头应用到哪些页面，默认是Entire site，即整站，就这个吧，通常一个网站都是统一的页头，如果有特殊页面需要不同的页头，可以以后再根据页面单独传教再应用。

最后点击save & close，此页头就应用到了整个网站所有页面上，不信，你在回到Sample Home Page看看：

页脚的设置方式和页头一样，只是也叫的元素可能不同，但原理一致，所以这里我就不多赘述页脚的设置，接下来编辑页面正文内容吧。

编辑页面内容

Sample Home Page作为网站首页，我们是不需要页面标题，先隐藏掉页面标题，可开启左边Hide Title的开关，这样Sample Home Page就不显示了。

接下来我们给页面添加新的模块或者说元素，既然是首页，我们先添加一个横幅大图吧，可以点击上图中两个地方的+号来添加元素，或者点击中间＋号旁边的文件夹来导入一些现成的模板：

不过好像没有什么像样的横幅大图，还是自己添加吧，随便点击一个+号来添加元素，图片的话有很多种，有单一图片Image，图片轮播Slides，相册等等。单一图片就选Image，多图轮播就选Slides

每个元素其实都包含在一个Container元素中，点击下图中六个点，就可以编辑Container，因为是横幅大图，所以我们希望这个横幅大图是全宽的，那就需要编辑Container宽度点击后，在左侧Content Width中选择Full Width,这样横幅大图就是全宽了，如图所示。

然后我们给每一个滑块添加图片，直接点击Slides元素，在左侧就能设置Slides了。先来介绍一下左侧元素的一些大致功能：

• Content – 这是设置元素内容，里面有包含Slides，也就是每一个单一的滑块设置，添加滑块内容，比如图片，文字，按钮，还有一个Slider Option是设置滑块的速度间隔时间这些，不懂就不要动，默认也很好
• Style – 设置内容外观，比如背景颜色，文字颜色大小，字体，按钮大小等等
• Advanced – 其实是Style的延伸，可以设置元素的边框，布局，可以自己操作试试每一项的功能和效果。

如上图，我们点击Slide 1 Heading，可以在下拉框中设置这个滑块，包括背景，如图我上传了一个图片，然后在content里面可以编辑上面的文字，style设置文字颜色等等，这里不能一项一项操作展示，你可以自己对照右边的变化一项一项操作来了解用途和效果。

其他slides也是如此设置，当然添加其他元素原理也相同，根据自己的需求点击+号添加元素，然后编辑设置每一个元素，等页面差不多了，保存然后publish发布，是不是并不难，完全不需要代码，添加，修改，任何新手都没问题吧。

不管你有多少页面，都可以按照这种模式来添加，如果只是一个展示网站，你把你需要的页面都创建好之后，那么教程到这里差不多，之后就发布网站就完成了。

第5步. 安装并设置Woocommerce

搭建独立站，也就是做电商网站才能在线销售产品，WordPress和Elementor都不具备电商功能，所以我们需要在wordpress上安装一个电商系统，最有名的当然是Woocommerce，安装woocommerce也非常容易，直接从wordpress后台的Plugins里面搜索woocommerce就行了。

点击Install Now，安装完之后再点击activate激活，woocommerce就安装完成了，你可以看到左侧会出现一些woocommerce的菜单，另外还需要更新一下woocommerce的数据库，如下图。

安装完Woocommerce就要对woocommerce进行设置，点击woocommerce->Setting，一项一项进行设置吧。

这一步其实没什么好说的，主要是是关于你经营的一些信息，可能在shipping这一项会有点费神，但可以参考我的其他文章：WooCommerce教程，至于支付方式也可以去到这里去查看：收付款。

第6步. 上传产品

不用多说，产品才是跨境电商独立站站的核心所在，还是在wordpress左侧，点击Products->Add New就可以添加新产品了。

Woocomerce产品描述编辑器还是用的wordpress的经典编辑器，很多wordpress老用户喜欢这种编辑器，假如用来编辑页面的话，我是不喜欢的，但是woocommerce没更新成最新的，只能用这个版本了。我用数字标出了每一项的功能如下。

怎么传产品，除了产品数据设置这里有点复杂，其他不用我多少了吧，至于产品数据这里如何设置可参考此文：如何通过WooCommerce添加变体产品Variable Products。

第7步. 管理网站Manage Website

细心的朋友应该注意到我前面提到过Manage This Website，那是Elementor账号后台，移动鼠标到你的网站上就看得到，点击进去就可以管理网站了，其实你从wordpress后台左侧导航的Hosting也能进入到管理网站页面。

管理网站中有几个栏目，不过最主要的还是添加你的个人自定义域名。

• Overview – 概览，包含网站信息，还有网站是否上锁等
• Manage Domains – 这里可以绑定你的自定义域名，建议直接在elementor这里买域名，这样的话就不需要再去做域名解析，假如你已经在第三方域名商处购买了域名，那么先点击Connenct your domain，参考这里来绑定域名吧。
• Email Account – Elementor本身是不提供免费的企业也邮箱的，但是你仍然还是可以在这里绑定你的第三方企业邮箱，比如google workspace或者微软365邮箱的，不过他们也推荐zoho，感觉zoho没那么好用， 另外这里绑定邮箱后，还提供一个功能，就是当你给客户发送邮件的时候，就是使用你自己域名的邮箱发送。
• Backups – 备份，这个是真的好东西啊，每天给你备份一次，数据不丢失，每一个备份保存14天，你也可以自己创建备份，当你要修改一个你不确定的东西，你就可以先备份，假如修改的没弄好就可以随时还原。
• Advanced – 这里主要是给你创建一个模拟平台，你可以在这个模拟平台上搭建网站，测试bug等等，然后修正后直接推送到你实际的网站中，这个是开发者工具。

这一步主要就是链接域名，连接好后，可以用你自己的域名打开网站了，如果绑定域名不太会，可以直接联系elementor的客服，这是他们的服务范围。

第8步. 发布网站

发布网站，分两步，首先就是到Manage This Website中Overview关闭Site Lock，默认是打开的。

然后就是把你的网站发布到各大搜索引擎上去，可以在我的网站直接搜索“收录网站”，有各种搜素引擎添加网站的教程。

发布网站之后注意一些问题：

• 别随便更改网站名字描述等一些框架性的内容
• 别随意换主题
• 注意页面和产品链接别太长
• 通过SEO插件来优化网站
• 经常保持更新网站，一周两到三次增加新内容，添加产品就可以，以后可以适当的发布一些文章。

总结

使用Elementor WordPress Hosting搭建独立站其实并不难，elementor的功能可以说是简化一些wordpress操作，让新手更加容易上手，其实不管是谁，搭建网站需要自己多动手去操作每一项，才能熟悉，有些东西亲自动手会比老是求人更实在。

多给自己一点时间，碎片时间就行，用两三个月基本所有的功能都能摸清楚，本来独立站也是一个长期的工作，三个月并不多，请专业的人也最少要15天才能给你完全上线，自己懂得建站，随时可以修改添加，这同样也是节省时间的一种方式，最重要的是elementor它并不是什么技术性的东西，就是一个普通民众都可操作的东西，相当于新学习使用一款软件。