弹出切换

的 弹出窗口切换字段 是打开时打开一个小弹出器子控件的开关。elementor对自己的可选功能集群使用相同的模式,并且在主插件内部 小部件生成器 它对您的自定义小部件执行相同的工作:一组相关设置隐藏在一个切换后面,而不是用整个额外部分来挤满面板。

Popover Toggle 支持 条件 就像每个控件一样,弹出窗口内的每个字段都有自己的组合令牌, {{ toggle_field }},由渲染 Twig-语法模板引擎.指南都涵盖了设置和限制。

Popover Toggle 与普通值字段不同,它是结构性的,它本身保持开/关状态,并且它以组合名称携带其值到达模板的子字段。该模型的两半在下面都用工作叠加示例覆盖。

Popover Toggle 字段的作用 #

• 渲染切换 widget 的面板中,其中包含您的开和关标签。
• 打开儿童控制弹出窗口 打开时,定义在字段的弹出字段列表中。
• 接受大多数童年价值领域类型的,(如颜色、文本、选择和滑块)字段。
• 将切换状态暴露到您的模板 作为打开时的真实值和关闭时的空字符串。
• 暴露每个子值 在一个组合名称下,将父母和孩子的名字与下划线连接起来。

如果小部件构建是新领域,请阅读 小部件生成器概述 首先。

在开始之前 #

• 文字出版社 与 元素 已安装并处于活动状态。
• Elementor 的主插件 已安装并处于活动状态。插件新增?参见 安装指南.
• Widget Builder 编辑器中打开的自定义小部件,我们的示例是一个图像横幅小部件,带有可选的颜色覆盖层:一个名为的切换 overlay、一个彩童命名 color.

如何添加弹出切换字段 #

在 Widget Builder 编辑器中,滚动左侧的字段面板,直到找到 弹出切换 字段,与其他结构字段(例如选项卡和中继器)一起列出。

将其拖入下面的一个部分 内容 或 风格 tab,可选设置所属的地方,一旦它落地,字段的选项就会在左侧打开,主要工作是定义弹出程序将持有的子字段。

Popover 切换字段选项进行了解释 #

• 标签: elementor 中切换旁边的文本,例如 “Overlay”。
• 名称: 例如,仅切换、字母、数字和下划线的唯一标识符 overlay。孩子的名字建立在它之上,所以保持简短。
• 标签打开/标签关闭: 开关上显示的两种状态,例如“是”和“诺”。
• 返回值: toggle 打开时存储的值, “yes” 默认情况下。Off 存储一个空字符串。
• 弹出字段: child 控制在弹出窗口内部。大多数值字段类型都是允许的;我们的示例包含一个名为的单一颜色字段 color.
• 描述、显示标签、分离器和条件涵盖了常用的显示选项。

阅读模板中的切换及其子项 #

两个命名规则涵盖了该字段产生的所有内容。

的切换本身 is on its own name。开时打印返回值, 关时打印空字符串, 这就使其成为自然条件:

{% if overlay %} ... {% endif %}

请注意,存储的值是 Return Value 字符串,“yes”默认情况下,不是布尔值。按照示例的方式测试真实性;将字段与 true never 匹配进行比较。

每个孩子 可作为父名和子名并带有下划线。 color 的孩子 overlay 弹出窗口变成 overlay_color。放在一起, 横幅的覆盖层在HTML面板中是这样的:

<div class="banner-media">
  <img src="{{ banner_image }}" alt="">
  {% if overlay %}
  <div class="banner-overlay" style="background: {{ overlay_color }}"></div>
  {% endif %}
</div>

Toggle off,根本没有覆盖div渲染。Toggle on,div以编辑器选择的任何颜色出现。添加更多孩子,每个孩子都遵循相同的模式:一个孩子的名字 opacity 会读作 {{ overlay_opacity }}.

小心:这里没有点符号。 {{ overlay.color }} resolves to nothing,因为孩子被压扁为下划线连接的名字,而不是嵌套在父级下面,如果一个子值空出来,先检查一下组成的名字。

在 Elementor 中使用弹出切换 #

Elementor 中的页面中添加小部件,或者如果页面已经打开,则重新加载编辑器。控件显示为标记开关。

Flip on,弹出窗口打开,子控件在banner示例中,编辑器选择一个覆盖颜色,该图层在预览中的图像上逐渐消失,切换切换关闭会再次将其删除,而不会丢失所选颜色。

常见用例 #

• 图像和视频叠加、一个开关后面有颜色和不透明度儿童。
• 可选徽章 在卡片上,肘节显示徽章,孩子们设置其文本和样式。
• 悬停效果设置 只有当效果启用时,这才重要。
• 倒计时或时间表选项 在有时有时间限制的横幅上。
• 次要按钮的,将第二个按钮的文本、链接和样式放在视线之外,直到需要为止。

使用 Popover Toggle 字段的技巧 #

• 将依赖标记包装在 {% if parent %}. Toggle的全部观点是,孩子只有在它打开时才重要;模板应该反映这一点。
• 写下划线的孩子名字。 父母 overlay 加孩子 color 於 {{ overlay_color }},从来没有 {{ overlay.color }}.
• 保持父名的简短。 每个子代币都重复父名,并且 {{ overlay_color }} 读得比 {{ banner_image_overlay_settings_color }}.
• 将其用于真正可选的集群。 设置小部件始终需要属于打开面板;弹出窗口适用于有时的功能。
• 给孩子合理的默认值。 Toggle 翻转的那一刻,该功能应该看起来是有意的而不是无风格的。

常见问题 #

包裹起来 #

Widget 生成器弹出切换切换字段保持小部件面板的诚实:日常控制保持可见,可选集群在开关后面等待。将其与 {% if parent %} 围绕标记和下划线连接的孩子们的代币,并且该功能可以干净地打开和关闭。其他结构模式请参见 中继器场的,它处理列出与此字段处理选项相同的方式探索其余部分 主插件小部件和扩展,并看到 定价页面 对于每个计划包含的内容。