2023最新外贸建站教程：零基础小白保姆级Elementor建站教程

时间：2023-08-11 04:51:01 | 来源：网站运营

时间：2023-08-11 04:51:01 来源：网站运营

2023最新外贸建站教程：零基础小白保姆级Elementor建站教程：在大家学习教程之前和大家说一句玩笑且认真的话：我是真的想教会你们，o(╯□╰)o。

教程主题：实操为主，教程中所需要的资源都在文章中为大家准备好了，并且每一个步骤都配有详细的步骤配图，如果真的准备好了学习建站，那看它就够了。并且我会随时更新本文的内容，保证教程和各个平台的更新同步。

只要你能坚持跟着教程一步步来，肯定可以建立出一个属于自己的网站。本文采用了目前WordPress市场使用最广的Elementor建站，简单易学。

本文教程适应人群：自家有工厂想尝试独立站拓展外贸渠道的、SOHO、想多掌握一门技能的大学生、博主等

自建站一年的费用：每年1000元不到

本文资源网站：天天建站

在教程中会有快速建站和手动建站的教程，学习的人需要根据自己的时间自行把握。如果时间充足的话，我的建议是跟着教程走完手动建站后再去学习快速建站的过程，想学好建站，基本功还是很重要的。

教程中所用到的所有素材我这里做了下统一可以直接点击这里下载所有素材

一、购买域名

一个好的域名是征战外贸市场的利器，在购买域名前可以看下我的这篇文章：什么样的域名算是好域名？

国外知名的域名服务商很多，我这里推荐一个很稳定的服务商namesilo。

点击链接进入网站后，点击右上角的sign-up注册账户

跳转后开始输入注册信息，完成后点击create account创建账号。注意：我们左边登录要用到的是用户名，也就是我下方框出来的地方，经常有人在登录的时候输入用户名输成了第二个邮箱结果多次不成功导致账号被锁。

账号注册成功后页面会自动跳转，点击导航上的home跳转到域名搜索界面。

在搜索框中输入自己心仪的域名后点击SEARCH DOMAIN

跳转后的界面会展示当前域名的可售情况，下方http://tiantianjianzhan.com显示灰色，并且右侧黄色按钮显示try to buy表示当前域名已经被其他人购买，如果实在想拥有这个域名可以花更多的钱从别人手中购买。

下方以.xyz结尾以及.top结尾域名右侧的蓝色按钮显示Add意味着可以直接添加到购物车。

因为http://tiantianjianzhan.com已在本人手中，所以下面会直接购买tiantianjianzhan.top为例，右侧展示的价格是当前域名一年的价格，tiantianjianzhan.top一年的价格是1.88美金，也就是十块钱左右，怎么样，是不是很便宜？

点击完Add后会变成checkout按钮，再次点击后开始结账

跳到当前界面后继续点击CHECKOUT完成支付，如果当前页面出现多个域名，点击图上的Remove去处不需要的域名。

跳出支付页面后选择付款方式选择支付宝后点击右方的Select

勾选两个选择框后点击PAY支付

付完款后会自动跳转，跳转完成后点击右上角的Manager My Domains，由于是第一次购买所以会出现下方收集信息界面，只需填带*即可，所有信息填入英文，国家选择china，code和mobile number可以根据自身看是否需要填真实信息，不过这个无关紧要。完成后输入验证码点击创建账号即可。

好了，当你提交完成后看到如下界面代表你已经成功拥有了自己的域名。

二、解析域名

当我们拥有了一个域名后还需将它和我们的wordpress主机关联起来，只有域名无法访问你的网站，还需要将你的域名指向你服务器的ip。

我这里将为大家介绍一种最方便的解析方式。每个Wordpress建站主机都有自己的对应的NameServer，例如hostinger的NS为（也就是我们后面需要用到的服务器，跟着操作即可）：

• http://ns1.dns-parking.com
• http://ns2.dns-parking.com

我们只需将在域名注册商注册好的域名的NS改成我们的服务器主机对应的NS，再等待一段时间就会自动解析成功。

点击Manage My Domains后进入到域名集中管理界面，可以看到我们已经购买的域名，并且域名已有自己默认的NS。

勾选对应的域名后点击上方的Change NameServers或者直接双击域名进入到NS修改界面

点击Change开始修改NS

将默认的三个NS删除后修改成hostinger对应的两个NS:

• http://ns1.dns-parking.com
• http://ns2.dns-parking.com

修改完成后点击提交，48h内生效，大部分地区十到半小时即可。

三、购买空间：（网站主机）

尽量在域名解析后15-30分钟后再开始购买空间。

如果有打开自己的科学上网（翻qiang工具），最好切换到美国的节点或者直接关闭，否则会根据节点推荐你服务器。

Hostinger和Siteground，Bluehost应该是国内外贸群体最熟知的几家主机商了。不过相较于前两位Bluehost目前只能起到陪衬的作用了。

Hostinger的操作界面对于新手小白非常的友好清爽，支持一键安装wordpress，并且SSL(安全证书)免费，所以我这里就以Hostinger为例提供详细的购买空间以及绑定域名、安装wordpress的全流程。

点击Hostinger链接后下划进入套餐选择界面，已经帮大家选择好了wordpress的主机套餐。可以看到共有三个wordpress主机套餐。

我这里给大家的建议是如果你是小型企业或者是soho的话买第一个套餐足够了，像我本人也一直用的是第一个，如今已经挂载了十几个网站了速度和稳定性依然很好。如果是中大型企业的话建议第二个套餐，增加了固态存储、CDN这些东西，网站速度会快一些，当然也可以直接第三个套餐。

注意：如果因为你节点变成了中文界面需要手动切换成美国，否则服务器就会买到香港那边的服务器，会稍微影响网站的速度。

确定套餐后点击对应套餐中间的ADD to cart按钮

第一步选择购买的年限，价格都一样，只需要考虑短期使用还是长期使用，如果长期使用的话建议四年，否则一年即可，因为到期续费的话会比刚开始买的贵些。

第二步创建自己的账号，可以在左侧输入自己的邮箱也可以用自己gmail账号，我这里图省事直接用gmail账号

gmail登录后会自动跳转回当前页面并且最上方会看到已经有了我们账号的用户名

