Elementor教程：Hello Elementor外贸建站全流程

Elementor是一种拖曳式建站的编辑器，是目前最流行的可视化编辑器，对新手小白非常友好。

Hello Elementor则是最适配elementor编辑器的轻量主题，高度自定义，而且主题体积很小，据说只有几kb，意味着速度非常快。

在开始建站前，先确认你已启用hello elementor主题，安装好 Elementor (pro)插件并完成基本设置。

Elementor教程：Hello Elementor外贸建站全流程 – hello elementor

安装与配置Elementor（Pro）

进入wordpress后台插件市场，点击添加新插件，输入elementor，第一个就是了，安装启动。

Elementor Pro插件需要上传安装。

后台>插件>添加插件>上传插件>选择安装包上传>立即安装

Elementor教程：Hello Elementor外贸建站全流程 – 安装elementor pro

Elementor 设置

文章类型，博客网站只打开文章和页面，或只有页面也可以，文章可以直接用古腾堡。B2B网站，文章页面，portfoilo，产品（自定义）都打开。

B2C具体还是要看主题，大部分产品，文章，页面打开就行了，类似woodmart这样多功能的电商主题，project，html block都要打勾，具体看自己需要哪些页面用elementor去做。

Elementor性能优化技巧，2分钟显著提高网站速度 – how to set up elementor

Elementor集成保持默认

高级设置

开关编辑器加载程序方法：禁用（切换模式，安全模式，主要应用于插件冲突）

启用未过滤的文件上传：启用（有些文件格式比如Jason，SVG，WP默认阻止，启用就可以解除限制，如果不需要可以禁用。）

Google字体：禁用（Elementor默认加载google字体，影响网站加载速度，最好不使用或者将字体本地化。）

Form Submissions：开启，避免遗漏客户信息

加载Font Awesome 4 支持：关闭（Elementor默认使用 font awesome 5图标字体，如果你的网站还有主题或者插件用 4的话，关闭可以减少加载时间。）

生成器标签：禁用，启用可能泄露网站信息，有安全风险，除非你是开发人员。

Elementor性能优化技巧，2分钟显著提高网站速度 – elementor advance settings

页面结构搭建

页面结构讲解

Section、Container、Column 区别与布局建议

设置页眉（header）

LOGO、菜单导航、固定样式

设置页脚（Footer）

社媒图标、版权、跳转链接

侧边悬浮窗和回到顶部按钮

方式一：Floating Elements功能

进入Wordpress后台,进入到Elementor的Setting页面,找到Features标签。

WordPress侧边悬浮窗免插件制作教程 – elementor floating elements one

打开Flexbox Container功能（Active)。

WordPress侧边悬浮窗免插件制作教程 – elementor floating elements two

然后在Elementor下面找到Template中的Floating Elements并进入。

WordPress侧边悬浮窗免插件制作教程 – elementor floating elements three

点击Add New，创建新模板。

模板选择Floating Element，点击创建，最好命名一下比较容易找。

进入之后会有很多样式供你选择，挑选一个适合自己的即可。

插入之后就会看到悬浮按钮出现在侧边。

这时候你可以在侧边编辑框里面添加或者删除，比如在WhatsApp添加自己的号码，Messager里面添加自己的username,也可以选择其他选项比如SMS，Viber之类的。在样式里面可以自定义颜色，字体，图标边距，图标边角之类，最后点击保存。

保存的时候，注意要add condition，应用到全网站或者指定网页，点击保存刷新，前台就应用可以看到了。

WordPress侧边悬浮窗免插件制作教程 – elementor floating elements ten

WordPress侧边悬浮窗免插件制作教程 – elementor floating elements eleven

方式二：Footer添加图标

创建或者打开做好的footer模板。

创建的话在Template里面打开并点击Add New.

创建Footer并命名。

进入之后，会有一些模板给你选择或者自己自定义也可以。

创建好或者应用好模板之后在最下面增加一个Container。

把container设为full width全宽，并添加小部件图标。

更改为自己需要的图片，并设计样式颜色，大小，图标也设置全宽度且居中。

