选择

"选择"字段会向您使用主插件构建的自定义小部件添加下拉 小部件生成器。你设置了一个固定的选择列表,编辑器在Elementor中选择一个,你的模板会发生变化以匹配:一个不同的布局类,一个额外的徽章,一个不同的标记块。这是用于命名变体的字段,如卡片样式,徽章类型或排序顺序。

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

Select 字段的作用 #

• Elementor 中为小部件的面板添加一个标准下拉。
• 让编辑器从您定义的列表中选择一个选项。
• 保存选项 键 (例如) outlined的),而不是编辑器看到的标签。
• 打印该密钥,无论您将其标记放置在何处,例如 {{ layout_style }}的,所以你可以把它当成一个类使用,也可以用它来检查 {% if %}.

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

在开始之前 #

• WordPress 已安装并处于活动状态。
• 已安装并激活的 Elementor 主插件。 安装指南 盖设置。
• Widget 生成器中打开的小部件, 本指南中的示例是一个具有两个选择字段的 “计划卡” 小部件: layout_style (盒装, 最小, 概述)在样式选项卡和 badge (无徽章, 最受欢迎, 新)在内容选项卡上。

如何添加"选择"字段 #

1. 去 主插件 > 小部件生成器 并打开您的小部件。
2. 选择设置所属的选项卡并添加一个部分。像布局样式这样的外观和感觉选择适合 风格 tab,例如在“卡式”部分。
3. 类型 select zai左边的字段搜索框中, 出现两个字段:Select和Select2。
4. 拖动 选择 into the section。点击字段上的铅笔, 打开它的设置。

Select 从短列表中保留一个选择,如果编辑器需要搜索长列表或选择多个选项,则使用 选择2 相反,这是一个专业领域。

选择已解释的字段选项 #

• 标签: elementor 中下拉旁边的文本,例如 “布局样式”。
• 名称: field的唯一id及其令牌的名称。仅使用字母、数字和下划线,例如 layout_style.
• 描述: elementor 中下拉下显示的提示。
• 选项: 每选一行。左框是 键 您的模板收到,正确的框是 标签 editors see。x 1000 (1000),请使用 1000 (1000) 键,然后使用 1000 键,然后使用
• 默认值: widget 的新副本的选项以。下拉显示标签,但字段保存了密钥。

新的 Select 字段包含三个示例行, value-1 到 value-3 带选项 1 到选项 3 的标签。在使用小部件之前,用您自己的密钥和标签替换它们。

保持键短、小写且无空格,例如 boxed 或 most_popular。它们最终会出现在类名和比较中。如果将默认值留空,则小部件将从列表中的第一个选项开始。

在"常用设置"下,您会发现 显示标签, 标签块, 分离器 並 条件的,其工作原理与其他领域相同。

使用模板中的选择 #

Plan Card HTML 以两种最常见的方式使用两个选择字段:

<div class="plan plan--{{ layout_style }}">
  {% if badge == 'popular' %}
  <span class="plan-badge">Most Popular</span>
  {% elseif badge == 'new' %}
  <span class="plan-badge plan-badge--new">New</span>
  {% endif %}
  <p class="plan-name">{{ plan_name }}</p>
  <p class="plan-price">{{ plan_price }}<span>/month</span></p>
  <a class="plan-button" href="#">Get started</a>
</div>

修改器类 #

plan--{{ layout_style }} 变成 plan--boxed, plan--minimal 或 plan--outlined。每个变体然后是CSS面板中的一个短规则, HTML保持不变:

.plan--boxed { background: #fff; box-shadow: 0 12px 32px rgba(29, 27, 76, .14); }
.plan--minimal { background: transparent; }
.plan--outlined { background: #fff; border: 2px solid #7c3aed; }

每个选项的加价不同 #

当选项需要不同的 HTML 时,将密钥与 {% if %}. {% elseif %} 並 {% else %} 也工作。在例子中, none 既不匹配支票,因此不会打印徽章。

始终与密钥进行比较。 {% if badge == 'popular' %} 比赛,同时 {% if badge == 'Most Popular' %} never does,也不会出错,如果支票永远不会开火,请先看一下密钥的拼写。

选择器和响应控制 #

• 选择器 总是写 color: {{VALUE}}; for 这个字段,而且没有框可以更改属性。与键喜欢 boxed 规则什么也不做。它只会在你的键是颜色时有所帮助:在我们的测试中,键例如 #7c3aed 並 #0ea5e9 具有选择器 .plan-price did给价格上色。其他任何东西,请将选择器留空并使用类。
• 响应式控制 让编辑器为每个设备选择不同的选项,那些每个设备的选择只能通过上面的选择器规则到达页面。令牌打印桌面选项,因此当您使用模板中的值时,请关闭响应式控制。

使用 Elementor 中的选择控件 #

将小部件添加到页面中,或者如果页面已经打开,则重新加载编辑器。选择小部件并打开放置该字段的选项卡。下拉显示您的标签,默认选项已选择。选择另一个选项和预览更新。

这是相同的计划卡,具有布局样式和徽章的三个组合:

常见用例 #

• 卡片、按钮或部分样式变体。
• 徽章或丝带,例如促销、全新或最受欢迎。
• 标题标签、图像比例或列计数选择。
• 对列表小部件的顺序或数据源进行排序。

使用 Select 字段的提示 #

• 在编辑器使用小部件之前决定按键。 您可以稍后重命名标签,但更改密钥会破坏已经保存旧标签的页面。
• 添加 “无”选项 当元素是可选的时,就像示例中的徽章一样。
• 设置默认值 这本身看起来不错,因此新添加的小部件可以随时使用。
• 只有两个或三个选项有清晰的图标? 的 选择字段 将它们显示为按钮而不是下拉。
• 只是开还是关? 使用 开关器字段.

常见问题 #

包裹起来 #

添加"选择"字段,将示例行替换为短键和清晰标签,并设置默认值。然后将键打印为样式变体的类,或使用以下方式检查 {% if %} markup 发生变化时,对于可搜索或多重选择,请参见 选择2,并检查 定价 对于每个计划包含的内容。