的 选择字段 widget的选项面板中放入一个原生下拉,你定义了一组固定的选择,用户选择一个,你的模板对选择做出反应:一个不同的布局类,一个不同的标记块,一个不同的css值,在主插件里面 小部件生成器中, 选择是任何具有少数命名变体的主力。布局样式,悬停效果,排序顺序,那种决定。
选择选项值是天然燃料 条件:只有在选择特定选项时才能出现其他控件。相同的值在 中工作 Twig-语法模板引擎 有检查之类的 {% if layout == "card" %}(如 1), 因此一次下拉可以同时切换面板和标记。
1个细节塑造了这个doc中的每一个模式,你的模板收到的值是选项的键,你选择的一个短段子,而不是用户看到的人类可读标签,键进入类名和比较;标签停留在面板中。
Select 字段的作用 #
- 呈现标准下拉 elementor面板中,使用相同的本机选择控制核心小部件。
- 持有固定集合中的一个值 您将键和标签对定义为。
- 将选定的密钥输入模板、准备好修改器类或
{% if %}块。 - 驱动器 其他控制装置的条件因此,选择“盒装”可以揭示“最小”隐藏的边框颜色区域。
- 支持响应式标志的,让用户为每个设备选择一个不同的选项。
如果您是构建小部件的新手,请从以下内容开始 小部件生成器概述 首先。
在开始之前 #
- 文字出版社 与 元素 已安装并处于活动状态。
- Elementor 的主插件 已安装并处于活动状态。插件新增?参见 安装指南.
- Widget Builder 编辑器中打开的自定义小部件,我们的示例是一个带有 “布局样式” 下拉式产品的定价表小部件,提供盒装、最小和概述的变体。
如何添加"选择"字段 #
在"小部件生成器编辑器中打开您的小部件,然后查看左侧的"字段面板。 选择 与其他选择字段坐在一起。
将其拖入下面的一个部分 内容 或 风格 tab。us 这样的布局切换器属于 Style;内容相关的选择,像排序顺序一样,适合 Content,一旦落地,字段的选项就会在左侧打开。
选择已解释的字段选项 #
- 标签: elementor 中下拉位置旁边显示的文本,例如 “布局样式”。
- 名称: 仅字段、字母、数字和下划线的唯一标识符。例如,您的模板引用此名称
layout_style. - 选项: chooses本身,每个键加一个标签,键是你的模板接收到的;标签是用户读取的,保持键短,css-safe:
boxed,minimal,outlined. - 默认: widget 第一次掉落到页面时所选的键。将其设置为您最好看的变体。
- 响应式: 添加设备图标,以便每个断点拾取器可能会有所不同。
- 描述、显示标签、分离器: 标准显示设置,以及仅在另一个控件具有一定值时显示字段的条件。
将选择连接到您的模板 #
Select 用一个普通的令牌打印它的值,那个值总是 键的, 从来没有标签。两种图案几乎涵盖了每一种用途。
修改器类。 将密钥直接打印到类属性中,然后让您的 CSS 选项卡执行其余操作:
<div class="pricing layout--{{ layout_style }}">
...
</div>采摘“盒装”渲染 layout--boxed还有一个规则,比如 .layout--boxed { border: 1px solid #e2e2e2; } 接管。三个变体变成三个短 CSS 块。HTML 从不分支。
有条件标记。 当变体需要不同的 HTML(而不仅仅是不同的样式)时,请与密钥进行比较:
{% if layout_style == 'boxed' %}
<div class="pricing-frame"> ... </div>
{% elseif layout_style == 'outlined' %}
<div class="pricing-outline"> ... </div>
{% else %}
<div class="pricing-plain"> ... </div>
{% endif %}这里要注意一件事:比较必须使用密钥。 {% if layout_style == 'boxed' %} 工作,同时 {% if layout_style == 'Boxed Layout' %} silently 从不匹配,你不会得到任何警告,如果有条件拒绝开火,请在怀疑其他任何事情之前检查密钥拼写。
使用 Elementor 中的选择控件 #
Elementor 中将自定义小部件放到一个页面上,如果在您保存小部件之前该页面已经打开,请先重新加载编辑器,因为 Elementor 会保留旧的控制配置,直到您选择小部件,下拉会显示在您设置的标签下的面板中,默认选项会预先选择。
选择不同的选项并立即更新预览。修改器类发生变化,您的 CSS 变体会启动,并且在此字段上条件限制的任何控件都会出现或消失以匹配。
常见用例 #
- 布局变体 例如盒装、简约和概述的卡片样式来自一个小部件。
- 悬停和动画预设 其中每个键映射到具有自己转换的 CSS 类。
- 排序和订购选择 对于列表样式小部件,最新的第一或按字母顺序排列。
- 标题标签选择器 通过条件块将 h2 交换为 h3。
- 条件驱动程序 根据所选密钥显示或隐藏其他字段的整个组。
使用 Select 字段的提示 #
- 密钥是代码的,标签是人的。 使用诸如此类的蛞蝓
boxed作为密钥并将友好的措辞保存为标签。 - 保持密钥 CSS 安全。 小写字母、数字和连字符或下划线干净地打印成类名称。
- 与钥匙进行比较,而不是标签。 这是选择条件永远不匹配的最常见原因。
- 与条件类相比,更喜欢修饰类 仅造型发生变化时。模板保留一个块,变体位于 CSS 中。
- 用选择来驱动条件。 与切换器一样,它是显示或隐藏其他字段的常用控制。
- 设置合理的默认值 因此,小部件在被丢弃时看起来是有意为之的。
常见问题 #
主插件小部件生成器中的选择字段是什么?
Select 字段为自定义 Elementor 小部件添加一个本机下拉。您将选择定义为键和标签对,用户在面板中选择一个,您的模板将选定的键通过接收 {{ field_name }} 用于类名、条件或 CSS 值。
模板是标签还是钥匙?
关键。如果你的选项是 boxed 然后使用"“盒装布局”标签 {{ layout_style }} 打印 boxed和比较喜欢 {% if layout_style == 'boxed' %} 必须使用该键。该标签仅出现在 Elementor 面板中。
如何根据选择更改小部件的外观?
例如,将密钥打印到修饰符类中 class="layout--{{ layout_style }}"CSS 选项卡中, 并每变体写一个 CSS 规则, 对于结构差异, 将 HTML 分支为 {% if %}, {% elseif %}、和 {% else %} 而是块。
Select 可以显示或隐藏其他字段吗?
是。每个小部件生成器字段都支持条件,而选择是通常的驱动程序之一。将边框颜色字段设置为条件 layout_style 等于 boxed 仅当该布局处于活动状态时才会出现。
每个设备的选择会发生变化吗?
是。启用响应式选项,控制将获得Elementor中的设备图标,因此桌面可以在移动设备回落到最小值时运行盒装布局。
Select 和 Select2 有什么区别?
选择是普通的本机下拉:从短列表中选择一个。 选择2 dropdown内部添加搜索,以及返回一系列按键的可选多模式,对于长列表或多重选择,可以达到select2;对于三到六个变体,普通的select更轻。
包裹起来 #
Widget Builder 选择字段将命名变体变成一键选择。定义键和标签,将键打印成修饰符类或一个 {% if %} block,并且每个布局决策都移动到 Elementor 面板中,当列表变长或一个 pick 不够时,向上一步到 选择2字段。探索其余部分 主插件小部件和扩展,并看到 定价页面 对于每个计划包含的内容。
