Elementor系列教程 : 零基础学会Elementor建站完全指南（2024）
WordPress上面有很多优秀的可视化网页设计工具（Website Builder），而Elementor更是这些页面构建器中的佼佼者。
通过Elementor Pro你可以绕开一般的主题限制去构建自己的主题模板，本教程包含了如何使用Elementor构建自己的主题及模板。跨境谷将为大家介绍如何一步一步使用Elementor来设计网站。
温馨提示：本教程内容较长，建议先收藏，边阅读边实操。
目录
了解Elementor
Elementor 是目前最成熟、功能最强大、最好用的可视化页面编辑器之一。
Elementor最大的优势在在于轻松上手，对于不会代码或者0基础建站的人群非常友好，它拖放式的布局，选项设置式的外观调整降低了入门门槛。
零代码建站
不需要你会开发和代码知识，所有的页面设计和制作只需要通过拖拽和设置选项调整的方式就可实现。
可视化编辑
利用可视化窗口，所见即所得的方式进行页面编辑，在编辑的过程中就能看到实际的展示效果。
响应式布局
提供了适配不同终端的响应式布局效果，可以实现在不同终端模式下编辑不同终端设置展示的效果。
主题构建器
可以不受任何主题限制，去构建属于自己的主题。
Elementor基础版 VS 高级版
Elementor有免费的基础版，和高级付费版。免费基础版的功能没有高级付费版本的功能全面，安装高级版是必须要安装基础版的，否则无法工作。
高级版本根据授权数量不同，套餐价格不一样，最低1个站点1年的授权套餐是$59。
Elementor Pro价格
官方价格
Elementor Pro个人版已经在2022年12月1日涨价，新价格为$59/年
本站授权价格
我们目前购买的是399刀/年的代理计划，可以微信联系我购买
Elementor Pro的主要功能介绍
1 主题生成器
主题生成器可以不依赖任何主题去编辑网站的任何内容，而且是0代码的可视化编辑。在Theme Builder中你可以创建相应的模板来展示的相应的页面。
利用动态数据功能可能获取你想要展示的字段内容，包括通过ACF（高级自定义字段插件）创建的字段。
你还可以设置模板显示范围（Display Condition），通过设置你可以针对不同分类下的内容定制单独的展示模板。
你可以使用Elementor的Hello主题，它完全免费，速度极快。
2 全局样式设计
利用Elementor站点设置里面的【设计系统】和【主题风格】你可以设置好全局的标题、正文的字体和颜色，以及按钮、图片、灯箱、表单等风格.
通过全局的设计可以确保你的整体风格统一整齐，而且方便维护，如果后期需要修改标题的颜色，就不需要一个一个标题单独修改，直接在全局样式里面修改对应的颜色即可。
3 响应式和页面布局
Elementor支持响应式的布局方式，默认提供三个终端（PC、Pad、Phone），但是另外可以增加手机横屏、Pad横屏等移动终端断点。
在使用时，只需要切换到响应式模式，并切换到对应的终端模式下编辑即可修改对应终端的展示效果。
你还可以设置某个元素或者布局块在某个终端隐藏或者调换顺序。
通过对布局的设置，你可以设置一个固定的内容宽度，当你在添加Section段的时候就可以直接使用你设置的默认内容宽度，不需要再单独对Section段进行设置。
4 Woocommerce集成
Elementor Pro可以于Woocommerce集成，通过Theme Builder你可以创建自定义的产品列表页面模板、产品详情页面模板。
如果你是做B2C网站，如果想高度定制像购物车、我的账户等页面则需要借助Woocommerce扩展来实现，这里还是推荐使用比较成熟的商城主题来制作。
5 元素及小部件
元素和小部件可以帮助你快速设计和搭建页面，你只需要拖拽元素和小部件到对应的位置，并通过【内容】、【样式】以及【高级】设置来修改元素或者小部件的内容和外观风格即可。
当你需要重复使用一个已经设置好的元素小部件时，你可以将已经设置好的小部件设置为全局小部件，这样可以在其他页面直接调用这个全局小部件。
除此之外你可以制作一个普通的section模板，然后通过Template元素来调用这个模板。
6 表单
Elementor Pro提供表单功能，你可以通过Form元素设计制作一个询盘表单，通过SMTP配置表单提交的邮件提醒。
Submission可以查看表单提交的信息。
Elementor 的Form还可以集成Google的reCAPTCHA防止恶意提交垃圾信息。
除此之外Form还可以和MailChimp集成，实现订阅管理。
7 Popup弹出框
弹出框是我常用的功能的之一，我通常会设置点击询盘按钮之后弹出一个对话框让用户填写和提交询盘表单。
通过Theme Builder的Popup就可实现弹出框功能，你还可以设置弹出框显示的条件，比如用户访问页面5秒之后弹出对话框，或者用户下滑到某个元素的时候弹出对话框等等。
你可以在弹出框中展示任何内容。
8 自定义字体、图标、代码
通过自定义字体你可以给网站添加一个本地字体，添加之后你可以在设置字体的时候选择这个本地字体。
本地字体的好处就是可以提升加载速度。Elementor 使用的字体几乎都是Google字体，需要去加载Google的字体库，如果网络不好的话就很容易对网站速度产生影响。
当你在默认图标库中找不到对应的图标的时候可以上传自定义图标，自定义图标和图标库里面的图标一样，你可以对图标的颜色和大小进行修改。这个和传图片是不一样的概念，上传图片是无法修改颜色的。
自定义代码功能可以添加额外的代码到Hader和Body中，我通常会利用它添加Google数据分析的跟踪代码。
9 导入导出功能
导入导出功能可以帮助你快速的实现将当前网站内容复制到另外一个站点。
但是由于导入导出目前还是实验性的功能，在内容上会有数量限制，要导出的页面、帖子和 CPT 的数量限制为每种帖子类型 20 个项目。
如何安装激活Elementor和Elementor Pro？
基础插件Elementor Page Builder是必须要安装的，Elementor Pro依赖于Elementor基础插件。
Elementor基础插件是免费的，直接在网站后台插件库在线安装即可，Elementor Pro则需要通过上传安装包的形式进行安装。
安装Elementor Website Builder插件
直接进入网站后台的插件库中搜索并安装Elementor Website Builder插件，安装之后启用插件，如果你计划使用Elementor Pro可以暂时先跳过账号链接和网站设置。
全部跳过之后，会自动进入一个Elementor编辑窗口，编辑发布之后这就你创建的第一个Elementor页面。
如果你暂时还不打算使用Elementor Pro，你想要试试Elementor基础插件，可以根据提示创建一个免费账号并链接账号，以便你可以访问Elementor免费模板资源库。
安装激活Elementor Pro插件
直接进入网站后台的插件库中搜索并安装Elementor Website Builder插件，安装之后启用插件，如果你计划使用Elementor Pro可以暂时先跳过账号链接和网站设置。
全部跳过之后，会自动进入一个Elementor编辑窗口，编辑发布之后这就你创建的第一个Elementor页面。
如果你暂时还不打算使用Elementor Pro，你想要试试Elementor基础插件，可以根据提示创建一个免费账号并链接账号，以便你可以访问Elementor免费模板资源库。
Elementor 常规设置
安装激活完成之后进入【设置】-【常规】进行设置。
帖子类型：设置Elementor编辑器可以在哪些内容类型编辑使用，勾选你需要使用Elementor编辑的内容类型即可（如果你发现有些内容无法使用Elementor编辑，可以检查一下这里是否没有勾选）。
禁用默认颜色：勾选之后Elementor全局颜色将继承你在主题中设置的颜色（如果使用Hello主题则无所谓，使用其他主题根据自己需要勾选）。
禁用默认字体：勾选之后Elementor全局字体将继承你在主题中设置的字体（如果使用Hello主题则无所谓，使用其他主题根据自己需要勾选）。
改进元素共享数据：勾选之后将共享你网站的数据给Elementor（通常情况下不勾选）。
如何使用Elementor Pro构建自己的网站？
除了本教程，我还写了一些Elementor相关的教程和文章，整理在下面的合集当中。
目录
Elementor最新相关教程和文章
除了本教程，我还写了一些Elementor相关的教程和文章，整理在下面的合集当中。
