的 尺寸场 elementor 的高级选项卡中为自定义小部件提供了熟悉的四输入间距控制:顶部、右侧、底部、左侧值,并带有链接图标,使它们保持同步。在主插件内 小部件生成器只要填充、页边距或每个角边框半径应该可以从面板编辑而不是在样式表中硬编码,它就是您所能达到的字段。
与每个小部件生成器控件一样,Dimensions 支持 条件因此,只有在应用时才能显示间距选项。跨构建器的令牌输出贯穿于 Twig-语法模板引擎;两份指南都涵盖了细节和局限性。
它存储的值携带所有四个边加上单位,您的 CSS 面板按名称打印每块。正确拼写是整个技巧,在连接之前,有一个特定于此字段的行为值得了解:构建者的普通选择器字段对维度控制没有任何作用。
维度字段的作用 #
- 渲染四输入控制 对于顶部、右侧、底部和左侧,链接图标在所有侧面都反映一个值。
- 每面都存放加上单位 在单个值中,您的 CSS 使用点符号读取。
- 提供单位切换器 在您允许的单位中,例如 px、% 和 em。
- 可以限制哪一面显示 通过允许的尺寸选项,向下到仅水平或仅垂直输入。
- 支持响应式值 因此每个断点都保持自己的间距。
如果您以前没有构建过小部件,则 小部件生成器概述 涵盖基础知识;从那里开始。
在开始之前 #
- 文字出版社 与 元素 已安装并处于活动状态。
- Elementor 的主插件 已安装并处于活动状态。插件新增?参见 安装指南.
- Widget Builder 编辑器中打开的自定义小部件。我们的示例是一个定价卡小部件,其
.price-cardbox应该让编辑器设置内部填充。
如何添加维度字段 #
打开 Widget Builder 编辑器左侧的字段面板并找到 尺寸 字段,与其他 CSS 值字段(例如 Slider)一起列出。
将其拖入下面的一个部分 风格 tab,间隔控件的常用家,一旦落地,字段的选项在左侧打开。
尺寸字段选项已解释 #
- 标签: elementor 中控件旁边的文本,例如 “卡填充”。
- 名称: 例如,您的 CSS 所指的唯一标识符仅是字母、数字和下划线
pad. - 默认: 起始值,保持顶部、右侧、底部、左侧、单位以及两侧是否开始链接。
- 尺寸单位: 用户可以在 px、% 和 em 等单元之间切换。
- 允许的尺寸: 哪些输入出现。 “all”显示四个边; “水平”仅显示左侧和右侧; “垂直”仅显示顶部和底部;自定义列表选择特定边。
- 响应式: 添加设备图标,以便桌面、平板电脑和移动设备保留单独的值。
- 描述、显示标签、分离器和条件在这里的工作原理与所有其他字段相同。
将尺寸值连接到您的 CSS #
存储值是带有键的数组 top, right, bottom, left, unit、和 isLinkedCSS面板中, 拼出所有四个面, 并在每个面之后重复单元:
.price-card {
padding: {{ pad.top }}{{ pad.unit }} {{ pad.right }}{{ pad.unit }} {{ pad.bottom }}{{ pad.unit }} {{ pad.left }}{{ pad.unit }};
}每侧 24 个,选择 px,规则渲染为 padding: 24px 24px 24px 24px;.解开面板中的边,每个令牌都带有自己的数字,相同的图案覆盖 margin 而且,每个角并排, border-radius。一个CSS怪癖值得记住,如果你提供%作为一个单位:百分比填充解析与元素的宽度,即使对于顶部和底部,编辑器也不会期望。
Watch out: 构建器的选择器字段对于一个 Dimensions 控件没有发出默认的 CSS 属性,因此填写它不会产生任何结果。将 CSS 面板中的边写出如上所述,或者定义包含完整属性的完整选择器条目;普通选择器选项不是此字段的快捷方式。
使用 Elementor 中的尺寸控制 #
Elementor 中的页面上丢弃自定义小部件,或者如果页面已经打开,则重新加载编辑器;新的控件永远不会出现在陈旧的编辑器选项卡中。控件显示有四个输入、单元切换器和其角落中的链接图标。
在链接图标处于活动状态并且所有四个侧面一起更新的情况下键入任意输入 单击图标可取消链接并且每侧取自己的值,这就是您获得不对称填充的方式,例如顶部高于底部。在响应式打开的情况下,设备图标每个断点存储单独的间距。
常见用例 #
- 卡片和盒子填充的,自定义小部件中最常见的单个间距控制。
- 部分和包装边距 因此编辑器可以在块之间调整垂直节奏。
- 每个角边界半径(corner)而不是边来使用四个值。
- 按钮填充的,通常允许的尺寸限制在水平。
- 媒体偏移、用边距值轻推图像或徽章。
使用维度领域的技巧 #
- 拼出每一面和单位。 CSS面板连接是四个令牌加上四个单位令牌;一个裸
{{ pad }}打印任何可用内容。 - 跳过普通选择器字段。 Dimensions 它不发出任何属性,CSS 面板或完整的选择器条目就是工作路线。
- 当财产需要时限制双方。 仅水平控制可保持按钮填充字段诚实。
- 设置链接默认值。 从相等的链接开始,编辑们可以获得一个理智的基线和一个需要思考的输入。
- 在样式表中保持基本间距。 小部件应该在第一个下降时看右侧;然后控制从那里调整。
- 打开响应式填充和页边距。 桌面间距很少能在与手机屏幕接触后保留下来。
常见问题 #
Master Addons Widget Builder 中的维度字段是什么?
Elementor的四面间距控制添加到自定义小部件中:顶部、右侧、底部、左侧输入,带有链接切换器和单位切换器,该值存储所有四个侧面加上单位,您的小部件CSS会用点符号打印每件作品,例如 {{ pad.top }}{{ pad.unit }}.
如何在 CSS 选项卡中打印尺寸值?
使用所有四个侧面标记写入属性,并在每个侧面标记后重复该单位: padding: {{ pad.top }}{{ pad.unit }} {{ pad.right }}{{ pad.unit }} {{ pad.bottom }}{{ pad.unit }} {{ pad.left }}{{ pad.unit }};。规则从此跟踪控制。
为什么选择器选项对我的维度字段没有任何作用?
根据设计,构建器不会通过普通选择器字段发出默认的 Dimensions CSS 属性,因为没有单个值可供注入。使用 CSS 面板令牌代替,或定义包含完整声明的完整选择器条目。
我可以仅显示左右输入吗?
Yes。将允许的维度设置为“水平”并且只有左右输入渲染“垂直”对顶部和底部做同样的事情,自定义列表可以选择任何特定侧面。
控件上的链接图标的作用是什么?
Linked 的同时,编辑一侧将相同的数字写入所有四个,以及链接状态的储值记录。解链接让每一侧都拥有自己的数字,这四个 CSS 令牌独立打印。
维度场适用于边框半径吗?
是。边框半径按照控制提供的相同顺序取四个值,因此 border-radius: {{ rad.top }}{{ rad.unit }} {{ rad.right }}{{ rad.unit }} {{ rad.bottom }}{{ rad.unit }} {{ rad.left }}{{ rad.unit }}; 将每个输入映射到一个角落。
包裹起来 #
Widget Builder 尺寸字段将填充、边距和半径决策从您的样式表中移出并移入面板中:一个控件、四个侧面、一个单元,全部按 CSS 选项卡中的名称打印。将其使用在旁边 滑块场涵盖单值长度,四边控制将过度杀伤。探索其余部分 主插件小部件和扩展,并看到 定价页面 对于每个计划包含的内容。