第三步选择支付方式，有支付宝以及paypal付款还是非常方便的。选择完成后点击右侧的Have a coupon code ?填写提前准备好的优惠码：SPECS101 或者 CLOUD101

填入优惠码后点击Submit Secure Payment按钮提交支付

出现当前页面后点击Continue继续跳转到支付页面即可

扫码付费后恭喜你拥有了自己的第一个空间，并且即将在上面挂载自己的网站。

四、域名挂载空间

付费成功后我们只需等待它自动跳转便会出现下图中的这个页面，如果你的网络突然卡顿或者中断导致页面跳转无反应的话只需重新打开Hostinger页面，点击右上角的login in后使用自己的账号登录即可。点击Start Now按钮进入下一步

点击Skip跳过

点击Create a new website

选择左侧的WordPress

在红框中输入我们的wordpress管理员邮箱和管理员密码后点击Continue继续。注：密码要超过八位字节并且要有数字字母大小写和符号。如：142637327Thh!

继续点击skip跳过

因为我们已经拥有域名了所以直接点击最右侧的Selected按钮后填入域名，点击Continue按钮继续。

信息都确认无误后点击Continue按钮继续

这里可以选择服务器的位置，不过一般我们都用默认的usa，点击Finish Setup

出现下方界面后等待自动安装wordpress即可

安装成功后会跳转到下方界面，第一个板块忽略，第二板块点击Edit Website后进入到我们的wordpress后台，如下方图二，第三个板块点击Manage Site后会进入我们网站的空间管理区域如图三

图二

图三

Hosting空间的登录地址：https://www.hostinger.com/cpanel-login，建议收藏。

五、学习登录WordPress网站前后台

网站前台：

只需要在浏览器中输入我们的域名回车即可。例如：https://tiantianjianzhan.com。

网站后台：

当域名和空间绑定完成并成功安装了Wordpress后，我们便可以进入我们网站的后台。

一种是直接用自己跟空间绑定的域名/wp-admin登录。例如本站的登录地址为：https://tiantianjianzhan.com/wp-admin

另一种方式是点击Hostinger的Tab栏上面的Websites，找到我们对应的域名后点击Edit Website后尽可以进入到我们网站的后台。(如果上面一种登录方式你忘记了账号密码可以以这种从空间登录网站后台的方式，该方式不需要输入账号密码。)

Hi，谢谢你认真看到这里，如果你喜欢我的Elementor建站和SEO文章，并且想要获取更多实用技巧和与志同道合的朋友交流的话，扫描下方二维码，立即加入我的【Elementor建站交流群】，加入时请备注建站或者seo。

一起学习、进步，共同打造更出色的网站！

六、网站添加安全证书

如果只是拿来练手的域名可以先跳过这一步，等换成正式域名再重新安装安全证书。

网站添加安全证书能保证网站的加密传输，如果不安装安全证书的话当客户访问我们网站会提示该网站有风险，并且客户无法直接进入到我们的网站。

域名挂载到Hostinger服务器上后有两种添加安全证书的方式：

第一种方式：

点击Hostinger的Tab栏上的SSL进入安全证书管理版块，随后点击Install free SSL 按钮

在弹出的下拉选择框内选择自己需要安装安全证书的域名后点击Install SSL按钮安装即可。

安装完成后等待几分钟看到状态显示为Active后表示网站安全证书已经安装成功。

最后回到wordpress后台将Wordpress地址和站点地址内的http改为https后保存。

第二种方式：

点击Hostinger的Tab栏上的Websites进入网站管理版块，找到对应域名后点击下方的Manage按钮

进入到当前域名的仪表盘后点击左侧的Advanced后找到SSL并点击

出现下方界面后点击Install SSL 安装

安装完成后等待几分钟看到状态显示为Active后表示网站安全证书已经安装成功。

最后回到wordpress后台将Wordpress地址和站点地址内的http改为https后保存。

七、建站前准备

使用自己的 域名/wp-admin 登录到后台

基础设置：

• 更改网站时区和语言

点击左侧的Settings，后进入基础设置界面找到Site Language后点击下拉框选择简体中文，在Timezone的下拉框内将时区更改为UTC+8后点击保存按钮。

• 更改阅读设置

点击设置下的阅读功能后，将全文改成摘要，否则客户搜索能看到全文后就不会点击到我们的网站增加访问量。随后勾选下方对搜索引擎的可见性，勾选上后我们的网站在搭建期间各个搜索引擎就不会来抓取我们的网页，等网站上线前准备工作都完成后可以再取消勾选打开我们网站收录的可见性。

• 更改固定链接设置

点击设置下的固定链接功能后，将默认的固定链接结构改为文章名后点击保存，否则后面我们的url的网址会携带各种杂乱的参数。

• 删除后台自带插件

网站刚安装完成后会自带很多插件，就像手机刚买完后附带的各种app。这里的插件我们需要全部删除，（Wordpress的所有插件都必须先禁用才能删除！）。第一步点击左侧工具栏的插件进入到功能区后勾选下图中第二步插件前方的复选框，这样可以快捷选择所有插件，第三步下拉框中选择禁用，第四步点击应用按钮，这样便可禁用所有插件。

禁用所有插件后可以看到下方插件都显示待启用状态。第一步继续勾选插件前方的复选框选中所有的插件，第二步下拉选择框后选择删除，第三步点击应用按钮删除所有插件。

删除完所有的插件后就完成了所有的基础设置，再去把必要的插件安装完成后就可以开始建立我们自己的网站页面。

安装插件：

刚开始建站时可以先把网站必备插件安装完成，等到网站完成后再研究额外的插件。

1.Elementor Pro

Elementor是目前WordPress最热门的拖拽式页面生成器，做出一个页面不再需要复杂的代码，只需要像搭积木一般即可快速完成一个页面。(优先安装Elementor Pro再安装Elementor)

Elementor Pro作为升级付费版本，提供了更多的功能、如表单、幻灯片、翻转框等常用功能。

前往官方网站https://elementor.com，购买后登录到自己的账户。

点击账户右上角的下载按钮下载最新版本的Elementor Pro的压缩包。

在网站后台点击安装插件，将下载好的Elementor Pro压缩包上传并安装。

