使用 Elementor 创建联系表单 使用 Elementor 创建联系表单可以通过使用 Elementor Pro 中的表单小部件来实现。只需将表单小部件从编辑器面板拖到您的页面，然后使用控件即可在您的网站上创建美观且响应灵敏的表单。 编辑您的表格 在编辑器面板中，您可以创建和编辑您希望在表单中捕获的所有字段。表单小部件支持大多数流行的字段类型，例如文本、文本区域、单选按钮、选择器等。如果需要，这些字段也可以设置为必填。 您可以通过设置列宽布局来设置表单样式以使用同一行上的字段。  表单内容content设置 表单字段Form Fields Elementor 表单小部件的此部分允许您添加和管理将包含在表单中的每个表单字段。除了手动添加内容之外，许多选项还使用动态标签。这些标签允许您检索 WordPress 数据，或从插件源（例如高级自定义字段）或 WooCommerce 产品中检索数据。能够使用动态数据的项目将在字段输入旁边有“堆栈”图标。 表单名称– 为表单命名。 表单字段– 表单中的字段列表。您可以根据需要复制、添加或删除字段。您可以拖放来更改它们的顺序。 单击某个字段可查看其设置。 类型– 选择您想要的字段类型 标签label– 字段的名称，显示在表单和您从用户收到的电子邮件上。 占位符placeholder– 字段的前端显示名称。 必填– 将其打开以将该字段设置为必填字段。 列宽– 允许您设置字段的宽度。如果您想要一个表格在一行中有两个字段 - 将每个字段设置为 50%。 字段类型 文本– 一个简单的文本字段。即名称 电子邮件– 电子邮件类型。包括电子邮件验证 文本区域– 文本区域类型。您可以设置行数 URL – 网站 URL 字段 Tel – 电话号码类型 收音机radio– 收音机类型。单选。您可以滑动内联列表以获得水平样式 选择– 选择类型。选项下拉列表。可以设置为多选。 复选框– 复选框类型。检查一个或多个选项。您可以滑动内联列表以获得水平样式。 接受– 添加条款复选框供用户接受 Number – 数字类型 日期– 添加日期选择器字段 时间– 添加时间选择器字段 文件上传– 允许您的用户上传文件 密码– 添加密码字段 HTML –...

