號

的 数字字段 将普通数字输入添加到自定义小部件的面板中。列计数、像素宽度、每张幻灯片的项目、星级:任何只有数字才有意义的设置都属于主插件内部 小部件生成器、你设置一次允许的范围,编辑器得到一个输入,只接受其中的数字。

数字字段支持 条件 用于显示或隐藏基于另一个字段的控制,其令牌通过构建者的令牌渲染 Twig-语法模板引擎其中数字比较喜欢 {% if price > 0 %} 开箱即用。指南都涵盖了设置和限制。

该值通过模板令牌连接到您的小部件。写 {{ your_field_name }} HTML、CSS或JS面板中,并在渲染时间在那里打印数字,一个控件可以同时驱动标记、样式和脚本行为。

Number 字段的作用 #

• 在小部件的 Elementor 面板中呈现数字输入,并带有浏览器旋转箭头。
• 强制执行范围 敏, 最大、和 步 您在构建器中定义的选项。
• 无论您将数字放在何处,都会输出一个普通数字 {{ token }} HTML、CSS 或 JS 面板中。
• 适用于比较,因此模板可以分支 {% if my_number > 3 %}.
• Elementor的选择器机制作为替代布线,将该值直接写入CSS规则。

以前从未与构建者一起构建过小部件? 小部件生成器概述 浏览编辑器本身,在进入各个字段之前十分钟就值得了。

在开始之前 #

• 文字出版社 与 元素 已安装并处于活动状态。
• Elementor 的主插件 已安装并处于活动状态。插件新增?参见 安装指南.
• Widget Builder 编辑器中打开的自定义小部件,我们的示例是一个客户端徽标转盘,其中有一个名为 Number 的字段 logos_per_slide 控制一次显示多少个徽标。

如何添加数字字段 #

拖动 號 从字段面板到下面的部分 内容 或 风格 tab。一落地,该场地的选项就在建造者的左侧打开。

解释了数字字段选项 #

• 标签: elementor 中输入旁边显示的文本,例如 “Logos Per Slide”。
• 名称: your模板所指的唯一标识符。字母、数字、下划线仅,例如 logos_per_slide.
• 默认: 小部件以新滴开始的数字。
• 占位符: 输入为空时显示提示文本。
• 最小/最大: 输入接受的最低和最高值。
• 步: 例如,旋转器箭头移动的增量 1 对于整数或 0.5 为半步。
• 描述: 可选的帮助者文本在控制下。
• 显示标签、标签块、分离器: 标准显示切换,以及仅在另一个控件具有一定值时显示字段的条件。

将数字字段与其令牌连接起来 #

Number字段是一个令牌字段,无论在哪里 {{ logos_per_slide }} 1个面板中出现, 当前值在它的位置打印。所有3个面板都接受:

<!-- HTML panel -->
<div class="logo-track" data-count="{{ logos_per_slide }}">

/* CSS panel */
.logo-track { grid-template-columns: repeat({{ logos_per_slide }}, 1fr); }
.logo-item { min-width: {{ logo_min_width }}px; }

// JS panel
var perSlide = {{ logos_per_slide }};

这里有一件事默默失败:空字段打印空字符串,并且 repeat(, 1fr) css无效,所以浏览器没有投诉就丢弃了整个规则,如果令牌馈送一个css或js表达式,设置一个default,这样一个新鲜的小部件就永远不会渲染一个洞。

为值是一个数字,所以比较在模板逻辑中起作用,当所有内容都已经适合一张幻灯片时,转盘可以跳过其导航箭头:

{% if logos_per_slide > 4 %}
<button class="logo-nav">&rarr;</button>
{% endif %}

该字段还支持 Elementor 的 选择器 wiring作为替代。注意,对于number,elementor注入的是裸值而不是完整的声明,因此选择器条目必须拼出整个属性,例如 width: {{VALUE}}px;.

小心: 当令牌落在 CSS 或 JS 表达式内时,将该单位放在大括号外。 width: {{ logo_min_width }}px works;期望字段携带自己的单元则不然,因为值是裸数,如果也需要编辑器挑选单元,slider字段更适合。

使用 Elementor 中的数字控制 #

Elementor 中将自定义小部件丢弃到一个页面上(如果页面已经打开,则首先重新加载编辑器),Number 字段显示为一个小输入,在您设置的标签下带有旋转器箭头,键入一个值或单击箭头,预览会实时更新,Min/Max 范围之外的值会被输入本身拒绝。

常见用例 #

• 列和项目计数 CSS 网格或弹性规则中打印出来。
• 旋转木马设置 例如每个视图的幻灯片或自动播放延迟,由 JS 面板读取。
• 像素和百分比值 其中单个单元由小部件固定,例如固定单元宽度或间隙。
• 评级和分数 该模板与阈值进行比较。
• 限制 like“最多显示N个帖子”, 传递到小部件的脚本中。

使用数字字段的技巧 #

• 设置最小值和最大值。 0或40的列数将打破大多数布局;在构建器中限制输入比在模板中保护它更便宜。
• Match 步骤到值的含义。 整件物品得到 1;不透明度式值得到 0.1.
• 发送合理的默认值 因此,小部件在丢弃时会正确呈现。
• 与数字进行比较,而不是与标签进行比较。 {% if logos_per_slide > 4 %} 是有效的模板逻辑;这里没有选项标签可以比较,不像a 选择字段.
• 选择器条目中的完整声明。 如果您通过选择器选项而不是令牌连接字段,请写入完整的属性,因为 Elementor 仅注入 Number 的裸值。

常见问题 #

包裹起来 #

Widget Builder Number 字段执行精确的工作:一个有界数字输入、一个令牌,并且值以标记、样式或脚本的形式落在小部件需要的任何位置。将其与 开关器字段 为开/关行为和 中继器场 当计数应该来自真实项目而不是设置时。探索其余部分 主插件小部件和扩展,并看到 定价页面 对于每个计划包含的内容。