启用成功后点击上方出现的Install Now即可安装和当前Elementor Pro版本匹配的Elementor插件。

点击Elementor Pro下方的Connect & Activate连接上之前购买过Pro的付费账号。

点击Activate后成功激活Elementor Pro。

2.Elementor

Elementor插件如果已经跟随着上面的Elementor Pro插件一起安装过可直接忽略。

基础版本的Elementor插件只需去插件市场搜索关键词Elementor，找到下图中第一个插件Elementor Website Builder后点击安装，安装成功后启用插件。

3.Envato

提供了上千套和Elementor相关的网站模板，可以帮助你快速的搭建一个超出市面上80%建站公司的神器。→Envato详细使用教程入口

在插件市场搜索关键词Envato后找到图中第一个插件后点击立即安装并启用。

点击

，进入官网后付费成为envato会员。

启用Envato插件后点击左侧工具栏的Elements后找到左上角的Connect Elements Account并点击。

登录我们的付费账号后获取到激活码并复制。

粘贴后点击验证即可激活我们的Envato插件。

4.SEOPress

SEOPress插件可以生成网站地图，快速在网站嵌入google analytics、google search console等代码，以及文章优化等强大的功能。

在插件市场后台搜索关键词SEOPress，找到插件后安装并启用。

5.All In One Security

安全防护插件，可以更改网站登录地址，数据库备份、密码登录次数等诸多安全限制。→All In One Security 详细使用教程。

插件市场后搜索All In One Security关键词后找到该插件后点击立即安装，安装成功后点击启用。

6.Gtranslate

多语言插件，可根据需求添加各国语言。→Gtranslate详细使用教程。

进入Wordpress后台后点击插件–安装插件–搜索“gtranslate”，找到Gtranslate插件后点击安装。

修改Wordpress主题为Elementor主题

1.前置插件

使用Elementor相关建站主题必备下方的两个插件，其中Elementor Pro需要付费开通账号才能在后台激活。

2.进入主题商城

点击左侧工具栏外观下的主题后进入主题商城选择界面，会出现当前Wordpress安装时默认安装的一些主题

点击左上角安装主题去安装我们需要的Elementor主题

3.安装主题

找到Hello Elementor主题并点击安装，如果下方没看到该主题，直接在搜索框中搜索Hello Elementor找到该主题安装即可

4.启用主题

安装完成后点击启用主题

5.删除其他主题

启动成功后会自动跳转到所有主题管理界面，也可从后台外观----主题进入该界面，进入后鼠标悬浮在其他主体上会显示主题详情按钮，点击该按钮

点击完主题详情按钮后会出现如下方图中界面，点击右下角的删除便可成功删除该主题，其他主题依样操作一一删除。

八、创建页面

1.清除默认页面

进入后台点击左侧工具栏进入页面板块，勾选系统自带的默认页面，下拉选择框选择移动至回收站后点击应用删除所有默认页面。

删除完成后进入回收站，点击清空回收站。这一步必做，不清空回收站可能会导致页面的url链接地址冲突。

2.新建页面

进入后台，点击新建页面

输入页面标题后点击发布，这样你的第一个页面就建立成功了。重新回到后台后重复同样的操作再建立Product、About、Contact、Blog等页面。

最后如图，就完成了所有页面的创建。

九、创建导航菜单

进入后台后第一步选择外观，然后点击自定义。

在自定义界面点击站点身份，随后点击上传logo，如果暂时没有logo可以下载我准备好的logo备用。

在上传logo时可以选择对logo进行尺寸的裁剪，不过一般logo尺寸都是我们提前规划好的，所以直接跳过裁剪即可。（logo建议尺寸是350*100像素）

logo上传完成后需要添加上我们自己网站的标题和副标题。

网站标题和副标题最终呈现的谷歌搜索结果会如上图所示，暂时没有思绪可以先复制我下方准备好的标题和副标题。

站点标题：Luxury Watches For Him & Her - Discover The Full Range

副标题：Over 240 years of jewellery excellence dedicated to exceptional watchmaking. Find Out More. Discover Chaumet jewellery excellence in the creation of exceptional watches for him & her. Precious Metals.

添加完成后点击选择站点图标。

站点图标是我们打开每个网站时显示在浏览器最上方的该网站的小标识，如上图。

点击选择站点图标后，选中我们的logo，点击右下角的选择

因为站点标识只需要一个方形的小部分，所以我们需要裁剪图片，拖动裁剪区域选中后可以在右侧预览呈现效果，满意后点击裁剪图片。

到这里站点身份需要的设置都已上传成功，点击左上角的箭头标识返回上一步。

返回后点击菜单，进入网站菜单编辑页面。

新网站没有菜单需要我们手动创建，点击创建新菜单按钮

给当前菜单命名主菜单，并且勾选导航菜单出现的位置为Header后点击下一步按钮。

进入菜单界面后点击添加项目右侧会弹出之前创建好的页面，点击页面前的+号按钮便可将该页面添加到菜单

添加完成后如果顺序不符合目标可以选中目标后拖动重新排序，完成后点击左上角箭头标识返回上一步。

返回到该界面后点击主页设置

第一步将主页显示从您的最新文章改成一个静态页面，而后将主页设置成Home页，将文章页设置成Blog页面，完成后点击发布，至此导航菜单添加完成。

十、创建页眉

在后台模板中选中Theme Builder后点击进入主题编辑器界面。（页眉页脚、文章页、产品页都需从这里进入编辑。）

进入后选中左侧的Header,点击右上角的Add New按钮添加页眉

界面中出现的这些页眉模板是我们已经开通过的Elementor Pro自带的模板，在没有自制页眉的情况下可以从中挑选一个页，鼠标放上去点击放大镜可以预览页眉。

这里我选择了这个页眉，点击插入

插入完成后点击左下角发布按钮

发布过程中会让我们为当前页眉设置生效范围，点击ADD CONDITION后系统默认选择了整个网站的生效范围，直接点击右下角的保存按钮完成页眉设置。

点击左上角的列表图标

点击查看页面到前台预览我们做好的页眉。

十一、创建页脚

1.从模板到Theme Builder

2.进入上图后选中左侧的Footer