如何安装Elementor？ 通过WordPress后台安装： 第1步，登陆WordPress后台，在插件栏搜索Elementor，点击立即安装并启用。 第2步，创建一个账号。如果你目前只想体验免费版，请选择跳过。 第3步，安装主题。Elementor官方推荐了Hello，它是一个轻量级的WordPress主题，速度很快，但就建站而言，新手选Astra主题会更容易操作，建议跳过。 第4步，添加网站名称，也就是网站主页的标题，这里先跳过，后续SEO优化的时候再填写。 第5步，上传网站Logo。同上述几步一样，如果没准备好就跳过，后面可以随时上传或修改。 第6步，了解如何使用Elementor。你会看到两个向导，左边是创建页面，右边是导入模板，大家可以自行点击查看，如果选跳过，会跳转到创建页面。 到这，Elementor就安装完了，网站后台也会增加相关的设置选项，下一步是熟悉它的操作界面和使用方法，并用它创建网站页面。 通过Elementor官网下载 转到  Elementor.com，然后单击下载。 在WordPress后台，点击  插件  >  安装插件。 点击  上传插件，然后选择你在Elementor下载的文件。 Elementor使用教程 使用Elementor，你无需学习任何编程知识，就能搭建一个高大上的网站。但是，搭建网站前最好学会它的基本操作，考虑到这些，我会逐步讲解它怎么使用。 1. 创建页面 第1步，首先在WordPress后台新建页面，然后点击最上方的使用 Elementor 编辑按钮。 第2步，熟悉编辑器的结构，一共有三个部分，分别是工具栏模块，可视化界面和导航器。 工具栏：包含了大量可拖放的模块，比如区块、图片、文字、按钮等 可视化界面：编辑页面时，能实时知道页面发生了哪些变化 导航器：从上至下显示页面元素的排版，方便调整各模块的顺序 第3步，点击加号选择你要的结构，确定同一行或同一列大概要放多少个区块。 然后，将左边工具栏里的模块拖放到右边的区块中，比如标题、图片，按钮。 第4步，点击右边的蓝色虚线框，选择你已添加的模块，可以修改模块里的内容。 第5步，点击左下角的设置，修改页面布局为全宽，以后可以单独调整每个区块的宽度。 第6步，使用预览查看页面的实际样子，确认无误后点发布。至此，页面就创建成功了。 页面发布后，如果这个页面是网站主页，你可以到WordPress后台设置 > 阅读，将这个页面设置成静态首页，并保存更改，以后访问域名就会显示该页面。 2. Elementor Pro 在免费版的基础上，Pro增加了很多高级功能，其中最有用的是模板和主题生成器，另外还包括更多的模块、着陆页面、弹出窗口等，接下来我就教大家如何使用Pro。 第1步，首先去官网购买Elementor Pro，然后在网站后台添加插件，上传安装文件，点击立即安装并启用。如果觉得官网太贵，也可以联系一灯正版授权，费用合理。 第2步，安装好插件，你会在右上角看到一个激活提示，请点击“连接并激活”按钮。 第3步，查看激活状态，Active即是已经激活，后续可以在线更新，导入海量付费模板。 3. 导入模板 Elementor升级Pro版本附带了大量的模板，导入后能大幅简化建站流程，这是免费版和Pro的最大区别，也是新手之所以能零基础建站的关键所在。 第1步，打开Elementor页面编辑器，点击右下角的文件夹图标，进入模板库。 第2步，选择模板。如果遇到自己喜欢的，可以点击图片上的放大镜进行预览。 第3步，点击绿色的“插入”按钮，一键在线导入模板。 第4步，模板导入后，你会看到一系列已做好的模块，接下来要做的是自定义设计它们。 4. 自定义设计页面 Elementor中的每一个模块，你都可以进一步自定义它们，更改其内容、排版或样式，把它们设计成你想要的样子，具体的操作方法如下。 更改布局 点击蓝色虚线框上方的六个点，内容宽度选方框，就可以调整整个区块在页面中的宽度。 更改结构 同样是点击六个点，在布局的下方找到结构，可以更改区块中各模块的结构比例。 修改文字 文字类的模块，比如文本和标题，只需点击对应的模块，就能修改里面的文字内容。 编辑图片 点击图片模块能替换或删除图片，也能自定义图片尺寸，对齐方式，添加链接和字幕。 修改颜色 点击你要修改的模块，在样式里有颜色设置选项。 删除模块 如果遇到自己不喜欢的区块或模块，可以鼠标右键点击删除。 响应模式 点击左下角第四个图标，就可以进入响应模式，自定义平板和手机端的页面布局。 站点设置 最后要做的是点击左上角的菜单，设置站点基本元素，比如全局颜色字体、主题风格、站点标识和背景等，虽然你也可以等网站建完再弄，但先设置也并没有什么坏处。 其中的站点标识，可以自定义Logo、站点名称和网站描述。 至此，如何自定义设计页面就介绍完了，接下来的事情无非是重复导入模板，保留你想要的，删除你不要的，并不断的改进和完善，最后把剩下的模块组合到一起变成自己的。 5. 添加页眉和页脚 设计好页面，把它们分门别类添加到WordPress菜单，接下来使用主题生成器添加网站的页眉和页脚了，下面是详细的操作步骤。 第1步，点击网站后台的模板 > Themebuilder（主题生成器）。 第2步，点击 Header 或 Footer 旁边的+号，如果遇到错误，可以通过更换主题解决。 第3步，点击文件夹图标，添加页眉或页脚的模板。 第4步，选择页眉页脚的样式，并一键导入。 第5步，自定义页眉和页脚里的元素，修改好之后点击发布，并选择整站显示。 6. Elementor扩展 Elementor是一个很棒的页面编辑器，它提供了很多功能，但在使用上它有一些不完美，所以我们还要安装第三方主题插件进一步扩展它的易用性。 主题扩展 我强烈推荐你使用Astra，它的一个巨大优势是可以导入完整的网站模板，而不是一个简单的单页模板，易用性和建站速度方面会更胜一筹。 插件扩展 Elementor有很多好用的第三方扩展插件，比如 Essential Addons 和 Astra UAE，它们带有上百个模块，可以帮助你更好的设计网站。 Elementor常见问题 Elementor免费吗？ 是的，它有免费版，但也可以付费升级到Pro，价格从每年 59 美元到 399 美元不等。 Elementor速度快吗？ 它的速度很快，但前提是要搭配好用的WordPress主机。 Elementor好用吗？ 是的，该编辑器操作界面直观，非常适合刚学建站的个人或中小企业使用。 Elementor适合谷歌优化吗？ 是的，它的代码干净整洁，对 SEO 友好，很多知名的英文网站都在使用。 总结 搭建网站不是一件容易的事情，但还好我们有 Elementor 可以使用。 通过本教程，我相信你已经掌握了如何使用它建站。如果你后续还有什么问题，可以联系我们，也可以阅读我们的外贸建站教程：全流程完整指南，内容更系统更完整。

