的 滑块场 elementor 在自定义小部件的面板中放置一个拖动到设置的范围控件,该控件用于在自己的小部件上设置间隙、宽度和边框半径,而 Elementor 则将其设置在主插件内部 小部件生成器、你设置了一个最小值、一个最大值、一个步骤,以及用户可以从中挑选的单位。谁在 Elementor 中编辑了小部件,那么谁就拖动一个句柄,而不是输入原始的 CSS 值。
滑块字段支持 条件 与每个控件一样,由于其值是数字的,因此 Twig-语法模板引擎 让您通过类似的比较来分支它 {% if columns >= 3 %}.指南都涵盖了设置和限制。
Slider 产生的值不是一个普通数字,它是一对:大小和单位,那个细节决定了你如何将字段连接到你的样式表,所以这个 doc 大部分时间都在那里。
Slider 字段的作用 #
- 渲染范围滑块 elementor 的原生滑块控件,并附有可拖动手柄和旁边的数字输入。
- 提供单位切换器 当您允许多个单元时,相同的控件可以在 px、% 或 em 中工作。
- 将尺寸和单位存放在一起 作为一个值,您的 CSS 面板使用点符号读取。
- 支持响应式值的,让用户设置与设备图标不同的每个设备的大小。
- 接受动态值 erementor的选择器机制编写css,并可以作为css面板的替代方案。
构建小部件的新功能?阅读 小部件生成器概述 首先;本文档假设您已经在编辑器中打开了一个小部件。
在开始之前 #
- 文字出版社 与 元素 已安装并处于活动状态。
- Elementor 的主插件 已安装并处于活动状态。插件新增?参见 安装指南.
- Widget Builder 编辑器中打开的自定义小部件。我们的示例是团队卡网格,其
.team-row容器需要卡之间用户可调节的间隙。
如何添加滑块字段 #
在 Widget Builder 编辑器中,滚动左侧的字段面板,直到找到 滑块 字段,与其他 CSS 值字段(例如维度)一起列出。
将其拖入下面的一个部分 风格 tab,大小控制通常居住的地方,尽管内容和高级也工作一旦它降落,字段的选项在左侧打开。
解释了滑块字段选项 #
- 标签: elementor 中控件旁边的文本,例如 “卡间隙”。
- 名称: 例如,您的 CSS 所指的唯一标识符仅是字母、数字和下划线
my_gap. - 默认: 起始值,存储为大小加单位。
- 最小、最大、步骤: 手柄覆盖的范围以及每个阻力增量移动多远。间隙控制可能会以 1 为步长运行 0 到 100。
- 尺寸单位: 用户可以在 px、% 和 em 之间切换的单位。一个单位隐藏切换器;几个显示它。
- 响应式: 添加设备图标,以便每个断点保留自己的值。
- 动态 並 选择器: 动态标签支持,以及下面介绍的 Elementor 的选择器机制。
- 描述、显示标签、分离器和条件是每个字段携带的相同显示选项。
将滑块连接到您的 CSS #
Slider 的值是一个有两个键的数组: size 並 unit.在自己的输出上打印字段名称什么都不会,因为没有一个值可以打印,在CSS面板中,总是用点符号写两个部分:
.team-row {
gap: {{ my_gap.size }}{{ my_gap.unit }};
}选定 px 的值为 24,结果为 gap: 24px;。将单位切换器更改为%,相同的规则变为 gap: 24%; 不接触模板。
小心: {{ my_gap }} on its 自己打印一个空字符串。如果你的规则渲染为 gap: ; 布局忽略了控制,忽略了缺失 .size 並 .unit 几乎总是为什么。同样的沉默遵循重命名:稍后更改字段的名称,旧的令牌不断渲染,只是其中没有任何内容,因此在同一个座位上更新 CSS 面板。
选择器替代方案 #
Sliders 还可以与 Elementor 的选择器机制一起工作, 该机制为您编写 CSS, 而不是通过 CSS 面板。对于一个滑块, Elementor 注入一个裸值而不是一个完整的声明, 因此仅构建器的纯选择器字段不会产生可用的自定义选择器条目, 必须携带完整的属性, 使用 Elementor 自己的占位符:
'{{WRAPPER}} .team-row' => 'gap: {{SIZE}}{{UNIT}};'对于大多数小部件,CSS 面板令牌是更简单的路线;当您想要 Elementor 管理输出时,可以访问选择器条目。
在《元素人》中使用滑块控件 #
Elementor 中的页面中添加自定义小部件。如果页面已经打开,请先重新加载编辑器,因为旧选项卡会一直显示旧面板。如果允许多个单元,则滑块会出现在小部件的面板中,其中包含您的标签、手柄、数字输入和单元切换器。
拖动手柄或输入数字,预览会立即进行。打开 Responsive 后,设备图标会在桌面、平板电脑和移动设备值之间切换控制,因此 40px 的桌面间隙可以在同一字段的手机上缩小到 16px。
常见用例 #
- 网格和弯曲间隙 卡片、柱子或画廊物品之间。
- 元素宽度和高度(例如图像大小或分隔符长度), 流体布局可选择 %。
- 边界半径 当一个均匀的半径足够时,在卡片和按钮上。
- 图标和字体大小 em 单元保留与周围文本相关的内容。
- 间距偏移 就像徽章和它所在的角落之间的距离一样。
使用滑块字段的技巧 #
- 始终打印两个部分。
{{ my_gap.size }}{{ my_gap.unit }}是整个连接;裸字段名称会给你一个空字符串。 - 将 Min、Max 和 Step 匹配到酒店。 0,100 范围以步为 1 适合间隙;半径控制可能只需要 0,50。
- 仅提供有意义的单位。 仅 px 控制比 % 产生损坏布局的控制更清晰。
- CSS面板结构中保持后备。 写入规则,以便小部件仍然在第一次掉落时按默认值理智地布局。
- 打开响应式布局值。 间隙和宽度几乎总是需要更紧密的移动设置。
- CSS面板令牌优于选择器字段。 普通选择器字段仅为滑块注入裸值,这不是完整的声明。
常见问题 #
Master Addons Widget Builder 中的滑块字段是什么?
Elementor 的范围滑块控制添加到自定义小部件中,您定义最小值、最大值、步长和允许的单位,用户拖动一个句柄来设置一个值。字段将大小和单位存储在一起,您的小部件 CSS 会使用它进行打印 {{ name.size }}{{ name.unit }}.
为什么 {{my_slider}} 不会打印任何内容?
该值是数组保持 size 並 unit、不是一个字符串, 所以直接打印出来是空的, 两个键都用点符号: {{ my_slider.size }}{{ my_slider.unit }}.
如何使用 CSS 选项卡中的滑块值?
例如,自己写入属性并将两个代币都丢弃在值所在的位置 gap: {{ my_gap.size }}{{ my_gap.unit }};。每当用户移动手柄或切换单元时,规则就会更新。
用户可以在 px、% 和 em 之间切换吗?
是的,当您在"大小单位"选项中列出多个单位时。控件显示一个单位切换器,并且 unit 值中的键反映了用户选择的任何内容,因此相同的 CSS 令牌涵盖每个单元。
Slider是否支持响应式值?
是启用响应式选项,控制将获得 Elementor 中的设备图标,让用户存储桌面、平板电脑和移动断点的单独值。
我可以使用 Elementor 选择器而不是 CSS 面板吗?
您可以,但滑块需要一个选择器条目来拼写完整的属性 {{SIZE}}{{UNIT}} 占位符,例如 '{{WRAPPER}} .row' => 'gap: {{SIZE}}{{UNIT}};'.平原选择器字段只为滑块注入一个裸值,这本身是不够的。
包裹起来 #
Widget 生成器滑块字段将小部件中的任何单个 CSS 长度转换为编辑器可以拖动的控制:命名字段、绑定范围和打印 {{ name.size }}{{ name.unit }} CSS面板中。它自然地与。 尺寸场 当小部件需要与单个值并排的四边间距时。探索其余部分 主插件小部件和扩展,并看到 定价页面 对于每个计划包含的内容。