3.点击右上角的Add New

从跳出的模板库中挑选一个合适的页眉点击插入

插入完成后点击左下角的发布按钮

点击ADD CONDITION后系统默认选择了整个网站的生效范围，直接点击右下角的保存按钮完成页眉设置

完成后回到前台预览，这样我们网站上的所有页面都有了页眉和页脚。

补充：如果不小心关闭了模板界面，可以点击灰色文件夹图标再次打开。

十二、Home页制作***

很不容易能坚持到这里，下面页面制作也将正式开始。

我会将Home的制作拆分，并一步步带着大家仿照一个我已经准备好素材的Home。

1.进入后台后点击所有页面

2.鼠标悬停在Home页后点击编辑

点击使用Elementor编辑按钮

1.进入Elementor编辑页面后页面内会多出一个页面标题

2.点击左下角齿轮设置

找到隐藏标题后将否选项改为是后将页面标题成功隐藏。

注：到这一步如果有小伙伴想快速的搭建出网站的话可以直接跳到下方Envato模板建站教程那一部分。

1.Elementor编辑器教程***

开始制作页面前先来学习一下Elementor编辑器功能的强大和便捷。

点击页面内带有+的圆形图标

点击后会弹出结构选择，一行一列结构，一行两列结构。。。。。。我们的每一个页面都是可以被分为一行一行的结构。

如上图的网页很快的被分成了五行，只是在每一行里面添加了不同功能的组件。

点击添加一个一行两列的结构

蓝色线条框起来的部分就是我们添加进去的一行，选中行需要点击行上面的九个点的标识，删除整行直接点×即可。

点击左上角的九宫格进入Elementor组件区域

左侧功能区的组件来自于我们已安装激活的Elementor和Elementor Pro插件，下方还有一些常规组件。

1.在基本组件内选中图像组件

2.鼠标左键按住后不要松开

3.拖动到行内第一列

拖动到行内部后等出现一个条状提示后，松开鼠标，一个图像组件便成功的添加到了行内的第一列。

点击左侧功能区选择图像下的区域，上传一张图片

上传完成后点击右下角插入媒体

插入完成后我们自己的图片就被放入到了网站页面内。

再次点击左上角的九宫格回到Elementor组件区域

尝试将左侧的组件都拖入到右侧页面的行内，观察当前组件的效果，熟悉每个组件作用。最后会发现，在Elementor的帮助下，制作页面有点类似搭积木的过程，甚至可以说和以前的淘宝店铺装修、qq空间装修很相似。

2.使用Elementor建站的逻辑重点：

1.页面是可以被分为一行一行的，最终堆叠成了一个完整的页面

2.总共有三个核心点，行、列、组件。其中要牢记一点，当你想要修改某个地方时一定要先选中它，不能想要修改图片组件里的图片但是却选中了行。

行：选中九宫格

列：选中小书页

组件：选中小铅笔

当选中需要修改的核心区域后，左侧会出现三个tab栏。

布局：一般可以修改内容宽高，对齐方式等

样式：一般可以修改图片尺寸、背景颜色、背景图片、字体、字体大小颜色等

高级设置：可以行或者列的内外边距，帮助页面更加的美观，下图两行分别直观体现了未加边距的行和加了边距后的行的区别。

3.开始制作Home页

熟悉了基本组件后开始来制作首页，我为大家准备了一个简单的Home页

接下来就跟着我一步步把这个首页搭建出来，搭建过程中只需一步步跟着操作即可，不用关注其他的东西，等整个页面操作完成，多Elementor建站基本就有了个大概的方向和熟悉。

Home页资源下载

操作前，请提前下载好我为大家准备好的home页图片素材（点击链接下载），希望大家在刚开始时尽量做到严谨，争取百分百还原。

1.站点设置：

站点设置可以提前规划好网站要使用的颜色、字体等。

点击左上角的图标列表按钮

1.点击站点设置

2.点击全局颜色

点击主要后将名字修改为主题背景

然后点击色彩盘将颜色色值修改为 #1A5D5F

接着依次设置 黄色背景 #FBDE00 、白色 #FFFFFF 、深色 #0E3233 、文本 #6C6C6C

添加完成后点击左下角的更新按钮

更新完成后关闭站点设置，开始制作页面第一行的内容

Home页第一行

分析一下第一行的结构，是一行两列，第一列里面放了标题组件、标题组件、文本编辑器组件和一个按钮组件，第二列只放了一个图片组件。

在做每一行的时候要谨记一个顺序 :搭框架、改内容、调样式

1.搭框架

点击+图标后添加一个一行两列的结构

往第一列依次拖动标题组件、标题组件、文本编辑器组件、按钮组件

接着往第二列拖动一个图片组件，到这里整行的框架就搭建完成了

2.改内容

小标题：WELCOME TO DOGGIE

大标题：Make Your Pet Friendly

文本：Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis lorem tortor, iaculis at dolor ac

按钮：Read More

1.点击小铅笔选中第一个标题组件

2.在左侧内容区域将准备好的文本粘贴

切记直接在这里粘贴输入文本，一个是会养成不好的习惯，一个是经常复制过来的文本从这里粘贴会携带额外的样式。

依次将对应组件的文本复制完成，按钮修改文本的地方也几乎一样。至此，第一列内容修改完成

第二列只需选中图片组件后点击左侧的选择图像区域将我准备好的图片素材上传

可以一次将七张图片上传，用到时直接选择即可，上传成功后点击插入。

第一行框架搭建完成，内容修改完成

3.调样式

在修改样式的过程中，也要谨记一个从大到小的原则。行---列---组件

行的样式：

1.选中整行

2.点击左侧tab工具栏的样式

3.点击背景类型右侧的毛笔刷

4.点击颜色右侧的小地球，在这里可以直接选择我们之前预设好的颜色

5.选择主题背景颜色

1.点击高级设置

2.点击内距下右侧的锁链按钮，这里的功能是解除一改全改，否则输入一个数字，行的上下左右边距都会同步变成该数字。

3.将顶部和底部边距都输入100，这里的单位是像素（px）

列的样式：

1.点击小书页选中第一列

2.将垂直对齐方式选择为中间，这样内部的组件就会在这一列垂直居中

