如何使用Elementor在WordPress中创建垂直滚动选项卡

垂直滚动选项卡可以使您可以在高大的并排布局中显示选项卡式内容。选项卡保持在左侧或右侧，而每个标签的内容出现在另一侧。访客可以向下滚动选项卡以探索其中的内容。

这使页面保持清洁，人们可以在不离开当前页面的情况下查看大量信息。您不仅可以显示文本，还可以在垂直滚动选项卡中显示图像，视频和模板。用户可以单击或点击选项卡以查看与之链接的内容，而其他部分则隐藏。

Elementor是一个流行的无代码网站构建器。使用此插件，您可以使用其拖放功能从头开始构建整个网站。在此教程帖子中，我们将向您展示如何使用Elementor在WordPress中创建垂直滚动选项卡。

垂直滚动选项卡的用例

垂直滚动选项卡可帮助您在一个小空间中组织大量内容。他们让访问者在不加载新页面的情况下通过主题。该布局易于在桌面和移动设备上使用。让我们看一下下面的垂直滚动选项卡的某些用例。

一个。产品或服务详细信息

您可以并排显示许多产品或服务描述。每个选项卡都可以包含规格，价格，功能或评论。访问者可以快速比较不同的选项而无需离开页面。

b。常见问题（常见问题解答）

垂直选项卡非常适合常见问题解答。您可以在一个选项卡下将类似的问题分组，然后在另一个选项卡下进行答案。读者可以滚动并仅单击感兴趣的问题。

c。分步指南或教程

如果您想通过多个步骤共享一个过程，则垂直选项卡保持每个步骤清晰。用户可以单击每个选项卡以按顺序遵循指南。这使学习变得容易，并使页面保持整洁。

d。团队成员或员工资料

通过给每个成员一个选项卡，以专业的方式介绍您的团队。每个选项卡可以显示照片，角色和简短的生物。访客可以滚动列表，并在没有混乱的情况下了解所有人。探索一些最好的团队页面示例。

e。投资组合或项目展示柜

在垂直选项卡中显示您的工作或项目以节省空间。每个选项卡可以显示图像，描述和链接到详细信息。这有助于访问者从一个页面探索许多项目。

如何在Elementor中创建垂直滚动选项卡

理论部分结束了。希望您现在清楚地了解垂直滚动选项卡是什么以及其用例是什么。我们现在将介绍教程。我们将在本节中使用WordPress上的Elementor来解释如何与Elementor创建垂直滚动选项卡。继续阅读！

启动教程的先决条件

要使用Elementor在WordPress上创建垂直滚动选项卡，您需要在网站上安装和激活以下插件。

• 免费的
• Happyaddons免费
• Happyaddons Pro

注意：您需要HappyAddons Pro，因为Elementor没有内置选项来创建滚动选项卡。 HappyAddons Pro提供了一个名为Scroll Tabs的小部件，可让您轻松创建垂直滚动选项卡。

这些插件在您的网站上准备就绪后，请按照以下说明的教程。

步骤01：使用Elementor打开页面

只需使用Elementor打开一个页面，您需要在其中创建垂直滚动选项卡即可。

步骤02：拖放画布上的滚动式窗口小部件

在Elementor面板上找到滚动选项卡窗口小部件。将其拖放到Elementor帆布上。

滚动选项卡窗口小部件带有一些默认内容。将小部件添加到画布中后，您将看到此默认内容。

步骤03：开始将内容添加到选项卡

您可以将内容添加到“滚动”选项卡窗口小部件，并在许多方面对布局进行样式化。在此步骤中探索它们。

＃将标题添加到滚动标签窗口小部件

每个Web部分都应具有一个标题，该标题清楚地分辨出其包含哪些类型的内容。因此，您必须为“滚动标签小部件”部分编写标题。

转到内容>标签内容>标题。您将获得写标题的空间。您会看到我们写了一个标题“时尚的手表见解”。

＃写一个小部件的描述

在标题下写入，您可以为小部件编写描述。如果不需要说明，则可以将其删除。

＃将内容添加到选项卡

将光标带到选项卡，然后单击它。这将扩展选项卡并允许您添加内容。

＃写一个标签的标题

您必须为每个选项卡编写标题。扩展选项卡后，您将在NAV文本下获得一个框。在这里，您可以为选项卡编写标题。

