元素¶
元素有助于有效地结构和展示内容。它们既包括基于文本的组件，如 标题、列表 和 文本高亮 ，也包括交互式组件，如 按钮 和 链接 。还可添加 图像、 图标、视频 和 动画 等可视化元素，以改进内容的展示和组织。
添加或修改网站元素：
前往到相关的网站页面，然后点击 编辑。
点击页面上要添加或修改元素的部分。
进行必要的更改。
点击 保存。
注解
例如，标题、按钮、链接和段落文本的默认样式在网站编辑器的 主题选项卡 中定义。
标题¶
标题可定义标题，并将网站内容组织成不同层次，以提高清晰度和结构性。要插入标题，请键入 /title，选择标题样式（标题 1、标题 2 或 标题 3），然后键入文本。
小技巧
或者，键入文本，选择文本，然后从网站编辑器的 自定义 选项卡中的 行内文本 部分选择适当的样式。该部分还提供字体和颜色等其他格式选项。
图像¶
插入图片：
输入
/image。搜索 Unsplash 数据库 或点击 上传图片 从本地图片中选择文件。
点击 加入。
要自定义图片，请点击图片并编辑网站编辑器中 图片 部分的选项。例如：
替换 图像。
在 说明 字段中定义一个 alt 标记 。
在 Tooltip 字段中输入标题标签。当访客将鼠标悬停在图片上时，该文本就会出现。
添加 形状；某些形状还允许自定义颜色。
调整图像的 宽度，例如，以提高性能。如果足够显示，可以建议使用较小的尺寸。
使用 变换 工具调整图像大小。
调整 内边距 以增加图像周围的空间（单位：像素）。
诸如此类。
视频¶
添加视频的操作步骤：输入 /video，粘贴视频网址，开启所需功能选项即可：
自动播放：页面打开时自动播放视频，默认静音播放。
循环播放：让视频循环播放。
隐藏播放控件
隐藏全屏按钮
图标¶
插入图标的操作步骤：输入`/image`，切换至 图标 标签页，选中目标图标后点击 添加。修改图标样式，点击已插入的图标，在网站编辑器的 图标`设置板块中，可自定义各项属性，包括 :guilabel:`颜色、 尺寸、 动画效果、 :guilabel:`形状`等。
链接¶
链接用于关联不同页面与资源，为访客导航提供指引，优化网站的浏览体验。添加链接的操作步骤，输入`/link`，在弹出的配置窗口中，填写链接的 标签，并录入 网址或邮箱。快捷操作：输入/可搜索站内页面并关联，输入#可链接至站内的 锚点。
小技巧
系统默认将 样式`字段设为 :guilabel:`链接，选择其他样式，可将该链接转换为 :ref:`按钮 <website/elements/buttons>`样式。
列表¶
列表有助于清晰地组织内容，使信息更易于阅读，并改善网页结构。输入 /list，然后从三种不同类型的列表中进行选择： 删除列表、 编号列表`或 :guilabel:`检查列表。
文本高亮¶
可在网站编辑器的 行内文本 部分为标题和文本添加高亮显示。添加高亮：
选择要高亮显示的文本或标题。
在网站编辑器中，点击 高亮。
选择高亮样式。
修改其 颜色。
选择其 厚度。
动画¶
动画效果可用于为 构建块 <building_blocks>`及图片、文本等网站元素添加动态效果。系统提供三类动画效果可选： :guilabel:`滚动触发、 显示触发 和 :guilabel:`悬停触发`（仅适用于图片）。
为网站元素添加动画：
点击元素。
在网站编辑器中，转到元素的相关部分（如 按钮、 列、 行内文本 等）。
在 动画 字段中，选择所需的动画类型。
根据需要自定义动画设置。可用选项因所选动画类型而异。
Animations on scroll¶
For animations on scroll, it is possible to:
Choose In to add the animation when the element enters the screen and Out to add it when it leaves the screen.
Select an Effect.
Choose the Direction of the effect.
Adapt the Intensity of the effect.
Define the Scroll Zone, where the first value represents the percentage of the screen shown when the effect starts, and the second value represents its percentage at the end.
Animations on appearance¶
For animations on appearance, it is possible to:
Choose among different effects.
Choose the Direction of the effect.
Pick a Trigger option to define when the animation occurs: either the First Time only or Every Time.
Adapt the Intensity of the effect.
If you want the animation to be triggered after a number of seconds, define this number in the Start After field.
Choose a Duration for the animation.
Animations on hover (for images only)¶
Animations On hover can be added to images. You can choose the Effect of the animation, as well as the Color and the Stroke Width.
其他资料