组件的样式：

1.选中第一个标题

2.将HTML标签修改为H3

1.点击tab栏的样式

2.点击文本颜色右侧的小地球标志

3.选择颜色为白色

1.点击排版右侧的小铅笔（文本字体、大小的设置都在小铅笔这里）

2.将字形改为Montserrat

3.将字体尺寸修改为16

4.将重量选择为Blod

1.点击小铅笔选中第二个标题组件

2.将HTML标签修改为H1

1.点击tab栏的样式

2.点击文本颜色右侧的小地球

3.选择字体颜色为白色

1.点击排版右侧的小铅笔

2.将字形改为Roboto

3.将尺寸改为72

4.将重量修改为Blod

1.选中文本编辑器组件

2.点击tab栏处的样式

3.点击文本颜色右侧的小地球

4.将文本颜色改成白色

1.选中按钮组件

2.点击tab栏的样式

3.点击排版右侧的小铅笔

4.将尺寸改为18

5.将重量改为Blod

1.点击背景类型下方颜色右侧的小地球

2.将颜色选择为深色

1.将边框半径修改为15

2.点击内距下右侧一改全改的链接解锁

3.顶部和底部边距设置为 20 左右边距设置为 30

第一行内容完成，整个过程中应该逐渐对这些工具和修改流程有了大致的感知。

Home页第二行

第二行是一行三列，左边第一列里面放了三个图标框组件，第二列放了一张图片，第三列同样放了三个图标框组件

开始搭框架

添加一个一行三列的结构

下划左侧组件库找到图标框组件拖到第一列

连续拖入三个图标框组件

第二列拖入图像组件

第三列同样拖入三个图标框组件，这行框架搭建完成

改内容：


1.选中整行

2.点击高级设置

3.点击锁链解除一改全改

4.将内距顶部和底部各设为一百

1.选中图表框组件

2.点击图标下方选择图标

1.搜索栏中搜索sun

2.选中图标

3.点击插入

1.修改标题内容 OBSERVATION

2.修改文本编辑器内容 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus.

将剩下的五个图标框内容都填充成

图标搜索名称分别是：star 、star、star、shuttle、stop

标题名称分别是：Behaviour Analysis、Introduction、Observation、Behaviour Analysis、Introduction

文本内容都是： Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus.

点击图片组件选择之前上传好的图片，完成本行内容的改动

调样式

1.点击小铅笔选中图标框组件

2.点击tab栏的样式

3.点击图标下主要颜色右侧的小地球

4.选择图标颜色为主题背景色

将图标尺寸改为25

1.点击内容展开

2.点击排版右侧的小铅笔

3.将字形设置为Montserrat

4.将尺寸改为20

5.将重量改为600

1.点击描述下方颜色右侧的小地球

2.修改文本的颜色为预先设置好的文本色

当调整完一个组件的样式，是可以把它的样式赋值给相同的组件的，这样可以节省大量的时间。

1.选中图标框组件

2.鼠标右键点击小铅笔图标

3.选中第二个复制后点击（右键后会出现两个复制，第一个是复制整个图标框的内容，也就是相当于克隆，第二个复制只是单纯的复制样式。）

1.选中第二个图标框组件

2.鼠标右键点击小铅笔

3.点击粘贴样式

4.依次把其他几个图标框样式完成粘贴

第二行完成，速度是不是快了很多，并且逐渐得心应手了，后面同样重复的操作在教程中会慢慢省略，新的知识点依然会细致教学。

Home页第三行

第三行依然是一个一行两列结构，左边列一个图片组件，右边列一个标题组件、一个文本编辑器、一个图标列表组件和一个按钮组件。

搭框架：

添加一个一行两列的结构

将图标列表等组件依次拖入

完成框架的搭建

改内容：

标题：Why Choose Us

文本编辑器：Duis lorem tortor, iaculis at dolor ac, lacinia elementum est. Nulla commodo neque id neque tincidunt fringilla vel in ipsum.

按钮： Read More

1.选中图标列表组件

2.点击图上箭头所指的×将列表项2和列表项3删除

点击箭头所指的复制图标，连续复制三个列表项。

图标列表内容：

We Succeeded in The Mental Formation of Pets.

We Make Your Relationship With Your Pet Harmonious.

We Develop Your Pet's Intellectual Ability.

We Stimulate The Ability To Increase Your Pet's Potential In A Positive Direction.

1.点击项目下的列表框

2.将复制好的文本填入进去

3.依次复制粘贴另外三个列表项文本内容

调样式：

选中行后将背景色修改为主题背景色

点击高级设置，将行的内距顶部和底部改为100

1.点击第二列的书页图标选中第二列

2.选择tab栏的布局

3.将该列的垂直对齐方式改为中间

1.选中标题组件

2.将文本颜色修改为白色

3.将文字尺寸修改为52

4.将重量改为Blod

将文本编辑器文本颜色修改为白色

将图标的颜色修改为白色

将文本颜色改为白色

将彼此之间的间距修改为20

1.上滑页面后找到之前做的按钮

2.右键点击按钮组件的小铅笔

3.点击第二个复制来复制按钮样式

回到刚才的按钮选中后右键点击粘贴样式

第三行完成

Home页第四行

第四行结构一行两列，左边第一列的组件分别是标题、文本、切换组件

搭框架：

切换组件和图边框都在常规区域下

改内容：

标题：Frequently Asked Question

文本：Cras dictum ut libero non ultricies. Morbi luctus lacus ac finibus porttitor. Cras pellentesque, sapien in rhoncus iaculis, eros nisl elementum ipsum, nec faucibus magna.

切换组件：标题： Does my pet have to come on the same day each week?

展开文本： Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast

标题和文本编辑器内容自行复制修改，这里只提一下切换组件

1.点击小铅笔选中切换组件

2.将标题和文本分别照图片上粘贴




1.删除多余的项目

2.再点击第一个项目右侧的复制图标再复制四个项目




复制完成后框架搭建完成

调样式：

将本行的内距顶部和底部设置为100

1.点击小书页选中第二列

2.将垂直对齐方式改为中间

标题样式：颜色修改为深色、尺寸修改为55、重量修改为Blod

文本编辑器文本颜色修改为文本色

