Slider 字段将 Elementor 的拖动到设置范围控制添加到使用主插件构建的自定义小部件中 小部件生成器。编辑器拖动一个句柄或键入一个数字,选择一个单位,该值会进入您的 CSS。将其用于空隙、宽度、高度、图标大小、字体大小或其他任何一个数字加一个单位的东西。
Slider是一个Pro字段,免费插件包含一个有限的小部件生成器,全套字段自带 硕士插件专业版.
Slider 字段的作用 #
- 它在 Elementor 面板中显示了一个带有数字框和单位菜单的滑块。
- 您设置最小值、最大值和步长,以及起始值。
- 该值是一个数字和一个单位,例如 24 和 px。
- 您可以使用 CSS 选择器行将其连接到 CSS,或者使用两个令牌将其打印在 HTML 或 CSS 选项卡中。
如果您还没有构建小部件,请阅读 小部件生成器概述 首先。
在开始之前 #
- WordPress 已安装并处于活动状态。
- Elementor 和 Master Addons Pro 的主插件均处于活动状态。 安装指南 盖设置。
- Widget Builder 中打开的小部件,本指南中的示例是一个带有两个滑块的 “Team Grid” 小部件:卡片之间的空格卡片间隙和圆形首字母的头像大小。
如何添加滑块字段 #
- 去 主插件 > 小部件生成器 并打开您的小部件。
- 单击 风格 tab并添加一个部分,例如“网格布局”。
- 类型
slider在左侧的字段搜索框中。 - 拖动 滑块 into the section。its settings open in the left sidebar。
解释了滑块字段选项 #
- 标签 是 Elementor 中滑块上方的文本,例如 “卡间隙”。
- 名字 是该字段的唯一ID及其令牌的开头,所以
card_gap给出{{ card_gap.size }}。字母,数字和下划线仅。 - 描述 elementor 中的滑块下方出现。
- 最小值, 最大值 並 步 设置手柄的射程和每次移动的距离。卡间隙以 2 为步长使用 0 到 80。
- 默认值 是起始编号和单位,设置有自己的小滑块和单位菜单。
Min、Max 和 Step 值键入,即使盒子已经显示 0、100 和 1。您从不触摸的盒子也不会保存,并且没有保存的滑块会回落到 Elementor 的范围:px 为 0 到 1000,% 为 0 到 100,em 和 rem 为 0 到 10。当您设置它们时,每个单元都使用相同的范围,因此 0 到 80 适用于 em 以及 px。
没有出现哪些单位的设置,编辑器可以选择px、%、em和rem。再往下, 响应式控制 添加设备图标,使桌面、平板电脑和移动设备可以具有不同的值。
将滑块与 CSS 选择器连接 #
滚动到 CSS 选择器 然后单击 添加项目。新行中填满了一个示例(.text-1, .text-2 並 color: {{VALUE}};), 所以将两个框都替换:
CSS Selector: .team-grid
CSS Properties: gap: {{SIZE}}{{UNIT}};
{{SIZE}} 被替换为数字 and {{UNIT}} 对于所选单位,24 px 变为 gap: 24px;。你不需要 {{WRAPPER}} 在选择器中,因为构建者为你添加了。添加更多行以在其他元素上使用相同的值。
使用这些行而不是单个行 选择器 box 在侧边栏底部,那个 box 没有 CSS 属性的位置,所以它不能为滑块写一个工作规则。
改为使用模板中的值 #
HTML 或 CSS 选项卡中也可以打印值, 将大小和单位写成两个相邻的令牌, 头像大小滑块这样设置头像宽度和高度:
.team-avatar {
width: {{ avatar_size.size }}{{ avatar_size.unit }};
height: {{ avatar_size.size }}{{ avatar_size.unit }};
}
裸露 {{ avatar_size }} prints nothing。您还可以比较条件下的数字,例如 {% if card_gap.size >= 40 %}。Responsive Control 打开时,请使用 CSS Selectors 行,因为 Elementor 然后为每个设备编写单独的规则。
单击 保存设置 当你完成后。
在《元素人》中使用滑块控件 #
将小部件添加到页面,或者如果页面已经打开,则重新加载编辑器。选择小部件并打开 风格 tab。每个滑块显示一个手柄、一个数字框和一个单位标签。
Drag手柄或打一个数字,小部件立刻更新,点击单位标签,即可在px、%、em和rem之间切换。
这里差距提高到 48px,头像提高到 96px:
常见用例 #
- 卡片、列和列表项目之间的间隙。
- 图像、卡片或部分的宽度、最大宽度或高度。
- 图标、头像和徽章尺寸。
- 一个元素的字体大小或行高。
- 当所有边共享一个值时,边框半径或边框宽度。
使用滑块字段的技巧 #
- 始终键入 Min、Max 和 Step,以便滑块具有合理的范围。
- 选择适合编辑器可能选择的每个单元的范围。 0 到 80 对于 px 来说没问题,但对于 em 来说非常大。
- CSS 选项卡中保留属性的基本值,如
gap: 24px;因此,小部件在任何人触摸滑块之前都会看。 - CSS Selectors 新行中替换示例文本, 左边, 该行针对的是您的小部件没有的类。
- 对于有四个边的值,例如填充或边距,请使用 尺寸场.
常见问题 #
滑块字段免费吗?
No。 Slider 是 Widget Builder 中的 Pro 字段之一,因此 Master Addons Pro 必须处于活动状态才能将其添加到小部件中。
为什么我的滑块令牌什么也打印不了?
滑块包含一个数字和一个单位,因此 {{ field_name }} 在它自己的打印上什么都没有。使用 {{ field_name.size }}{{ field_name.unit }}.
为什么滑块会升到 1000?
Min, Max和Step没有保存。将值输入所有三个框中,即使它们已经显示0,100和1,那么保存小部件。
我可以将滑块限制为 px 吗?
Not from field panel,编辑器可以选择px,%,em或rem,选择一个适用于所有四个的范围,或者设置一个合理的默认值,所以px是起始单位。
CSS 选择器中是否需要 {{WRAPPER}}?
号建造者补充道 {{WRAPPER}} 在您的选择器前面,所以 .team-grid 够了。
包裹起来 #
添加滑块字段,键入最小值、最大值和步骤,设置默认值,并将其与 CSS 选择器行连接,例如 gap: {{SIZE}}{{UNIT}};.使用 .size 並 .unit 当值属于您的 HTML 或 CSS 选项卡时,令牌。有关其他大小控制,请参阅 尺寸 並 版式 字段,然后检查 定价 对于每个计划包含的内容。
