如何使用Elementor主机搭建WordPress独立站?

Elementor曾是WordPress最好的编辑器，虽然已经被WordPress官方编辑器替代部分，但是使用Elementor编辑器的人仍旧大把。Elementor为了拓展市场，推出了全托管式WordPress主机，并将自家的Elementor Pro专业版插件完整融合进去，可通过可视化界面快速搭建网站。本文主要介绍如何使用Elementor主机搭建WordPress独立站。

一、购买Elementor主机

Elementor全托管主机专为WordPress设计，也称为Elementor WordPress主机，由谷歌云最高层的C2服务器提供支持，包含Elementor Pro builder、Hello主题和高级支持等功能，正常运行时间可达99.9%。

Elementor主机一大亮点就是包含Elementor Pro builder和所有Pro小部件和功能，如表单和弹出窗口、循环构建器、高级动画和WooCommerce小部件，开箱即用，减少了对第三方插件的需求。另外还提供一系列专业的托管功能，包括staging、cloning、phpMyAdmin和SFTP访问等，附带一个预安装的SSL证书，支持自动的每日和手动备份。

Elementor主机目前推出以下四种方案，可享高达75%折扣，Lite方案低至$2.99/月。预算充足的话建议选择Basic或更高级别的方案，相对来说配置和功能更全面些。

Elementor主机购买地址：https://elementor.com/

本文以选择Elementor主机Basic方案为例为大家展示，首年仅需119.88美元，不用选择附加功能，认证之后选择“Pay Now”，接下来会受到几封邮件。

二、配置Elementor主机

Elementor主机购买之后会有一个可视化向导，按照提示一步一步操作就行。例如：

Is this your first time building a website? （随意选择）
My website’s name is：（输入你的网站名称，之后可以更改）
Choose a Website Kit to start with（选择一个网站工具套装开始建站，这实际上是一个主题。如果觉得哪个不错可以选择并开始，但建议先不选择，之后也可以选择。点击右下角“I’d rather start from scratch”，意思是从零开始。）

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

如上文所述，Elementor基于WordPress，所以对WordPress比较了解的朋友可以先进入WordPress后台看看。在WordPress后台你可以做很多事情，比如安装插件、主题、设置账号以及语言日期等。可以点击你的网站右下角的三点下拉菜单，然后点击“Open WP dashboard”就进入了WordPress网站后台。

三、WordPress网站设置

进入到WordPress后台后，除了之前提到的先对WordPress后台做一些设置，然后再通过Elementor对网站进行一些设置。

看图片中的“Edit with Elementor”，这个和上文在Elementor后台网站的“Edit with Elementor”意思一样。不过这里点击后你需要选择一个页面或文章。我之所以非要绕到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（设置）。

各项含义如下：

1、DESIGN SYSTEM

Global Colors – 设置全局颜色，即整个站点的颜色基调；
Global Fonts – 设置全局字体，站点各个页面不同位置的字体。这两项设置后，所有页面都是通用的。

2、THEME STYLE

Typography – 排版，主要是标题和正文字体。如果不改变则以全局字体为准；
Buttons – 按钮设置，包括颜色大小字体；
Images – 全局图片设置，包括对图片加不加边框、阴影等特效设置；
Form Fields – 这里的Form是指邮件提交表单这类，而不是通常看到的Excel表格那种。这里的设置就是对提交表单各个区域的颜色字体设置；
Header – 设置页头颜色字体，也可以在这里创建header模板，然后把模板套入到所有页面中；
Footer – 类似Header设置。

3、SETTINGS

Site Identity – 网站表示，这里可以设置网站标题、副标题和Logo；
Background – 设置网站页面背景，可以是颜色也可以是图片；
Layout – 网站布局，比如网站内容整体宽度、边框空白等；
Lightbox – 这个是对图片的一个灯箱设置，也就是说点击图片会弹出图片，然后你可以放大缩小图片，上一个下一个图片这种类似弹窗效果；
Page Transitions、Custom CSS、Additional Settings – 页面过渡、层叠样式代码和额外设置。不懂的都可以不用管。

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

四、创建新页面

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

1、新建页头和页脚

（1）新建Header：如前文所述，从“Site Settings”中选择“Header”，向下滚动并点击“Create Header”。在弹出页面中点击“Add new”，你可以选择现有模板或完全自定义设计：

以下是一些模板选项，新手可以从中选择一个，例如第一个模板，然后导入：

（2）编辑Header：这是导入后的Header效果。此页头分为两层，上层显示联系方式，下层则是logo和menu等。点击任意元素后选择“Edit”，在左侧面板进行详细设置。

例如，点击LOGO后，在左侧开始编辑。选择“Change Site Logo”上传你的logo，然后在“Style”和“Advanced”中调整大小、边框等属性。建议逐一试用每项功能，以便熟悉其工作原理和用法。完成后，记得点击“Save”保存。

（3）发布页头Header：设置好页头后，点击右上角的粉色“Publish”按钮以将页头应用到页面中。此页头将自动保存为模板，随时可调用。

点击“Publish”后，会出现对话框提示添加条件，即选择要将页头应用到哪些页面。默认是“Entire site”（整站），适用于大多数情况。如有需要，可以为特定页面单独设置不同的页头。最后点击“Save & Close”，页头便会应用到整个网站的所有页面上。回到“Sample Home Page”查看效果：

2、编辑页面内容