1.选中切换组件

2.点击tab栏样式

3.将之间的间距修改为14

1.将标题的背景色改为黄色

2.标题文本颜色改成深色

3.排版内文本的重量修改为Blod

4.内距上下左右各30

图标对齐方式改为在右侧显示

第四行完成。

Home页第五行

第五行是不同于前面的四行，因为发现不再好已一行几列来拆分这一行。

如果用之前的分析，把他切割成一行三列的结构，变回发现上面的标题部分无法处理。可能会有部分小伙伴会想到可以用两行来做这个板块，第一行用一行一列的结构，第二行用一行三列的结构，这是可以实现的。

这里会教大家一个Elementor编辑器里非常特殊和重要的一个组件：内部区段

最后一行这种情况在使用一行一列的情况下想要做出同样效果就要借助到内部区段，使用了这个组件后，在已经有列的情况下我们可以再列的内部再生成小列

选中内部区段中列后右键点击复制可以复制相同的一列，变成3列、4列

学习完了内部区段的使用后开始最后一行的制作。

搭框架：

1.添加一行一列的结构

2.添加标题

3.添加文本剪辑器

4.添加一个内部区段

5.复制一个内部区段的列

6.在每个内部区段的列内分别添加图片、标题、文本这三个组件

改内容：

标题：Meet a Friendly Team

文本编辑器：Cras dictum ut libero non ultricies. Morbi luctus lacus ac finibus porttitor. Cras pellentesque, sapien in rhoncus iaculis, eros nisl elementum ipsum, nec faucibus magna elit at quam.

内部区段第一列：

标题：Anita Jerome

文本：Certified Dog Behaviourist

内部区段第二列：

标题：Jhon Rolan

文本：Veterinarian

内部区段第三列：

标题：Sarah Walson

文本：Certified Dog Behaviourist

调样式：

行背景改为主题色，顶部和底部各添加100的内边距

1.标题对齐方式改为居中

2.颜色为白色

3.字体尺寸大小为55

4.自重改为Blod

1.文本编辑器对齐方式改为居中

2.颜色改成白色

1.选中图片组件

2.在高级设置中找到背景后将背景颜色选择为黄色背景

1.在高级设置中找到边框设置

2.将边框半径选择为百分比

3.上下左右各填入10%

1.标题改为白色并居中

2.尺寸改为28

3.重量设置为Blod

1.文本居中

2.颜色改为白色

3.尺寸改为13

1.选中图片组件

2.右键后点击第二个复制复制样式

3.粘贴样式给其他图片组件

标题和文本编辑器样式统一后完成整行。

到这里我们的Home页就彻底完成了，不知道会有多少小伙伴会真的跟着教程做完这个Home页，如果有的话请帮我留个：完成Home页的评论，鼓励鼓励我，哈哈。

完成后点击左下角的更新按钮，日常做网站时记得要养成随时更新的习惯。

点击左上角的列表图标

找到查看后去前台看我们已经完成的Home页。

Hi，谢谢你认真看到这里，如果你喜欢我的Elementor建站和SEO文章，并且想要获取更多实用技巧和与志同道合的朋友交流的话，扫描下方二维码，立即加入我的【Elementor建站交流群】，加入时请备注建站或者seo。

一起学习、进步，共同打造更出色的网站！

十三、Envato模板建站

envato作为全球顶级的素材库，里面吃了各种素材任我们挑选外还提供了几千套的建站成品模板供我们选择，不管是建站老手还是新手小白都能依靠他快速的搭建出自己的外贸独立站。

我将会一一教大家几种不同的导入Envato模板的方式来帮助我们实现快速建站。注：使用Envato的前置条件是已经激活elementor和elementor pro。

1.购买envato

点击

，进入官网后付费成为envato会员即可使用里面的建站模板和素材资源。

2.安装并启用envato插件

在插件市场搜索关键词envato，选择下图中的第一个插件Envato Elements点击立即安装

安装完成后点击启用Envato插件

3.激活Envato插件

启用Envato插件后点击左侧工具栏的Elements后找到左上角的Connect Elements Account并点击。

登录我们的付费账号后获取到激活码并复制。

粘贴后点击验证即可激活我们的Envato插件。

4.挑选envato模板

envato中的成品前前后后有几千套，但并不是所有的模板都适合我们。因为WordPress的插件市场极为丰富，所以envato里面的成品模板在当初可能上传时可能会使用到各种各样的插件，如果我们再去研究这些额外的插件会极为浪费我们的时间。

所以我提前为大家筛选出了一千多套基于elementor的成品模板，点

进入，从这些模板中选取会省去很多不必要的麻烦。

另一种避免过多未使用过的插件的方式是点击模板进到模板的详情页

进入到详情页后下划，在看到Required Plugins installed with kit后，观察它下方所必须的插件是否都是你熟悉的插件，如果不熟悉的插件过多，可以直接放弃该模板，另寻目标。

5.导入envato模板

导入模板的方式主要有两种，全局导入和按需导入。全局导入是一次性将模板中的所有做好的页面导入到自己的模板中，这种方式适合所有页面都需要使用现成模板。按需导入则可以自己选择在哪个页面中用到模板里自己喜欢的页面或者板块。

注：全局导入和按需导入的页眉页脚都需要在主题构建器--页眉/页脚--编辑进行

全局导入

挑选完自己的模板后点击下载该模板的压缩包。注：有时需要创建一个项目并把该模板加入到当前项目才可下载。

下载完模板压缩包后来到网站的后台界面，第一步点击左侧Elementor下的工具，第二步进入工具页面后点击tab栏上面的导入/导出 库，第三步点击开始导入后选择我们挑选并下载好的模板压缩包。




确保Templates和站点设置都处于勾选状态后点击右下角的导入按钮

如果出现下方这个界面点击启用即可。

看到下方界面时则提示你已经安装成功，点击右下角关闭按钮。

回到WordPress后台后点击模板，选择全部便可看到我们导入后的所有页面模板。

以Home页为例，讲解如何使用这些导入好的页面模板。点击页面，找到我们建立好的Home页后点击使用Elementor编辑，进入到页面编辑后台

