主插件
定价
查看类别

选择

罗伊·杰米
2026年9月17日更新完毕

7 分钟阅读

"选择"字段将一行图标按钮添加到您使用主插件构建的自定义小部件中 小部件生成器。Elementor对文本对齐使用的控制方式是一样的:几个按钮,一次一个活动,只有两到四个选项和一个图标比一个单词解释每个选项更快时使用它。

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

在 Elementor 图标按钮旁边的主插件小部件生成器中选择字段设置,以获取呼叫框小部件

"选择"字段的作用 #

  • Elementor中为小部件的面板添加一行图标按钮,每个选项一个按钮。
  • 当编辑器悬停按钮时,将每个选项的标题显示为工具提示。
  • 拯救 键 的选取选项,例如 center的,而不是它的标题。
  • 打印该密钥,无论您将其标记放置在何处,例如 {{ align }}.通常的做法是把它变成一个CSS类。

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

在开始之前 #

  • WordPress 已安装并处于活动状态。
  • 已安装并激活的 Elementor 主插件。 安装指南 盖设置。
  • Widget 生成器中打开的一个小部件, 本指南中的示例是一个 “呼叫框” 小部件, 具有两个选择字段: align (左、中、右)和 icon_position (顶部或左侧)。

如何添加"选择"字段 #

  1. 去 主插件 > 小部件生成器 并打开您的小部件。
  2. 添加有关的部分 内容 tab,例如“标注”。布局选择也非常适合样式选项卡。
  3. 类型 choose 在左侧的字段搜索框中。
  4. 拖动 选择 into the section。点击字段上的铅笔, 打开它的设置。
在"呼叫"部分中的"具有对齐和图标位置的小部件生成器"字段中搜索"选择"找到字段

A new Choose 字段不是空的,它附带三个对齐选项(左、中和右)和 Center 作为默认值,因此对于简单的对齐控制,您只需更改标签和名称即可。

选择解释的字段选项 #

选择带有标签、名称、描述、取消设置、键、标题和图标的选项行以及默认值的字段选项
  • 标签: elementor 中按钮旁边的文本,例如 “Icon Position”。
  • 名称: field的唯一id及其令牌的名称。仅使用字母、数字和下划线,例如 icon_position.
  • 描述: elementor 中按钮下方显示的提示。
  • 未设置: 让编辑器再次单击活动按钮以清除选择。在依赖它之前请参阅下面的注释。
  • 选项: 每个按钮一行。 钥 是你的模板得到的值, 标题 是工具提示,并且 图标 打开图标选择器。使用红十字去除一行,并使用加号按钮添加一行。
  • 默认值: widget的新副本的选项开始于。下拉显示标题,但字段存储密钥。

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

选择元素中出现的图标 #

单击选项的图标可打开主插件图标选择器。打开 元素图标 tab和搜索为例 align的,以找到对齐和位置图标。

主插件图标选择器已过滤到元素图标,并使用"选择"选项对齐图标

Stick到那个选项卡上,选择器还列出了简单线、图标字体、线性图标和材料图标,但在我们的测试中,这些按钮在元素器面板中显示为空白,仅显示元素器图标。

密钥、标题和未设置 #

  • 保持键短、小写且无空格,例如 left 或 top。他们最终以班级名称结束。
  • Ke以随时重命名一个标题,更改一个键会破坏已经保存旧的Pu页。
  • 在我们的测试中,单击活动按钮即使可以清除该值 取消设置 无论哪种方式,都设置为"no。 Plan"以获取空值,如下面的模板所示。

使用模板中的选择 #

Token 打印密钥,所以最干净的设置是修改器类,这就是 Callout Box HTML:

<div class="callout{% if align %} callout--{{ align }}{% endif %}{% if icon_position %} callout--icon-{{ icon_position }}{% endif %}">
  {% if icon_position %}<span class="callout-icon">!</span>{% endif %}
  <div class="callout-body">
    <p class="callout-title">{{ callout_title }}</p>
    <p class="callout-text">{{ callout_text }}</p>
  </div>
