切换器

Switcher 字段会将开/关切换添加到您使用主插件构建的自定义小部件中 小部件生成器。这是使小部件的一部分可选的标准方法:徽章,图标,紧凑的布局。编辑器在Elementor中翻转切换,您的模板会做出反应。

Switcher是免费版的小部件生成器中可以使用的字段之一,免费插件包含有限的小部件生成器,全套字段自带 硕士插件专业版.

Switcher 字段的作用 #

• 将 Elementor 的开/关切换添加到小部件的面板。
• 拯救 返回值 (yes 默认情况下)打开时为空,关闭时为空值。
• 与合作 {% if %} 在您的模板中,因此只有当切换打开时才会出现标记。
• Conditions 方式隐藏和显示面板中的其他字段,这会使面板保持短时间,直到使用某个选项为止。

建筑商的新手?阅读 小部件生成器概述 首先,然后打开小部件返回。

在开始之前 #

• WordPress 已安装并处于活动状态。
• 已安装并激活的 Elementor 主插件。 安装指南 盖设置。
• Widget 生成器中打开的一个小部件, 本指南中的示例是一个带有两个切换器的 “Promo 卡” 小部件: show_badge其中显示丝带和徽章文本字段,以及 compact_mode的,这就把卡片紧了。

如何添加切换器字段 #

1. 去 主插件 > 小部件生成器 并打开您的小部件。
2. 在选项卡上添加选项所属部分。像"显示徽章"这样的内容选项适合 内容 选项卡。
3. 类型 switch 在左侧的字段搜索框中。
4. 拖动 切换器 into the section。点击字段上的铅笔, 打开它的设置。

切换器字段选项已解释 #

• 标签: elementor 中切换旁边的文本,例如 “显示徽章”。
• 名称: field的唯一id及其令牌的名称。仅使用字母、数字和下划线,例如 show_badge.
• 描述: elementor 中切换项下显示的提示。
• 标签上 並 标签关闭: toggle内部的短词。elementor在toggle打开时显示标签打开,在关闭时显示标签关闭,因此对于布局选项,“compact”和“normal”的读数比"是"和"否"更好。
• 返回值: 字段在打开时保持的值。将其留在 yes 除非代码中的某些内容需要不同的字符串。
• 默认值: yes 和 No。 Yes 的下拉意味着新添加的小部件从打开切换开始。

关于这个面板,两件值得了解的事情。Label On 和 Label Off 下的帮助文本被交换,Label Off 行以一个杂散的额外 T 开头。两个标签仍然按照您期望的方式工作:Label On 是切换打开时显示的单词。

保持返回值和默认值步进 #

默认值下拉始终保存 yes 为是的,无论你在返回值中输入什么。那个组合会失火。在我们的测试中,一个具有返回值的字段 enabled 而默认值是这样出来的:

• Elementor 中的切换显示为"关闭"。
• 保存的价值仍然 yes如此 {% if %} 将字段视为打开并渲染标记。
• 编辑器单击一次切换后,面板和页面才再次同意,将值设置为 enabled.

因此,只有当您还计划启动该字段时才更改返回值(默认值设置为否)。对于其他所有内容,请将返回值保留为 yes.

在模板中使用切换 #

Switcher 在关闭时为空,而空值在模板引擎中为假,因此 {% if %} is all you need。推广卡html使用一个切换器进行标记, 一个用于一个类:

<div class="promo{% if compact_mode %} promo--compact{% endif %}">
  {% if show_badge %}
  <span class="promo-badge">{{ badge_text }}</span>
  {% endif %}
  <p class="promo-title">{{ promo_title }}</p>
  <p class="promo-text">{{ promo_text }}</p>
  <a class="promo-button" href="#">Claim the offer</a>
</div>

徽章掉了,整个 span is 从页面中消失, 而不仅仅是隐藏。紧凑类在CSS面板中切换了几条规则:

.promo--compact { padding: 18px 22px; }
.promo--compact .promo-title { font-size: 20px; }
.promo--compact .promo-text { display: none; }

您也可以比较该值,如 {% if show_badge == 'yes' %}的,但与返回值进行比较,而不是与标签上的文本进行比较。 {% if show_badge == 'Yes' %} 永远不匹配。平原 {% if show_badge %} 形式避免了问题。

离开 选择器 box empty for this字段,一个切换值不是一个CSS值,所以样式化属于像上面这样的类后面的CSS面板。

隐藏其他字段,直到切换打开 #

Switcher 的后半部分是这个,在你想隐藏的字段上,打开它的设置,滚动到 条件 然后单击 添加条件。对于徽章文本字段:

• 控制名称: show_badge的, 切换器的名称。
• 平等: 等于。
• 控制值: yes、切换器的返回值。

徽章文本现在仅在显示徽章时出现在元素器中。请参阅 条件 对于其他运营商。

在 Elementor 中使用切换器控件 #

将小部件添加到页面中,或者如果页面已经打开,则重新加载编辑器。切换位于您的标签下方,其中包含"标签打开"或"标签关闭"字样。立即单击它并更新预览,并且任何带有条件的字段都会同时出现或消失。

这是前端的成品卡片,徽章已打开,紧凑模式也已打开,并且两个开关均已关闭:

常见用例 #

• 可选徽章、丝带和图标。
• 紧凑或密集的布局变体。
• 显示或隐藏辅助按钮、页脚注释或分隔符。
• 主开关,显示面板中的一组相关字段。

Switcher 领域的工作技巧 #

• 离开返回值 yes. 它使切换、默认值和您的条件保持同步。
• 在显示的内容之后命名该字段的,如 show_badge 或 compact_mode.名字读起来像是问题 {% if %}.
• 为选项写入标签并关闭标签的, 不仅仅是是和否, 当这两个州有名字。
• 将其与条件配对 因此,选项所需的字段仅在打开时才会显示。
• 超过两个州? 使用 选择字段 对于下拉或 选择字段 为图标按钮。

常见问题 #

包裹起来 #

添加切换器,给它一个清晰的名称和标签,将返回值保留在 yes并将标记的可选部分包装进去 {% if %}。在选项需要的字段中添加一个条件,面板会保持短状态,直到编辑器打开它。对于三个或更多状态,请参阅 选择 並 选择 字段,然后检查 定价 对于每个计划包含的内容。