在图标的content内容里面最下面的url加入超链接，比如WhatsApp，可以加入在线聊天的超链接。(WhatsApp对话直达链接），然后转到高级功能。

把位置改成绝对固定，调整上下左右的距离，并保存应用到全网站，浏览网站就可以看到应用了。点击图标就会直接跳转到WhatsApp在线聊天了。

WordPress侧边悬浮窗免插件制作教程 – elementor floating elements twenty

WordPress侧边悬浮窗免插件制作教程 – elementor floating elements twenty seven

Elementor菜单锚点

使用elementor编辑对应页面或者文章，点击左边元素栏，添加菜单锚点小部件至想要跳转的位置。

Elementor教程：Hello Elementor外贸建站全流程 – image 62

设置好锚文本，链接输入#ID，保存好测试一下是不是正常滚动到页面的指定部分。

Elementor教程：Hello Elementor外贸建站全流程 – image 63

Elementor教程：Hello Elementor外贸建站全流程 – image 64

Elementor侧边栏

文章目录侧边栏

添加Table of contents元素

Elementor教程：Hello Elementor外贸建站全流程 – image 61

动态筛选文章侧边栏

先安装Unlimited Elements for Ementor（Premium）插件，需要的可以找我。

左边侧边栏下拉到unlimited elements，选择widgets（工具）进入。

在工具页的搜索框输入taxonomy。

安装分类小工具。

然后回到elementor的模板，新增一个archive模板。

随意命名，只要模板类型是archive（归档）即可。

布局选择2 8。

把UEE的taxonomy terms小工具插入左边侧边栏，前提你post的分类一定要做好，不然没有东西显示。

右边添加archive post，post文章做产品页是常用的B2B产品管理方式。

美化一下两边的设计，例如去除箭号，增加圆角等等。

右上角display condition选择include all archives。

然后发布。

回到仪表盘，选择相应要设计的页面，用elementor编辑。

如何设计网页左边固定侧边栏，右边动态筛选内容（UEE教程） – elementor编辑相应的页面

插入我们刚才做的产品聚合模板。

点击insert。

保存发布就能在前台看到对应的布局效果，这时候点击各种分类，无内容会跳出来no data，有内容会像过滤器一样过滤对应的内容卡片。

做完了聚合归档页面，接下来要做单个的内容页面。点击single post（因为我们是用文章页发产品的）。

布局一样，其实就是跳转页面，但是给用户的感觉好像没有跳转，GPT说这叫SPA，single page application，不清楚是不是这个说话，有懂的朋友麻烦告知一下。

左边的侧边栏一样是taxonomy分类。

右边可以自定义。

比如我插入了标题，轮播产品图，内容和发送询盘按钮，其他可以根据自己喜好添加。

展示条件要选择posts，然后就完成了。

Elementor Tab选项卡

使用elementor编辑你想要添加tab的页面。

如何使用Elementor Pro创建选项卡：实现内容自由切换 – elementor editor

在左侧元素表中选择tab选项卡元素，拖曳到目标区域。

如何使用Elementor Pro创建选项卡：实现内容自由切换 – choose tab widget

默认的是tab1、2、3，你可以添加和减少选项卡，自定义名称，例如下图。

如何使用Elementor Pro创建选项卡：实现内容自由切换 – add or edit tab

样式中，标准，悬停，启用，字体和背景颜色按自己喜好来更改。

如何使用Elementor Pro创建选项卡：实现内容自由切换 – change colors

下面就是类似正常编辑时的模块，功能一样的。先选择布局，例如黑色选中的结构，可以加入文章聚合页，产品聚合页，视频等，也可以选择不同的格式，添加图片，再加超链接。

如何使用Elementor Pro创建选项卡：实现内容自由切换 – layout

如何使用Elementor Pro创建选项卡：实现内容自由切换 – add content

左侧元素栏里面的部件全部都可以添加到选项卡下面，主要用于归类，方便用户不需要频繁跳转。

如何使用Elementor Pro创建选项卡：实现内容自由切换 – elementor tab

来源选择一般是current query，如果不能显示正确的，直接manual手动添加也可以，或者做标签，把内容聚合在标签里面，再从编辑栏里面选择相应的标签。

如何使用Elementor Pro创建选项卡：实现内容自由切换 – choose query

添加完内容就跟下图一样，选择不同的选项卡会弹出不同的内容。

如何使用Elementor Pro创建选项卡：实现内容自由切换 – finish add content

Elementor Form（联系表单)

表单常规设置

打开具体设置的页面，用elementor编辑。

Elementor Form教程 - MailTo设置、reCAPTCHA验证、自动邮件通知 – elementor编辑目标页面

添加elementor form元素。

Elementor Form教程 - MailTo设置、reCAPTCHA验证、自动邮件通知 – form元素

