条件

的 条件 option决定当一个控件出现在小部件的elementor面板中,而不是一直显示每个字段,您可以将控件的可见性与另一个控件的值绑定:仅在按钮切换打开时显示按钮url,或者仅在布局下拉显示“with Image”时显示图像字段。

主插件中的每个字段 小部件生成器 从简单开始,携带此选项 文本字段 to a full Typography group。come控件设置一次,默认情况下您的面板会保持短,只有当一个选择使它们具有相关性时才会出现额外的选项。这与您在Elementor自己的小部件中看到的行为相同。

条件选项的作用 #

A 条件是一个小规则,有三个部分:看哪个控件,怎么比较,对比什么值,规则通过时,你的控件出现在面板中,失败时控件保持隐藏状态。

每个条件卡都有三种设置:

• 控制名称: 您要查看其值的字段。这是一个下拉列表,列出了小部件中的每个控件,按部分分组,因此您选择目标而不是输入其名称。
• 平等: 如何比较。 等于 当观看的字段与您的值匹配时显示控件。 不平等 当字段包含其他内容时显示它。
• 控制值: 例如,要比较的值以纯文本形式输入 yes, no或者选择选项值,例如 layout-2.

您可以使用以下功能根据需要堆叠任意数量的条件 添加条件 button。control 有一个以上的条件时,必须全部通过后才出现控件,同一场域可以观看的控件数量没有限制,所以一个切换器可以一次揭示五个相关的选项。

在开始之前 #

• 文字出版社 与 元素 已安装并处于活动状态。
• 硕士插件专业版 已安装并处于活动状态,因为完整的小部件生成器是 Pro 功能。查看 安装指南 如果您正在设置新鲜。
• Widget Builder 编辑器中打开的自定义小部件,至少有两个控件,一个用于观看,一个用于显示或隐藏。新建的?阅读 小部件生成器概述 首先。

在哪里找到条件选项 #

在"内容、"样式或"高级选项卡中选择小部件选项面板中的任何控件。该字段的设置在左侧打开。向下滚动越过标签、名称和默认值等主要选项,您将找到 条件 盒子位于控制类上方,有一个 添加条件 按钮和注释 “设置何时应可见该控件的条件”。

Box 开始为空,这意味着控件始终可见,那是每个字段的默认值。

如何添加条件 #

Conditions at work最清晰的看法是经典的切换模式:一个开关器,可以打开和关闭第二个按钮,我们的示例小部件有一个按钮部分,其中有一个 开关器字段 名字 show_second_button另外 second_button_text 並 second_button_url 仅当切换器打开时才应出现的字段。

1步:选择要显示或隐藏的控制 #

单击 second_button_text widget的选项面板中的字段。它的设置在左侧打开。状态始终存在于显示或隐藏的控制上,而不是存在于被监视的字段上。

2步:点击添加条件 #

滚动到"条件"框并单击 添加条件.控制名称、等式、控制值三种设置出现条件卡,转角红色X移除卡片。

3步:选择控制观看 #

打开 控制名称 dropdown。widget 中的每个控件都列在那里, 分组在其部分标题下, 因此更大的 widget 保持易于导航。Pick show_second_button。下拉预先填充卡创建时当前字段的自身名称,因此请确保将其切换到实际要观看的字段。

4步:设置等式和控制值 #

离开 平等 上 等于 和类型 yes 进入 控制值,因为交换机存储 yes on 时和关闭时为空值,完成后的规则为:显示此控件 when show_second_button 等于 yes.

5步:重复并保存 #

添加相同的条件 second_button_url的,然后点击 保存设置。两个字段现在一起跟随切换器。

在《元素》中测试它 #

Elementor中将您的小部件添加到页面中,或者如果页面已经打开,则重新加载编辑器。关闭切换器后,第二按钮文本和第二按钮URL控件在面板中不见。该部分看起来短而干净。

打开切换器,两个控件都出现在它的正下方。无需重新加载页面,也无需在两者之间保存。元素器在用户编辑时实时检查条件。

您应该在控制值中输入什么值? #

Control Value 字段取了观看控件的存储值, 这并不总是你在面板中看到的标签, 几乎每个“我的条件不起作用”报表都归结为这种不匹配, 所以以下是每个字段类型实际存储的内容:

• 切换器: 商店 yes 打开时。使用 Equal + yes 在切换打开时显示控制,或者不等于 + yes 在切换关闭时显示它。
• 选择并选择2: 存储选项 价值不是选项标签。如果您的下拉有标记为 “布局二”的选项,其值为 layout-2的,条件必须使用 layout-2.
• 选择: 存储所选选项的键,例如 left, center、或者 right.
• 文本和文本区域: store 准确地存储用户键入的内容。自由文本字段上的条件需要精确匹配, 因此它们最适合检查字段是否等于特定的期望值。
• 数: 将数字本身存储为一个值,因此 3 匹配输入 3。

Dropdown 风格的控件制作最可靠的条件源,因为它们的值来自一个固定的列表,如果你是从头开始设计一个小部件,请从 Switcher 驱动你的条件, 选择并且选择字段,并让文本字段成为显示或隐藏的控件。

使用多种条件 #

单击 添加条件 amain 堆叠同一控件上的第二条规则,列表中的每个条件必须同时通过,控件才能显示出来,把它当成一个 AND 链:条件一 AND 条件二 AND 条件三。

1个实例: 徽章色域, 启用徽章, 徽章样式设置为自定义时才应出现, 两张卡片处理:

• show_badge 等于 yes
• badge_style 等于 custom

卡之间没有 OR 模式,如果需要 “显示 A 或 B”时,请尽可能将逻辑与 Not Equal 翻转,或重组源控件,以便一个下拉值覆盖外壳。

条件跨选项卡工作 #

Watch控件不必与您隐藏的控件位于同一部分甚至同一选项卡中,样式选项卡色域可以依赖于内容选项卡切换器,而无需任何额外的设置。Widget Builder 找到控件所在的位置,在内容、样式或高级中,并将条件连接到生成的部件中的正确位置。

这就是像这样的面板背后的图案 边境领域(width) 和颜色控件, 只在选择边框类型后才会出现。通过 Conditions, 您自己的小部件会得到相同的行为:仅在打开匹配内容功能时才浮出水面的样式选项。

常见用例 #

• 可选元素: 第二个按钮、徽章或字幕的切换器,仅在启用时才会显示其文本、链接和样式字段。
• 布局变体: a 选择布局控件,它显示图像布局的图像字段,并隐藏仅文本布局的图像字段。
• 样式分支: “自定义颜色”切换可解锁一组颜色选择器,为使用默认值的每个人保留样式选项卡的缩写。
• 链接行为: URL 和目标选项,这些选项仅在 “使此可点击”打开时才出现。
• 隐藏式高级设置: 隐藏在 “启用高级选项”切换器后面的额外选项,因此休闲用户永远不会滚动经过它们。

使用条件的技巧 #

• 故意设置源控件的默认值。 如果切换器默认为关闭,则当小部件丢弃在页面上时,每个相关控件都会开始隐藏。决定您想要哪个第一印象。
• 检查存储的值,而不是标签。 当条件从不触发时,通常的罪魁祸首是与选项标签匹配的控制值,而不是选项值。
• 在接线条件之前更改源字段的名称。 条件按名称引用控件,因此在多个控件之后重命名字段取决于它意味着重新访问这些条件卡。
• 隐藏的仍然渲染。 Conditions 控制面板可见性,如果控制器的令牌打印在您的 HTML 中,保存的值仍然会在前端渲染,当元素本身应该消失时,将条件与标记中的匹配逻辑配对。
• 一节中的群相关字段。 当切换器显示三个字段时,将它们放在切换器正下方,使得编辑页面的人的因果关系变得显而易见。

常见问题 #

包裹起来 #

Conditions 将一个平坦的控件列表变成一个面板, 对自己的设置做出反应 选择要观看的控件, 选择相等或不相等, 键入值, 并在不够时堆叠额外的规则 由于每个 Widget Builder 字段都支持该选项, 因此相同的模式涵盖了切换按钮、依赖于布局的图像和可解锁的样式部分, 并将其与 切换器 並 选择 获取可靠来源的字段,请浏览其余部分 主插件小部件和扩展,并看到 定价页面 对于每个计划包含的内容。