无代码移动应用用户引导编辑工具提供两个布局层：

• 屏幕布局：通过容器实现全局内边距和网格。
• 元素布局：每个元素的间距、位置、边框和阴影。

屏幕布局

您可以通过两种方式调整屏幕：

• 使用屏幕样式设置
• 使用容器

屏幕样式设置

要减小或增大元素与屏幕边缘之间的距离：

1. 在左侧选择屏幕。
2. 在右侧切换到 Styles 标签。
3. 在 Padding 部分设置顶部、底部和水平内边距。

容器

您可能需要添加并排的文本和图片、可滑动的图库或模态弹出窗口。容器通过允许您创建列、行、轮播和居中叠加层来轻松实现这些效果。

添加容器的步骤：

1. 点击左上角的 Add。
2. 进入 Containers 并选择一种：

• Columns：将屏幕拆分为垂直区域，用于并排内容（例如，两列文本或图文布局）。
• Rows：将项目排列在单行水平带中，间距均匀。
• Carousel：允许用户滑动浏览一系列卡片。
• Popup：在页面上方的居中叠加层中显示内容。

3. 创建要添加的元素，然后从左侧菜单将其拖放到容器中。

元素布局

单独调整每个元素的步骤：

1. 在左侧选择元素。
2. 在右侧菜单中切换到 Styles。
3. 在 Container 部分设置：

• Offset：水平或垂直移动元素。
• Position：设置元素的锚点：
  • In content：正常文档流
  • Attached：固定位置 - 始终在视口中可见（例如，底部的固定按钮）
  • Attached on scroll：滚动进入视图后变为固定（粘性行为）
• Padding：定义元素内容与其边框之间的内部空间。
• Background：在元素后面应用纯色。确保元素背景与屏幕背景匹配（例如，对于以深色屏幕为主的用户引导，使用灰色或黑色）。
• Roundness：确定元素角的圆角半径。
• Border：在元素周围添加描边并指定其粗细。
• Border Color：指定元素边框的颜色。
• Add shadows：添加具有可配置偏移、模糊/扩散和颜色的单个投影。

屏幕背景自定义

背景不仅影响您的用户引导设计，还会影响用户引导完全加载之前的加载屏幕。

您可以用颜色填充用户引导背景，或上传图片/视频：

1. 在左侧选择屏幕。
2. 在右侧切换到 Styles 标签。
3. 在 Background 部分，选择背景颜色或点击上传区域以上传图片/视频。

上传媒体时，请遵循支持的格式和大小要求。