＃更改标签的图标

如果不需要，则可以删除图标。但是要更改图标，请单击您可以在NAV图标下看到的图标。

图标库将立即打开。选择一个您喜欢的图标，然后点击插入按钮。

您可以看到图标已更改。

＃通过编辑器将内容添加到选项卡

每个选项卡允许您添加两种类型的内容。您可以选择是使用编辑器还是模板。

让我们首先选择编辑器选项。

使用此编辑器，您可以添加任何类型的文本和图像，这些文本和图像将立即显示在相应标签的画布上。

＃更改选项卡式内容的背景颜色

为了更好地突出选项卡中的内容，您可以更改其背景颜色，因此它与您添加到选项卡中的所有内容都很好地对齐。

＃通过模板将内容添加到选项卡

如上所述，小部件使您可以通过编辑器和模板向选项卡添加内容。现在让我们看一下如何使用模板添加内容。

从内容类型中选择模板选项。如果您已经在网站上保存了预设的模板，则此选项适合使用。

单击“选择模板”旁边的下拉图标。然后，选择要在选项卡上显示的模板。

您可以看到我们所需的模板已经添加到选项卡中。

以同样的方式，将内容添加到滚动标签窗口小部件的所有选项卡中。

步骤04：配置滚动选项卡的设置

内容部分完成后，扩展“设置”部分。

您将能够从本节中更改导航器面板的宽度和内容面板的高度，包括各种对齐调整。

＃调整导航面板的宽度

滚动选项卡窗口小部件有两个部分 -导航器面板（NAV面板）和内容面板。

您可以通过在此选项下拖动比例来更改导航器面板的宽度。另外，您可以调整其位置和对齐方式。该过程显示在下面的视频剪辑中。

＃调整控制面板的高度

以同样的方式调整控制面板的高度。另外，请确认内容垂直对齐。

步骤05：样式化滚动选项卡窗口小部件

来到“样式”选项卡。让我们首先为导航器面板设置背景颜色。

＃自定义NAV面板内容的版式

为您添加到Navigator面板中的每个内容，更新版式，一一。您可以根据需要更改字体家族，大小，重量，线高等。

＃样式标签

通过添加边框类型，边框宽度，填充，边框颜色，边框半径，文本颜色和背景颜色，您可以对选项卡进行样式化并像以下图像一样显示它们。希望你能自己做。

以同样的方式，扩展并设置与内容面板和滚动部分相关的内容。

步骤06：优化手机的滚动标签小部件

要优化移动屏幕尺寸的小部件，请转到顶部栏上的移动肖像模式。

您会发现默认情况下，导航器选项卡出现在顶部。

＃调整内容面板的移动设备高度

现有的高度可能不足以用于内容面板。在这种情况下，您必须增加高度，以便在移动屏幕尺寸上可以完美地看到选项卡中的所有内容。

步骤07：优化平板电脑的滚动标签小部件

同样，切换到平板电脑肖像模式，以优化在平板电脑屏幕尺寸上最佳显示的内容。

您可以在下面的视频剪辑中看到小部件在平板电脑屏幕上看起来不错的视频剪辑。因此，我们不需要对其进行修改。

步骤08：预览滚动选项卡窗口小部件

来到预览页面，检查小部件是否正常工作。您可以看到小部件在我们的尽头很好。

因此，您可以使用Elementor在WordPress中创建垂直滚动选项卡。

最后的收获！

垂直滚动选项卡是保持网页整洁的同时共享大量信息的明智方法。他们让访客找到所需的东西，而无需跳到新页面。遵循上面的步骤后，您可以轻松地使用Elementor和HappyAddons Pro设计这些选项卡。

这使您的网站具有现代外观，并改善了用户探索您的内容的方式。但是，在创建本节时，请记住一些最佳实践。为每个标签使用清晰的标题，以便用户知道会发生什么。确保文本，图像和视频很轻，因此页面加载迅速。

检查不同屏幕尺寸的设计，并为移动用户调整间距。保持颜色和字体与网站的样式一致，因此标签与其余的设计自然融合在一起。这些小细节有助于为每个访客创造平稳，专业的体验。

了解如何使用Elementor在WordPress中设计翻转框。