如何使用 PowerPack 插件在 Elementor 中创建选项卡式内容

想知道如何在 Elementor 中创建选项卡式内容？

选项卡式内容通过以紧凑​​而实用的方式显示大量信息来增强网页的外观。

在本文中，我们将讨论如何使用 Elementor 和 PowerPack 插件为 WordPress 网站创建选项卡式内容。

PowerPack 高级选项卡小部件 - 概述

PowerPack Addons for Elementor 是 Elementor 页面构建器的终极插件之一。 它有 150 多个独特而时尚的模板和 80 多个方便的小部件，包括用于在 Elementor 上创建选项卡式内容的高级选项卡小部件。

高级选项卡小部件是在任何 WordPress 网站上创建选项卡式内容的最佳选项卡小部件。 让我们看一下 Elementor 的 PowerPack Advanced Tabs 小部件的功能：

• 支持多种内容源
• 多个内容可自定义选项来设置您的内容样式。
• 允许您创建水平选项卡和垂直选项卡。
• 提供出色的响应支持并在所有屏幕上流畅运行。
• 提供多种样式选项，例如文本颜色、排版、背景类型、制表符间距、边框、文本对齐等等。
• 允许您分别自定义图标、标题和内容部分。

使用 PowerPack 插件在 Elementor 中创建选项卡式内容

在开始之前，请确保您已安装并激活 Elementor 页面构建器和适用于 Elementor 的 PowerPack 插件。

在 WordPress 网站上激活这两个插件后，使用 Elementor 编辑器打开页面。

接下来，在小部件区域中搜索“高级选项卡”，然后将小部件拖放到页面上。

不要忘记检查 PowerPack “ 聚丙烯” 小部件右上角的标志。

高级选项卡小部件的内容选项卡

高级选项卡小部件的内容选项卡包括两个部分：

1. 高级选项卡
2. 布局

让我们详细看看这些部分。

高级选项卡

让我们看一下本节中的可用功能：

• 您可以根据需要添加任意数量的“标签”。 只需单击“添加项目”即可创建更多选项卡。
• 您可以单独自定义每个选项卡。
• 内容类型：此选项允许您选择多种内容类型，例如内容、图像、链接（视频/图像）、已保存部分、已保存小部件和已保存页面模板。

“内容”作为内容类型

当您想要显示内容时，您可以自定义这些选项：

1. 标题：使用此选项为内容编写标题。
2. 内容：在此部分中，您可以向选项卡添加内容，其中包含数字列表、项目符号列表、链接、粗体、斜体、下划线和许多其他功能来设置文本样式。 除此之外，您还可以从媒体库中添加图像。

“图像”作为内容类型

当您想要显示图像时，您可以自定义这些选项：

1. 选择图像：使用此选项从图像库中选择图像。
2. 图像尺寸：此选项允许您选择所需的图像尺寸。

当您想显示链接时，您可以将链接拖放到“链接”选项。 如果您选择保存的部分、保存的小部件或保存的页面模板，您可以相应地选择它们。

当您为每个选项卡单独自定义内容部分时，同样，您可以为每个选项卡的图标这样做。

图标部分的特点是：

1. 图标类型：您可以选择图标类型，图标或图像。 它可能是您品牌的标志或任何其他东西。
2. 图标：您可以从图标库中选择一个图标。

布局

让我们看一下本节中的可用功能：

• 布局：您可以选择布局为水平或垂直模式。
• 响应式支持：高级选项卡小部件支持所有设备上的响应式模式，无论是台式机、平板电脑还是移动设备。
• 选择样式：使用此选项选择选项卡样式。
• 滚动到顶部：您可以在单击标题时选择是或否来选择是否要滚动到选项卡的顶部。

[注意：此选项仅在您为选项卡选择垂直布局模式时可用。]

• 默认活动选项卡索引：此选项可以设置默认活动选项卡。 因此，每当您访问您的网站时，您选择的选项卡将默认显示。
• 自定义 ID 前缀：您可以添加自定义 ID 前缀，该前缀将应用于 HTML 中选项卡的 ID 属性。

将这些更改应用到您的“高级选项卡”小部件以查看最佳结果。

高级选项卡小部件的样式选项卡

高级选项卡小部件的样式选项卡包括两个部分：

1. 标签
2. 标题
3. 内容

让我们详细看看这些部分。

标签

让我们看看本节中包含的所有功能：

• 水平或垂直对齐：使用此选项选择选项卡的对齐方式，但首先选择布局。
• 选项卡之间的间距：使用此选项自定义选项卡之间的间距。
• 背景颜色：使用此选项，您可以为选项卡选择背景颜色。
• 边框半径：如果要在选项卡边框上显示弯曲边缘，请应用边框半径。
• 填充：调整选项卡的填充以保持选项卡边框和内容之间的间距。

标题

让我们看看本节中包含的所有功能：

• 图标位置：选择顶部、底部、右侧或左侧的图标位置。
• 图标大小：使用此选项调整图标大小。
• 图标图像宽度：使用此选项调整图标图像宽度。
• 边框半径：如果要在选项卡标题边框上显示弯曲边缘，则应用边框半径。
• 填充：调整选项卡的填充以保持选项卡标题边框和内容之间的间距。
• 标题排版：使用此选项自定义标题文本排版。
• 图标颜色：使用此选项选择图标颜色。
• 标题颜色：使用标题颜色选项自定义标题文本颜色。
• 标题背景颜色：如果要显示标题的背景颜色，可以使用此选项选择颜色背景。
• 悬停效果：此选项使您可以灵活地启用或禁用悬停效果。

内容

让我们看看本节中包含的所有功能：

• 对齐：使用此选项设置选项卡中显示的内容对齐方式。
• 背景类型：您可以选择经典或渐变背景类型。
• 文本颜色：选择要在选项卡上显示的内容的文本颜色。
• 文本排版：您可以使用此选项自定义内容文本的排版。
• 边框类型：从可用选项中为内容选择一种边框类型，例如实线、双线、点线、虚线或凹槽。
• 边框宽度：可以通过此选项调整应用于内容的边框宽度。
• 填充：调整填充以允许内容文本与其边框之间的间距，使其看起来有条理和干净。
• 边框颜色：可以使用此选项自定义内容边框颜色。
• 边框半径：如果您已将边框应用于内容部分，则可以使用此选项调整其半径。

因此，这就是通过 PowerPack Addons 为 Elementor 自定义高级选项卡小部件的内容和样式选项卡。

根据您的选择安装、激活和进行一些更改； 就这么简单。

获取 Elementor Page Builder 的 PowerPack 高级选项卡

在了解了 PowerPack Elementor Addons 提供的高级选项卡小部件的所有这些功能之后，我们非常确定您会喜欢在您的网站上使用它。

我们希望本教程帮助您使用 PowerPack 高级标签小部件为您的网站创建时尚的“标签”。

PowerPack Addons 的小部件由我们的创意编码人员精心设计，因此非编码人员可以在几分钟内轻松使用它们。

单击此处获取 PowerPack 高级选项卡小部件并增强您网站的外观和用户体验。

如果您喜欢阅读本文，您也很想体验我们的其他 PowerPack 元素。

请随时在此处发表您的评论； 我们很乐意收到您的回复。
此外，在 Twitter、Facebook 和 YouTube 上加入我们。