號

Number 字段将数字输入添加到您使用主插件构建的自定义小部件中 小部件生成器.列数、字号、每行项目、星级:任何只有数字才有意义的东西都属于这里,你在构建器中设置允许的范围,编辑器得到一个输入,将它们保留在里面。

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

Number 字段的作用 #

• Elementor中为小部件的面板添加带有旋转器箭头的数字输入。
• 限制编辑可以输入的内容 敏, 最大 並 步.
• 打印 HTML、CSS 或 JS 面板中放置令牌的任何位置的数字。
• 适用于比较,所以 {% if columns > 2 %} 可以切换部分标记。

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

在开始之前 #

• WordPress 已安装并处于活动状态。
• 已安装并激活的 Elementor 主插件。 安装指南 盖设置。
• Widget 生成器中打开的小部件, 本指南中的示例是一个带有两个数字字段的 “Stat Counter” 小部件: columns (1 至 4) 在内容选项卡上 stat_size (20至96)在样式选项卡上。

如何添加数字字段 #

1. 去 主插件 > 小部件生成器 并打开您的小部件。
2. 在设置所属选项卡上添加一个部分。布局计数适合 内容的,一尺码合身 风格.
3. 类型 number 在左侧的字段搜索框中。
4. 拖动 號 into the section。点击字段上的铅笔, 打开它的设置。

解释了数字字段选项 #

• 标签: elementor 中输入旁边的文本,例如 “Columns”。
• 名称: field的唯一id及其令牌的名称。仅使用字母、数字和下划线,例如 columns.
• 描述: elementor中的输入下显示的提示。说出数字控制什么,如果重要,说出单位。
• 占位符: 输入为空时显示灰色文本。
• 敏 並 最大: 输入接受的最低和最高值。
• 步: spinner箭头每次点击移动多远,整数用1,偶数用2,半步用0.5。
• 默认值: 小部件的新副本以数字开头。

Min、Max 和 Step 到达输入本身,在我们的测试中,列字段以 min 1、max 4 和 step 1 的数字输入到达 Elementor,因此箭头停止在范围的末端。

公共设置与其他字段一样工作,包括 条件 如果仅当设置另一个字段时才应出现该数字。

在模板中打印数字 #

Token 在所有三个面板中都工作, 在 Stat Counter 小部件中, HTML 将值放入数据属性中, 并在比较中使用:

<div class="stats-grid" data-columns="{{ columns }}">
  ...
</div>
{% if columns > 2 %}
<p class="stats-note">Tip: drop to two columns for a narrower layout.</p>
{% endif %}

CSS面板是一个数字字段通常赚取其保留的地方, 将单位放在大括号外, 因为该字段存储一个裸露的数字:

.stats-grid { grid-template-columns: repeat({{ columns }}, 1fr); }
.stat-value { font-size: {{ stat_size }}px; }

JS面板中也工作相同的令牌,例如 var perRow = {{ columns }};.

给每个数字字段一个默认值 #

一个空字段不会打印任何内容,这会默默地打破周围的规则。随着 Columns 字段的清除,我们的 CSS 变成了 repeat(, 1fr),哪些浏览器掉落,网格回落到单列。的 {% if columns > 2 %} check 同时停止匹配,面板中没有任何东西警告你。

因此,在任何提供 CSS 或 JavaScript 的数字字段上设置默认值,如果编辑器可以清除模板,则在模板中尽可能处理空值。

将数字字段上的选择器留空 #

Selector 框对于这个字段表现得很奇怪,在我们的测试中它同时引起了两个问题:

• 它将裸号码写入规则,没有属性名称,因此没有可用的 CSS 出现。
• 当填写选择器时,字段的默认值停止到达令牌。一个没有人触摸过的小部件渲染 font-size:px 在前端。清除选择器将其修复,并渲染了相同的未触及的小部件 font-size:44px.

CSS面板中打印令牌,而不是,如上所示。that保持默认工作,让你自己编写属性并单元。

使用 Elementor 中的数字控制 #

将小部件添加到页面中,或者如果页面已经打开,则重新加载编辑器。每个数字字段在其标签下显示为一个小输入,在您放置该值的选项卡上。键入一个值或使用箭头,并进行预览更新。

这是四个列和两个数字大小较大的列的相同小部件:

常见用例 #

• 网格和旋转木马中的列或项目计数。
• 字体大小、间距值和像素宽度。
• 星级、评论分数和百分比。
• 计算脚本读取并加快速度,例如每张幻灯片的项目或自动播放延迟。

使用数字字段的技巧 #

• 始终设置默认值。 是工作小部件和默默打破的规则之间的区别。
• 将 Min 和 Max 设置为设计可以采取的功能。 4根柱子搭建的网格,不应该接受12。
• 将单位放入标签或说明中像,"“数字大小"与"“像素",因为字段存储的是普通数字。
• 将单位保留在令牌之外 在CSS中: {{ stat_size }}px不是在牙套内。
• 想要一个带有单位的滑块吗? 的 滑块场 是一个专业字段,为编辑器提供了一个拖动句柄。

常见问题 #

包裹起来 #

Number 字段, 设置 Min, Max, Step 和默认值, 然后在需要的地方打印令牌, 自己添加单元。将选择器留空, 这样默认值就一直工作。对于带有单元选项的拖动句柄, 请参阅 滑块场,并检查 定价 对于每个计划包含的内容。