表单设置，form fields添加项目，例如电话号码，url，name，email等等。

Elementor Form教程 - MailTo设置、reCAPTCHA验证、自动邮件通知 – form设置

这是所有的内容类型，按自己所需选择。

Elementor Form教程 - MailTo设置、reCAPTCHA验证、自动邮件通知 –

文件上传功能选择file upload。

Elementor Pro 教程：轻松实现表单附件上传功能，无需额外插件 – elementor form新增file upload

Label：写一点注意事项提升用户体验，比如：仅支持PNG、PDF、JPG、JPEG文件，单个文件最大2MB，最多一次性上传5个附件等等。

Elementor Pro 教程：轻松实现表单附件上传功能，无需额外插件 – elementor 设置label

Required：自己根据需要看要不要硬性上传。

Send files:选择email with attachment

Elementor Pro 教程：轻松实现表单附件上传功能，无需额外插件 – elementor form send files设置email with attachment

Max file：限制上传得最大附件，1-20MB可选，最大20MB。

Elementor Pro 教程：轻松实现表单附件上传功能，无需额外插件 – elementor form附件上传最大20mb

Allowed File Types:填写允许上传得文件类型，PNG,JPG,PDF等等。

Elementor Pro 教程：轻松实现表单附件上传功能，无需额外插件 – elementor form选择允许上传得文件类型

Multi Files打开，允许上传多张图片或文件，下面自定义数量。

按钮设置，大小，文字。

邮箱设置，一般to是填写你接收的邮箱。

subject：邮件标题。

message：邮件内容。下面保持默认即可。

自动给客户发送通知邮件设置

from fields选择email，advanced，把shortcode复制下来。

在actions after submit添加一个email2。

Elementor Form教程 - MailTo设置、reCAPTCHA验证、自动邮件通知 – actions after submit添加一个email2

email2的To选择短代码。

Elementor Form教程 - MailTo设置、reCAPTCHA验证、自动邮件通知 – email2的email选择短代码

粘贴email的短代码。

测试。

测试客户提交询盘自动发送提示邮件成功。

Elementor表单设置MailTo功能

在actions after submit添加一个重定向功能redirect，然后redirect里面添加mail to链接。

support@yourwebsite.com要改成你的邮箱，其他的主题内容可以自定义。

mailto:support@yourwebsite.com?subject=Product%20Inquiry&body=Hi,%20I%20want%20to%20know%20more%20about%20your%20product.

Elementor Form教程 - MailTo设置、reCAPTCHA验证、自动邮件通知 – mailto 效果

收集表单数据，用户IP和代理，例如是chrome，或者手机sa’f单数据，用户IP和代理，例如是chrome，或者手机sa’fari浏览器等等。一般收集个IP即可。

设置reCAPTCHA反垃圾邮件

elementor- setting – Integrations，这里就是集成的区域。进入会看到reCAPTCHA设置区域等。

Elementor教程：Hello Elementor外贸建站全流程 – 集成reCAPTCHA

点击，Google reCAPTCHA开始使用。

Elementor教程：Hello Elementor外贸建站全流程 – 注册reCAPTCHA V3

Elementor教程：Hello Elementor外贸建站全流程 – 复制密钥和网站密钥

复制网站密钥和密钥到对应区域。如果设置了邮件发送不成功或者收不到，把下面score threshold改低一点，0.3或者以下。

Elementor教程：Hello Elementor外贸建站全流程 – 粘贴到elementor的集成选项里

全局使用。

或者直接在原有的elementor form表单下面添加一个项目，选择reCAPTCHA V3就行了。

Elementor教程：Hello Elementor外贸建站全流程 – recaptcha V3

测试反垃圾邮件功能

填写信息，reCAPTCHA V3一般没有显示验证信息，自动验证筛选的。

Elementor教程：Hello Elementor外贸建站全流程 – 测试表单

发送成功在后台submissions能看到记录。

Elementor教程：Hello Elementor外贸建站全流程 – elementor后台有收件记录

reCAPTCHA效果，如果是垃圾邮件自动发送到垃圾邮箱里，实现过滤效果。

Elementor教程：Hello Elementor外贸建站全流程 – 自动判断是不是垃圾邮件

Elementor SEO优化

FAQ结构化数据

添加手风琴元素。里面的FAQ内容按匹配搜索意图来填写。

Elementor和Gutenberg怎么设置结构化数据标记（Schema） – elementor手风琴

