Elementor是一种拖曳式建站的编辑器，是目前最流行的可视化编辑器，对新手小白非常友好。
在使用Elementor之前你需要有一个WordPress网站并安装适配的主题。
安装Elementor（pro）
进入wordpress后台插件市场，点击添加新插件，输入elementor，第一个就是了，安装启动。
Elementor Pro插件需要上传安装。
后台>插件>添加插件>上传插件>选择安装包上传>立即安装
Elementor速度优化
B2B网站，文章页面，产品（自定义）都打勾。
B2C具体还是要看主题，大部分产品，文章，页面打开就行了，类似woodmart这样多功能的电商主题，project，html block都要打勾，具体看自己需要哪些页面用elementor去做。
API集成，主要用来加入谷歌地图和谷歌反垃圾邮件机制的api，比如以下第一个就是google map api。
第二个则是reCAPTCHA V3（不要用v2,很卡），score这边要注意一下，数值是0-1，太高会让正常邮件无法发送，0.5左右就好，或者再往下调。
高级设置：
开关编辑器加载程序方法： 禁用
启用未过滤的文件上传：禁用
Google字体：禁用 （如果有用谷歌字体，改成Swap）
Form Submissions：开启
加载Font Awesome 4 支持：关闭
生成器标签：禁用
设置都不是固定的，有需要可以开启，没什么问题。
性能：基本保持默认。
启用的这几个，图像加载、本地谷歌字体等等都是为了提升网站速度。如果你有用其他优化缓存插件，需要把元素缓存禁用了。
特性：保持默认。
默认是三个断点：PC、手机、平板
如果需要笔记本或者其他断点，要把额外的自定义断点开启再去设置。主要为了在所有的断点打开网站都是响应式。
Elementor如何隐藏标题
使用elementor编辑页面，点击顶部工具栏的齿轮图标，进入下面这个页面，就能看到隐藏标题按钮。
Hello Elementor主题要隐藏的话还需要进入主题（Hello）下面的设置，然后将以下所有选项都打开。
Elementor如何编辑内容
Elementor有多种容器或者section，针对具体需要编辑内容需要用不同的方式。
例如以下页眉部分，如果想要更改整个的背景颜色或者样式动画就需要点第一个 编辑 的六个点 按钮或者编辑 3。
菜单则需要通过编辑2来更改。
六个点旁边的+号则可以往下或者往下添加容器，进而选择模板或者自定义设计。
Elementor页眉
模板 – 添加新模板 – 选择页眉 – 新增 – 进入则可以看到elementor提供的几个页眉模板，可以选择喜欢的然后去修改，或者x掉自定义设计。
在左侧元素栏的高级设置，下面的动作效果选择sticky top，页眉就会固定在顶端。
页眉的背景颜色选择透明，则变成透明页眉。
设计好记得下拉右上角的publish，选择display condition，设置include entire site，保存发布，才可以正常在全站以及前台展示。
Elementor页脚
跟上面页眉一样的操作方式。
添加一个container，常规都选择4列的。
然后把左边元素栏想要的元素添加进去就可以了。
copyright版权也是一样，在footer下面继续添加container，然后拖入内容（文本），写上文字加链接就好了。
一键回到顶部
在页脚或者版权下面添加container，然后加入图标。选择一个合适的图标，链接填#，点击就会自动返回顶部。
位置设定在高级设置里面，定位切换成绝对，然后水平垂直方向调整一下就ok了。
侧边悬浮联系窗
推荐两种方式，一种是像上面添加返回顶部一样，在页脚下面添加几个图标叠起来，在往每个图标里面加跳转链接即可。
另外一种就是模板里面，新建floating element（浮动元素），随意选择一个模板设置就行。
Elementor全屏设置和轮播图
如果需要设置轮播图与透明页眉结合一起的话，需要外距设置为负距离
有时候图片或者banner总是有一点点白线无法全屏，需要在具体的元素高级设置把内外距全部设置为0，点下1和2的🔗按钮就行。
Elementor菜单锚点
使用elementor编辑对应页面或者文章，点击左边元素栏，添加菜单锚点小部件至想要跳转的位置。
设置好锚文本，链接输入#ID，保存好测试一下是不是正常滚动到页面的指定部分。
Elementor侧边栏
Elementor Tab选项卡
使用elementor编辑你想要添加tab的页面。
在左侧元素表中选择tab选项卡元素，拖曳到目标区域。
默认的是tab1、2、3，你可以添加和减少选项卡，自定义名称，例如下图。
样式中，标准，悬停，启用，字体和背景颜色按自己喜好来更改。
下面就是类似正常编辑时的模块，功能一样的。先选择布局，例如黑色选中的结构，可以加入文章聚合页，产品聚合页，视频等，也可以选择不同的格式，添加图片，再加超链接。
左侧元素栏里面的部件全部都可以添加到选项卡下面，主要用于归类，方便用户不需要频繁跳转。
来源选择一般是current query，如果不能显示正确的，直接manual手动添加也可以，或者做标签，把内容聚合在标签里面，再从编辑栏里面选择相应的标签。
添加完内容就跟下图一样，选择不同的选项卡会弹出不同的内容。
Elementor Form（联系表单)
表单常规设置
打开具体设置的页面，用elementor编辑。
添加elementor form元素。
表单设置，form fields添加项目，例如电话号码，url，name，email等等。
这是所有的内容类型，按自己所需选择。
文件上传功能选择file upload。
Label：写一点注意事项提升用户体验，比如：仅支持PNG、PDF、JPG、JPEG文件，单个文件最大2MB，最多一次性上传5个附件等等。
Required：自己根据需要看要不要硬性上传。
Send files:选择email with attachment
Max file：限制上传得最大附件，1-20MB可选，最大20MB。
Allowed File Types:填写允许上传得文件类型，PNG,JPG,PDF等等。
Multi Files打开，允许上传多张图片或文件，下面自定义数量。
按钮设置，大小，文字。
邮箱设置，一般to是填写你接收的邮箱。
subject：邮件标题。
message：邮件内容。下面保持默认即可。
自动给客户发送通知邮件设置
from fields选择email，advanced，把shortcode复制下来。
在actions after submit添加一个email2。
email2的To选择短代码。
粘贴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.
收集表单数据，用户IP和代理，例如是chrome，或者手机sa’f单数据，用户IP和代理，例如是chrome，或者手机sa’fari浏览器等等。一般收集个IP即可。
设置reCAPTCHA反垃圾邮件
elementor- setting – Integrations，这里就是集成的区域。进入会看到reCAPTCHA设置区域等。
点击，Google reCAPTCHA开始使用。
复制网站密钥和密钥到对应区域。如果设置了邮件发送不成功或者收不到，把下面score threshold改低一点，0.3或者以下。
全局使用。
或者直接在原有的elementor form表单下面添加一个项目，选择reCAPTCHA V3就行了。
测试反垃圾邮件功能
填写信息，reCAPTCHA V3一般没有显示验证信息，自动验证筛选的。
发送成功在后台submissions能看到记录。
reCAPTCHA效果，如果是垃圾邮件自动发送到垃圾邮箱里，实现过滤效果。
Elementor SEO优化
FAQ结构化数据
添加手风琴元素。里面的FAQ内容按匹配搜索意图来填写。
点击编辑手风琴，可以在下方看到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也行，简洁就好。
创建好测试看是不是正常应用，域名/随便几个数字，字母，如果正确应用都会跳到这个页面。这样就设置完成了。
延伸阅读：WordPress优化教程
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的心跳控制功能很容易失灵。
4.chrome扩展插件冲突
谷歌浏览器扩展插件问题，容易与阿里系的插件冲突，碰到这种情况可以尝试访客模式，或者关闭阿里系的扩展插件即可。
缓存和cookie问题，点击浏览器账号头像旁边的三个点，然后选择删除浏览数据尝试。
页眉与astra冲突重复乱码怎么解决？
把elementor的header模板完全删除，不能保留在垃圾站。elementor布局设为全宽，然后清除elementor缓存，同步模板
