尺寸

Dimensions 字段将 Elementor 的四盒间距控制(顶部、右侧、底部和左侧,带有链接图标和单元菜单)添加到使用主插件构建的自定义小部件中 小部件生成器。每当填充、边距、边框宽度或角半径应从 Elementor 面板设置而不是固定在 CSS 中时,请使用它。

Dimensions 是一个 Pro 字段,免费插件包含一个有限的小部件生成器,并且随附了全套字段 硕士插件专业版.

维度字段的作用 #

• Elementor面板中显示四个数字框, 打开链接图标, 在一个框中键入就填满了所有四个。
• 单位菜单允许编辑器在您允许的单位之间切换,例如 px、em 和 %。
• 您可以隐藏不需要的侧面。按钮填充字段可能只显示右侧和左侧。
• Elementor通过字段的CSS选择器行为您编写CSS,包括响应式控制打开时每个设备的单独值。

如果您还没有构建小部件,请阅读 小部件生成器概述 首先。

在开始之前 #

• WordPress 已安装并处于活动状态。
• Elementor 和 Master Addons Pro 的主插件均处于活动状态。 安装指南 盖设置。
• Widget 生成器中打开的小部件,本指南中的示例是带有 a 的 “定价卡”小部件 price-card 盒子和一个 price-btn 按钮和三个维度字段:卡片填充、卡片半径和按钮填充。

如何添加维度字段 #

1. 去 主插件 > 小部件生成器 并打开您的小部件。
2. 单击 风格 tab并添加一个部分,例如“卡间距”。
3. 类型 dimensions 在左侧的字段搜索框中。
4. 拖动 尺寸 into the section。its settings open in the left sidebar。

尺寸字段选项已解释 #

这是卡填充字段:

• 标签 是 Elementor 中方框上方的文本,例如 “卡填充”。
• 名字 是字段的唯一ID。字母,数字和下划线仅。
• 描述 elementor 中出现在控制之下。
• 允许的尺寸 4个箭头按钮,分别是上、右、下、左,点击一个箭头就可以把那边关掉,在elementor中,关掉的一边显示为一个无法编辑的灰色框。
• 属性类型 offers 自定义, 保证金, 填充, 边框宽度和边框半径。选一个, 构建器填写该属性的 CSS 选择器行(下文将对此进行更多介绍)。边框宽度还添加了 border-style: solid.
• 尺寸单位 list 单元编辑器可以选择,一个新字段允许 px,%,em,rem,vh 和 vw,去掉那些对你的设计没有意义的。
• 默认值 有四个框用于起始顶部、右侧、底部和左侧值。

Button 填充字段只需要左右, 因此关闭了顶部和底部箭头:

再往下, 响应式控制 添加设备图标,使桌面、平板电脑和移动设备可以具有不同的值。显示标签、分离器和条件与其他字段一样有效。

使用 CSS 选择器连接字段 #

每个 CSS 选择器 行有一个 CSS 选择器 (风格的哪个元素)和 CSS 属性 (要写的规则)。当你选择填充作为属性类型时, 行开始如下:

CSS Selector:   {{WRAPPER}}
CSS Properties: padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};

{{WRAPPER}} on itself 表示整个小部件。将其更改为你想要的元素,例如 .price-card.你可以离开 {{WRAPPER}} out,因为构建器将其添加到您的选择器前面,因此规则保留在此小部件内。

在 CSS 属性中, {{TOP}}, {{RIGHT}}, {{BOTTOM}} 並 {{LEFT}} 用四个框中的数字替换,并且 {{UNIT}} 用所选单位。将属性类型设置为自定义, 您可以自己编写规则。按钮填充字段仅使用两面:

CSS Selector:   .price-btn
CSS Properties: padding-right: {{RIGHT}}{{UNIT}}; padding-left: {{LEFT}}{{UNIT}};

单击 添加项目 将相同的值应用于具有第二行的另一个元素。

要知道的两件事。单身 选择器 公共设置底部附近的框对 Dimensions 字段没有任何作用,因此始终使用 CSS 选择器行。选择属性类型会为您填写 CSS 属性框,因此请先选择它,如果稍后切换,请再次检查行。

而是使用模板中的值 #

HTML 或 CSS 选项卡中也可以直接打印值,该字段保存 top, right, bottom, left 並 unit(so)写出每一边后跟单位:

.price-card {
  padding: {{ card_padding.top }}{{ card_padding.unit }} {{ card_padding.right }}{{ card_padding.unit }} {{ card_padding.bottom }}{{ card_padding.unit }} {{ card_padding.left }}{{ card_padding.unit }};
}

裸露 {{ card_padding }} prints note。对于大多数小部件来说,CSS选择器行是更好的选择,因为当响应式控制打开时,Elementor为每个设备编写单独的规则。

单击 保存设置 当你完成后。

使用 Elementor 中的尺寸控制 #

将小部件添加到页面,或者如果页面已经打开,则重新加载编辑器。选择小部件并打开 风格 tab。每个维度字段显示四个标记为顶部, 右侧,底部, 左侧的框, 链接图标, 以及右上角的单元菜单。按钮填充显示顶部和底部灰色。

Type a number,卡片会立即更新,点击链接图标,解开边,给每一个都有自己的值,就像卡片填充在这里所做的那样,顶部和底部有64个,侧面有56个,使用单元菜单在允许的单元之间切换。

常见用例 #

• 卡片、盒子和横幅的内衬垫。
• 小部件各部分之间的边距,例如标题下的空格。
• 卡片、图像和按钮上的角半径,使用边框半径属性类型。
• 左键和右键填充,顶部和底部关闭。
• 每侧边框宽度,使用边框宽度属性类型。

使用维度领域的技巧 #

• 始终从中更改 CSS 选择器 {{WRAPPER}} to your element。left as it is, the space apply to the whole widget wrapper。
• 将大小单位修剪到您希望编辑器使用的单位。 px 和 em 覆盖大部分间距。
• 关不适用的侧面,它阻止编辑器设置没有效果的值。
• 设置与您的设计匹配的默认值,因此小部件一添加就看起来正确。
• % 填充和保证金要小心,浏览器从元素的宽度计算百分比填充,即使是顶部和底部也是如此。
• 对于单个值,例如间隙或图标大小, 滑块场 更简单。

常见问题 #

包裹起来 #

Pick一个属性类型,把CSS选择器行指向你的元素,修剪单元和边,并设置一个合理的默认值,然后编辑器从Elementor自己的小部件中得到他们所知道的相同的间距控制,对于其余的框样式,请参见 边境 並 背景 字段,然后检查 定价 对于每个计划包含的内容。