高级选项卡设置概述

不同的是 个人设置 选项卡，这些配置在所有元素中保持一致。通过探索这些设置，您可以有效地自定义每个元素的更高级功能并最大限度地发挥其潜力。

显示在

此 开启显示 设置可让您选择特定元素或部分是否在特定屏幕类型上可见：桌面、平板电脑或移动视图。 

调整此设置允许您根据设备隐藏或显示内容，确保您的页面针对不同的用户体验进行优化。

“显示开启”的工作原理：

• 桌面： 控制在桌面屏幕（较大的屏幕，宽度通常超过 1024 像素）上查看页面时元素或部分是否可见。
• 片剂： 控制平板设备（中等尺寸的屏幕，宽度通常在 768 像素到 1024 像素之间）上的可见性。
• 移动： 控制移动设备（小屏幕，宽度通常低于 768 像素）上的可见性。

GemPages 中的用例

• 移动优先设计：如果 如果你有一张大图像或一个详细的部分，它在桌面上看起来很棒，但在较小的屏幕上不太合适，你可以 在移动设备上隐藏该元素并将其替换为更适合移动设备的版本。
• 不同设备的自定义布局：复杂的产品网格可能在桌面上运行良好，但在移动设备上，您可以通过隐藏网格并显示单列列表来简化布局。
• 目标讯息: 如果您想有选择地向不同设备上的用户显示不同的营销信息（例如，提供移动专属折扣），此设置允许您根据用户的设备显示某些元素。

间距

在 间距 部分，您可以调整所有 4 个维度 余量 和 填充。 

余量 

余量 是元素边框外的空间。它控制元素与页面上其他元素之间的空间。边距是透明的，可将元素推离其周围的内容，在其周围创建一个缓冲区。

在 GemPages 中，您可以使用边距来控制不同元素之间的距离，例如两幅图像之间或一个按钮和一个文本块之间的距离，以创建视觉分离或空白。

填充

内边距是元素边框内、内容外的空间。它定义了元素内容（如文本或图像）与元素边框之间的空间量。

在 GemPages 中， 填充 用于在元素内创建空间。例如，您可以为按钮添加内边距，以便按钮内的文本周围留出空间，从而使按钮更大或视觉上更平衡。

形状

边境

边框是围绕元素内容和填充的线。它定义元素（例如按钮、图片或文本框）的轮廓或边缘。边框可以具有不同的宽度、样式（实线、虚线、点线等）和颜色。

GemPages 中的用例

边框用于在视觉上强调、定义或分隔元素。例如，在号召性用语按钮周围添加边框可使其更加清晰地突出显示，或在图像周围添加边框可使其具有框架外观。

角（边界半径）

圆角通常称为边框半径，用于控制元素圆角的圆度。它定义了圆角的尖锐度或弯曲度。应用边框半径后，元素的圆角将变圆，值越大，圆角越圆。

GemPages 中的用例

您可以使用 border-radius 为元素添加圆角，让其外观更加柔和。这对于按钮、图像和容器尤其有用，因为您可以用它们来营造现代、友好或时尚的美感。 举个例子，通过将边框半径设置为 50%，可以将矩形图像转变为圆形。

阴影

阴影可在元素周围添加阴影效果，使其具有深度和层次感或高度感。阴影可以通过颜色、模糊半径、扩展和偏移（与元素的距离）进行调整。

GemPages 中的用例

阴影通常会在平面元素上产生三维效果，使其从页面中凸显出来。例如，您可以为卡片或文本块添加微妙的阴影以营造深度感，或应用更强烈的阴影来突出显示重要元素（如产品图片）。

职务

CSS position 属性对于控制元素在网页上的放置方式至关重要。它使用不同的值来定义元素在布局中的位置。

• 静态的： 默认定位方法。元素出现在正常文档流中，并根据其他元素在 HTML 中的顺序自然地与其他元素堆叠。
• 相对的： 元素保持正常流向，但可以使用偏移属性（上、右、下、左）从其原始位置移动。其原始占用的空间仍然保留。
• 绝对： 该元素相对于具有 relative, absolute 或 fixed 位置。它从正常的文档流中移除，因此不会影响其他元素的定位。
• 黏： 该元素的行为类似于 relative 直到页面滚动到某个点，然后它就会“粘”在原地，就像 fixed。这通常用于粘性标题或浮动栏。
• 固定： 该元素相对于浏览器窗口定位，即使在滚动时也保持在同一位置可见。对于浮动按钮或粘性导航等持久性 UI 元素非常有用。

GemPages 中的用例

• 重叠元素： 使用绝对定位，您可以创建重叠元素，例如将文本放置在图像之上。调整 索引 控制哪个元素出现在顶部。
• 偏移调整: 您可以使用顶部、左侧、底部或右侧偏移来微调图像或文本的位置，这些位置需要从其通常位置稍微移动，而不会影响其他元素。

不透明度

不透明度是元素的透明度，决定了透过元素可见的背景或底层元素的程度。不透明度值的范围是 0% 到 1%，其中：

• 0%：该元素完全透明（完全不可见）。
• 100%：元素完全不透明（完全可见）。
• 元素之间的任意值 部分透明，可实现不同的可见度。

动画

动画分为出现和悬停效果。切换 动画 设置为 ON 来扩展其设置，选择您喜欢的设置，并对其进行配置以使动画符合您的期望。

何时出现

• 选择淡入淡出、滑动、缩放或摇动作为显示效果。点击 没有 如果您不想在元素出现时添加效果。
• 调整速度、延迟和缓和以达到出现的效果。

悬停时

从我们的数据库中通过 UL Prospector 平台选择 没有 不添加任何效果，或者从缩放和摇动效果中选择。

GemPages 中的用例

• 号召性用语按钮摇动：您可以让按钮摇动或弹跳来吸引用户的注意力，鼓励他们点击。例如，“立即购买”按钮可以在悬停时或在特定延迟后使用摇动效果，使其脱颖而出。
• 滚动时部分淡入： 当用户向下滚动页面时，特定部分可以淡出或滑入视图。此效果可创造更具吸引力的体验，以视觉上吸引人的方式引导用户浏览内容。
• 悬停时图像缩放：为了增加交互性，您可以将图像设置为在用户将鼠标悬停在图像上时放大，这对于产品图像或图库中的视觉元素非常有效。
• 文字动画：您可以为文本元素制作动画，使其在加载或滚动时滑动或淡入，强调重要消息或标题。

互动

为元素创建触发交互。

一旦你点击 创建，您将被重定向到 交互设置.

CSS类

CSS 类是 HTML 元素的可重复使用样式。它有助于在整个网站上保持一致的元素外观。