</div>
Widget HTML 使用对齐和 icon_position 令牌作为 if 块内部的修饰符类

每个 {% if %} value 为空时跳过类, 对于 Icon Position, 一个空值也隐藏了图标, 这就是为什么那个字段有 Unset on 的原因, 然后 CSS 面板为每个类进行样式:

.callout--left { text-align: left; }
.callout--center { text-align: center; }
.callout--right { text-align: right; }
.callout--icon-top .callout-icon { margin-bottom: 14px; }
.callout--icon-left { display: flex; gap: 18px; align-items: flex-start; }

例如,您还可以直接比较该值 {% if icon_position == 'left' %}.比对调,绝不比对题目。

关闭选择器和响应控制 #

  • 选择器: 对于这个字段,它写 color: {{VALUE}};.在我们的测试中,选择器 .callout-title 生产 color:center;的,浏览器忽略了。与其他一些字段不同,choose 没有 CSS 选择器行,您可以在其中编写自己的属性。使用类,如上所示。
  • 响应控制: 添加设备图标,以便编辑器可以在平板电脑和移动设备上选择不同的选项,但令牌仅打印桌面选项。每台设备的选择永远不会到达您的模板。

使用 Elementor 中的"选择"控件 #

将小部件添加到页面中,或者如果页面已经打开,则重新加载编辑器。按钮位于标签下方,默认选项突出显示。悬停一个按钮查看其标题,然后单击切换。预览立即更新。

Elementor 中的 Callout Box 小部件,带有对齐和图标位置图标按钮以及左侧工具提示

这是具有不同选择的相同呼叫:

前端的标注框有左对齐、中心对齐和左侧图标

常见用例 #

  • 标题、引号和卡片的文本对齐。
  • 图像或图标位置:顶部、左侧或右侧。
  • 布局方向,例如行或列。
  • 当每个都有清晰的图标时,小的视觉变体,例如浅色或深色风格。

"选择"字段工作的提示 #

  • 保留四个或更少的选择。 对于较长的列表,请使用 选择字段.
  • 始终处理空值。 包装课程和标记 {% if %}的,并给出基类合理的默认样式。
  • 写出明确的标题。 工具提示是每个按钮唯一看到的文本编辑器。
  • 仅使用元素图标的,所以每个按钮都有一个可见的图标。
  • 在编辑器使用小部件之前决定按键。 Title和图标以后可以更改,键不能。

常见问题 #

免费版本中可使用"选择"字段吗?

是选择是您可以在免费版的小部件生成器中使用的字段之一,全套小部件生成器字段自带Master Addons Pro。

Choose 令牌打印什么?

例如,所选选项的键 center。在没有选择选项时,它不会打印任何内容。

为什么我的一些"选择"按钮在 Elementor 中空白?

Icon 大概来自 Elementor Icons 以外的库,在我们的测试中,只有 Elementor Icons 选项卡中的图标显示在面板中。从该选项卡中选择替换图标。

我可以使用选择器选项进行对齐吗?

不适用于此字段。选择器写入 color: {{VALUE}};(对齐键),所以对齐键变成无效颜色,在 CSS 面板中将键打印为类和样式那个类。

为什么编辑器可以在 Unset 关闭时清除选择?

在我们的测试中,即使将 Unset 设置为 No,单击活动按钮也会清除该值。尽可能处理空值并处理它 {% if %}.

包裹起来 #

添加"选择"字段,设置带有 Elementor 图标和清除标题的短键,然后在 HTML 中将键打印为类,并在 CSS 面板中为每个类设置样式。处理空值,当编辑器清除选项时,小部件保持整洁。有关更长的选项列表,请参阅 选择字段,并检查 定价 对于每个计划包含的内容。

你的感受是什么