如果页面最上方出现页面标题无法删除，可以点击左下方的设置按钮后打开隐藏标题将其隐藏，没有出现忽略即可。

点击页面工具栏中的灰色文件夹按钮

在我的模板中找到Homepage后点击插入

成功后点击左下角的更新按钮，模板中的Homepage的内容就变成了我们首页的内容。其他页面也是依照此操作一一导入即可。

按需导入

将选好的模板名称复制，例如图中的Furniti

在WordPress后台点击Elements下的Tmeplate Kits进入到模板库选择界面，将复制好的模板名称粘贴到搜索框后点击搜索图标，出现我们所需模板后点击Install Kit按钮安装模板。

安装完成后点击View Kit按钮进入模板查看页面。

进入查看页面后如果左上角出现了带有黄色感叹号的额外安装需求的提示，点击Install Requirements按钮

点击Install Above Selected Requirements按钮安装额外需求，安装完成后点击关闭即可，此时再看右上角黄色感叹号则已经消失。

按需导入在使用模板中的内容前需要先导入当前模板的整站样式（很容易忘记），找到Global kit Styles后点击下方的Import Template导入整站样式

为了确保当前模板的整站样式生效，点击WordPress后台Elements下的Settings，在右侧滑动找到Elementor下的Kit Styles，看看是否是我们当前模板的名称样式，而后点击Updata Global Template按钮更新样式。

以Home页为例，讲解如何使用这些导入好的页面模板。点击页面，找到我们建立好的Home页后点击使用Elementor编辑，进入到页面编辑后台

如果页面最上方出现页面标题无法删除，可以点击左下方的设置按钮后打开隐藏标题将其隐藏，没有出现忽略即可。

点击页面工具栏中的绿色Envato按钮标志







该界面可以看到我们当前已安装的所有模板，点击对应模板内的View Installed Kit按钮进入当前模板的页面选择界面。







找到Home页模板，点击Insert Template按钮插入Home页模板







当导入进度达到100%后则导入成功，点击左下角更新按钮保存当前页面内容。其他页面也是依照此操作一一导入即可。

6.Envato其他资源使用

点击Elements下的Photos界面后在搜索框中搜索需要的图片的关键词，出现相关图片后点击下载，这里的图片可以直接使用，不用担心图片版权问题。

十四、文章发布

学会页面的建立后接着来学习如何发布一篇文章



进入后台后点击文章下的分类


进入添加分类页面后先找到右侧默认生成的分类点击快速编辑


将名称和别名都修改为cat toy后点击更新分类


在左侧添加新分类下输入 dog toy后直接回车或者点击下方按钮添加新分类，这样我们就建立好了两个文章分类

点击写文章


输入文章标题：The 11 Best Cat Toys of 2023 That Your Cat Will Love
注意：在编辑文章过程中不要点击上方的使用Elementor编辑按钮


输入文章的内容：From wide-eyed kitten to wise elder cat, playtime with your feline friend is enjoyable for you both, but it's also a strong contributor to their overall health and well-being. It's important for a cat to stay physically and mentally active and entertained throughout their lifetime. This is especially important if you have an indoor-only or solo cat who doesn't get as much organic stimulation.
Cat toys are designed with a cat's primal instincts in mind to keep their senses sharp. Depending on the age of your cat along with what they find interesting, a cat toy can provide hours of enjoyment. It can even help your kitty maintain a healthy weight by motivating them to pounce, jump, kick, and claw at something they perceive as prey.
As any human companion to a cat knows, cats can be beyond picky when it comes to what excites them and what bores them. Finding the right toy or toys can also help you to bond with your cat which ideally leads to lots of purrs and snuggles post-playtime.
To help you with your search, we rounded up the best cat toys for keeping your kitty pawfully amused.


点击左上角的加号，可以看到写文章过程中可以添加的组件，比如图片、视频等


选择插入一张图片


插入后右侧可以修改图片的尺寸


1.内容编辑完成后点击右侧tab栏上的文章
2.勾选作者
3.选择当前文章分类
4.上传特色图片（这里的特色图片其实就是每篇文章的封面图片）


将允许评论取消勾选，如果需要客户评论文章可以打开，完成后点击右上角发布按钮。


发布完成后点击查看文章

十五、制作文章单页模板

在开始前先说明一下Elementor编辑器中文章汇总页模板、文章单页模板以及文章三者之间的关系。



文章汇总页，如图当我们发布一篇篇文章后，这些文章会自动归纳到我们的文章汇总页，类似于书的目录



因为在创建完页面后基础设置中我们将Blog页面设置成了文章页，所以Blog页面自动成为了我们的文章汇总页


当从文章汇总页点击上面的任意一篇文章会发现，每篇文章只有内容是不相同的，但是展示形式都是一样的，因为我们在文章单页模板中提前设置好了它的展示形式，并设置生效范围为每篇文章，所以文章发布后都会自动应用这种展示形式。
开始制作文章单页的展示模板：



后台模板———>Theme Builder



1.点击Single Post
2.点击右上角的Add New按钮



进入后会出现一些Elementor Pro自带的一些文章单页的模板



选择其中一个后点击插入



1.插入后点击左下角的发布按钮
2.将生效范围修改为文章
3.点击右下角保存按钮



回到后台找到之前发布过的文章点击查看


发现在主题构建器中设置好的文章单页模板已应用于文章。 当前文章展示形式，接下来我会带大家学习如何优化文章的样式排版

十六、制作文章汇总页

1.进入主题构建器后点击Achieve
2.点击右上角的Add New添加新的文章汇总页模板


在Elementor Pro给定的模板中选择一个插入，当然上面学完Envato教程后也可以直接使用Envato模板内部的文章汇总页模板。


插入后会自动根据我们文章的内上传的特色图片，以及标题等生成一个对应文章的卡片


选中这个组建后可以调整它显示的图片缩放以及宽高等属性。


点击发布将生效范围设置为文章Achieve也就是文章汇总后点击保存按钮。


返回前台界面后点击Blog查看


完成文章汇总页模板

十七、文章模板

相对来说像天天建站站内这样的文章模板更利于读着的阅读习惯。所以我将天天建站的文章模板导了出来给需要的人使用。
同时再教大家一种外部模板导入导出的方式。比如我在Home做了一个版块，在About页面仍然可以复用这个板块的时候怎么快速复用。
需要模板的请点击下载。



