如何创建和使用 Elementor 选项卡介绍

我们在构建网站时，需要把内容布局规划的很整齐，好处是不但可以让内容更易于理解，还有利于用户体验。如果你使用了页面编辑器，那么不妨试试 Elementor Tabs，绝对是一个规划布局的好帮手。

Elementor Tabs 俗称：选项卡，是 Elementor 编辑器中一个很重要的元素，能帮助用户在不同内容之间快速切换。而之前这类内容可能要点击链接到不同页面。把相关内容分组到选项卡中可以增强网站的外观和可用性。而且即使你是一个 WordPress新人，也能轻松完成这一切。

在本文中老魏简单介绍了 Elementor Tabs，分享如何创建和自定义 Elementor 选项卡，以及一些增强选项卡功能的插件。

如果你还不熟悉 Elementor，或者只听说过 Elementor的大名而没有具体使用过，请查看 Elementor专题，了解更多。

创建 Elementor 选项卡

我们已经安装 Elementor，打开要添加选项卡的文章、页面，在 Elementor 编辑器界面，左侧面板的 Elements中，搜索并选择 Tabs元素。拖拽到右侧页面的合适位置。

此时左侧看到 Tabs设置选项如下：

你可以输入每个选项卡的标题和内容，单击 +号添加按钮以插入另一个选项卡。在Type下，选择是水平显示选项卡还是垂直显示选项卡。

自定义 Elementor Tabs

选择自定义选项卡以修改其属性，包括其标题、框内容和图标。还可以更改其位置和对齐方式。
在样式选项卡下看到很多自定义 Elementor 选项卡的设计和外观的选项。您可以修改其文本颜色和阴影、版式、间距等：

发现许多用于自定义 Elementor 选项卡的设计和外观的选项。修改其文本颜色和阴影、版式、间距等。

选项卡周围的边框颜色和宽度。

在Title 中可以修改选项卡标题的文本颜色。通过单击Typography更改字体和文本大小：

Elementor 选项卡高级设置

• 高级：更改选项卡的边距和填充。
• 运动效果：添加滚动和鼠标效果，更有交互性并添加入口动画。
• 变换：翻转、旋转和缩放的小部件。
• 背景：选择标准背景或悬停以插入过渡。
• 边框：选择边框类型，例如实线或虚线。
• 面具：选择时尚的设计面具并将其应用于小部件。
• 定位：调整小部件的宽度和位置。
• 响应式：更改将影响预览或实时页面的响应式可见性。
• 属性：为元素包装器设置自定义属性。
• 自定义 CSS：插的自定义 CSS
• 请务必注意，如果您使用的是 Elementor 的免费版本，您将无法访问所有这些高级设置。例如，您不能添加自定义属性、滚动效果或CSS。

上面介绍完了 Elementor 选项卡，下面介绍如何使用。

在选项卡小部件中添加元素

使用 Elementor Pro 还能在选项卡中插入别的元素，比如在 Locations 选项卡添加 Maps 小部件。

先创建要使用的地图，右键点击后保存 Save as a Global，保存成 Global Widget 通用小部件。

导航到 Template Library 模板库，复制刚创建的全局小部件简码，进入页面的选项卡小部件内部并选择+ 添加项目按钮以添加新选项卡。在容器的文本区域中，粘贴刚复制的简码。点击下面的更新或发布。在网站前端预览看效果如何，不满意就继续改进。

如果以上选项卡功能无法满足你的需要，还有另外8款 Elementor选项卡插件的高级功能可能适合你。