Advanced 边距

高级标签页

高级标签页提供了额外的设置和自定义选项。在这个标签页中，您可以微调外观，添加自定义 CSS，控制响应性，以及配置选定组件或容器的高级功能。

高级标签页中的选项是为那些希望对其组件和容器的设计和功能拥有更大控制权的用户设计的。

Layout 高级标签页布局

Elementor 中的布局和大小调整设置详解

在 Elementor 中，可以通过以下设置对选定元素的外观和布局进行精确控制：

边距（Margin）

边距用于设置选定元素的外部空间，可以选择 PX（像素）、EM、REM 或百分比（%）作为单位。您可以为顶部、右侧、底部和左侧设置边距值。正值会增加空间，负值则减少空间。

填充（Padding）

填充设置选定元素内部的空间，同样可以使用 PX、EM、REM 或百分比为单位。填充影响内容与元素边界之间的空间。

宽度（Width）

选择小工具的宽度，可选全宽（100%）、行内（自动）或自定义：

• 自动（Auto）：宽度由内容自动决定。
• 全宽（Full Width）：延伸至容器的全宽。
• 行内（Inline/Auto）：行内元素根据内容自动调整其宽度。
• 自定义（Custom）：允许您设置特定的宽度值。

自定义宽度（Custom Width）

仅当选择了自定义时可用。使用滑块或在 PX、百分比或视口宽度（VW）中输入值来调整元素在列中的宽度。

自对齐（Align Self）

在其容器内对齐元素。选项包括开始（start）、中心（center）、结束（end）、基线（baseline）和伸展（stretch）。这在弹性容器中特别有用，用于控制单个项目的对齐方式。

顺序（Order）

指定小工具在弹性容器内的顺序。允许您相对于弹性容器中的其他项目更改小工具的顺序。数值较低的项目先显示。

尺寸（Size）

弹性增长/收缩属性指定项目相对于同一容器内其他弹性项目的行为。您可以选择：

• 无（None）
• 增长（Grow）
• 收缩（Shrink）
• 自定义（Custom） – 如果启用此选项，将出现以下选项：
  • 自定义弹性增长（Custom Flex Grow） – 输入值。
  • 自定义弹性收缩（Custom Flex Shrink） – 输入值。

了解更多关于尺寸属性的信息，这些设置使您能够对 Elementor 中的元素进行精细的布局和尺寸调整，以满足您的具体设计需求。

Position 定位选项

此选项允许您为元素选择绝对定位或固定定位。如果使用绝对定位或固定定位，您可以在水平和垂直偏移量上手动输入数值X和Y位置。

• 默认定位（Default Position）：元素处于其自然状态，仅通过页面的自然流动定位。这是所有元素的默认定位。
• 绝对定位（Absolute Position）：元素根据其第一个具有指定位置的父元素进行定位。您可以手动设置精确的X和Y位置（水平和垂直）以实现精确放置。
• 固定定位（Fixed Position）：即使页面滚动，元素也固定在自定义位置。它相对于用户的视口（他们在屏幕上可以看到的内容）保持不变。

Additional Controls 额外控制

如果选择了绝对定位或固定定位，以下选项将变为可用：

• 水平定向（Horizontal Orientation）：为绝对定位设置水平参考点，有开始（Start）或结束（End）选项。
• 偏移（Offset）：通过偏移量改变水平参考点。
• 垂直定向（Vertical Orientation）：为绝对定位设置垂直参考点，有开始（Start）或结束（End）选项。
• 偏移（Offset）：通过偏移量改变垂直参考点。

层级（Z-Index） 指定小工具的堆叠顺序。更高的层级（z-index）将小工具向前移动在堆叠顺序中，可能会与其他层级较低的元素重叠。了解更多关于层级的信息。

CSS ID 为小工具分配一个自定义的CSS ID。允许您使用自定义CSS规则来定位小工具。

CSS 类（CSS Classes） 为小工具分配自定义CSS类。您可以添加多个类，通过自定义CSS规则实现高级样式。

显示条件（Display Conditions） 允许您根据各种参数控制内容的可见性。这使得您可以在满足特定条件时才显示或隐藏元素，如用户角色、时间或其他自定义条件。

 

Motion Effects

Background背景设置

在 Elementor 中，背景设置允许您自定义小工具在正常状态下以及悬停时的背景。

Normal/Hover 正常/悬停

这一设置项让您可以分别定制小工具在正常状态和鼠标悬停状态下的背景样式。

Background Type 背景类型

您可以选择经典或渐变两种背景类型：

• 经典（Classic）：使用纯色作为背景。您可以从颜色选择器中选择背景颜色。
• 渐变（Gradient）：应用渐变色作为背景。您可以通过选择两种或更多颜色并调整渐变类型、角度和位置来定义渐变。

这些背景设置提供了丰富的视觉效果选项，使您能够为网站的各种元素创造出引人注目的视觉效果，增强用户的互动体验。通过精心设计的背景，可以有效地引导用户的注意力，增强网页的整体美感和专业度。

 

