Tab 元素

Tab元素是什么？

网站上的标签设计灵感源自纸质文件夹的物理标签。它们让你能够以紧凑、易于浏览的格式显示不同的内容部分。

随着 GemPages Tab 元素，您可以：

• 以有组织的、节省空间的布局呈现内容。
• 允许用户在不离开该部分的情况下切换内容。
• 保持页面整洁且具有视觉吸引力。

如何在 GemPages 中添加 Tab 元素

按照以下步骤插入 Tab 元素 进入您的页面：

第四步： 来自 GemPages 仪表板，打开要编辑的模板。您可以快速找到 制表 编辑器左侧栏的元素，在 互动 部分。将元素拖放到您喜欢的任何位置。

第四步：删除其他元素，例如 标题, 文本块, 图片， 等等，在选项卡内创建您想要的内容布局。

单击 Tab 元素， 配置将在左侧边栏中提供，这将在以下部分中介绍。

配置选项卡元素设置

一旦 Tab 元素出现在页面上，其配置选项就会出现在 左侧边栏.

1. 设置选项卡

布局

• 控制标签相对于内容的位置。
• 默认：选项卡 左 的内容。

布局选项：

• 内容上方的标签
• 内容左侧的标签
• 内容右侧的标签

选择布局将打开 布局弹出窗口 以便于更改。

标签

1. 顺序：默认元素有 3 个选项卡项。弹出窗口中的选项卡标题反映了设计区域中选项卡的内容。

• 要添加其他选项卡：只需单击“添加更多”选项。 
• 要复制选项卡：将鼠标悬停在所需的幻灯片上，然后单击复制图标。 
• 要删除选项卡：将鼠标悬停在特定幻灯片上，然后单击垃圾桶图标。

2. 文字： 每个标签内容的文本样式。

3.宽度：每个标签页项目的宽度。默认宽度值为“自动”，即标签页宽度将自动调整以匹配其内容的大小。

宽度选项：单击宽度输入字段的下拉按钮时，将出现一个包含宽度选项的下拉菜单：

• 自动表示宽度将适合内容
• 全宽表示宽度 = 100%（全宽）-> 每个标签的宽度将被元素填充

4。 背景：设置每个标签的背景颜色。

5。 边界：自定义边框样式。

6. Tabs align：Tab元素内所有Tab项的对齐方式。

• 布局顶部→水平对齐。
• 布局左/右→垂直对齐。

7. 悬停效果：每个标签悬停时的设置。

8.活动状态：各个标签页处于活动状态时的设置。

尺寸

1.宽度

宽度 = 1200px：当放置 Tab 来创建新部分或位于第 1 部分列内时

宽度 = 100%（全宽）：当 Tab 放置在其他元素内时

宽度选项：点击宽度输入字段的下拉按钮时，将出现一个包含宽度选项的下拉菜单： 

• 默认值为宽度 = 1200px
• 全宽表示宽度 = 100%（全宽）

2. 填充

• 元素的填充。
• 添加填充将增加元素边缘与元素实际大小之间的间距。

背景

1。 颜色

单击输入组合将打开颜色选择器并添加默认颜色#DDDDDD。

2。 图片

单击输入组合将打开图像选择器并添加默认图像。

形状

这些形状设置适用于手风琴的包装。 

• 边境
• 角落
• 阴影

显示选项

• 默认活动：设置默认初始选择的选项卡项目之一。

对齐

• 当元素的宽度为 100% 时，对齐将被禁用。
• 如果没有，则默认对齐选项为对齐 中心：

2. 高级选项卡

如需更多高级定制，请导航至 先进的 选项卡并按照 本文.