网站标签 -，也称为页内选项卡,它们在网页设计中很受欢迎，它们允许您在单个窗口内的同一组内容之间切换，并提高网站的整体可读性。但是设计不当的可能会导致交互出现问题。熟悉网站标签或需要加强您的标签设计，一切都与标签有关 - 为什么需要它们，以及如何使用强大的 SP Page Builder 为您的 Joomla 网站创建漂亮的标签！

何时使用标签？

网站标签是必不可少的，页内选项卡是一个不错的选择。此元素的主要目标是允许用户一次一个地查看一组相关数据，以便他们可以顺利找到所需的特定信息。

在以下情况下最好使用选项卡：

• 您需要信息高度可扫描且易于导航
• 页面可以从更有条理的结构中受益
• 你想展示一组相关的信息
• 您可以将您的内容集分类为不同的部分
• 您还可以使用选项卡进行导航

选项卡的指南和最佳实践

既然您知道网站何时可以使用选项卡，那么了解创建有效选项卡的指南很重要。一个好的网站标签是直观的，可以帮助读者轻松浏览信息，并使您的网站前景更上一层楼。

设计标签来引导用户：尽量让标签简短而具体。短标签在标签中更具可扫描性和可控性。如果您需要长标签，添加图标和副标题可以提供更具指导性的体验，也是增强选项卡控件上下文的好方法。

注意长度：您需要注意每个选项卡中内容的长度。单个选项卡上的太多信息会使读者感到困惑，并且无法达到选项卡的目的。在每个选项卡模块中保持您的内容精确和长度相似。

按顺序排列选项卡：按重要性或逻辑顺序排列选项卡。例如，通常是第一个选项卡的默认选项卡应包含最重要/最有用的信息。这将创建一个逻辑流程并且对读者有意义。

使其具有交互性：最后但并非最不重要的是，使您的标签具有交互性。不要只使用纯文本，而是使用图像或视频来创建更具吸引力的内容。此外，请注意小细节，例如突出显示当前选项卡、是否创建点击或悬停触发器等，以获得无缝的用户体验。

如何使用 SP Page Builder 创建标签

SP Page Builder 因其惊人的拖放站点构建功能而广受喜爱。如果您是 SP Page Builder 用户，您就会知道它使整个开发过程变得相当简单。此外，借助所有强大的附加组件，您几乎可以向您的网站添加任何您想要的交互功能。谈到插件，今天我们将看到您如何使用标签插件在您的网站上创建漂亮的标签，而无需与任何代码。

第 1 步：添加 Tabs 插件

第一步是获取 SP Page Builder Pro。访问SP Page Builder 登陆页面，向下滚动，选择适合您的购买计划并获得 SP Page Builder Pro。通过导航到您的 Joomla 仪表板 > 扩展 > 扩展管理器来安装下载的 zip 文件。

现在，您可以开始使用 SP Page Builder 创建页面布局。一旦您对正在进行的布局感到满意，请在左侧边栏上搜索“标签”并将插件拖放到页面上。

这是默认情况下的外观，无需任何自定义。

第 2 步：添加选项卡项

在开始添加标签项之前，请计划好您的内容。将信息分类到不同部分后，相应地添加选项卡项。为此，请单击“添加项目”按钮。

第 3 步：设置选项卡的样式

选项卡插件让您可以选择选项卡样式，通过简单直观的界面创建漂亮的响应式选项卡。您可以从 Modern、Default、Pills、Lines 和 Custom 中进行选择。它们都有自己的用途，但在本教程中，让我们使用自定义样式。

第 4 步：自定义颜色和字体 

此步骤是可选的。更改内容背景颜色、字体大小、导航样式、填充等，看看哪些适合您。正是所有这些小细节产生了最大的不同。探索不同的自定义选项，您很快就会创造出独特而令人惊叹的东西！

第五步：添加内容

一旦你有了基本的结构，就该添加内容了。只需在各自的字段中键入标题和副标题，即可为您的选项卡模块提供标题和副标题。您还可以从图标列表中设置一个图标或使用唯一的图像作为图标，如下所示。

现在，让我们添加我们的标签内容。最好的部分是您可以使用任何您喜欢的插件为每个选项卡项目制作您的内容。我们如何添加 Image 插件来让我们的标签更具吸引力？

您可以设置宽度、高度、边框、图像位置等，并根据需要自定义图像的外观。

何时不使用标签

那么，你怎么知道什么时候不实现标签内容呢？要做出决定，您需要问自己几个问题。

• 您的内容是连续的还是有需要分段的主题？
• 用户处理带有或不带有标签的信息会更快吗？
• 您希望人们同时比较内容吗？

标签如果实施得当，可以清晰准确地向访问者展示信息并提高您的转化率。使用选项卡，用户很容易知道他们在哪里，他们可以在那里做什么，以及他们究竟可以使用什么。更神奇的是使用 SP Page Builder，您只需几步即可轻松创建漂亮的标签。它为您完成所有繁重的工作。