Border边框

在 Elementor 中，边框设置允许您自定义小工具在正常状态和鼠标悬停状态下的边框样式。

Normal/Hover 正常/悬停

这一设置项让您可以分别定制小工具在正常状态和鼠标悬停状态下的边框样式。

Border Type 边框类型

选择边框的样式，可选项包括无边框、实线、双线、点状、虚线或槽状。

• 无（None）：不显示边框。
• 实线（Solid）：单一厚度的实线边框。
• 双线（Double）：两条平行线组成的边框。
• 点状（Dotted）：由一系列点组成的边框。
• 虚线（Dashed）：由一系列短线组成的边框。
• 槽状（Grooved）：看起来像是刻入材料的边框。

Border Radius 边框半径

圆化小工具的角。您可以设置边框半径的值来创建圆角。边框半径值越高，角越圆。

Box Shadow

为小工具添加阴影效果。您可以设置盒子阴影的参数，如颜色、模糊度、扩散和位置，以在小工具周围创建阴影效果。

这些边框和阴影设置提供了额外的视觉层次感和精细控制，使设计师能够为网页元素增添视觉效果和专业触感，从而提升用户体验和网站整体的视觉吸引力。通过精心设计的边框和阴影，可以使网站的各个部分更加突出和吸引人。

 

Mask 遮罩设置

遮罩(Mask)

在 Elementor 中，启用On遮罩功能后，您可以为您的小工具定义一个遮罩，以增加额外的视觉效果和创意表现。

形状（Shape）

从下拉列表中选择您的遮罩形状。您可以选择一个预设形状或上传自定义的 SVG 形状。

尺寸（Size）

选择遮罩的尺寸，选项包括适合（Fit）、填充（Fill）或自定义（Custom）。

• 适合（Fit）：遮罩将调整大小以完全适应小工具的尺寸，不会超出小工具的边界。
• 填充（Fill）：遮罩将扩展以完全覆盖小工具区域，可能会超出原始形状的边界。
• 自定义（Custom）：允许您设置特定的遮罩尺寸，适用于需要精确控制遮罩效果的情况。

位置（Position）

确定遮罩在小工具内的位置。可选的位置包括顶部（Top）、右侧（Right）、底部（Bottom）、左侧（Left）和中心（Center）。

重复（Repeat）

选择重复选项以确定遮罩图案是否以及如何重复。这有助于创建连续的图案效果，特别是当遮罩形状需要在小工具区域内多次出现时。

通过这些设置，遮罩功能为 Elementor 用户提供了一个强大的工具，用以创造独特的视觉风格和图案效果，增强网页设计的整体吸引力和专业度。使用遮罩可以突出显示特定元素或为网站添加创意图形元素，使设计更具表现力和吸引力。

 

响应式设置

在 Elementor 中，响应式设置允许您根据用户访问设备的类型和方向来控制元素的可见性，确保网站在所有设备上都提供最佳的用户体验。

隐藏在桌面上（Hide On Desktop）

启用此选项后，当用户通过桌面设备访问您的网站时，该元素将不可见。

隐藏在平板竖屏上（Hide On Tablet Portrait）

启用此选项后，当用户通过平板设备以竖屏模式访问您的网站时，该元素将不可见。

隐藏在手机竖屏上（Hide On Mobile Portrait）

启用此选项后，当用户通过手机设备以竖屏模式访问您的网站时，该元素将不可见。

通过这些响应式设置，您可以精细地调整网站的布局和内容展示，以适应不同的浏览环境和用户设备。这种灵活性确保了无论用户使用何种设备或方向查看网站，都能获得清晰和专业的网页显示效果。这些设置特别有助于优化用户的浏览体验，提高网站的可用性和访问效率。

 

自定义属性

在 Elementor 中，自定义属性功能允许您向元素添加自定义的 HTML 属性。您可以按照“属性=值”的格式添加属性和值。例如，您可以添加数据属性或其他您希望包含在小工具的 HTML 输出中的自定义属性。

添加自定义 CSS

此功能使您能够为元素添加自定义 CSS 代码。您可以直接在此字段中输入 CSS 规则，以覆盖或扩展 Elementor 应用的默认样式。这可以包括颜色、字体、大小、边距、填充等的样式设置。

通过使用自定义属性和 CSS，您可以增强和个性化 Elementor 项目的功能和外观：

• 自定义属性： 适用于需要将额外数据绑定到 HTML 元素上的情况，这些数据可以被 JavaScript 用于执行动态效果或其他交互功能。例如，您可以添加如 data-type="slider" 或 data-id="uniqueElement" 等属性，用于脚本调用或样式钩子。
• 自定义 CSS： 提供了对页面元素样式进行精确控制的能力，特别是当您需要应用不在 Elementor UI 中直接提供的特定样式时。自定义 CSS 是增强网站视觉呈现和功能的强大工具，使设计师能够精确实现设计意图，超越基本的布局选项。