1.进入到主题构建器中找到Single Post，可以看到我们已做好的模板正在生效
2.点击Edit Conditions改变它的生效范围


点击X，将生效范围取消后保存，因为文章单页的模板我们只需要一个在生效即可。
在更换文章单页的模板前一定要将之前做的模板范围取消，否则这里会有个不好解决的小Bug。


1.生效范围取消后发现左上角正在生效的小绿点标志变成了灰色，说明范围取消成功
2.点击右上角的Add New





点击上传的图标，将准备好的文章单页模板选则后上传


第一次上传会出现该提示点击Enable即可。


导入成功后找到模板，点击插入


插入后点击发布，设置完生效范围后点击保存。
文章汇总页模板导入和文章单页操作一样，就不再演示。
下面教大家一下如何复用网站的模块：


在Home页中我想将第二行整个板块复用
1.选中整行后右键
2.点击另存为模板


1.给模板起个名字，中英文都可以
2.点击保存


完成后可以看到模板中多了一个


使用Elementor编辑About页面


点击文件夹标志


点击tab栏上的我的模板


选择需要复用的模板后点击插入


完成板块导入复用。

十八、制作产品页

本来产品页对于B端网站来说不是必须的，但是想到这可能是2023年最卷的Elementor建站教程了，就还是把产品页以及上传产品的教程给加了上去，并且我会为大家准备好比较通用的产品模板。
关联Product页面和WooCommmerece



插件市场搜索WooCommerce安装并启用



出现向导界面的加直接点击跳过



1.点击页面
2.勾选Woocemmerece自动生成的页面
3.选择移动至回收站
4，点击应用



完成后点击回收站并清空回收站



1.点击WooCommerece下的设置
2.点击tab栏的产品
3.将商店页面设置为Product页面
4.将允许评价取消勾选（后期如果需要可以自行打开）
5.点击保存
保存完成后我们的Product就和我们的WooCommerece关联了起来



此时再去前台的Product页面看会发现不是空白的页面，而是会提示没有符合的产品。
传产品



在后台中找到产品后点击分类，在上传产品前我们需要设置好产品的分类以及属性



点击快速编辑将右侧默认生成的分类改为cat toy



更改完成后点击更新分类



再添加一个dog toy的分类后点击添加新分类或者直接回车



分类添加完成后点击产品下的属性开始添加，属性就好比我们买的衣服，衣服的属性有尺码，颜色等



添加完颜色和尺寸两个属性后点击配置类别。这里的配置类别就是衣服的颜色有黄色、白色、黑色，各种颜色对应的就是各种类别。
逻辑是：产品类别---产品属性---配置属性类别



点击颜色下的配置类别后输入黄色后回车，再依次输入白色、红色



颜色的类别配置完成后点击属性继续配置尺寸的类别



依次配置大、中、小三个尺寸类别



点击产品下的新增开始添加产品


添加标题和描述：
标题：P.L.A.Y. - Feline Frenzy - Sassy Sushi
描述：We’re not kitten around, it’s officially okay to play with your food! You’ll have to paw-don your kitty’s manners as she digs into these delicious USDA Organic Catnip-filled plush toys in the shapes of sushi, tropical fruits, farm-fresh veggies, a crispy chicken wing, and drool-worthy donuts. You can fur-get the diet – live in the meow-ment and treat yo’ cats to their favorite foods!
●Filled with certified organic catnip* from Mountain Rose Herbs grown in Washington
●Packed with amusing crinkles, these toys are the purrfect way to spice up play time with your feline friend
●Hand-made craftsmanship, double layer exterior and double-stitched edges ensure extra durability
●Eco-friendly PlanetFill® filler is made from 100% post-consumer certified-safe recycled plastic bottles
●Machine washable and dryer friendly with catnip removed
●Features AZO-free dyes
●All of our toys meet the same strict quality standards for manufacturing infant and children products. Meet requirements for EN71 – Part 1, 2, 3 & 9 (EU), ASTM F963 (US) toy safety standards and REACH - SVHC
●


1.点击产品数据下的属性
2.选择颜色后点击添加



1.点击选择条款后依次添加黄色、白色、红色三个属性值



点击保存属性



同样操作将尺寸下的大中小三个属性值选择后保存



简短描述：Sisal Bucket Cat Climbing Shelf Cat Litter Cat Tree All-in-One All-season Enclosed Villa Deluxe Cat Jumper Toy



在右侧产品图片中添加产品的主图和副图



将素材包里的产品图分别上传



勾选产品分类后点击右上角的发布按钮


发布完成后点击查看产品



产品详情页面



此时再去前台的Product页面，就会显示刚才上传好的产品，如果要添加多个产品依次添加即可。

十九、使用产品模板优化样式

1.在主题构建器中点击Single Product

2.点击Add New新增产品单页模板

点击上传素材包里的产品单页模板，当然也可以直接用Elementor Pro提供的几个模板

上传成功后找到产品单页后点击插入

将生效范围设置为产品后点击保存

产品汇总页的模板使用

上传模板后点击插入

插入完成后修改下样式即可

二十、上线前操作

1.将后台设置阅读中建议搜索引擎不索引本站点取消勾选（这里取消勾选便是打开网站页面的收录，允许谷歌等抓取我们的网页）


2.在常规设置中将语言改为English
3.绑定站长工具，实际操作流程可以看我这篇文章Google Search Console 域名验证并提交站点地图
4.安装Nitropack插件或者wp-rocket插件，实现网站加速 。Nitropack 官网注册选择free plan，安装插件完成绑定后，自己浏览网页，给插件读取并加速，日常保持绿灯
测速网址：https://pagespeed.web.dev/
5.安装安全插件,实际操作流程可以看我这篇文章WordPress安全插件All In One Security使用指南

Hi，谢谢你认真看完这篇文章，如果你喜欢我的Elementor建站和SEO文章，并且想要获取更多实用技巧和与志同道合的朋友交流的话，扫描下方二维码，立即加入我的【Elementor建站交流群】，加入时请备注建站或者seo。

一起学习、进步，共同打造更出色的网站！