设置面板介绍

的 主插件小部件生成器 elementor面板中把自己的html、css、javascript变成一个真正的elementor小部件,具有可编辑控件,你设计选项面板,用短代码将其连接到你的代码,小部件的行为就像任何原生elementor元素一样,没有php,没有插件样板,没有单独的代码编辑器来杂耍。

两个系统运行在此处描述的所有内容之下: 条件 让任何控件根据另一个字段的值显示或隐藏,并且 Twig-语法模板引擎 将您的字段名称转换为代币, {% if %} 检查,和 {% for %} HTML、CSS、JS 选项卡中的循环。两个指南都涵盖了设置和限制。

本指南完全按照屏幕上显示的方式浏览 Widget Builder 选项面板:添加新小部件、将字段拖入内容、样式和高级选项卡、编写代码、使用动态短代码、加载 CDN 库,最后导出或导入小部件作为 JSON 文件。您可以在上面找到该功能 小部件生成器页面 并且内部充满 小部件和扩展 列表。

Widget Builder 的作用 #

大多数插件都会为您提供一组固定的小部件。这个为您提供了制作自己的工具。您从现成的字段类型(标题、文本、颜色、数字、维度、切换器等)组装一个选项面板,放入代码,并使用简单的短代码令牌将字段绑定到该代码。保存小部件,主插件会注册一个短代码和一个元素器小部件,您可以拖动到任何页面。

CodePen 风格的片段和完全可编辑的 Elementor 小部件之间的桥梁来考虑,一旦构建完成,团队中的任何人都可以调整 Elementor 编辑器的颜色、间距和文本,而无需打开源代码。

在开始之前 #

• 文字出版社 与 元素 页面构建器已安装并处于活动状态。
• Elementor 的主插件 已安装并处于活动状态。插件新增?关注 安装指南 首先。
• 基本 HTML 和 CSS。 JavaScript 是可选的,仅交互式小部件需要。

打开小部件生成器并添加新小部件 #

从 WordPress 仪表板,转到 主插件 → 小部件生成器。这打开了 主插件小部件 screen, 它会列出您构建的每个自定义小部件及其类别、作者和生成的短代码, 在顶部您将看到三个按钮: 添加新小部件, 导入小部件、和 视频教程.

单击 添加新小部件. A 创建新小部件 对话框显示有两个字段:

• 小部件标题 (必填):您的小部件的描述性名称,例如“英雄部分”, 这是您稍后将在 Elementor 面板中搜索的内容, 因此使其成为您将识别的东西。
• 小部件类别:小部件分组在(默认情况下为收藏夹)下的元素器类别。类别将您的自定义小部件组织在编辑器中。

输入标题,选择类别,然后单击 保存更改。主插件为您的新小部件打开小部件生成器编辑器。

Widget Builder 界面内部 #

建筑商分为三个工作区域,从左到右:

• 字段面板(左): 您拖入小部件的可搜索控制类型库,例如标题、文本、文本区域、URL、颜色、数字、切换器、选择、选择、所见即所得、代码和日期时间。
• 设置面板(中心): 的 内容, 风格、和 高级 tabs,您可以在其中将这些字段排列成部分,这是您的用户将在 Elementor 中看到的实际选项面板。
• 代码面板(右): 的 HTML, CSS, JS、和 包括 编写标记、样式、脚本和库参考的选项卡。

顶栏包含小部件名称,旁边有一个设置齿轮图标,另外还有 预览 並 保存设置 按钮。

构建选项面板:内容、样式和高级选项卡 #

这是您设计控件的地方。从左侧面板中选择一个字段并将其拖入下面的一个部分 内容, 风格、或者 高级 tab。遵循相同的逻辑 Elementor 使用:内容下的文本和链接,样式下的颜色和排版,高级下的间距和布局。

每个部分都有一个 节标题 (节头所示的标签)和a 部分名称(code) 中, 您将参考的唯一标识符。根据小部件的需要添加尽可能多的部分和字段。

例如,掉落a 色域 入样式选项卡,让用户重新着色小部件,以及 a 尺寸场 入高级选项卡,控制所有四个侧面的填充。如果您想要完整的选项列表,每个字段类型都有自己的文档。

动态短代码:将字段连接到您的代码 #

