垂直滚动标签页允许您以较高的并排布局显示标签页内容。标签页会堆叠在左侧或右侧，而每个标签页的内容则会显示在另一侧。访客可以向下滚动标签页来浏览其中的内容。
这样可以保持页面简洁，用户无需离开当前页面即可查看大量信息。您不仅可以显示文本，还可以在垂直滚动的标签页中显示图片、视频和模板。用户可以点击或轻触标签页来查看与其链接的内容，而其他部分则保持隐藏。
Elementor 是一款流行的无代码网站构建器。使用此插件，您可以使用其拖放功能从头开始构建整个网站。在本教程中，我们将向您展示如何使用 Elementor 在 WordPress 中创建垂直滚动标签。
垂直滚动标签的用例
垂直滚动标签页可帮助您在小空间内整理大量内容。它让访客无需加载新页面即可浏览各个主题。这种布局在桌面和移动设备上都易于使用。下面我们来看看垂直滚动标签页的一些使用案例。
a. 产品或服务详情
您可以并排显示多个产品或服务描述。每个标签页可以包含规格、价格、功能或评论。访客无需离开页面即可快速比较不同的选项。
b. 常见问题 (FAQ)
垂直标签非常适合常见问题解答。您可以将类似的问题归入一个标签页，将答案归入另一个标签页。读者可以滚动并点击他们感兴趣的问题。
c. 分步指南或教程
如果您想分享一个包含多个步骤的流程，垂直标签页可以让每个步骤清晰易懂。用户可以点击每个标签页，按顺序按照指南操作。这不仅方便学习，还能保持页面整洁。
d. 团队成员或员工简介
为每位成员提供一个标签页，以专业的方式介绍您的团队。每个标签页可以显示照片、角色和简短的个人简介。访客可以滚动浏览列表，轻松了解每个人的信息。探索一些优秀的团队页面示例。
e. 作品集或项目展示
以垂直标签页的形式展示您的作品或项目，以节省空间。每个标签页可以显示图片、描述和详情链接。这有助于访客在一个页面上浏览多个项目。
如何在 Elementor 中创建垂直滚动选项卡
理论部分已经结束。希望您现在对垂直滚动标签页的概念及其使用场景有了清晰的了解。我们现在开始教程部分。本节将讲解如何在 WordPress 上使用 Elementor 创建垂直滚动标签页。继续阅读！
开始本教程的先决条件
要使用 Elementor 在 WordPress 上创建垂直滚动选项卡，您需要在您的网站上安装并激活以下插件。
注意：您需要 HappyAddons Pro，因为 Elementor 没有内置创建滚动标签的选项。HappyAddons Pro提供了一个名为“滚动标签”的小部件，可让您轻松创建垂直滚动标签。
一旦这些插件在您的网站上准备就绪，请按照下面说明的教程进行操作。
步骤 01：使用 Elementor 打开页面
只需使用 Elementor 打开您想要创建垂直滚动选项卡的页面。
步骤 02：将滚动标签小部件拖放到画布上
在 Elementor 面板上找到“滚动标签”小部件。将其拖放到 Elementor 画布上。
滚动标签窗口小部件附带一些默认内容。将其添加到画布后，您将看到这些默认内容。
步骤 03：开始向标签添加内容
您可以向“滚动标签”小部件添加内容，并以多种方式设置布局样式。请在此步骤中进行探索。
# 为滚动标签小部件添加标题
每个网页版块都应该有一个标题，清楚地说明其包含的内容类型。因此，您必须为“滚动标签”小部件版块编写一个标题。
前往“内容”>“标签内容”>“标题”。您将获得输入标题的空间。您可以看到我们输入了标题“时尚腕表洞察”。
# 为小部件写一个描述
在标题下方，您可以为该小部件添加描述。如果不需要描述，可以直接删除。
# 向标签页添加内容
将光标移到某个选项卡上并点击它。这将展开该选项卡并允许您添加内容。
# 为标签写一个标题
您必须为每个选项卡添加一个标题。选项卡展开后，您会在“导航文本”下方看到一个框。您可以在这里为选项卡添加标题。
# 更改标签页的图标
如果不需要，您可以删除该图标。但要更改图标，请点击“导航图标”下方的图标。
图标库将立即打开。选择您喜欢的图标，然后点击“插入”按钮。
可以看到图标已经改变。
# 通过编辑器向选项卡添加内容
每个选项卡允许您添加两种类型的内容。您可以选择使用编辑器或模板。
让我们首先选择编辑器选项。
使用此编辑器，您可以添加任何类型的文本和图像，它们将立即显示在相应选项卡的画布上。
# 更改标签内容的背景颜色
为了更好地突出显示选项卡中的内容，您可以更改其背景颜色，以便它与您添加到选项卡的所有内容很好地对齐。
# 通过模板向标签页添加内容
如上所述，该小部件允许您通过编辑器和模板向选项卡添加内容。现在让我们看看如何使用模板添加内容。
从“内容类型”中选择“模板”选项。如果您的网站上已经保存了预先设计的模板，则此选项将适用。
点击“选择模板”旁边的下拉图标。然后，选择您想要在选项卡上显示的模板。
您可以看到我们想要的模板已经添加到选项卡中。
以同样的方式，向滚动选项卡小部件的所有选项卡添加内容。
步骤 04：配置滚动选项卡小部件的设置
内容部分完成后，展开“设置”部分。
您可以从此部分更改导航面板的宽度和内容面板的高度，包括各种对齐调整。
# 调整导航面板的宽度
滚动选项卡小部件有两个部分 –导航面板（导航面板）和内容面板。
您可以通过拖动此选项下方的刻度来更改导航面板的宽度。此外，您还可以调整其位置和对齐方式。该过程如下方附带的视频片段所示。
# 调整控制面板的高度
以同样的方式调整控制面板的高度。同时，确认内容垂直对齐正确。
步骤 05：设置滚动标签小部件的样式
来到样式选项卡。我们先来设置一下导航面板的背景颜色。
# 自定义导航面板内容的排版
逐一更新已添加到导航面板的每个内容的字体。您可以根据需要更改字体系列、大小、粗细、行高等。
# 样式化标签
通过添加边框类型、边框宽度、内边距、边框颜色、边框半径、文本颜色和背景颜色，您可以自定义标签页的样式，使其呈现效果如下图所示。希望您也能自己动手实现。
以同样的方式，扩展和风格化与内容面板和滚动部分相关的内容。
步骤 06：优化手机的滚动标签小部件
要针对移动屏幕尺寸优化小部件，请转到顶部栏上的“移动肖像”模式。
您会看到导航器选项卡默认出现在顶部。
# 调整移动设备的内容面板高度
现有高度可能不足以容纳内容面板。在这种情况下，您必须增加高度，以便选项卡内的所有内容都能在移动设备屏幕上完美显示。
步骤 07：优化平板电脑的滚动标签小部件
同样， 切换到平板电脑纵向模式 以 优化内容，以便在平板电脑屏幕尺寸上实现最佳显示。
您可以在下方的视频片段中看到，该小部件在平板电脑屏幕上已经显示良好。因此，我们无需对其进行任何修改。
步骤 08：预览滚动标签小部件
前往预览页面，检查小部件是否正常工作。您可以看到，小部件在我们这边运行良好。
因此，您可以使用 Elementor 在 WordPress 中创建垂直滚动选项卡。
最后的要点！
垂直滚动标签页是一种巧妙的方法，既能保持网页整洁，又能分享大量信息。它能让访客无需跳转到新页面就能找到所需内容。按照上述步骤操作后，您就可以使用 Elementor 和 HappyAddons Pro 轻松设计这些标签页了。
这会给您的网站带来现代感，并改善用户浏览内容的方式。不过，在创建此部分时，请牢记一些最佳做法。为每个标签页使用清晰的标题，以便用户了解内容。确保文本、图片和视频简洁，以便页面快速加载。
检查不同屏幕尺寸下的设计，并根据移动用户调整间距。保持颜色和字体与网站风格一致，以便标签页与设计的其他部分自然融合。这些小细节有助于为每位访客打造流畅、专业的体验。
评论0