对于作为首页的“Sample Home Page”，我们不需要显示页面标题，可以先开启左侧的“Hide Title”开关隐藏标题。

接下来，为页面添加新的模块或元素。既然是首页，我们先添加一个横幅大图。可以通过点击图中两个位置的+号来添加元素，或点击中间+号旁的文件夹导入现成的模板：

没有合适的图片可以选择自己添加。随意点击一个+号添加元素。对于图片，有多种选择，如单一图片（Image）、图片轮播（Slides）、相册等。这里我们选择单一图片“Image”。

每个元素实际上都包含在一个“Container”元素中。点击下图中的六个点即可编辑Container。由于是横幅大图，我们希望它全宽显示，因此在左侧“Content Width”中选择“Full Width”。

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

然后为每个滑块添加图片。直接点击“Slides”元素，在左侧进行设置。先简要介绍左侧面板的一些功能：

Content：设置元素内容，包括Slides（单个滑块设置）、添加内容（如图片、文字、按钮）以及Slider Option（设置滑块速度和间隔时间等）；
Style：设置内容外观，如背景颜色、文字颜色和大小、字体、按钮大小等；
Advanced：进一步设置元素的边框、布局等。

如上图所示，我们点击“Slide 1 Heading”，在下拉框中设置滑块，包括背景。例如，我上传了一张图片，然后在“Content”中编辑文字，在“Style”中设置文字颜色等。这里不逐一展示每项操作，你可以根据右侧的变化自行尝试每项功能，了解其用途和效果。

其他滑块也按同样方法设置。当然，添加其他元素的原理相同，根据需求点击+号添加元素，然后编辑每个元素。页面设置得差不多时，保存并发布。无需编写代码，任何人都能轻松添加和修改内容。

无论有多少页面，都按此模式添加。如果只是展示性网站，创建所需页面后，教程到此结束，之后便是发布网站。

五、安装并设置Woocommerce

要搭建电商网站以在线销售产品，需在WordPress上安装电商系统Woocommerce。安装非常简单，直接从WordPress后台的“Plugins”搜索Woocommerce并点击“Install Now”，然后激活即可。

安装后，左侧会出现Woocommerce菜单项，同时需要更新数据库，如下图：

安装Woocommerce后，通过点击“Woocommerce”->“Settings”进行设置。

六、WordPress上传产品

在WordPress的左侧菜单中，选择“Products”->“Add New”来添加新产品。WooCommerce的产品描述编辑器使用的是WordPress的经典编辑器。尽管许多WordPress老用户偏爱此编辑器，但对于WooCommerce来说，由于尚未更新到最新版本，我们只能使用这个版本。

各项功能如下所示：

1、产品标题

2、产品详情/短描述：这里也可以添加图片、链接等。截图显示的是代码模式，请切换到Visual模式，即可视化编辑。

3、产品数据设置：包括产品类型、价格、库存、运输、相关产品、属性（如颜色、尺寸）等。在“Variable products”（变体产品）中，可以添加不同颜色和尺寸的产品。

Simple product：单一产品，只有一种颜色、尺寸或型号，也可以添加虚拟产品，如会员资格、可下载的产品等；
Grouped：组合产品，例如一套衣服，包含上衣、裤子、衬衫等，可以一起销售；
External/Affiliate：外部或联盟产品，你可以发布产品但链接指向其他网站，如亚马逊，推广自己的产品或通过推广他人的产品赚取佣金；
Variable：变体产品，大部分产品属于这一类，因为它们通常有颜色、尺寸等不同的选项。

4、产品图片：分为“Product image”（主图片设置）和“Product Gallery”（图片相册，用于图片轮播）。

5、产品类目：分为“Product categories”（产品目录）和“Product Tags”（产品标签）。

七、管理WordPress网站

Manage This Website是Elementor账号后台的一部分，将鼠标悬停在你的网站上时就会看到此选项，点击进入即可管理你的网站。实际上，你也可以从WordPress后台左侧导航的“Hosting”进入网站管理页面。

在“Elementor Websites”的管理网站中，有几个栏目，但最主要的是添加你的个人自定义域名。

1、Overview：概览，包含网站信息及网站锁定状态等。

2、Manage Domains：在此可以绑定你的自定义域名。建议直接在Elementor购买域名，这样就无需进行额外的域名解析。如果你已在第三方域名商处购买域名，那么可以先点击“Connect your domain”并参考相关指南来绑定域名。

3、Email Account：Elementor本身不提供免费的企业邮箱服务，但你仍可在此绑定第三方企业邮箱，如Google Workspace或微软365邮箱。他们也推荐使用Zoho，尽管个人感觉Zoho并不那么好用。此外，此处绑定邮箱后，还提供一个功能，即给客户发送邮件时，可以使用你自己域名的邮箱发送。

4、Backups：备份是一项极好的功能，每天自动备份一次，保留最近14天的备份，你也可以手动创建备份。在需要更改不确定的内容时，可以先创建一个备份，如果修改不满意，可以随时还原。

5、Advanced：主要用于创建模拟平台，你可以在这个平台上搭建网站、测试错误等，修正后再推送到你的实际网站，这是面向开发者的工具。

此步骤主要是连接域名，连接成功后，可以使用你自己的域名打开网站。如果对绑定域名不太熟悉，可以直接联系Elementor客服获取帮助，这属于他们的服务范围。