Zhe是把一切联系在一起的部分,你添加的每一个字段,都生成一个 短代码令牌并且这些代币出现在 文档 代码编辑器旁边的侧边栏。添加颜色字段即可获得 {{color}}。添加维度字段即可获得 {{dimensions}}.

HTML、CSS 或 JS 中掉落这些令牌,无论你想让字段的值落地到哪里,当用户在 Elementor 中更改该控制时,Master Addons 会将令牌换成实时值,因此你的代码保持动态,需要记住的一件事:只有匹配字段在面板上时,令牌才存在,因此先构建该字段,然后引用其短代码。

添加您的 HTML、CSS 和 JS #

面板和短代码准备好后,切换到右侧的代码选项卡并粘贴您的标记、样式和脚本。

HTML 选项卡: 写入小部件结构并将短代码令牌放置在动态值所属的位置。

CSS 选项卡: style the markup。引用相同的短代码令牌来拉取面板中选择的颜色和尺寸。

JS 选项卡: javascript 添加任何交互行为,如悬停效果或滑块。普通香草 JS 有效,一旦您将其加载到 Includes 下,jQuery 也有效。

如果您只需要面板内的代码字段而不是主编辑器,则 代码字段 将语法突出显示的输入放入控件中。

包括:加载 CDN CSS 和 JS 库 #

打开 包括 tab 来附加外部库, 您的小部件取决于。有两个列表: CSS 库 並 JS 图书馆.每加一个 手柄 (一个独特的名字)和一个 源 URL 或注册句柄的,然后点击 添加CSS 或 添加 JS.

CDN 或 jQuery 中拉入类似 Font Awesome 的东西,而无需编辑主题,主插件仅在小部件实际位于页面时才对库进行排队,因此您的其他页面保持干净。

小部件内部需要图标吗?主插件还捆绑发货了八个 图标库 您无需外部 CDN 呼叫即可使用。

小部件设置:标题、图标、类别和导出 #

单击 齿轮图标 在要打开的顶部栏中的小部件名称旁边 小部件设置 在左侧面板中。从这里您可以控制小部件在 Elementor 内部的呈现方式:

• 小部件标题: rename 小部件。此标题显示在元素小部件列表中。
• 小部件图标: 击 更改图标 master Addons 图标选择器中选择一个图标, 您可以使用任何包含的图标或字体真棒类。
• 小部件类别: 选择小部件显示在下面的元素类别,以便它与相关小部件分组。
• 导出小部件: 将整个小部件配置导出为 JSON 文件,您可以保存、备份或与任何人共享。

图标选择器将数千个图标分组为所有图标、元素图标、简单线图标、图标字体图标、线性图标和材料图标等类别。按名称过滤,选择一个,然后单击 插入.

JSON 文件导入一个小部件 #

分享是双向的。回到 主插件小部件 屏幕,单击 导入小部件 按钮。该对话框可让您拖放 a .json 文件,或浏览它。仅 .json 支持从 Widget Builder 导出的文件。

JSON文件的小部件的任何人可以导入它,面板,代码,包含,以及所有,然后在几秒钟内在自己的网站上使用它。这使得小部件构建器成为跨项目重用小部件或将它们交给客户端的整洁方式。

构建可靠的自定义小部件的提示 #

• 明确命名部分。 节名称最终会出现在您的代码中,因此请保持其简短且有意义。
• 在引用其短代码之前添加一个字段。 Token 仅在匹配字段位于面板上之后才存在。
• 经常使用预览。 保存前检查实时预览,以便您尽早而不是在实时页面上发现丢失的令牌。
• 通过 Include 加载库,而不是内联。 它可以保持代码干净,并且仅在需要的地方加载脚本。
• 随用随导。 JSON 导出可兼作您的备份和共享文件。
• 在 Elementor 中没有看到您的小部件? 检查 故障排除指南 用于可见性修复。

常见问题 #

包裹起来 #

Master Addons Widget Builder 缩小了代码片段和生产 Elementor 小部件之间的差距。构建面板,编写 HTML、CSS 和 JS,用短代码令牌连接起来,加载您需要的任何库,然后导出或导入结果作为 JSON。查看其余部分 主插件小部件库 看看你还能建造什么。