你是否觉得很奇怪，为什么你做出来的WordPress页面，跟平时看到的那些精美的网页有那么一点差距呢？明明用的都是WordPress，为什么别人的网页会那么酷炫？ 也许你会觉得那些精美的网页只有专业的网页设计师才能制作出来，但其实不然，要做出好看、高大上的网站，并不真的需要一个网页设计师，你需要的只是一个好用的页面编辑器（Page Builder）。 事实上，你看到的那些精美的网页，99%都能用Elementor这个功能强大的页面编辑器制作出来，关键，它还是免费的。 如果你想要跟专业网站设计师一样，做出各种功能强大，看起来高大上的网页的话，那你就不能错过Elementor这款强大的超过5百万个已启用安装数的免费WordPress页面编辑器插件。接下来，就跟着这篇Elementor教程学习如何使用Elementor吧。 关于Elementor 首先，让我们来了解一下Elementor。 Elementor是什么？ Elementor是一款功能强大的WordPress页面编辑器插件（Page Builder），由以色列公司Elementor Ltd.于2016年创立，并持续开发运营维护至今。 距离Elementor上线（2016年）到现在（2022年）不过短短6年，Elementor已经在整个WordPress生态圈里面产生了几乎不可取代的作用——超过500万已启用安装数，近乎全五星的好评，是目前最受欢迎的WordPress页面编辑器插件。 Elementor最大的优点是，它可以让我们通过鼠标拖曳区块的方式，无需会写任何代码也能制作出好看而且功能强大的专业网站。 Elementor的操作十分简单而且容易上手，它有很多预设区块功能，例如标题，文本，图片，图标，列表，表格等等，我们可以直接把这些区块通过鼠标拖曳到想要的地方，然后轻松地就能制作出精美的网页。 Elementor是免费的吗？ Elementor分成免费版与付费版的Elementor Pro，免费版的Elementor直接在WordPress后台插件搜索 Elementor Page Builder 即可安装启用。 免费版的Elementor提供了一些基础的区块功能，例如标题、图片、文字、视频、按钮、分隔线、图标等，其实已经挺够用的了，目前NYPanda.com使用的就是免费版的Elementor。 免费版Elementor的基本区块功能 因为如果我们仔细地去拆解网页上的元素，就会发现其实大部分网页都是由以上这些基本元素通过排列组合和变化组成的，所以如果是刚入门的小伙伴，我们建议可以先从Elementor免费版开始入手。 付费版的Elementor Pro则额外提供了更多的区块功能，例如文章列表、价格表、幻灯片、表单等等，主要是添加了动态的网页元素，能让网页看上去更加酷炫，动态效果更多。 如果要开启Elementor Pro的功能，需要前往Elementor官网购买授权，最便宜的方案是一个网站一年$49美元，不算贵但也不便宜，如果你想要做出一个极度酷炫的WordPress网站的话，那这笔投资还是值得的。 Elementor Pro也有提供30天无条件全额退款，如果在买了之后觉得用起来不习惯、或者性价比不高的话，也可以直接跟客服申请退款，不会浪费到任何钱。 另外，如果是网页设计师或者是想用Elementor专门为别人建网站的小伙伴，建议可以直接买一年$999美金可用于1000个网站的方案，多个网站分摊下来的话就会比较便宜（类似团购）。 购买Elementor Pro 用Elementor来做页面编辑器插件有什么好处？ 容易上手：Elementor的操作界面十分简单易懂，可以轻易地用【所见即所得】的方式来制作网站。就算不会写代码或者没有任何设计基础，也能轻松地通过拖曳区块（Drag & Drop）的方式，将心目中想要的网站制作出来。 快速高效：通过Elementor，在设计网页的同时，还可以给网页添加上各种强大的功能，从而同时省下了请设计师和网页工程师的费用，而且无需跟他们进行来回反复的沟通，因为在网页设计中，沟通是最大的时间成本。 适用性高：Elementor几乎可以做出任何类型的网站，无论是企业形象网站、在线电商网站、或者是线上课程网站，都能用Elementor制作出来。 支持响应式网页设计：我们可以通过Elementor调整网页在不同设备上所展现的外观，并进行预览，从而确保我们的网站在电脑、手机、平板上都能给访客提供良好的用户体验。 最多人用：Elementor目前（2022年）在WordPress后台插件中显示的已启用安装数已经超过500万了，并获得了5000多个将近满分的评价，是现在市面上最多人使用的WordPress页面编辑器插件，这代表着如果在使用过程中如果遇到任何问题，几乎都能在网上找到答案。 完整的生态圈：由于使用Elementor的人实在太多了，以至于市面上有许多的独立开发者或者公司也自行研发了Elementor的相关扩展插件，这使得Elementor逐渐拥有了一个完整的生态圈，这也意味着几乎所有类型的网站功能，Elementor都有相关方案。 如何使用Elementor页面编辑器？ 接下来，我们将会和小伙伴们分享Elementor页面编辑器的使用概念和简单操作方法。 在示范中，我们用的是Astra主题+Elementor页面编辑器，这个也是目前比较喜欢的WordPress制作页面的方案。 安装 Elementor 首先要我们要做的是安装Elementor插件，前往WordPress后台插件区域，搜索 Elementor，搜索结果可能会出来很多Elementor相关的插件，但其中只有一个是官方的。 认准上图，然后我们就安装并启用这个超过500万次已启用安装数，接近满星好评的WordPress页面编辑器 Elementor Page Builder。 禁用Elementor的默认颜色和字体 因为我们要确保用Elementor做出来页面的风格，跟我们使用的主题是一致的。 所以我们要先前往 WordPress后台 -> Elementor -> 设置， 将 禁用Elementor的默认颜色 以及 禁用Elementor的默认字体 都勾选起来， 完成之后记得点击一下 保存更改。 使用 Elementor 创建页面 设置完之后，我们新建一个WordPress页面，接着点击 使用Elementor编辑 按钮，就可以进入Elementor的编辑模式中。 Elementor页面编辑器的使用逻辑 接下来，就来到了这篇文章最重要的部分，Elementor的使用逻辑。 很久之前，如果要做一个网页，需要写HTML和CSS，如果需要动态效果的话，那还需要写JavaScript，十分麻烦。而Elementor的存在就是为了取代这些繁琐的过程，让我们无需编写代码就能创建出好看而且功能强大的网站。 有一部分刚开始接触Elementor的小伙伴，可能会觉得Elementor怎么那么复杂，想要改个颜色或者字体都不知道去哪改，也太难上手了吧。 其实这正是Elementor功能强大的体现，因为Elementor是为了取代网页前端设计三大语言HTML，CSS，JavaScript而设计出来的，所以如果在你对网页三大元素，HTML，CSS，JavaScript有了基本认识之后，就可以在接触Elementor的五分钟内抓到Elementor的使用逻辑。 但对于完全不懂这三大语言概念的小伙伴们，可能在用了Elementor好几个月之后还是会似懂非懂，使用起来不太自信，必须依赖网上的攻略和影片才能做出想要的网页。 所以，如果我们想要学习如何操作Elementor的话，还是要先对HTML，CSS，JavaScript这三大语言有基本的了解会比较好，但不用想得太复杂。 适合配搭Elementor使用的主题 有哪些主题特别适合配搭Elementor使用呢？根据官方给出来的答案，Elementor适用于所有的主题，虽然官方是这么说，但根据我们的测试，有些主题其实并不是那么适合Elementor。 例如我之前用过的Avada, Flatsome等主题，这些主题都有自带的页面编辑器，主题官方也建议配搭它们自带页面编辑器使用，所以它们并没有特别支持Elementor（不过要用还是可以用的，只是效果没有那么好而已)。 所以，当我们在挑选WordPress主题的时候，记得要先查清楚这个主题是否支持Elementor再购买哦。但不用特别担心，因为Elementor的用户群很庞大，所以通常主题官方都会特别写出来是否支持Elementor。 接下来，我会介绍三个我使用过的，并认为是目前最适合搭配Elementor使用的主题，分别适合用来搭建形象网站、电商网站和博客网站。 Astra主题 Astra主题是一个在2017年由知名开发公司Brainstorm Force所开发的WordPress主题，在短短的几年内，Astra在WordPress官方主题中，已经超过了一百万的安装次数，并获得使用者将近全五星的好评。 Astra最大的特点就是它非常的轻巧快速，与其它动不动就好几MB的主题相比，Astra主题仅有50KB。除此之外，Astra还可以高度定制，可以让你在做出一个美观且功能强大的网站之余，也能维持高速的网页载入速度。 正因为Astra的简洁以及快速，使它成为了最适合搭配Elementor页面编辑器的主题之一。 不仅如此，Astra官方也极度推荐用户使用Elementor来制作页面，并推出以Astra为基础所制作的Elementor扩展插件 Ultimate Addons for Elementor，宣示了其加入Elementor生态圈的决心。 除此之外，Astra主题搭配Elementor页面编辑器，也是全球许多WordPress大神、Youtuber、网页设计公司的主流搭配，包括小伙伴们现在正在浏览的nypanda.com，也是用Astra+Elementor制作出来的。 适合用Astra主题制作的网站：形象网站、博客网站、电商网站（几乎所有类型的网站）。 前往Astra主题官网 WoodMart主题 WoodMart主题是一款在2017年8月推出的一款WordPress电子商务主题，算是比较新的电商主题，相较于其它只兼容旧款页面编辑器的老牌电商主题， WoodMart主题可以搭配Elementor制作整个电商网站。 Elementor在制作电商网站上，一直都不算是特别有优势，因为电商网站的核心是网站背后的功能与商业逻辑，例如相关商品、商品组合、库存管理这些消费者不一定看得到的东西，并不只是在于网站是否美观。 但WoodMart在这点上很好地弥补了Elementor的不足，因为Woodmart主题有特别为这些电商功能做了开发，可以直接搭配Elementor的区块拖曳式界面，轻松地将想要的网站外观给做出来，并且电商网站该有的功能也一样完整而且强大。 适合用WoodMart主题制作的网站：电商网站。 启用Woodmart主题 有哪些好用的Elementor扩展插件 如果你感觉Elementor官方提供的区块功能不够用的话，或是有一些想要的区块功能官方版并没有提供的话，你可以另外安装一些其它公司自行开发的Elementor扩展插件，里面新增了不少官方没有提供的热门功能。 不过这类型插件也别安装太多了哦，我建议Elementor扩展插件安装2到3个就好，因为Elementor本来就属于挺占主机资源的大型插件了，如果加装太多扩展插件上去的话，容易令网站打开速度变慢。 Essential Addons for Elementor Essential Addons for Elementor（EA）是一款由知名WordPress开发公司WPDeveloper推出的Elementor扩展插件，有免费版与付费版的Pro。 免费版的Essential Addons for Elementor在WordPress后台的插件中显示已经有超过100万次安装启用，并获得将近满星的好评，因此如果你想要有更多的Elementor区块功能的话，可以先安装免费版来使用。 EA新增了大约77 种不同的Elementor扩展功能，比如说Elementor最缺乏的表格（Table）功能，如果你想要制作出美观又易懂的资料图表，那么EA提供的进阶图表功能，相信会符合你的需求。 如果小伙伴们有兴趣的话，可以参考EA的官方网站，里面有许多功能的Demo可以让小伙伴们一一查看。 启用Essential Addons for Elementor插件 Ultimate Addons for Elementor Ultimate...