点击编辑手风琴，可以在下方看到schema结构化数据标记的按钮，打开即可。

Elementor和Gutenberg怎么设置结构化数据标记（Schema） –

感谢页延长用户停留时间

先在Elementor下面的模板新建一个page模板，或者直接添加新页面也可以（更快）。

添加新模板。

或者直接创建新页面。

模板的话一定要选择page。

无论是模板还是页面进来都是这个页面。

添加感谢页的主要内容，例如 your message was sent successfully，截图中Successfully写错了不要介意。

还可以添加产品或者最近文章，热门文章之类的增加用户停留时间。

记得改页面的title。

复制感谢页的URL。

在Elementor联系表单的actions after submit里面添加redirect。

在redirect中添加thank you页面的url就完成了。

404页面降低跳出率

登入Wordpress后台，下拉到elementor下面得template模板上，点击theme builder，创建error 404模板。

进入之后有模板可选，随便选一个简洁的或者自定义创建都可以。

这里我就随便选择一个404模板，然后稍微改一下添加下最近文章增加用户的停留时间，产品的话可以添加热门产品，不要多，几个就行，也可以添加搜索框方便用户快速搜索，广告类型的banner也行，简洁就好。

创建好测试看是不是正常应用，域名/随便几个数字，字母，如果正确应用都会跳到这个页面。这样就设置完成了。

Elementor速度优化

优化图像加载，css等，必须打开。

CSS打印方式：外部文件

优化图像加载：启用

优化古腾堡加载：启用

延迟加载背景图像：启用

元素缓存过期：1天

Elementor性能优化技巧，2分钟显著提高网站速度 – elementor performance set up

特性

优化标记：启用，减少DOM元素，提高网站加载速度，谷歌测速评分。

着陆页面：默认，需要做活动页面再启用。

嵌套元素：启用，把多种元素嵌套在一个容器内，减少DOM的深度。

Menu：默认，不是复杂的菜单不需要启用。

内联字体：启用，直接渲染图标，不需要额外加载其他的图标字体。

额外的自定义断点：端点，分移动端，桌面端，平板端，一般默认3端就够了，甚至2端也可以，不需要增加。

容器：启用，创建自定义高级布局和响应式设计必须的。

升级swiper库：启用，优化动态，轮播元素，改善兼容性。

优化控制加载：启用，提高站点性能。

默认更新：默认，如果希望第一时间体验elementor最新功能的话打开，记得要做备份，求稳的话就禁止或者默认。

编辑器顶栏：启用，编辑器置顶，使用起来更方便。

Elementor性能优化技巧，2分钟显著提高网站速度 – elementor features

Elementor性能优化技巧，2分钟显著提高网站速度 – elementor feature

Elementor 无法编辑

无法编辑，一直加载中怎么办

4种常见错误

1.URL冲突

url重复，两个一模一样的页面会让elementor编辑器一直循环的打开两个页面，造成冲突，结果就是编辑器一直加载中。

解决的办法很简单，只要打不开的那个页面点击edit，用原生古腾堡编辑器把url改成不同的就可以打开。

2.插件冲突

插件冲突这个就稍微有点麻烦，建议是禁用掉除了elementor和pro以外的所有插件，然后看看能不能打开页面，如果能打开就是插件冲突，不会看代码的朋友用笨办法一个一个启用然后再打开页面，看启用到哪个插件网页就打不开就是那个的问题，要么删除，要么找人排除其中的哪些代码不兼容冲突。主题的话切换默认主题，比如说二0二五，二0二四，看能不能恢复。

或者通过FTP或者主机的文件管理器进入 wp-content/plugins 目录，将所有插件文件夹重命名（比如在末尾加个 -old）来一次性禁用所有插件，然后再在WordPress后台逐个激活。

3.CPU爆满

不清楚hostinger和siteground服务器会不会有这种情况，我比较常用cloudways，vultr vps偶尔也用一下，遇到这种情况除了会打不开页面，编辑的时候还会特别卡。

无论是cloudways还是别的服务器都建议2G起步，除非你的网站非常轻量，比如博客，教程网站，大部分文字，页面也不多。另外PHP的memory limit设置在512M以上，cloudways特殊一点，最大是511M。

临时的解决方案是利用perfmatters，breeze，heartbeat control这类控制心跳的插件，减少前后台，文章编辑的活动频率，注意wp rocket的心跳控制功能很容易失灵。